Effective VisualCommunication forGraphical User Interface Multimedia Design
Instructional Goals• Understand basic principle of visual communication for Graphical User Interface Design• Apply those principle in designing eﬀective Graphic User Interface
The use of typography, symbols, color, and other static and dynamicgraphics are used to convey facts, concepts and emotions.This makes up an information-oriented, systematic graphic design which helps peopleunderstand complex information. Successful visual communication through information-oriented, systematic graphic design relies on some key principles of graphic design.
Visible LanguageVisible language refers to all of the graphical techniques used to communicatethe 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 DesignThere are three fundamental principles involved in the use of the visiblelanguage. • 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.
Principles of User Interface Design Organize Consistency, screen layout, relationships and navigability are important concepts of organization. Example: Chaotic Screen Example: Ordered Screen
ConsistencyThere 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 rulesshould be applied to all elements of the GUI.Example: Internal Consistency - Dialogue BoxesSame kinds of elements are shown in the same places.Those with diﬀerent kinds of behavior have their own special appearance.
External consistency, the second point, says the existing platforms and culturalconventions should be followed across user interfaces.Example: External Consistency for Text Tool IconsSame kinds of elements are shown in the same places.These icon come from diﬀerent desktop publishing application but generallyhave the same meaning.
Real-world consistency means conventions should be made consistentwith real-world experiences, observations and perceptions of the user.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 aclear benefit to the user.
Screen LayoutThree ways to design display spatial layout: use a grid structure,standardize the screen layout, and group related elementsA grid structure can help locate menues, dialogue boxes or controlpanels. Generally 7 +/-2 is the maximum number of major horizontal orvertical divisions. This will help make the screen less cluttered and easierto understand.
RelationshipLinking related items and disassociating unrelated items can help achieve visualorganization.Example: RelationshipLeft: Shape, location, and value can all create strong visual relatinship whichmay be inappropriateRight: Clear, consistent, appropriate, strong relationship
NavigabilityThere are three important navigation techniques: - provide an initial focus forthe viewers attention - direct attention to important, secondary, or peripheralitems - assist in navigation throughout the material.Example: NavigationLeft: Poor DesignRight: Improved design; spatial layout and color help focus viewer’sattention to most title Bulleted items guide the viewer through thesecondary contents.
EconomizeFour major points to be considered: simplicity, clarity, distinctiveness, andemphasis. 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
ClarityAll components should be designed so their meaning is not ambiguous.Example: Ambiguous and clear icons
DistinctivenessThe important properties of the necessary elements should bedistinguishable.EmphasisThe most important elements should be easily perceived. Non-criticalelements should be de-emphasized and clutter should be minimizedso as not to hide critical information.
CommunicateThe 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
Readabilitydisplay must be easy to identify and interpret, should also beappealing and attractive.
TypographyIncludes: characteristics of individual elements (typefaces and typestyles) andtheir groupings (typesetting techniques). A small number of typefaces whichmust be legible, clear, and distinctive (i.e., distinguish between diﬀerentclasses 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
Multiple ViewsProvide multiple perspectives on the display of complex structures andprocesses. Make use of these multiple views: - multiple forms of representation- multiple levels of abstraction - simultaneous alternative views - links andcross references - metadata, metatext, metagraphics.Example:Verbal and visual multiple views
ColorColor is one of the most complex elements in achieving successful visualcommunication. 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 - increasecomprehensibility - increase believability and appealWhen color is used correctly, people will often learn more. Memory for colorinformation 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 notaccommodate color-deficient vision - some colors can potentially cause visualdiscomfort and afterimages. - may contribute to visual or may lead to negativeassociations through cross-disciplinary and cross-cultural association.
Color Design PrinciplesThe three basic principles can also be applied to color: color organization, coloreconomy, 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.
Color EconomyColor economy, suggests using a maximum of 5+/-2 colors where themeaning must be remembered. The fundamental idea is to use color toaugment black-and-white information, i.e. design the display to firstwork well in black-and-white.Color emphasis suggests using strong contrasts in value and chroma todraw the users attention to the most important information.Confusion can result if too many figures or background fields competefor the viewers attention. The hierarchy of highlighted, neutral, and low-lighted states for all areas of the visual display must be designedcarefully to provide the maximum simplicity and clarity.
Color CommunicationColor communication deals with legibility, including using appropriate colorsfor the central and peripheral areas of the visual field. Color combinationsinfluenced 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 inthe center. If used in the periphery, you need a way to capture the attentionof the viewer, size change or blinking for example.Blue, black, white, and yellow should be used near the periphery ofthe visual field, where the retina remains sensitive to these colors.
Use colors that diﬀer in both chroma and value.Avoid red/green, blue/yellow, green/blue, and red/bluecombinations unless a special visual eﬀect is needed. They can createvibrations, illusions of shadows, and afterimages.For dark viewing situations, light text, then lines, and small shapes onmedium 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 smallshapes on light background. These viewing situations include overheadtransparencies and paper.
Color SymbolismThe 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 andbright yellow in Greece. If using color in an electronic mail icon on the screen,color sets might be changed for diﬀerent countries to reflect the diﬀerences ininternational markets.