Effective Visual Communication for Graphical User Interfaces

by Suzanne Martin

The use of typography, symbols, color, and other static and dynamic graphics are used to convey facts, concepts and emotions. This makes up an information-oriented, systematic graphic design which helps people understand complex information. Successful visual communication through information-oriented, systematic graphic design relies on some key principles of graphic design.

Design Considerations

There are three factors that should be considered for the design of a successful user interface; development factors, visability factors and acceptance factors.

Development factors help by improving visual communication. These include: platform constraints, tool kits and component libraries, support for rapid prototyping, and customizability.

Visability factors take into account human factors and express a strong visual identity. These include: human abilities, product identity, clear conceptual model, and multiple representations.

Included as acceptance factors are an installed base, corporate politics, international markets, and documentation and training.

Visible Language

Visible language refers to all of the graphical techniques used to communicate the message or context. These include:

  • Layout: formats, proportions, and grids; 2-D and 3-D organization
  • Typography: selection of typefaces and typesetting, including variable width and fixed width
  • Color and Texture: color, texture and light that convey complex information and pictoral reality
  • Imagery: signs, icons and symbols, from the photographically real to the abstract
  • Animation: a dynamic or kinetic display; very important for video-related imagery
  • Sequencing: the overall approach to visual storytelling
  • Sound: abstract, vocal, concrete, or musical cues
  • Visual identity: the additional, unique rules that lend overall consistency to a user interface. The overall decisions as to how the corporation or the product line expresses itself in visible language.

Principles of User Interface Design

There are three fundamental principles involved in the use of the visible language.

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

Organize

Consistency, screen layout, relationships and navigability are important concepts of organization.

 chaotic          ordered relat_r rwconst t_face
     Example: Chaotic Screen                  Example: Ordered Screen



Consistency

There are four views of consistency: internal consistency, external consistency, real-world consistency, and when not to be consistent.

The first point, internal consistency states the same conventions and rules should be applied to all elements of the GUI.

     intconst

Example Internal Consistency – Dialogue Boxes
Same kinds of elements are shown in the same places. Those with different kinds of behavior have their own special appearance.

External consistency, the second point, says the existing platforms and cultural conventions should be followed across user interfaces.

          extconst

Example External Consistency for Text Tool Icons
These icons come from different desktop publishing applications but generally have the same meaning.

Real-world consistency means conventions should be made consistent with real-world experiences, observations and perceptions of the user.

        rwconst

Example Real-World Consistency
The last point, 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.

Screen Layout

Three ways to design display spatial layout: use a grid structure, standardize the screen layout, and group related elements.

011 example3-screenshot-9cols stock-vector-wireframe-mobile-app-ui-kit-mobile-grid-screens-collection-main-screen-grid-x-grid-224648290

Example Grid Structures for Different Devices

A grid structure can help locate menues, dialogue boxes or control panels. This will help make the screen less cluttered and easier to understand.

Relationships

Linking related items and disassociating unrelated items can help achieve visual organization.

relat_l relat_r

Example Relationships
Left: Shape, location, and value can all create strong visual relationships which may be inappropriate.
Right: Clear, consistent, appropriate, and strong relationships.

Navigability

There are three important navigation techniques: – provide an initial focus for the viewer’s attention – direct attention to important, secondary, or peripheral items – assist in navigation throughout the material.

navig_l navig_r

Example Navigation
LEFT: Poor design.
RIGHT: Improved design; spatial layout and color help focus viewer’s attention to most important titlebar areas. Bulleted items guide the viewer through the secondary contents.

Economize

Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis.

Simplicity

Simplicity includes only the elements that are most important for communication. It should also be as unobstrusive as possible.

comsimp
Example: Complicated and Simpler Designs

Clarity

All components should be designed so their meaning is not ambiguous.

    
clarity        
Example: Ambiguous and Clear Icons

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 legibility, readability, typography, symbolism, multiple views, and color (and/or texture) in order to communicate successfully.

         il_leg
         Example: Illegible and Legible Texts

Readability

Display must be easy to identify and interpret, should also be appealing and attractive.

  Example: Unreadable and Readable Texts:

           Unreadable: 
                Design components to be
          easy to interpret and understand.  Design
                 components to be inviting
                     and attractive.

Readable
Design components to be easy to
interpret and understand.
Design components to be inviting
and attractive.

Typography

Includes characteristics of individual elements (typefaces and typestyles) and their groupings (typesetting techniques). A small number of typefaces which must be legible, clear, and distinctive (i.e., distinguish between different classes of information) should be used. Recommendations: – maximum of 3 typefaces in a maximum of 3 point sizes – a maximum of 40-60 characters per line of text – set text flush left and numbers flush right. Avoid centered text in lists and short justified lines of text – use upper and lower case characters whenever possible.

                  lucida-helvetica-2@2x gill-sans@2x roboto-clarendon@2x

Example: Recommended typefaces and typestyles

Multiple Views

Provide multiple perspectives on the display of complex structures and processes. Make use of these multiple views: – multiple forms of representation – multiple levels of abstraction – simultaneous alternative views – links and cross references – metadata, metatext, metagraphics.

multiple 
Example: Verbal and Visual Multiple Views

Color

Color is one of the most complex elements in achieving successful visual communication. Used correctly, it can be a powerful tool for communication. Colors should be combined so they make visual sense.

Some advantages for using color to help communication: – emphasize important information – identify subsystems of structures – portray natural objects in a realistic manner – portray time and progress – reduce errors of interpretation – add coding dimensions – increase comprehensibility – increase believability and appeal

When color is used correctly, people will often learn more. Memory for color information seems to be much better than information presented in black-and-white.

color-scheme-designer_lswmfe

There are some disadvantages for using color: – requires more expensive and complicated display equipment – many not accommodate color-deficient vision – some colors can potentially cause visual discomfort and afterimages. – may contribute to visual or may lead to negative associations through cross-disciplinary and cross-cultural association.

References

Marcus, A. SIGGRAPH 93 tutorial notes: Graphic Design for User Interfaces. August 1993.

matt@owl.WPI.EDU