3.4: Generating Designs

• Interface elements include but are not limited to:

  • Input Controls
  • Navigational Components
  • Informational Components
  • Containers
• Best Practices for Designing an Interface:

  • Keep the interface simple.
  • Create consistency and use common UI elements.
  • Be purposeful in page layout.
  • Strategically use color & texture.
  • Use typography to create hierarchy and clarity.
  • Make sure that the system communicates what's happening.
  • Think about the defaults.
• The best interfaces are almost invisible to the user.
• Be purposeful in page layout:

  • consider the spatial relationships between items on the page & structure it based on importance
• Three factors that should be considered for the design of a successful user interface:

  • development factors
  • visibility factors
  • acceptance factors
• Development factors help by improving visual communication, which includes:

  • platform constraints
  • tool kits & component libraries
  • support for rapid prototyping
  • customizability
• Visibility factors take into account human factors & express a strong visual identity:

  • human abilities
  • product identity
  • clear conceptual model
  • multiple representations
• Included as acceptance factors are:

  • installed base
  • corporate politics
  • international markets
  • documentation & training
• Visible Language:

  • refers to all of the graphical techniques used to communicate the message or context
• Visible Language:

  • Layout
  • Typography
  • Color & Texture
  • Imagery
  • Animation
  • Sequencing
  • Sound
  • Visual identity
• Principles of User Interface Design:

  • Organize: provide the user with a clear & consistent conceptual structure
  • Economize: do the most with the least amount of cues
  • Communicate: match the presentation to the capabilities of the user
• Four Views of Consistency:

  • internal consistency
  • external consistency
  • real-world consistency
  • when not to be consistent / innovation
• Internal consistency:

  • states that the same conventions and rules should be applied to all elements of the GUI
• External consistency:

  • says that the existing platforms & cultural conventions should be followed across user interfaces
• Real-world Consistency:

  • mean that conventions should be made consistent with real-world experiences, observations & perceptions of the user
• Innovation:

  • deals with when not to be consistent
  • deviating from existing conventions should only be done if it provides a clear benefit to the user
• Three ways to design display spatial layout:

  • Use a grid structure
  • Standardize the screen layout
  • Group related elements
• A grid structure can help locate menus, dialogue boxes or control panels.
• Generally, 7 +/- 2 is the maximum number of major horizontal or vertical divisions.
• Relationships:

  • linking related items and disassociating unrelated items in order to achieve visual organization
• Three important navigation techniques:

  1. Provide an initial focus for the viewer's attention
  2. Direct attention to important, secondary, or peripheral items
  3. Assist in navigation throughout the material
• Four major points to consider in Economizing:

  • simplicity
  • clarity
  • distinctiveness
  • emphasis
• Simplicity:

  • includes only the elements that are important for communication; should also be as unobtrusive as possible
• Clarity:

  • all components should be designed so their meaning is not ambiguous
• Distinctiveness:

  • the important properties of the necessary elements should be distinguishable
• Emphasis:

  • the most important elements should be easily perceived; non-critical elements should be de-emphasized and clutter should be minimized so as not to hide critical information
• Communicate:

  • the GUI must keep in balance:

  1. legibility
  2. readability
  3. typography
  4. symbolism
  5. multiple views
  6. color or texture

  in order to communicate successfully.
• Readability / Legibility:

  • display must be easy to identify and interpret; should also be appealing & attractive
• Typography:

  • includes characteristics of individual elements (typefaces & typestyles) and their groupings (typesetting techniques)
• Recommendations for typography:

  • maximum of 3 typefaces in a maximum of 3 point sizes
  • maximum of 40-60 characters per line of text
  • set text flush left & numbers flush right; avoid centered text in lists & short justified lines of text
  • user upper & lower case characters when possible
• Multiple Views:

  • provide multiple perspectives on the display of complex structures
• Make use of these multiple views:

  • multiple forms of representation
  • multiple levels of abstraction
  • simultaneous alternative views
  • links and cross references
  • metadata, metatext, metagraphics
• Color:

  • one of the most complex elements in achieving successful visual communication; used correctly, can be a powerful tool in communication
• When color is used correctly, people will learn more.

  Memory for color information seems to be much better than info presented in black-and-white.
• Advantages of Using Color:

  • emphasize important information
  • identify subsystems of structures
  • portray natural objects in a realistic manner
  • portray time & progress
  • reduce errors of interpretation
  • add coding dimensions
  • increase comprehensibility
  • increase believability & appeal
• Disadvantages of Using Color:

  • requires more expensive & complicated display equipment
  • may not accommodate color-deficient vision
  • can potentially cause visual discomfort and afterimages
  • may lead to negative associations through cross-disciplinary & cross-cultural association
• Color Design Principles:

  • Color Organization
  • Color Economy
  • Color Communication
• The importance of color is to communicate.
• Color organization:

  • pertains to consistency of organization
  • color should be used to group related items
• A consistent color code should be applied to screen displays, documentation, and training materials.