Upload
molecular-inc
View
4.748
Download
0
Tags:
Embed Size (px)
DESCRIPTION
When it comes to creating successful sites, half the battle is making things discoverable. If users don't notice what we want them to notice, they'll never be satisfied (and neither will we). How do people scan web pages? What makes some things on a page more visible than others? How do we make sure critical content and functionality are actually seen? Come discover practical tips and tricks for taking advantage of what we know about the human eye to make your site more effective. Presentation by Steve Mulder and Joanne McLernon.
Citation preview
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]