Effective Visual Communication

Sinoj Mullangath

Communication
Communication conveys facts, concepts and emotions To convey something, one requires a language and a medium A language requires letters, words, sentences and rules of usage (=grammar)

Visual Media
Print
Articles, Brochure, Manuals, Fine Arts

Motion
Films, Animations, Performances

Interactive
Websites, Online Help, CBTs, CD-ROM

Visible Language
Layout Typography Color Texture Imagery Identity Sequencing Animation Sound

Arts versus Design

Arts is a form of expression Design is a form of communication

Communication & Design

Design* is creating an interface that communicates the objective appropriately and clearly in that medium
Medium Objective Appropriateness Clarity

* In this context

Interface Design Principles

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

Organize
Consistency
Internal: same types of elements are shown in the same places External: existing platforms and cultural conventions should be followed across user interfaces Real world: consistent with real-world experiences, observations and perceptions of the user Innovation: deviating from existing conventions, if it provides a clear benefit to the user

Organize
Screen Layout
Use a grid structure Define spaces Spread vs. Page Design Standardize the structure Easy to locate menus or dialogue boxes Group related elements

Organize
Navigation
provide an initial focus for the viewer's attention direct attention to primary, secondary, and peripheral items assist in navigation through the material simple learning curve

Economize
Four major points to be considered
Simplicity: include only the elements that are most important for communication Clarity: meaning of the components are not ambiguous Distinctiveness: important properties of the elements are distinct Emphasis: important elements are easily perceived

Communicate
To communicate successfully, the interface must keep in balance:
Legibility Readability Symbolism Multiple views Typography Color

Legibility & Readability

Easily noticeable and distinguishable elements
Legible Typefaces Desktop Icons Control Panel Symbols Background Colors Usage Environment

Comprehensible display
Easy to identify and interpret Inviting and attractive

Symbolism
To communicate the content efficiently, carefully select and refine
Icons Symbols Charts Maps Diagrams Photographs

Typography
Typefaces
Legible, clear and distinctive type faces to distinguish between different classes of information (max 3 faces)

Typestyles
Point size, italics, boldness, underline, color (max 3 styles)

Typesetting
40-60 char per line, flush left, avoid centering or justified or all caps text in a line, proper word spacing, paragraph indentation, and line spacing

Typography
Composition
spacial unit + contrast

Weightage
chroma + lightness + thickness

Direction
height + positioning + style

Character
tight/space + type-dimension

Color (Plus)
Emphasize important information Identify subsystems of structures Portray objects in realistic manner Depict time and progress Reduce errors of interpretation Add coding dimensions Increase comprehensibility Increase believability and appeal

Color (Minus)
Complex mechanisms
Display Reproduction

Cross-platform issues Color-deficient vision Possible disturbing properties

Visual discomfort Afterimages

Cross-culture issues

Color
Psychology
Individual character
Red = Hot, Vibrant, Passionate Blue = Cool, Dependable, Depth Yellow = Youth, Energy, Warmth White = Serene, Calm, Clean Purple = Rich, Royal, Classy

Color
Color wheel Color groups
Warm colors Welcoming Too much = Stuffy Cool colors Composed Too much = Cold

Color
Color groups
Complementary or Contrasting

Analogous or Harmonious

Monotone, Monochromatic, Dominance

Color
Organization
consistency of organization group related items infer a similarity among objects complete and consistent grouping objects color coding scheme

Economy Communication Symbolism

Color
Economy
design the display to first work well in black-and-white to remember the meaning of usage of colors (5+/-2) color emphasis to draw the user's attention hierarchy of highlighted, neutral, and dark areas of display maximum simplicity and clarity

Color
Communication
appropriate colors for the central and peripheral areas color area vs. weightage difference in chroma and value environment & background

Symbolism
existing cultural and professional usage connotations in cultures

Print vs Online
Space/ Gravity: Defined vs. Open Composition: Planned vs. Changing Volume: Pages vs. Scroll Structure: Sequential vs. Random User: Participate vs. Anticipate Character: Static vs. Dynamic Usage: confine vs. Freedom Communication: One-way vs. Two-way

Print OR Online
Visual form consists of
Primary element(s) Secondary element(s) Peripherals Grid White spaces Blind spots Fillers

God is in the details

sinojm@yahoo.com