Designing for Discoverability
Download as PPT, PDF10 likes2,393 views
The document discusses the concept of discoverability in web design, emphasizing the importance of position, context, user expectations, and design elements in enhancing user interactions. It highlights findings from eyetracking studies, particularly the 'f' pattern, and offers strategies like clustering relevant items, using visual cues, and adhering to established conventions. The authors also stress the need for clear labeling and the role of color and animation in guiding user attention.
![Thank you Joanne McLernon [email_address] Steve Mulder [email_address]](https://image.slidesharecdn.com/designingfordiscoverability-1210346637110194-8/85/Designing-for-Discoverability-72-320.jpg)
Designing for Discoverability
- 1. Designing for Discoverability Steve Mulder & Joanne McLernon
- 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
- 6. Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
- 12. Eyetracking study: The “F” pattern About Us Product page Search Results
- 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
- 16. Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
- 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
- 29. Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
- 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!)
- 38. Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
- 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
- 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
- 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
- 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
- 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
- 65. Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
- 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]