communicating with visual hierarchystatic.lukew.com/pageheirarchy_lukew_03192008.pdf · visual...
TRANSCRIPT
![Page 1: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/1.jpg)
1
1
COMMUNICATING WITH VISUAL HIERARCHY
LUKE WROBLEWSKI WRITERS UA CONFERENCE, MARCH 2008
2
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
![Page 2: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/2.jpg)
2
3
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
4
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
![Page 3: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/3.jpg)
3
5 Squidoo Eye-tracking study (by etre)
6
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
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
![Page 4: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/4.jpg)
4
7
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
8
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
![Page 5: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/5.jpg)
5
9
The End Goal
• Quickly Communicate • What is this? Usefulness
• How do I use it? Usability
• Why should I care? Desirability
10
![Page 6: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/6.jpg)
6
11
BEFORE & AFTER
12
What is this?
![Page 7: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/7.jpg)
7
13
Communicate function
14
Before Visual Hierarchy
![Page 8: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/8.jpg)
8
15
After Visual Hierarchy
16
![Page 9: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/9.jpg)
9
17
Before & After Visual Hierarchy
AQ
Desig
n,
Jap
an
18
PRINCIPLES OF VISUAL HIERARCHY
PHOTO BY MATTEO PENZO
![Page 10: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/10.jpg)
10
19
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)
Flickr: Uploaded on August 19, 2006 by Tom-Tom
20
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
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
![Page 11: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/11.jpg)
11
21
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
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
22
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
![Page 12: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/12.jpg)
12
23
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.
24
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
![Page 13: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/13.jpg)
13
25
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
26
Effective Hierarchy
![Page 14: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/14.jpg)
14
27
No Clear Hierarchy
28
No Clear Hierarchy
![Page 15: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/15.jpg)
15
29
No Hierarchy
30
Effective Hierarchy
![Page 16: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/16.jpg)
16
31
Effective Hierarchy
32
Effective Hierarchy
![Page 17: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/17.jpg)
17
33
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.
34
![Page 18: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/18.jpg)
18
35
WHAT’S THE PRIORITY?
NOW WE KNOW HOW TO CONSTRUCT A VISUAL HIERARCHY
BUT WHAT DO WE DO WITH IT?
36
COMMUNICATING A CENTRAL MESSAGE
WHAT IS THIS?
EXPLAIN & DIFFERENTIATE
![Page 19: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/19.jpg)
19
37
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)
38
Not enough hierarchy
![Page 20: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/20.jpg)
20
39
Too many visual differences
40
Not enough contrast
![Page 21: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/21.jpg)
21
41
Central Message
42
![Page 22: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/22.jpg)
22
43
44
Meeting Expectations
• Prioritization becomes especially important when you consider how people access content • Content Aggregators
• Display Surfaces
• Content Creation Sites
• Search
• Communication Tools
• More…
![Page 23: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/23.jpg)
23
45
Accessing Content • Content Aggregators: Digg, Delicious, etc.
46
Accessing Content • Display Surfaces: Facebook, MySpace, etc.
![Page 24: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/24.jpg)
24
47
Accessing Content • Content Creation Sites: Blogs, Wikis
48
Accessing Content • Search
• Communication: Email, Instant Messenger, etc.
![Page 25: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/25.jpg)
25
49
50
Content
Context
Related
![Page 26: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/26.jpg)
26
51
24% CONTENT 76% SITE OVERHEAD
52
![Page 27: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/27.jpg)
27
53
Scanning Part 1
54
Scanning Part 2
![Page 28: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/28.jpg)
28
55
TAKE ACTION WHAT DO I DO NOW?
USER NEEDS & BUSINESS GOALS
56
Form Messaging
![Page 29: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/29.jpg)
29
57
Form Messaging
58
Email call to action
![Page 30: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/30.jpg)
30
59
Email call to action
60
Take action?
![Page 31: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/31.jpg)
31
61
Take action: download
62
Take action
![Page 32: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/32.jpg)
32
63
Take action
64
Clear path to completion
![Page 33: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/33.jpg)
33
65
One primary action
66
One primary & one secondary action
![Page 34: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/34.jpg)
34
67
One primary & one secondary action
68
Two primary actions
![Page 35: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/35.jpg)
35
69
ORGANIZE INFORMATION
WHAT CAN I FIND HERE?
PRESENT DATA
70
Before Visual Communication
![Page 36: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/36.jpg)
36
71
After Visual Communication?
72
Limited hierarchy
![Page 37: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/37.jpg)
37
73
Clear hierarchy
74
A Simple Table
![Page 38: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/38.jpg)
38
75
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
76
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
![Page 39: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/39.jpg)
39
77
Comparison
78
Focus on the data?
![Page 40: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/40.jpg)
40
79
Focus on the data?
80
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
![Page 41: COMMUNICATING WITH VISUAL HIERARCHYstatic.lukew.com/pageheirarchy_lukew_03192008.pdf · Visual Hierarchy • Creates a center of interest that attracts the viewer’s attention •](https://reader034.vdocuments.net/reader034/viewer/2022042406/5f20085015d0ce4d4877a362/html5/thumbnails/41.jpg)
41
81
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]