Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar1Steve Mulder & Joanne McLernon
Designing for Discoverability
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar2
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar3
Discoverability60%Messaging
14%
Legibility11%
Performance11%
Gremlins3%
Drunk Facilitator
1%
Root causes of usability issues *
* Fake chart based on no data whatsoever
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar4
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar5
Parade of Failures
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar6
The Components of Discoverability
Position
Context
User expectations & conventions
Design
Text & Labeling
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar7
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar8
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar9
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar10
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar11
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar12
Eyetracking study: The “F” pattern
About Us Product page Search Results
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar13
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar14
• 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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar15
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar16
The Components of Discoverability
Position
Context
User expectations & conventions
Design
Text & Labeling
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar17
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar18
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar19
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar20
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar21
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar22
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar23
Eyetracking study: The “F” pattern
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar24
Eyetracking study: The “F” pattern
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar25
• 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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar26
• 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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar27
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar28
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar29
The Components of Discoverability
Position
Context
User expectations & conventions
Design
Text & Labeling
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar30
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar31
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar32
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar33
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar34
Home About Us
Internal Links Search Engine
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar35
Ads
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar36
• 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!)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar37
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar38
The Components of Discoverability
DesignReal Estate & Size
Visual MiscommunicationColor & Imagery
TypographyAnimation
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar39
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar40
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar41
• 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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar42
The Components of Discoverability
DesignReal Estate & Size
Visual MiscommunicationColor & Imagery
TypographyAnimation
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar43
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar44
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar45
• Make it look like what it is
• Design to visual expectations and conventions
• Support very new interfaces with familiar design elements
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar46
The Components of Discoverability
DesignReal Estate & Size
Visual MiscommunicationColor & Imagery
TypographyAnimation
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar47
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar48
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar49
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar50
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar51
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar52
• 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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar53
The Components of Discoverability
DesignReal Estate & Size
Visual MiscommunicationColor & Imagery
TypographyAnimation
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar54
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar55
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar56
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar57
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar58
• 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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar59
The Components of Discoverability
DesignReal Estate & Size
Visual MiscommunicationColor & Imagery
TypographyAnimation
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar60
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar61
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar62
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar63
• 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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar64
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar65
The Components of Discoverability
Position
Context
User expectations & conventions
Design
Text & Labeling
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar66
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar67
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar68
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar69
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar70
• 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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar71
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/
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar72
Thank you
Joanne [email protected]
Steve [email protected]