Designing for Discoverability

Designing for Discoverability Steve Mulder & Joanne McLernon

Root causes of usability issues *
* Fake chart based on no data whatsoever

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

Parade of Failures

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

Eyetracking study: The “F” pattern
About Us Product page Search Results

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

Eyetracking study: The “F” pattern

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

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

Home About Us Internal Links Search Engine

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!)

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

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

Make it look like what it is
Design to visual expectations and conventions
Support very new interfaces with familiar design elements

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

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

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

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

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/

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

Designing for Discoverability

by Molecular Inc on May 09, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 9

Statistics

Designing for Discoverability — Presentation Transcript