Your SlideShare is downloading. ×
WEB APPICATION
PAGE HIERARCHY
LUKE WROBLEWSKI
WEB VISIONS 2007




                   1
Luke Wroblewski
       Yahoo! Inc.
          • Senior Principal, Product Ideation & Design
       LukeW Interface Designs
...
Outline

• Why does page hierarchy matter?
• How do we construct a hierarchy?
  • Enable usability
  • Reflect priority
• ...
How We Use the Web
“Look around feverishly for anything that is interesting or vaguely
resembles what you are looking for,...
Squidoo Eye-tracking study (by etre)   5
Design Considerations




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




• Prese...
Presentation
• All interactions occur through the presentation
• Inform users
   • Establish relationships between content...
What Makes a Great Presentation?

• Visual Organization
   • Communicates the
     relationships between user
     interfa...
The End Goal




    • Quickly Communicate
      • What is this? Usefulness
      • How do I use it? Usability
      • Why...
BEFORE & AFTER




                 10
After Visual Hierarchy




                         11
Before Visual Hierarchy




                          12
After Visual Hierarchy




                         13
14
Before & After Visual Hierarchy




                                  AQ Design, Japan
                                   ...
PRINCIPLES OF VISUAL
COMMUNICATION


                       PHOTO BY MATTEO PENZO




                                    ...
How We See

• How we make sense of
  what we see
  • Recognizing similarities &
    differences
  • This allows us to grou...
Understanding Perception




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




• Several principles te...
Forming Relationships




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




• Creating relationships r...
Using Relationships




 • Use visual relationships to
         • Add more or less visual weight to objects
         • Dif...
Visual Hierarchy

• Creates a center of interest that attracts the viewer’s
  attention
• Creates a sense of order and bal...
Hierarchy Applied
•   Visual weight guides you through
        Image
    •
        Title
    •
        Date & Location
   ...
Building Effective Hierarchies




 • Distribution of visual weight
          • Visually dominant images get noticed most
...
Effective Hierarchy




                      24
No Clear Hierarchy




                     25
No Clear Hierarchy




                     26
No Hierarchy




               27
Effective Hierarchy




                      28
To Summarize

    Visual Communication is part
•
    Visual Organization and part personality.
•
    Visual Hierarchy is a...
NOW WE KNOW HOW
             TO CONSTRUCT A
             VISUAL HIERARCHY
WHAT’S THE
PRIORITY?    BUT WHAT SHOULD IT
     ...
Enable Usability

• Once you understand hierarchy, you can
  • Guide users through a sequence
  • Suggest distinct choices...
Explain “What”
• Lots of different elements
  on each page
   • Communicate differences
     between elements
   • Their r...
Scanning Part 1




                  33
Scanning Part 2




                  34
Explaining Where




• Visual hierarchy within navigation systems
  • “You are here” indicators (s.e.d.)
  • Indication of...
How Do I… ?




 • …Go to the next step?

                           36
Building a Hierarchy

• Effective page hierarchies map to
  prioritized user/business needs
• Building an effective hierar...
Prioritizing Content




                       38
Data-driven Prioritization




                             39
Sites                                               Content Objects
                                                    Em...
41
24% CONTENT
76% SITE OVERHEAD




                    42
43
Differentiate
COMMUNICATING A
CENTRAL MESSAGE   Explain




                                  44
Central message




                  45
Not enough hierarchy




                       46
Not enough contrast




                      47
Central Message




                  48
What is this?




                49
Communicate function




                       50
Web Transitions
  1. Locomotion to digital representations of
     physical entities
     •     Directories & portals, Yah...
Packaging Design for Web Apps

• Meaningful Shout
  • Differentiate
  • Attract
  • Embody the Brand
• Back of Pack
  • Su...
“What do I do now?”
TAKE ACTION
              User Needs &
              Business Goals




                              ...
Take action?




               54
Take Action: Sign Up




                       55
Email call to action




                       56
Email call to action




                       57
Take action?




               58
Take action: download




                        59
Take Action: complete a form




                               60
Take action




              61
Take action




              62
One primary action




                     63
One primary & one secondary action




                                     64
One primary & one secondary action




                                     65
Two primary actions




                      66
ORGANIZE      “What can I find here?”
INFORMATION




                                    67
No clear hierarchy




                     68
Hierarchy mapped to goals




                            69
Limited hierarchy




                    70
Clear hierarchy




                  71
Focus on information
PRESENT DATA
               Enable discovery




                                      72
A Simple Table




                 73
After Visual Communication?

                     •   Labels and their values have
                         been divided i...
After Visual Communication?
                    •   Are people looking for a
                        specific value (i.e. ...
After Visual Communication?
                                                        •    If the purpose of the quot;last m...
Comparison




             77
Focus on the data?




                     78
Focus on the data?




                     79
Focus on the data




                    80
Focus on context




                   81
Focus on data




                82
Communicate relationships




                            83
Communicate relationships




                            84
QUESTIONS &
ANSWERS




              Flickr: June 29, 2005 by atomicity




                                             ...
Q&A
•   Question
     • I’d love to have an effective visual hierarchy on my site but
       every stakeholder wants their...
Q&A
•   Question
     • How do I know if I have the right visual hierarchy in my
       designs? Do I need to test it?
•  ...
Q&A
• Question
  • Most of my work involves small incremental improvements and
    not a full redesign. How I can I increm...
For more information…

              • Functioning Form
                • www.lukew.com/ff/
              • Site-Seeing: A...
Upcoming SlideShare
Loading in...5
×

Web Application Page Hierarchy

14,392

Published on

In this talk, I outline the way people naturally scan Web pages and explain how you can guide users through key content and actions using visual hierarchy to construct meaningful, prioritized page layouts. You'll be taken through several before and after examples with explanations of how a page's content was prioritized, why, and how that priority is being communicated to users so they don't need to rely on chance to use your Web application.

Published in: Business, Technology
3 Comments
85 Likes
Statistics
Notes
  • Excellent. You've shown your credibility on presentation with this slideshow. This one deserves thumbs up. I'm John, owner of www.freeringtones.ws/ . Perhaps to see more quality slides from you.

    Best wishes.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • exceptional display..convinced me to have a hardlook at my company model..outstanding

    Janie
    http://financejedi.com
    http://healthjedi.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Para referencia
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
14,392
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
3
Likes
85
Embeds 0
No embeds

No notes for slide

Transcript of "Web Application Page Hierarchy"

  1. 1. WEB APPICATION PAGE HIERARCHY LUKE WROBLEWSKI WEB VISIONS 2007 1
  2. 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 2
  3. 3. Outline • Why does page hierarchy matter? • How do we construct a hierarchy? • Enable usability • Reflect priority • How do we use hierarchy to: Communicate messages • Illuminate actions • Organize information • Present data • 3
  4. 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 4
  5. 5. Squidoo Eye-tracking study (by etre) 5
  6. 6. 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 6
  7. 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 7
  8. 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 8
  9. 9. The End Goal • Quickly Communicate • What is this? Usefulness • How do I use it? Usability • Why should I care? Desirability 9
  10. 10. BEFORE & AFTER 10
  11. 11. After Visual Hierarchy 11
  12. 12. Before Visual Hierarchy 12
  13. 13. After Visual Hierarchy 13
  14. 14. 14
  15. 15. Before & After Visual Hierarchy AQ Design, Japan 15
  16. 16. PRINCIPLES OF VISUAL COMMUNICATION PHOTO BY MATTEO PENZO 16
  17. 17. 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) 17
  18. 18. 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 • 18
  19. 19. 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 19
  20. 20. 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 20
  21. 21. 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. 21
  22. 22. 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 22
  23. 23. 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 Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability 23
  24. 24. Effective Hierarchy 24
  25. 25. No Clear Hierarchy 25
  26. 26. No Clear Hierarchy 26
  27. 27. No Hierarchy 27
  28. 28. Effective Hierarchy 28
  29. 29. 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. • 29
  30. 30. NOW WE KNOW HOW TO CONSTRUCT A VISUAL HIERARCHY WHAT’S THE PRIORITY? BUT WHAT SHOULD IT COMMUNICATE? 30
  31. 31. Enable Usability • Once you understand hierarchy, you can • Guide users through a sequence • Suggest distinct choices • Answer Key Questions • What is this? • Where am I? • What do I do now? 31
  32. 32. Explain “What” • Lots of different elements on each page • Communicate differences between elements • Their relative importance • Their meaning • Apply consistently throughout an application 32
  33. 33. Scanning Part 1 33
  34. 34. Scanning Part 2 34
  35. 35. Explaining Where • Visual hierarchy within navigation systems • “You are here” indicators (s.e.d.) • Indication of structure (size, color, etc.) 35
  36. 36. How Do I… ? • …Go to the next step? 36
  37. 37. Building a Hierarchy • Effective page hierarchies map to prioritized user/business needs • Building an effective hierarchy 1. List out required content & actions 2. Prioritize the list 3. Start at the top and give each element equal or less visual weight as the previous element This ensures there is enough contrast between elements • You are likely to end up with more unique visual • treatments than your design actually needs 4. Work through the elements on the page again to bring more visual consistency to related elements 37
  38. 38. Prioritizing Content 38
  39. 39. Data-driven Prioritization 39
  40. 40. Sites Content Objects Emergent Networks: open, inexpensive, Hierarchies: management, military simple, close enough Examples: closed, expensive, complex, Examples: crowds, friends, incidental accurate networks, IMAGES BASED ON ANDREW HILTON’S ARCHITECTURES OF PARTICIPATION 40
  41. 41. 41
  42. 42. 24% CONTENT 76% SITE OVERHEAD 42
  43. 43. 43
  44. 44. Differentiate COMMUNICATING A CENTRAL MESSAGE Explain 44
  45. 45. Central message 45
  46. 46. Not enough hierarchy 46
  47. 47. Not enough contrast 47
  48. 48. Central Message 48
  49. 49. What is this? 49
  50. 50. Communicate function 50
  51. 51. Web Transitions 1. Locomotion to digital representations of physical entities • Directories & portals, Yahoo! • Company sites & brochure-ware 2. Digital manipulation of physical goods • E-commerce everywhere • Amazon, eBay 3. Digital services • Enable conversation & manipulation • Display surfaces • Content creation • Aggregation • Entertainment -Types of digital services: TOM CHI, YAHOO! 51
  52. 52. Packaging Design for Web Apps • Meaningful Shout • Differentiate • Attract • Embody the Brand • Back of Pack • Support the Story • Outline Benefits & Features • Unpacking Experience 52
  53. 53. “What do I do now?” TAKE ACTION User Needs & Business Goals 53
  54. 54. Take action? 54
  55. 55. Take Action: Sign Up 55
  56. 56. Email call to action 56
  57. 57. Email call to action 57
  58. 58. Take action? 58
  59. 59. Take action: download 59
  60. 60. Take Action: complete a form 60
  61. 61. Take action 61
  62. 62. Take action 62
  63. 63. One primary action 63
  64. 64. One primary & one secondary action 64
  65. 65. One primary & one secondary action 65
  66. 66. Two primary actions 66
  67. 67. ORGANIZE “What can I find here?” INFORMATION 67
  68. 68. No clear hierarchy 68
  69. 69. Hierarchy mapped to goals 69
  70. 70. Limited hierarchy 70
  71. 71. Clear hierarchy 71
  72. 72. Focus on information PRESENT DATA Enable discovery 72
  73. 73. A Simple Table 73
  74. 74. After Visual Communication? • Labels and their values have been divided into rows and columns Requires horizontal and vertical • movement Need to look across for one label and • up for the second label Compounded by the increased • separation of the data - the labels are further away from their values. • Potentially better for looking up a particular value in the table • Makes taking all the data in at once more difficult. 74
  75. 75. After Visual Communication? • Are people looking for a specific value (i.e. discharges this month) One of Deva’s layouts hit the • mark. • Do they simply need a sense of all the information at once? The original redesigned table • makes scanning easier • Is there a prioritization of the data One of Deva’s layouts hit the • mark. • Is everything equally important? Introducing size and color • variations might add visual noise instead of bringing extra attention to really important data 75
  76. 76. After Visual Communication? • If the purpose of the quot;last monthquot; data is to calculate the monthly mutation, the last column offers faster satisfaction. • Styling the row and column groups provides further importance and emphasizes to the data relations and give more meaning to the structure of the grid • The foot contains the single most important statistic for this table. -Robbin van Eijsden http://www.ict-id.nl/CSSshed/website/html/tablebility_part1.html 76
  77. 77. Comparison 77
  78. 78. Focus on the data? 78
  79. 79. Focus on the data? 79
  80. 80. Focus on the data 80
  81. 81. Focus on context 81
  82. 82. Focus on data 82
  83. 83. Communicate relationships 83
  84. 84. Communicate relationships 84
  85. 85. QUESTIONS & ANSWERS Flickr: June 29, 2005 by atomicity 85
  86. 86. Q&A • Question • I’d love to have an effective visual hierarchy on my site but every stakeholder wants their content or feature to be prominently displayed. What can I do? • Answer • Separate the discussion about hierarchy from the actual visual design • Create an ordered list of all the content and actions on a specific page and work with each stakeholder to prioritize it • If you have any data about the usage or importance (for end users) of the items in the list include it as well • Once you have buy-in on the list- use the language of design to explain how your design reflects the list’s prioritization • If any stakeholders complain about their visual prominence in the design, offer to revisit the ordering of the list and bring in the rest of the stakeholders that already agreed to the prioritization 86
  87. 87. Q&A • Question • How do I know if I have the right visual hierarchy in my designs? Do I need to test it? • Answer • It is possible to develop successful interfaces without extensive user research, if one is adept at understanding generalized patterns • Understanding the foundational principles behind visual design enables you create effective designs • Asking users “do you like option a or option b?” rarely provides any useful information. • Instead ask users to walk through a specific task • This process will help inform whether or not the visual design is effectively supporting user needs. 87
  88. 88. Q&A • Question • Most of my work involves small incremental improvements and not a full redesign. How I can I incrementally develop effective visual communication in this situation? • Answer • When adding an element to an application consider how it relates to the whole: • Is it more or less important than other elements in the application? • Is it very similar or very different from other elements in the application? • Does it logically fit within specific content or actions? • How does it relate to the overall goals and vision of the application? • Document these relationships to begin building a visual language • Apply that language each time you make incremental changes 88
  89. 89. For more information… • Functioning Form • www.lukew.com/ff/ • Site-Seeing: A Visual Approach to Web Usability • Wiley & Sons • Drop me a note • luke@lukew.com 89

×