Download - Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar1Steve Mulder & Joanne McLernon

Designing for Discoverability


Discoverability60%Messaging

14%

Legibility11%

Performance11%

Gremlins3%

Drunk Facilitator

1%

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


The Components of Discoverability

Position

Context

User expectations & conventions

Design

Text & Labeling


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



Position

Context


Design

Text & Labeling


• 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



Position

Context


Design

Text & Labeling


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



DesignReal Estate & Size

Visual MiscommunicationColor & Imagery

TypographyAnimation


• 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





TypographyAnimation


• Make it look like what it is

• Design to visual expectations and conventions

• Support very new interfaces with familiar design elements





TypographyAnimation


• 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





TypographyAnimation


• 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





TypographyAnimation


• 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


Design

Text & 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/


Thank you

Joanne [email protected]

Steve [email protected]

Download - Designing for Discoverability

Top Related