Designing for Discoverability Steve Mulder & Joanne McLernon

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

* 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

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

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

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

Eyetracking study: The “F” pattern

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

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

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

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

Home About Us Internal Links Search Engine

Ads

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

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

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

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

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

Make it look like what it is

Design to visual expectations and conventions

Support very new interfaces with familiar design elements

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

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

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

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

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

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

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

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

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

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

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

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/

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]