designing for discoverability

72
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar 1 Steve Mulder & Joanne McLernon Designing for Discoverabil ity

Upload: molecular-inc

Post on 06-May-2015

4.746 views

Category:

Business


0 download

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.

TRANSCRIPT

Page 1: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar1Steve Mulder & Joanne McLernon

Designing for Discoverability

Page 2: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar2

Page 3: Designing for Discoverability

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

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar5

Parade of Failures

Page 6: Designing for Discoverability

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar7

Page 8: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar8

Page 9: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar9

Page 10: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar10

Page 11: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar11

Page 12: Designing for Discoverability

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar13

Page 14: Designing for Discoverability

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar15

Page 16: Designing for Discoverability

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar17

Page 18: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar18

Page 19: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar19

Page 20: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar20

Page 21: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar21

Page 22: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar22

Page 23: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar23

Eyetracking study: The “F” pattern

Page 24: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar24

Eyetracking study: The “F” pattern

Page 25: Designing for Discoverability

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

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar27

Page 28: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar28

Page 29: Designing for Discoverability

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar30

Page 31: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar31

Page 32: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar32

Page 33: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar33

Page 34: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar34

Home About Us

Internal Links Search Engine

Page 35: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar35

Ads

Page 36: Designing for Discoverability

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar37

Page 38: Designing for Discoverability

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar39

Page 40: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar40

Page 41: Designing for Discoverability

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

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar43

Page 44: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar44

Page 45: Designing for Discoverability

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

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar47

Page 48: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar48

Page 49: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar49

Page 50: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar50

Page 51: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar51

Page 52: Designing for Discoverability

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

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar54

Page 55: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar55

Page 56: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar56

Page 57: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar57

Page 58: Designing for Discoverability

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

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar60

Page 61: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar61

Page 62: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar62

Page 63: Designing for Discoverability

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar64

Page 65: Designing for Discoverability

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar66

Page 67: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar67

Page 68: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar68

Page 69: Designing for Discoverability

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar69

Page 70: Designing for Discoverability

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

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

Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar72

Thank you

Joanne [email protected]

Steve [email protected]