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>

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

29.
Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability

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>

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

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>

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

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>

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

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>

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

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>

65.
Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability

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]