Designing for Discoverability
-
Upload
molecular-inc -
Category
Business
-
view
4.746 -
download
0
description
Transcript of Designing for Discoverability
![Page 1: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/1.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar1Steve Mulder & Joanne McLernon
Designing for Discoverability
![Page 2: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/2.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar2
![Page 3: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/3.jpg)
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
![Page 4: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/4.jpg)
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
![Page 5: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/5.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar5
Parade of Failures
![Page 6: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/6.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar6
The Components of Discoverability
Position
Context
User expectations & conventions
Design
Text & Labeling
![Page 7: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/7.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar7
![Page 8: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/8.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar8
![Page 9: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/9.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar9
![Page 10: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/10.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar10
![Page 11: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/11.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar11
![Page 12: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/12.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar12
Eyetracking study: The “F” pattern
About Us Product page Search Results
![Page 13: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/13.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar13
![Page 14: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/14.jpg)
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
![Page 15: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/15.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar15
![Page 16: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/16.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar16
The Components of Discoverability
Position
Context
User expectations & conventions
Design
Text & Labeling
![Page 17: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/17.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar17
![Page 18: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/18.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar18
![Page 19: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/19.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar19
![Page 20: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/20.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar20
![Page 21: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/21.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar21
![Page 22: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/22.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar22
![Page 23: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/23.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar23
Eyetracking study: The “F” pattern
![Page 24: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/24.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar24
Eyetracking study: The “F” pattern
![Page 25: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/25.jpg)
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
![Page 26: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/26.jpg)
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
![Page 27: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/27.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar27
![Page 28: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/28.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar28
![Page 29: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/29.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar29
The Components of Discoverability
Position
Context
User expectations & conventions
Design
Text & Labeling
![Page 30: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/30.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar30
![Page 31: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/31.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar31
![Page 32: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/32.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar32
![Page 33: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/33.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar33
![Page 34: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/34.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar34
Home About Us
Internal Links Search Engine
![Page 35: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/35.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar35
Ads
![Page 36: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/36.jpg)
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!)
![Page 37: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/37.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar37
![Page 38: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/38.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar38
The Components of Discoverability
DesignReal Estate & Size
Visual MiscommunicationColor & Imagery
TypographyAnimation
![Page 39: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/39.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar39
![Page 40: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/40.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar40
![Page 41: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/41.jpg)
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
![Page 42: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/42.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar42
The Components of Discoverability
DesignReal Estate & Size
Visual MiscommunicationColor & Imagery
TypographyAnimation
![Page 43: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/43.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar43
![Page 44: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/44.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar44
![Page 45: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/45.jpg)
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
![Page 46: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/46.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar46
The Components of Discoverability
DesignReal Estate & Size
Visual MiscommunicationColor & Imagery
TypographyAnimation
![Page 47: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/47.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar47
![Page 48: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/48.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar48
![Page 49: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/49.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar49
![Page 50: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/50.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar50
![Page 51: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/51.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar51
![Page 52: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/52.jpg)
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
![Page 53: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/53.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar53
The Components of Discoverability
DesignReal Estate & Size
Visual MiscommunicationColor & Imagery
TypographyAnimation
![Page 54: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/54.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar54
![Page 55: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/55.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar55
![Page 56: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/56.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar56
![Page 57: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/57.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar57
![Page 58: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/58.jpg)
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
![Page 59: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/59.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar59
The Components of Discoverability
DesignReal Estate & Size
Visual MiscommunicationColor & Imagery
TypographyAnimation
![Page 60: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/60.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar60
![Page 61: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/61.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar61
![Page 62: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/62.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar62
![Page 63: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/63.jpg)
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
![Page 64: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/64.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar64
![Page 65: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/65.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar65
The Components of Discoverability
Position
Context
User expectations & conventions
Design
Text & Labeling
![Page 66: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/66.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar66
![Page 67: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/67.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar67
![Page 68: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/68.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar68
![Page 69: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/69.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar69
![Page 70: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/70.jpg)
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
![Page 71: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/71.jpg)
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/
![Page 72: Designing for Discoverability](https://reader038.fdocuments.in/reader038/viewer/2022110306/55493cf8b4c905054d8b4d2e/html5/thumbnails/72.jpg)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar72
Thank you
Joanne [email protected]
Steve [email protected]