Applying Visual Communication Principles

to Web Application Design

Luke Wroblewski, Interface Designer

LukeW Interface Designs [www.lukew.com]

Overview

• Visual Communication
• Visual Organization Principles
• Putting it To Use
• Personality (Look and Feel)

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Visual Communication

• What communicates visually

• Anything you can make sense of with your eyes
• Maps, posters, books, etc.
• Combinations of visual elements form a language
• Visual Organization
• Look & Feel (personality)
• Web is a communication medium
• Does lots of “talking” visually
• Graphic vocabulary (links, buttons, etc.)

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Web Design Considerations

• Presentation
• How your application appears to your audience
• Interaction
• How your application behaves in response to user actions
• Organization
• The structure of your application

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Presentation’s Role

• All interactions occur through the presentation

• Educate users
• Establish relationships between content
• Guide users through actions
• Focus user attention
• Make organizational systems clear
• Provide situational awareness
• Maintain consistency to create a sense of place
• Effectively convey your message to your audience
• Emotional impact
• Engage and invite
• Give sites a unique personality

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Presentation in Action

• How we use the Web

“Look around feverishly for anything that is interesting or vaguely resembles
what you are looking for, and is clickable.”

Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

 Visual Organization Principles
Perception & Grouping
Visual Hierarchy
Putting it to Use

“To design is to communicate clearly by whatever means you can control or

master”—Milton Glaser

LukeW Interface Designs [www.lukew.com]

How We See

• How we make sense of what we see

• Recognizing similarities & differences
• This allows us to group information
• And give it meaning
• Relationships
• Between individual elements
• To the whole (story)

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Understanding Perception

• Several principles tell us how (why) we group visual

information
• Proximity -elements close together are perceived as a group
• Similarities -of shape, size, color can group elements
• Continuance -grouped through basic patterns
• Closure -group elements by space filled between them

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Perception Part 2

• Assimilation
• Visual perception is often influenced by our specific
experiences
• Example: isomorphic correspondence- between a visual form
and human behavior
• Red coils on a stove top = danger

• Understanding perception is not enough

• Knowing how people interpret visual information is a good start
• Helps us organize information into meaningful groups
• But we want to communicate a specific message…

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Forming Relationships

• Creating relationships requires an understanding of what makes

things different
• Introducing variations in one or more of the above categories
creates visual contrast
• Also created through positioning

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Using Relationships

• Use visual relationships to

• Add more or less visual weight to objects
• Difference is created by contrast between objects
• Why do we want to vary the visual weight of objects…

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Visual Hierarchy

• Creates a center of interest that attracts the

viewer’s attention
• Creates a sense of order and balance
• Establishes a pattern of movement to guide a
viewer through a composition
• In other words, it tells a story
• Like all good stories it has a beginning, end, and a
point.

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Hierarchy Applied

• Visual weight guides you through

• Image
• Title
• Date & Location
• Ticket Information

• Building an effective hierarchy

• Involves use of visual relationships
to add more or less visual weight to
elements

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Building Effective Hierarchies

• Distribution of visual weight

• Visually dominant images get noticed most
• Focal point, center of interest
• Distinct visual weight guides you through the narrative
• Essential to keep it balanced

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Effective Hierarchy

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

No Clear Hierarchy

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

To Summarize

• Visual Communication is part

• Visual Organization and part Look & Feel.
• Visual Hierarchy is a deliberate prioritization of
• Visual Weight enabled by the manipulation of
• Visual Relationships to create
• Meaning for users.

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Explain “What”

• Lots of different elements on

each page
• Communicate differences
between elements
• Their relative importance
• Give meaning
• Apply consistently throughout
an application

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Macro-level Visual Organization

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Micro-level Visual Organization

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Micro-level Visual Organization

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Page Hierarchies

• Distinctions on a Web page can be structured by

• Content
• Page title, subsection title, embedded links, supplementary
information
• Navigation
• Location indicator, top-level options, sub-level options, trace
route
• Supportive information
• Site ID, site-wide utilities, footer info

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

For each element

• The visual representation of each element on a

Web page should be
• Appropriate for (indicative of) the element’s function
• Applied consistently throughout the site
• Properly positioned (in a manner reflective of its
relative importance) in the page’s visual hierarchy
• Meaningful (not arbitrary)

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Explaining Where

• A unified graphic language

• Visual contrast within navigation systems
• “You are here” indicators (s.e.d.)
• Indication of structure (size, color, etc.)

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Explaining How

• The visual organization should not be the focus

• Be transparent
• Quietly making your site usable
• Once you understand hierarchy, you can
• Guide users through a sequence
• Suggest distinct choices
• Apply graphic language to new page elements

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

How Do I… ?

• …Go to the next step?

• Visual hierarchy
• Relationships, contrast

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

 Putting it to Use
“The details are not the details. They make the design.”—Charles Eames

LukeW Interface Designs [www.lukew.com]

Aerobahn | Before

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Aerobahn | After

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Verizon | Before

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Verizon | After

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Welligent | Before

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Welligent | After

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

 Personality (Look & Feel)
What is Personality
Personality by Design

“We require from buildings two kinds of goodness: first, the doing their practical
duty well: then that they be graceful and pleasing in doing it.”—John Ruskin, 1880

LukeW Interface Designs [www.lukew.com]

What is Personality

• “The effectiveness with which one can receive positive

reactions.”

• “The reaction of other individuals to a person is what

defines his personality.”

• “[Personality] designates those things about an individual

that are distinctive and set him apart from other persons.”

-Hall and Lindzey, Theories of Personality, 1970

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Look and Feel

• Colors, type treatment, photos, and shapes

• Work together to tell a consistent story
• Create a feeling of sophistication

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Feels Like…

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

…Rugby?

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

The Power of Personality

• A well-designed personality
• Tells the right story
• Audience expectations
• Provides distinction
• Structure, interaction, presentation,
• Appeals to and engages your audience
• Emotional impact
• Unifies your site
• Sense of place, perception

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Creating Personality

• Color
• Color psychology
• Warm colors vs. cool colors
• Contrasting Colors
• Analogous Colors
• Monotone & Monochromatic
• Use single color of varying tints
• Dominance
• Establishes the mood
• Established conventions
• Symbolic meanings
• Type
• Distinct character communicates
visually
• Lots of adjustments (Spacing, style,
etc.)

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Using visual elements

• Images
• Hold your attention (detail)
• Communicate quickly
• Abstract shapes
• Distinct visual characteristics
• Square, circle, triangle, organic
• Textures and patterns
• Provide a tactile sense
• Eyes are drawn to areas of complexity

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

Before | Welligent

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

After | Welligent

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential

For more information…

• Visual Narratives article

• At lukew.com

• Site-Seeing: A Visual Approach to

Web Usability
• Wiley & Sons, 2002

• Drop me a note
• luke@lukew.com

LukeW Interface Designs [www.lukew.com] -Proprietary & Confidential