Professional Documents
Culture Documents
HIERARCHY
LUKE WROBLEWSKI
AN EVENT APART, BOSTON 2008
Luke Wroblewski
Yahoo! Inc.
• Senior Principal, Product Ideation & Design
LukeW Interface Designs
• Principal & Founder
• Product design & strategy services
Author
• Web Form Design: Filling in the Blanks
(Rosenfeld Media)
• Functioning Form: Web applications, product
strategy, & interface design articles
• Site-Seeing: A Visual Approach to Web Usability
(Wiley & Sons)
Previously
• eBay Inc., Lead Designer
• University of Illinois, Instructor
• NCSA, Senior Designer
http://www.lukew.com
1
WHY DOES VISUAL
HIERARCHY MATTER?
HOW DO WE CONSTRUCT A
OVERVIEW VISUAL HIERARCHY?
PUT IT TO USE:
COMMUNICATE MESSAGES,
ILLUMINATE ACTIONS, &
ORGANIZE INFORMATION
-Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability
2
Squidoo Eye-tracking study (by etre) 5
Design Considerations
3
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
11
12
6
13
14
7
What is this?
15
Communicate function
16
8
Before Visual Hierarchy
17
18
9
19
20
10
HOW DO WE
CONSTRUCT A VISUAL
HIERARCHY?
21
How We See
• Between individual
elements
• To the whole (story)
22
11
Understanding Perception
23
Forming Relationships
24
12
Using Relationships
25
Visual Hierarchy
26
13
Hierarchy Applied
• Building an effective
hierarchy
• Involves use of visual
relationships to add more or
less visual weight to
elements
27
28
14
Effective Hierarchy
29
No Clear Hierarchy
30
15
No Clear Hierarchy
31
No Hierarchy
32
16
Effective Hierarchy
33
Effective Hierarchy
34
17
Effective Hierarchy
35
To Summarize
36
18
37
38
19
COMMUNICATING A WHAT IS THIS?
CENTRAL MESSAGE
EXPLAIN &
DIFFERENTIATE
39
Web Applications
• Hosting costs are extremely affordable
• Free open source platforms
• Development toolkits increasingly available
• Instant global audience: 1.4B people use the
Internet (March 2008)
40
20
Not enough hierarchy
41
42
21
Not enough contrast
43
Central Message
44
22
45
46
23
Meeting Expectations
47
Accessing Content
• Content Aggregators: Digg, Delicious, etc.
48
24
Accessing Content
• Display Surfaces: Facebook, MySpace, etc.
49
Accessing Content
• Content Creation Sites: Blogs, Wikis
50
25
Accessing Content
• Search
• Communication: Email, Instant Messenger, etc.
51
52
26
Context
Related
Content
53
24% CONTENT
76% SITE OVERHEAD
54
27
55
WHAT DO I DO NOW?
TAKE ACTION
USER NEEDS &
BUSINESS GOALS
56
28
Form Messaging
57
58
29
Email call to action
59
Take action?
60
30
Take action: download
61
62
31
Take action
63
Take action
64
32
Clear path to completion
65
66
33
Limited hierarchy
67
Clear hierarchy
68
34
A Simple Table
69
• “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
70
35
After Visual Communication?
71
Comparison
72
36
Focus on the data?
73
74
37
To Summarize
75
• Functioning Form
• www.lukew.com/ff/
• Site-Seeing: A Visual
Approach to Web Usability
• Wiley & Sons
• Web Form Design: Filling in
the Blanks
• Rosenfeld Media
• Drop me a note
• luke@lukew.com
76
38