improving discoverability

36
Improving Discoverability Suzanne Ginsburg, HOW Interactive 10.30.2012 Photo by Sandy Honig

Upload: ginsburg-design

Post on 28-Jan-2015

112 views

Category:

Design


1 download

DESCRIPTION

In the software world—desktop, web, mobile, tablet—discoverability typically refers to the ease at which users may find a feature to complete a specific task they have in mind. But it may also refer to the ability to simply get started with a new application, or the ability to discover features unknown to the user, e.g., those that may improve performance. These slides provide 7 clear ways to improve discoverability in your application designs.

TRANSCRIPT

Page 1: Improving Discoverability

Improving Discoverability

Suzanne Ginsburg, HOW Interactive 10.30.2012

Photo by Sandy Honig

Page 2: Improving Discoverability

2 HOW Interactive Copyright © Suzanne Ginsburg

What is Discoverability?

Page 3: Improving Discoverability

3 HOW Interactive Copyright © Suzanne Ginsburg

What is Discoverability?

In the software world—desktop, web, mobile, tablet—discoverability typically refers to the ease at which users may find a feature to complete a specific task they have in mind.

But it may also refer to the ability to simply get started with a new application, or the ability to discover features unknown to the user, e.g., those that may improve performance.

Page 4: Improving Discoverability

4 HOW Interactive Copyright © Suzanne Ginsburg

Why is Discoverability important?

Page 5: Improving Discoverability

5 HOW Interactive Copyright © Suzanne Ginsburg

Why is Discoverability important?

Makes users happy

Minimizes help documentation

Lowers customer care costs

Good discoverability = Good design

Page 6: Improving Discoverability

6 HOW Interactive Copyright © Suzanne Ginsburg

Why has Discoverability become increasingly important today?

Page 7: Improving Discoverability

7 HOW Interactive Copyright © Suzanne Ginsburg

Why is Discoverability important today?

Page 8: Improving Discoverability

8 HOW Interactive Copyright © Suzanne Ginsburg

What can you do to improve Discoverability?

Page 9: Improving Discoverability

9 HOW Interactive Copyright © Suzanne Ginsburg

The Discoverability Hierarchy

SS  

Concept

Information Architecture

Screen Design

Visual Language

User Education

Page 10: Improving Discoverability

10 HOW Interactive Copyright © Suzanne Ginsburg

Discoverability Tips

1.  Leverage Mental Models (Concept)

2.  Provide Contextual Focus (Information Architecture)

3.  Include Sneak Peeks (Screen Design)

4.  Show Just-in-Time Content & Tools (Screen Design)

5.  Exploit Physical Characteristics (Visual Language)

6.  Spell it Out (User Education)

Page 11: Improving Discoverability

11 HOW Interactive Copyright © Suzanne Ginsburg

Tip #1. Leverage Mental Models

(Concept)

Page 12: Improving Discoverability

12 HOW Interactive Copyright © Suzanne Ginsburg

#1. Leverage Mental Models

Turning pages is easy to discover

since most everyone is

familiar with how a real book

works.

Page 13: Improving Discoverability

13 HOW Interactive Copyright © Suzanne Ginsburg

#1. Leverage Mental Models

Leverages mental model of chore

wheel.

Page 14: Improving Discoverability

14 HOW Interactive Copyright © Suzanne Ginsburg

#1. Leverage Mental Models

Hipstamatic (earlier version) leverages mental model of

camera .

Page 15: Improving Discoverability

15 HOW Interactive Copyright © Suzanne Ginsburg

#1. Strong Conceptual Foundation

But you must be committed to the

mental model. Address Book breaks down

since users can’t tap here to turn pages.

Version 5.0.1

Page 16: Improving Discoverability

16 HOW Interactive Copyright © Suzanne Ginsburg

Tip #2. Provide Contextual Focus

(Information Architecture)

Page 17: Improving Discoverability

17 HOW Interactive Copyright © Suzanne Ginsburg

#2. Provide Contextual Focus

Evernote’s Contextual Focus helps improve discoverability.

When mobile, geo-tagging available. This feature is less

relevant on desktop.

Page 18: Improving Discoverability

18 HOW Interactive Copyright © Suzanne Ginsburg

#2. Provide Contextual Focus

Yelp also has Contextual Focus. Maps, Call & Directions are front & center for

mobile. They’re still available for the Web but reviews & other content take center

stage since users tend to be in more of a research mode.

Page 19: Improving Discoverability

19 HOW Interactive Copyright © Suzanne Ginsburg

Contextual Focus isn’t always about the platform. You can

have contextual focus within an app, like AllRecipes Cooking

Mode

#2. Provide Contextual Focus

Page 20: Improving Discoverability

20 HOW Interactive Copyright © Suzanne Ginsburg

Tip #3. Include Sneak Peeks

(Screen Design)

Page 21: Improving Discoverability

21 HOW Interactive Copyright © Suzanne Ginsburg

#3. Include Sneak Peeks

Sketchbook Pro shows the toolbar when app

loads then slides out of view.

Page 22: Improving Discoverability

22 HOW Interactive Copyright © Suzanne Ginsburg

#3. Include Sneak Peeks

Flickr slideshow filmstrip works the same way as the previous example.

Page 23: Improving Discoverability

23 HOW Interactive Copyright © Suzanne Ginsburg

Tip #4. Show Just-in-Time Content

(Screen Design)

Page 24: Improving Discoverability

24 HOW Interactive Copyright © Suzanne Ginsburg

#4. Just-in-Time Content

Just-in-time features enable Pulse to devote as

much real estate as possible to reading

experience. The app shows other articles when

user reaches end or swipes to top.

Page 25: Improving Discoverability

25 HOW Interactive Copyright © Suzanne Ginsburg

#4. Just-in-Time Content

Path also provides

Just-In-Time content on

their timeline. Date and time only

shown when user scrolling

timeline.

Page 26: Improving Discoverability

26 HOW Interactive Copyright © Suzanne Ginsburg

Tip #5. Exploit Physical Characteristics

(Visual Language)

Page 27: Improving Discoverability

27 HOW Interactive Copyright © Suzanne Ginsburg

#5. Exploit Physical Characteristics

Paper exploits physical characteristics of

Moleskines and real paper.

Page 28: Improving Discoverability

28 HOW Interactive Copyright © Suzanne Ginsburg

#5. Exploit Physical Characteristics

Convertbot’s uses metal visuals and

sound to communicate the

ability to tinker.

Page 29: Improving Discoverability

29 HOW Interactive Copyright © Suzanne Ginsburg

Tip #6. Spell It Out

(User Education)

Page 30: Improving Discoverability

30 HOW Interactive Copyright © Suzanne Ginsburg

#6. Provide User Education

Citibank shows annotations just before

first use.

Page 31: Improving Discoverability

31 HOW Interactive Copyright © Suzanne Ginsburg

#6. Provide User Education

Pulse uses similar approach but more

sketchy style.

Page 32: Improving Discoverability

32 HOW Interactive Copyright © Suzanne Ginsburg

#6. Provide User Education

Contextual User Education on Bing

(instead of showing tips all at once)

Page 33: Improving Discoverability

33 HOW Interactive Copyright © Suzanne Ginsburg

#6. Provide User Education

Contextual User Education on Flipboard similar to Bing example

Page 34: Improving Discoverability

34 HOW Interactive Copyright © Suzanne Ginsburg

Flipboard animates on first use to introduce

signature Flip.

#6. Provide User Education

Page 35: Improving Discoverability

35 HOW Interactive Copyright © Suzanne Ginsburg

To recap, here are the 7 Discoverability tips: 1.  Leverage Mental Models (Concept)

2.  Provide Contextual Focus (Information Architecture)

3.  Include Sneak Peeks (Screen Design)

4.  Show Just-in-Time Content & Tools (Screen Design)

5.  Exploit Physical Characteristics (Visual Language)

6.  Spell it Out (User Education)

Page 36: Improving Discoverability

36 HOW Interactive Copyright © Suzanne Ginsburg

Thanks!

[email protected]

@suzanneginsburg