designing for discoverability

Designing for Discoverability

Discoverability60%Messaging

Legibility11%

Performance11%

Gremlins3%

Drunk Facilitator

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

• 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 McLernonjmclernon@molecular.com

Steve Muldersmulder@molecular.com

designing for discoverability

components of discoverability

tailor page design

visual expectations

prime real estate

optimal real estate

familiar design elements

scroll block design

web site discoverability

Business

discoverability & interoperability findings open data...

perspectives on discoverability in mobile

using social media to enhance discoverability

pub355: discoverability: understanding your audience

internet marketing and search engine discoverability pilot

the fine-tuning of the universe for scientific technology...

linked data, discovery and discoverability john mccullough...

discoverability of social media

enhancing discoverability with virtual shelf browse

online book discoverability by deltinau

mobile content discoverability

4 pillars for seo and online discoverability in 2014

improve discoverability of non-roman materials

tworeads - improving bookstore's sales through...

wph203 content choice discoverability demo

soa principles : 3.service discoverability

discoverability of online reference

marketing books in a world of discoverability

discoverability and web-enabled science - #scholarafrica

the fine-tuning of the universe for scientific technology...