COMMUNICATING WITH

VISUAL HIERARCHY
LUKE WROBLEWSKI
WRITERS UA CONFERENCE, MARCH 2008

Luke Wroblewski
Yahoo! Inc.
•
Senior Principal, Product Ideation & Design
LukeW Interface Designs
•
Principal & Founder
•
Product design & strategy services
Author
•
Site-Seeing: A Visual Approach to Web Usability
(Wiley & Sons)
•
Form Design Best Practices (Rosenfeld Media) -
Upcoming
•
Functioning Form: Web applications, product
strategy, & interface design articles
Previously
•
eBay Inc., Lead Designer
•
University of Illinois, Instructor
•
NCSA, Senior Designer
http://www.lukew.com

1

Outline

•
Why does visual hierarchy matter?

•
How do we construct a visual hierarchy?
•
How do we use visual hierarchy to:
•
Communicate messages
•
Illuminate actions
•
Organize information

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

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

2

 Squidoo Eye-tracking study (by etre) 5

Design Considerations

Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability

•
Presentation: How your application appears to your audience

•
Interaction: How your application behaves in response to user actions
•
Organization: The structure of your application

3

Presentation

•
All interactions occur through the presentation

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

What Makes a Great Presentation?

•
Visual Organization
•
Communicates the
relationships between
user interface elements
•
Enables Interaction
Design
•
Information Design
•
Personality
•
Communicates the brand
essence of a product
•
Visceral design
•
Color, font, image,
pattern selection

4

The End Goal

•
Quickly Communicate
•
What is this? Usefulness
•
How do I use it? Usability
•
Why should I care? Desirability

10

5

BEFORE & AFTER

11

What is this?

12

6

Communicate function

13

Before Visual Hierarchy

14

7

After Visual Hierarchy

15

16

8

Before & After Visual Hierarchy

AQ Design, Japan
17

PRINCIPLES OF VISUAL
HIERARCHY

PHOTO BY MATTEO PENZO

18

9

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 Flickr: Uploaded on August 19, 2006 by Tom-Tom

•
Between individual
elements
•
To the whole (story)

19

Understanding Perception

Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability

•
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

20

10

 Forming Relationships

Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability

•
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

21

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…

Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability

22

11

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.

23

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

24

12

 Building Effective Hierarchies

•
Distribution of visual weight

•
Visually dominant images get noticed most
•
Focal point, center of interest
•
Distinct visual weight guides you through narrative
•
Essential to keep it balanced
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability

25

Effective Hierarchy

26

13

No Clear Hierarchy

27

No Clear Hierarchy

28

14

No Hierarchy

29

Effective Hierarchy

30

15

Effective Hierarchy

31

Effective Hierarchy

32

16

To Summarize

•
Visual Communication is part

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

33

34

17

 NOW WE KNOW HOW
TO CONSTRUCT A
WHAT’S THE VISUAL HIERARCHY
PRIORITY? BUT WHAT DO WE DO
WITH IT?

35

COMMUNICATING A WHAT IS THIS?

CENTRAL MESSAGE
EXPLAIN &
DIFFERENTIATE

36

18

 Web Applications
•
Hosting costs less than cup of coffee per
month
•
Free open source platforms
•
Development toolkits increasingly available
•
Instant global audience: 1.2B people use the
Internet (Sept 2007)

37

Not enough hierarchy

38

19

Too many visual differences

39

Not enough contrast

40

20

Central Message

41

42

21

 43

Meeting Expectations

•
Prioritization becomes especially

important when you consider how people
access content
•
Content Aggregators
•
Display Surfaces
•
Content Creation Sites
•
Search
•
Communication Tools
•
More…

44

22

Accessing Content
•
Content Aggregators: Digg, Delicious, etc.

45

Accessing Content
•
Display Surfaces: Facebook, MySpace, etc.

46

23

Accessing Content
•
Content Creation Sites: Blogs, Wikis

47

Accessing Content
•
Search
•
Communication: Email, Instant Messenger, etc.

48

24

 49

Context

Related

Content

50

25

24% CONTENT
76% SITE OVERHEAD

51

52

26

Scanning Part 1

53

Scanning Part 2

54

27

 WHAT DO I DO NOW?
TAKE ACTION
USER NEEDS &
BUSINESS GOALS

55

Form Messaging

56

28

Form Messaging

57

Email call to action

58

29

Email call to action

59

Take action?

60

30

Take action: download

61

Take action

62

31

Take action

63

Clear path to completion

64

32

One primary action

65

One primary & one secondary action

66

33

One primary & one secondary action

67

Two primary actions

68

34

 WHAT CAN I FIND
ORGANIZE HERE?
INFORMATION
PRESENT DATA

69

Before Visual Communication

70

35

After Visual Communication?

71

Limited hierarchy

72

36

Clear hierarchy

73

A Simple Table

74

37

After Visual Communication?

•
“I think I found an even better solution to simplify this part of user

interface.” -One Creative Director’s Journal

•
“This way I think users will need even less time to see all the information
presented in the table especially frequent users. For new users or users in
doubt once they rollover the number for which they don’t know the meaning,
they will see a description.”

http://andreysmagin.com/blog/redesigning-a-simple-table

75

After Visual Communication?

•
Is there a prioritization of the

data
•
Is everything equally
important?
•
Introducing size and color
variations might add visual
noise instead of bringing
extra attention to really
important data

76

38

Comparison

77

Focus on the data?

78

39

Focus on the data?

79

To Summarize

•
Visual Communication is part

•
Visual Organization and part personality.
•
Visual Hierarchy is a deliberate prioritization of
•
Visual Weight enabled by the manipulation of
•
Visual Relationships to create
•
Meaning for users.
•
Communicate messages
•
Illuminate actions
•
Organize information

80

40

For more information…

•
Functioning Form
•
www.lukew.com/ff/
•
Web Form Design: Filling
in the Blanks
•
15% OFF!
•
Site-Seeing: A Visual
Approach to Web Usability
•
Wiley & Sons
•
Drop me a note
•
[email protected]

81

41