Designing for Discoverability

1. Designing for Discoverability Steve Mulder & Joanne McLernon

3. Root causes of usability issues * <ul><li>* Fake chart based on no data whatsoever </li></ul>

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

12. Eyetracking study: The “F” pattern <ul><li>About Us Product page Search Results </li></ul>

14. <ul><li>Things users know to find here or are less important: periphery of page </li></ul><ul><ul><li>“ Parent”/“sibling” navigation links and search </li></ul></ul><ul><li>Things users don’t know about that you want them to discover: body of page </li></ul><ul><ul><li>“ Child” navigation links </li></ul></ul><ul><ul><li>Related content or features </li></ul></ul><ul><li>Right columns are risky </li></ul><ul><li>Beware of scroll block </li></ul><ul><li>Design for vertical scanning </li></ul>

23. Eyetracking study: The “F” pattern

24. Eyetracking study: The “F” pattern

25. <ul><li>Task context: Tailor page design to the primary way users will interact with your site (e.g., search vs. browse) </li></ul><ul><li>Page context: It’s all about what’s nearby! Cluster important items of similar purpose together </li></ul><ul><li>Use natural eye magnets to draw attention to what you want users to discover </li></ul><ul><ul><li>Highly valued content </li></ul></ul><ul><ul><li>Imagery and animation </li></ul></ul><ul><ul><li>Form elements </li></ul></ul>

26. <ul><li>Discoverability decreases with the proximity of things that look like ads or marketing </li></ul><ul><li>Controls must be close to what they control (e.g., search filters, sorting) </li></ul><ul><li>Right columns are risky unless they contain clearly valuable stuff </li></ul>

34. Home About Us Internal Links Search Engine

35. Ads

36. <ul><li>Positional Expectation: Don’t mess with ingrained findability </li></ul><ul><li>Visual Expectation: Make it look like what it is (or established convention) </li></ul><ul><li>Functional Expectation: Don’t change standardized controls if you can help it </li></ul><ul><li>Task Flow Expectation: Know how your users do things (gratuitous research plug!) </li></ul>

38. Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability

41. <ul><li>Real estate and size are inversely related: If you’re using prime real estate it can be smaller and still get noticed </li></ul><ul><li>Placing a design element in less-optimal real estate or outside a task flow requires more size </li></ul>

45. <ul><li>Make it look like what it is </li></ul><ul><li>Design to visual expectations and conventions </li></ul><ul><li>Support very new interfaces with familiar design elements </li></ul>

52. <ul><li>Use color and imagery to provide emphasis and to satisfy expectations </li></ul><ul><ul><li>Link colors </li></ul></ul><ul><ul><li>Highlighting current state </li></ul></ul><ul><ul><li>Drawing the eye </li></ul></ul><ul><li>If it looks like an ad, users are likely to ignore it </li></ul>

58. <ul><li>It can’t be discoverable if it isn’t legible </li></ul><ul><li>Format text to support its function </li></ul><ul><ul><li>Buttons, form elements, etc. </li></ul></ul><ul><li>Text that looks like marketing or ads is less likely to be noticed </li></ul>

63. <ul><li>Animation is one of the most powerful ways to draw the eye </li></ul><ul><ul><li>As long as it doesn’t look like an ad </li></ul></ul><ul><li>Timing is everything to ensure users notice the right thing when it’s needed </li></ul><ul><li>Visual cues must be prominent to encourage users to interact </li></ul>

70. <ul><li>Don’t use marketing-speak in navigation, save it for content </li></ul><ul><li>Follow conventions for functional labels, links, and buttons </li></ul><ul><ul><li>Communicate what the link or button will do </li></ul></ul><ul><ul><li>Something new and different may require more explanatory labeling </li></ul></ul>

71. Resources <ul><li>Eyetracking Web Usability – Jakob Nielsen & Kara Pernice </li></ul><ul><li>Usability News: A Newsletter of the Software Usability Research Laboratory, Wichita State University http://www.usabilitynews.org/ </li></ul><ul><li>Eyetools Eyetracking Research blog http://blog.eyetools.net/ </li></ul><ul><li>Eyetrack III http://poynterextra.org/eyetrack2004/main.htm </li></ul><ul><li>Cognitive Modeling and Eye Tracking Lab, University of Oregon http://www.cs.uoregon.edu/research/cm-hci/ </li></ul>

72. Thank you Joanne McLernon [email_address] Steve Mulder [email_address]