The document discusses principles of effective visual communication for graphical user interface design. It covers using techniques like typography, color, layout and imagery to convey information clearly. The three main principles outlined are to organize information in a clear structure, communicate visually in a way that matches users' capabilities, and use design elements economically without extra clutter. Color should be used intentionally to group related items and emphasize important information, following principles of organization, emphasis and communication. Consistency in conventions across aspects of the interface help users navigate effectively.

1. Effective Visual
Communication for
Graphical User
Interface
Multimedia Design

2. Instructional Goals
• Understand basic principle of visual
communication for Graphical User
Interface Design
• Apply those principle in designing
effective Graphic User Interface

3. 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.

4. 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.

5. 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.

6. Principles of User Interface Design
Organize
Consistency, screen layout, relationships and navigability are important
concepts of organization.
Example: Chaotic Screen Example: Ordered Screen

7. 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.
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.

8. External consistency, the second point, says the existing platforms and cultural
conventions should be followed across user interfaces.
Example: External Consistency for Text Tool Icons
Same kinds of elements are shown in the same places.
These icon come from different desktop publishing application but generally
have the same meaning.

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

10. 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.

11. Screen Layout
Three ways to design display spatial layout: use a grid structure,
standardize the screen layout, and group related elements
A grid structure can help locate menues, dialogue boxes or control
panels. Generally 7 +/-2 is the maximum number of major horizontal or
vertical divisions. This will help make the screen less cluttered and easier
to understand.

12. Relationship
Linking related items and disassociating unrelated items can help achieve visual
organization.
Example: Relationship
Left: Shape, location, and value can all create strong visual relatinship which
may be inappropriate
Right: Clear, consistent, appropriate, strong relationship

13. 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.
Example: Navigation
Left: Poor Design
Right: Improved design; spatial layout and color help focus viewer’s
attention to most title Bulleted items guide the viewer through the
secondary contents.

14. 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.
Example: Complicated and simpler designs

15. Clarity
All components should be designed so their meaning is not ambiguous.
Example: Ambiguous and clear icons

16. 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.

17. Communicate
The GUI must keep in balance legibility, readability, typography, symbolism,
multiple views, and color or texture in order to communicate successfully.
Example: Illegible and legible texts

18. Readability
display must be easy to identify and interpret, should also be
appealing and attractive.

19. 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.
Example: Recommended typefaces and typestyles

20. 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.
Example:Verbal and visual multiple views

21. 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.
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.

22. Color Design Principles
The three basic principles can also be applied to color: color organization, color
economy, and color communication.
Color Organization
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.
Similar colors should infer a similarity among objects. One needs to be complete
and consistent when grouping objects by the same color. Once a color coding
scheme has been established, the same colors should be used throughout the
GUI and all related publications.

23. Color Economy
Color economy, suggests using a maximum of 5+/-2 colors where the
meaning must be remembered. The fundamental idea is to use color to
augment black-and-white information, i.e. design the display to first
work well in black-and-white.
Color emphasis suggests using strong contrasts in value and chroma to
draw the user's attention to the most important information.
Confusion can result if too many figures or background fields compete
for the viewer's attention. The hierarchy of highlighted, neutral, and low-
lighted states for all areas of the visual display must be designed
carefully to provide the maximum simplicity and clarity.

24. Color Communication
Color communication deals with legibility, including using appropriate colors
for the central and peripheral areas of the visual field. Color combinations
influenced least by the relative area of each color should be used.
Red or green should not be used in the periphery of the visual field, but in
the center. If used in the periphery, you need a way to capture the attention
of the viewer, size change or blinking for example.
Blue, black, white, and yellow should be used near the periphery of
the visual field, where the retina remains sensitive to these colors.

25. Use colors that differ in both chroma and value.
Avoid red/green, blue/yellow, green/blue, and red/blue
combinations unless a special visual effect is needed. They can create
vibrations, illusions of shadows, and afterimages.
For dark viewing situations, light text, then lines, and small shapes on
medium to dark backgrounds should be used in slide presentations,
workstations and videos.
For light-viewing situations, use dark (blue or black) text, thin lines and small
shapes on light background. These viewing situations include overhead
transparencies and paper.

26. Color Symbolism
The importance of color is to communicate.
Therefore color codes should respect existing cultural and professional usage.
Color connotations should be used with great care.
For example: mailboxes are blue in the United States, bright red in England and
bright yellow in Greece. If using color in an electronic mail icon on the screen,
color sets might be changed for different countries to reflect the differences in
international markets.

27. Reference:
http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html