SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
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.
1.
Designing for Discoverability Steve Mulder & Joanne McLernon
3.
Root causes of usability issues * <ul><li>* Fake chart based on no data whatsoever </li></ul>
4.
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
6.
Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
12.
Eyetracking study: The “F” pattern <ul><li>About Us Product page Search Results </li></ul>
14.
<ul><li>Things users know to find here or are less important: periphery of page </li></ul><ul><ul><li>“ Parent”/“sibling” navigation links and search </li></ul></ul><ul><li>Things users don’t know about that you want them to discover: body of page </li></ul><ul><ul><li>“ Child” navigation links </li></ul></ul><ul><ul><li>Related content or features </li></ul></ul><ul><li>Right columns are risky </li></ul><ul><li>Beware of scroll block </li></ul><ul><li>Design for vertical scanning </li></ul>
16.
Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
25.
<ul><li>Task context: Tailor page design to the primary way users will interact with your site (e.g., search vs. browse) </li></ul><ul><li>Page context: It’s all about what’s nearby! Cluster important items of similar purpose together </li></ul><ul><li>Use natural eye magnets to draw attention to what you want users to discover </li></ul><ul><ul><li>Highly valued content </li></ul></ul><ul><ul><li>Imagery and animation </li></ul></ul><ul><ul><li>Form elements </li></ul></ul>
26.
<ul><li>Discoverability decreases with the proximity of things that look like ads or marketing </li></ul><ul><li>Controls must be close to what they control (e.g., search filters, sorting) </li></ul><ul><li>Right columns are risky unless they contain clearly valuable stuff </li></ul>
29.
Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
36.
<ul><li>Positional Expectation: Don’t mess with ingrained findability </li></ul><ul><li>Visual Expectation: Make it look like what it is (or established convention) </li></ul><ul><li>Functional Expectation: Don’t change standardized controls if you can help it </li></ul><ul><li>Task Flow Expectation: Know how your users do things (gratuitous research plug!) </li></ul>
38.
Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
41.
<ul><li>Real estate and size are inversely related: If you’re using prime real estate it can be smaller and still get noticed </li></ul><ul><li>Placing a design element in less-optimal real estate or outside a task flow requires more size </li></ul>
42.
Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
45.
<ul><li>Make it look like what it is </li></ul><ul><li>Design to visual expectations and conventions </li></ul><ul><li>Support very new interfaces with familiar design elements </li></ul>
46.
Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
52.
<ul><li>Use color and imagery to provide emphasis and to satisfy expectations </li></ul><ul><ul><li>Link colors </li></ul></ul><ul><ul><li>Highlighting current state </li></ul></ul><ul><ul><li>Drawing the eye </li></ul></ul><ul><li>If it looks like an ad, users are likely to ignore it </li></ul>
53.
Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
58.
<ul><li>It can’t be discoverable if it isn’t legible </li></ul><ul><li>Format text to support its function </li></ul><ul><ul><li>Buttons, form elements, etc. </li></ul></ul><ul><li>Text that looks like marketing or ads is less likely to be noticed </li></ul>
59.
Design Real Estate & Size Visual Miscommunication Color & Imagery Typography Animation The Components of Discoverability
63.
<ul><li>Animation is one of the most powerful ways to draw the eye </li></ul><ul><ul><li>As long as it doesn’t look like an ad </li></ul></ul><ul><li>Timing is everything to ensure users notice the right thing when it’s needed </li></ul><ul><li>Visual cues must be prominent to encourage users to interact </li></ul>
65.
Position Context User expectations & conventions Design Text & Labeling The Components of Discoverability
70.
<ul><li>Don’t use marketing-speak in navigation, save it for content </li></ul><ul><li>Follow conventions for functional labels, links, and buttons </li></ul><ul><ul><li>Communicate what the link or button will do </li></ul></ul><ul><ul><li>Something new and different may require more explanatory labeling </li></ul></ul>
71.
Resources <ul><li>Eyetracking Web Usability – Jakob Nielsen & Kara Pernice </li></ul><ul><li>Usability News: A Newsletter of the Software Usability Research Laboratory, Wichita State University http://www.usabilitynews.org/ </li></ul><ul><li>Eyetools Eyetracking Research blog http://blog.eyetools.net/ </li></ul><ul><li>Eyetrack III http://poynterextra.org/eyetrack2004/main.htm </li></ul><ul><li>Cognitive Modeling and Eye Tracking Lab, University of Oregon http://www.cs.uoregon.edu/research/cm-hci/ </li></ul>
72.
Thank you Joanne McLernon [email_address] Steve Mulder [email_address]