SlideShare a Scribd company logo
1 of 89
WEB APPICATION
PAGE HIERARCHY
LUKE WROBLEWSKI
WEB VISIONS 2007




                   1
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
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
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
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


                                                                                       6
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
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
The End Goal




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




                                          9
BEFORE & AFTER




                 10
After Visual Hierarchy




                         11
Before Visual Hierarchy




                          12
After Visual Hierarchy




                         13
14
Before & After Visual Hierarchy




                                  AQ Design, Japan
                                                     15
PRINCIPLES OF VISUAL
COMMUNICATION


                       PHOTO BY MATTEO PENZO




                                               16
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
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
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
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
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
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
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
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 deliberate prioritization of
•
    Visual Weight enabled by the manipulation of
•
    Visual Relationships to create
•
    Meaning for users.
•




                                                         29
NOW WE KNOW HOW
             TO CONSTRUCT A
             VISUAL HIERARCHY
WHAT’S THE
PRIORITY?    BUT WHAT SHOULD IT
             COMMUNICATE?




                                  30
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
Explain “What”
• Lots of different elements
  on each page
   • Communicate differences
     between elements
   • Their relative importance
   • Their meaning
   • Apply consistently throughout
     an application




                                     32
Scanning Part 1




                  33
Scanning Part 2




                  34
Explaining Where




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




                                                  35
How Do I… ?




 • …Go to the next step?

                           36
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
Prioritizing Content




                       38
Data-driven Prioritization




                             39
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
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, 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
Packaging Design for Web Apps

• Meaningful Shout
  • Differentiate
  • Attract
  • Embody the Brand
• Back of Pack
  • Support the Story
  • Outline Benefits & Features
• Unpacking Experience




                                  52
“What do I do now?”
TAKE ACTION
              User Needs &
              Business Goals




                                    53
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 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
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
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
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




                                                   85
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
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
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
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

More Related Content

What's hot

TopTenWebTricksForYourSchool
TopTenWebTricksForYourSchoolTopTenWebTricksForYourSchool
TopTenWebTricksForYourSchoolguidecreative
 
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit WebsitesKill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websitesguidecreative
 
The Top Ten Elements Every School's Website Should Have
The Top Ten Elements Every School's Website Should HaveThe Top Ten Elements Every School's Website Should Have
The Top Ten Elements Every School's Website Should Haveguidecreative
 
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFutureGuide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFutureguidecreative
 
WordPress for NonProfits: Top Ten Elements Every Website Should Have
WordPress for NonProfits: Top Ten Elements Every Website Should HaveWordPress for NonProfits: Top Ten Elements Every Website Should Have
WordPress for NonProfits: Top Ten Elements Every Website Should Haveguidecreative
 
Design your website with your mission in mind
Design your website with your mission in mindDesign your website with your mission in mind
Design your website with your mission in mindMichael Beahm
 
Inspiring Action
Inspiring ActionInspiring Action
Inspiring ActionLisa Colton
 
5 Most Common Mistakes Of YMCA Websites Blackbaud 120909
5 Most Common Mistakes Of YMCA Websites Blackbaud 1209095 Most Common Mistakes Of YMCA Websites Blackbaud 120909
5 Most Common Mistakes Of YMCA Websites Blackbaud 120909JeffTe
 
The building blocks of visual hierarchy
The building blocks of visual hierarchyThe building blocks of visual hierarchy
The building blocks of visual hierarchyHalil Eren Çelik
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elementsrobin fay
 
Design with accessibility in mind
Design with accessibility in mindDesign with accessibility in mind
Design with accessibility in mindMike Donahue
 
Documenting For Interactive Websites
Documenting For Interactive WebsitesDocumenting For Interactive Websites
Documenting For Interactive WebsitesPatrick Kennedy
 

What's hot (14)

TopTenWebTricksForYourSchool
TopTenWebTricksForYourSchoolTopTenWebTricksForYourSchool
TopTenWebTricksForYourSchool
 
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit WebsitesKill The Noise - Prioritizing Content for Strategic Nonprofit Websites
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websites
 
The Top Ten Elements Every School's Website Should Have
The Top Ten Elements Every School's Website Should HaveThe Top Ten Elements Every School's Website Should Have
The Top Ten Elements Every School's Website Should Have
 
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFutureGuide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFuture
 
WordPress for NonProfits: Top Ten Elements Every Website Should Have
WordPress for NonProfits: Top Ten Elements Every Website Should HaveWordPress for NonProfits: Top Ten Elements Every Website Should Have
WordPress for NonProfits: Top Ten Elements Every Website Should Have
 
Design your website with your mission in mind
Design your website with your mission in mindDesign your website with your mission in mind
Design your website with your mission in mind
 
Inspiring Action
Inspiring ActionInspiring Action
Inspiring Action
 
Principles of Web Design
Principles of Web DesignPrinciples of Web Design
Principles of Web Design
 
5 Most Common Mistakes Of YMCA Websites Blackbaud 120909
5 Most Common Mistakes Of YMCA Websites Blackbaud 1209095 Most Common Mistakes Of YMCA Websites Blackbaud 120909
5 Most Common Mistakes Of YMCA Websites Blackbaud 120909
 
The building blocks of visual hierarchy
The building blocks of visual hierarchyThe building blocks of visual hierarchy
The building blocks of visual hierarchy
 
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
 
Design with accessibility in mind
Design with accessibility in mindDesign with accessibility in mind
Design with accessibility in mind
 
Documenting For Interactive Websites
Documenting For Interactive WebsitesDocumenting For Interactive Websites
Documenting For Interactive Websites
 
5 tips for getting found online 20120411
5 tips for getting found online 201204115 tips for getting found online 20120411
5 tips for getting found online 20120411
 

Similar to Web Application Page Hierarchy

Designing.for.todays.web
Designing.for.todays.webDesigning.for.todays.web
Designing.for.todays.webNika Stuard
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of InterfaceChristina Wodtke
 
Wiki Design Luke W
Wiki Design  Luke WWiki Design  Luke W
Wiki Design Luke WRoss Lawley
 
The Impact of Web 2.0 on Library Websites
The Impact of Web 2.0 on Library WebsitesThe Impact of Web 2.0 on Library Websites
The Impact of Web 2.0 on Library WebsitesRachel Vacek
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience WorkshopMotivate Design
 
Web 2.0 and e-elearning
Web 2.0 and e-elearningWeb 2.0 and e-elearning
Web 2.0 and e-elearningDavid Wilcox
 
'Comfort Media' Solution for Winston Russia
'Comfort Media' Solution for Winston Russia'Comfort Media' Solution for Winston Russia
'Comfort Media' Solution for Winston RussiaGoodKarma.me
 
Complexinterfaces
ComplexinterfacesComplexinterfaces
ComplexinterfacesBojhan
 
Website Development Process
Website Development ProcessWebsite Development Process
Website Development ProcessHend Al-Khalifa
 
Make Your Website Work for You, March 27, 2009
Make Your Website Work for You, March 27, 2009Make Your Website Work for You, March 27, 2009
Make Your Website Work for You, March 27, 2009abcboston
 
Search and Browsing Cycle for Knowledge Discovery and Learning
Search and Browsing Cycle for Knowledge Discovery and LearningSearch and Browsing Cycle for Knowledge Discovery and Learning
Search and Browsing Cycle for Knowledge Discovery and LearningSebastian Ryszard Kruk
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)Ergosign GmbH
 
Basics of Interaction Design & Strategy - 6/12/15
Basics of Interaction Design & Strategy - 6/12/15Basics of Interaction Design & Strategy - 6/12/15
Basics of Interaction Design & Strategy - 6/12/15Robert Stribley
 
Using Web 2 For Communication Workshop
Using Web 2 For Communication   WorkshopUsing Web 2 For Communication   Workshop
Using Web 2 For Communication WorkshopRoy Yabuki
 
Virtual Worlds As A Competitive Learning Environment
Virtual Worlds As A Competitive Learning EnvironmentVirtual Worlds As A Competitive Learning Environment
Virtual Worlds As A Competitive Learning EnvironmentKevin Feenan
 
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Marcy Kellar
 
Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15Robert Stribley
 

Similar to Web Application Page Hierarchy (20)

Designing.for.todays.web
Designing.for.todays.webDesigning.for.todays.web
Designing.for.todays.web
 
The Principles of Interface
The Principles of InterfaceThe Principles of Interface
The Principles of Interface
 
Wiki Design Luke W
Wiki Design  Luke WWiki Design  Luke W
Wiki Design Luke W
 
Wiki Design Considerations
Wiki Design ConsiderationsWiki Design Considerations
Wiki Design Considerations
 
The Impact of Web 2.0 on Library Websites
The Impact of Web 2.0 on Library WebsitesThe Impact of Web 2.0 on Library Websites
The Impact of Web 2.0 on Library Websites
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 
Web 2.0 and e-elearning
Web 2.0 and e-elearningWeb 2.0 and e-elearning
Web 2.0 and e-elearning
 
'Comfort Media' Solution for Winston Russia
'Comfort Media' Solution for Winston Russia'Comfort Media' Solution for Winston Russia
'Comfort Media' Solution for Winston Russia
 
Design Patterns Lw
Design Patterns LwDesign Patterns Lw
Design Patterns Lw
 
Complexinterfaces
ComplexinterfacesComplexinterfaces
Complexinterfaces
 
Website Development Process
Website Development ProcessWebsite Development Process
Website Development Process
 
Make Your Website Work for You, March 27, 2009
Make Your Website Work for You, March 27, 2009Make Your Website Work for You, March 27, 2009
Make Your Website Work for You, March 27, 2009
 
Search and Browsing Cycle for Knowledge Discovery and Learning
Search and Browsing Cycle for Knowledge Discovery and LearningSearch and Browsing Cycle for Knowledge Discovery and Learning
Search and Browsing Cycle for Knowledge Discovery and Learning
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)
 
Impactwebtools
ImpactwebtoolsImpactwebtools
Impactwebtools
 
Basics of Interaction Design & Strategy - 6/12/15
Basics of Interaction Design & Strategy - 6/12/15Basics of Interaction Design & Strategy - 6/12/15
Basics of Interaction Design & Strategy - 6/12/15
 
Using Web 2 For Communication Workshop
Using Web 2 For Communication   WorkshopUsing Web 2 For Communication   Workshop
Using Web 2 For Communication Workshop
 
Virtual Worlds As A Competitive Learning Environment
Virtual Worlds As A Competitive Learning EnvironmentVirtual Worlds As A Competitive Learning Environment
Virtual Worlds As A Competitive Learning Environment
 
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
 
Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15
 

Recently uploaded

Anyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyAnyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyHanna Klim
 
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003believeminhh
 
Lecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toLecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toumarfarooquejamali32
 
Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..dlewis191
 
MoneyBridge Pitch Deck - Investor Presentation
MoneyBridge Pitch Deck - Investor PresentationMoneyBridge Pitch Deck - Investor Presentation
MoneyBridge Pitch Deck - Investor Presentationbaron83
 
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...Khaled Al Awadi
 
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdfAMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdfJohnCarloValencia4
 
Slicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup BerlinSlicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup BerlinAnton Skornyakov
 
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)tazeenaila12
 
MC Heights construction company in Jhang
MC Heights construction company in JhangMC Heights construction company in Jhang
MC Heights construction company in Jhangmcgroupjeya
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access
 
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxCracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxWorkforce Group
 
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 Building Your Personal Brand on LinkedIn - Expert Planet-  2024 Building Your Personal Brand on LinkedIn - Expert Planet-  2024
Building Your Personal Brand on LinkedIn - Expert Planet- 2024Stephan Koning
 
PDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdfPDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdfHajeJanKamps
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access
 
The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...
The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...
The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...Brian Solis
 
Entrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsEntrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsP&CO
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023Steve Rader
 
Fabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsFabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsWristbands Ireland
 

Recently uploaded (20)

Anyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyAnyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agency
 
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003
The Vietnam Believer Newsletter_MARCH 25, 2024_EN_Vol. 003
 
WAM Corporate Presentation Mar 25 2024.pdf
WAM Corporate Presentation Mar 25 2024.pdfWAM Corporate Presentation Mar 25 2024.pdf
WAM Corporate Presentation Mar 25 2024.pdf
 
Lecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb toLecture_6.pptx English speaking easyb to
Lecture_6.pptx English speaking easyb to
 
Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..
 
MoneyBridge Pitch Deck - Investor Presentation
MoneyBridge Pitch Deck - Investor PresentationMoneyBridge Pitch Deck - Investor Presentation
MoneyBridge Pitch Deck - Investor Presentation
 
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
 
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdfAMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
AMAZON SELLER VIRTUAL ASSISTANT PRODUCT RESEARCH .pdf
 
Slicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup BerlinSlicing Work on Business Agility Meetup Berlin
Slicing Work on Business Agility Meetup Berlin
 
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
Harvard Business Review.pptx | Navigating Labor Unrest (March-April 2024)
 
MC Heights construction company in Jhang
MC Heights construction company in JhangMC Heights construction company in Jhang
MC Heights construction company in Jhang
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024
 
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxCracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
 
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 Building Your Personal Brand on LinkedIn - Expert Planet-  2024 Building Your Personal Brand on LinkedIn - Expert Planet-  2024
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 
PDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdfPDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdf
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024
 
The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...
The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...
The End of Business as Usual: Rewire the Way You Work to Succeed in the Consu...
 
Entrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsEntrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizations
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023
 
Fabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsFabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and Festivals
 

Web Application Page Hierarchy

  • 1. WEB APPICATION PAGE HIERARCHY LUKE WROBLEWSKI WEB VISIONS 2007 1
  • 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. 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. 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
  • 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. 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. 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. The End Goal • Quickly Communicate • What is this? Usefulness • How do I use it? Usability • Why should I care? Desirability 9
  • 14. 14
  • 15. Before & After Visual Hierarchy AQ Design, Japan 15
  • 16. PRINCIPLES OF VISUAL COMMUNICATION PHOTO BY MATTEO PENZO 16
  • 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. 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. 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. 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. 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. 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. 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
  • 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. NOW WE KNOW HOW TO CONSTRUCT A VISUAL HIERARCHY WHAT’S THE PRIORITY? BUT WHAT SHOULD IT COMMUNICATE? 30
  • 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. Explain “What” • Lots of different elements on each page • Communicate differences between elements • Their relative importance • Their meaning • Apply consistently throughout an application 32
  • 35. Explaining Where • Visual hierarchy within navigation systems • “You are here” indicators (s.e.d.) • Indication of structure (size, color, etc.) 35
  • 36. How Do I… ? • …Go to the next step? 36
  • 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
  • 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
  • 42. 24% CONTENT 76% SITE OVERHEAD 42
  • 43. 43
  • 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. 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. “What do I do now?” TAKE ACTION User Needs & Business Goals 53
  • 56. Email call to action 56
  • 57. Email call to action 57
  • 64. One primary & one secondary action 64
  • 65. One primary & one secondary action 65
  • 67. ORGANIZE “What can I find here?” INFORMATION 67
  • 72. Focus on information PRESENT DATA Enable discovery 72
  • 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. 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. 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
  • 78. Focus on the data? 78
  • 79. Focus on the data? 79
  • 80. Focus on the data 80
  • 85. QUESTIONS & ANSWERS Flickr: June 29, 2005 by atomicity 85
  • 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. 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. 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. 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