Designing for Discoverability
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Designing for Discoverability

  • 6,873 views
Uploaded on

When it comes to creating successful sites, half the battle is making things discoverable. If users don't notice what we want them to notice, they'll never be satisfied (and neither will we). How......

When it comes to creating successful sites, half the battle is making things discoverable. If users don't notice what we want them to notice, they'll never be satisfied (and neither will we). How do people scan web pages? What makes some things on a page more visible than others? How do we make sure critical content and functionality are actually seen? Come discover practical tips and tricks for taking advantage of what we know about the human eye to make your site more effective. Presentation by Steve Mulder and Joanne McLernon.

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,873
On Slideshare
6,863
From Embeds
10
Number of Embeds
2

Actions

Shares
Downloads
47
Comments
0
Likes
8

Embeds 10

http://www.slideshare.net 9
http://www.slideee.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Designing for Discoverability Steve Mulder & Joanne McLernon
  • 2.  
  • 3. Root causes of usability issues *
    • * Fake chart based on no data whatsoever
  • 4. Findability = the quality of a known item to be locatable on a web site Discoverability = the quality of a known or unknown item to be noticeable on a web page
  • 5. Parade of Failures
  • 6. Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
  • 7.  
  • 8.  
  • 9.  
  • 10.  
  • 11.  
  • 12. Eyetracking study: The “F” pattern
    • About Us Product page Search Results
  • 13.  
  • 14.
    • Things users know to find here or are less important: periphery of page
      • “ Parent”/“sibling” navigation links and search
    • Things users don’t know about that you want them to discover: body of page
      • “ Child” navigation links
      • Related content or features
    • Right columns are risky
    • Beware of scroll block
    • Design for vertical scanning
  • 15.  
  • 16. Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
  • 17.  
  • 18.  
  • 19.  
  • 20.  
  • 21.  
  • 22.  
  • 23. Eyetracking study: The “F” pattern
  • 24. Eyetracking study: The “F” pattern
  • 25.
    • Task context: Tailor page design to the primary way users will interact with your site (e.g., search vs. browse)
    • Page context: It’s all about what’s nearby! Cluster important items of similar purpose together
    • Use natural eye magnets to draw attention to what you want users to discover
      • Highly valued content
      • Imagery and animation
      • Form elements
  • 26.
    • Discoverability decreases with the proximity of things that look like ads or marketing
    • Controls must be close to what they control (e.g., search filters, sorting)
    • Right columns are risky unless they contain clearly valuable stuff
  • 27.  
  • 28.  
  • 29. Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
  • 30.  
  • 31.  
  • 32.  
  • 33.  
  • 34. Home About Us Internal Links Search Engine
  • 35. Ads
  • 36.
    • Positional Expectation: Don’t mess with ingrained findability
    • Visual Expectation: Make it look like what it is (or established convention)
    • Functional Expectation: Don’t change standardized controls if you can help it
    • Task Flow Expectation: Know how your users do things (gratuitous research plug!)
  • 37.  
  • 38. Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
  • 39.  
  • 40.  
  • 41.
    • Real estate and size are inversely related: If you’re using prime real estate it can be smaller and still get noticed
    • Placing a design element in less-optimal real estate or outside a task flow requires more size
  • 42. Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
  • 43.  
  • 44.  
  • 45.
    • Make it look like what it is
    • Design to visual expectations and conventions
    • Support very new interfaces with familiar design elements
  • 46. Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
  • 47.  
  • 48.  
  • 49.  
  • 50.  
  • 51.  
  • 52.
    • Use color and imagery to provide emphasis and to satisfy expectations
      • Link colors
      • Highlighting current state
      • Drawing the eye
    • If it looks like an ad, users are likely to ignore it
  • 53. Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
  • 54.  
  • 55.  
  • 56.  
  • 57.  
  • 58.
    • It can’t be discoverable if it isn’t legible
    • Format text to support its function
      • Buttons, form elements, etc.
    • Text that looks like marketing or ads is less likely to be noticed
  • 59. Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
  • 60.  
  • 61.  
  • 62.  
  • 63.
    • Animation is one of the most powerful ways to draw the eye
      • As long as it doesn’t look like an ad
    • Timing is everything to ensure users notice the right thing when it’s needed
    • Visual cues must be prominent to encourage users to interact
  • 64.  
  • 65. Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
  • 66.  
  • 67.  
  • 68.  
  • 69.  
  • 70.
    • Don’t use marketing-speak in navigation, save it for content
    • Follow conventions for functional labels, links, and buttons
      • Communicate what the link or button will do
      • Something new and different may require more explanatory labeling
  • 71. Resources
    • Eyetracking Web Usability – Jakob Nielsen & Kara Pernice
    • Usability News: A Newsletter of the Software Usability Research Laboratory, Wichita State University http://www.usabilitynews.org/
    • Eyetools Eyetracking Research blog http://blog.eyetools.net/
    • Eyetrack III http://poynterextra.org/eyetrack2004/main.htm
    • Cognitive Modeling and Eye Tracking Lab, University of Oregon http://www.cs.uoregon.edu/research/cm-hci/
  • 72. Thank you Joanne McLernon [email_address] Steve Mulder [email_address]