improving discoverability

Improving Discoverability

Suzanne Ginsburg, HOW Interactive 10.30.2012

Photo by Sandy Honig

2 HOW Interactive Copyright © Suzanne Ginsburg

What is 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.

4 HOW Interactive Copyright © Suzanne Ginsburg

Why is Discoverability important?

5 HOW Interactive Copyright © Suzanne Ginsburg

Why is Discoverability important?

Makes users happy

Minimizes help documentation

Lowers customer care costs

Good discoverability = Good design

6 HOW Interactive Copyright © Suzanne Ginsburg

Why has Discoverability become increasingly important today?

7 HOW Interactive Copyright © Suzanne Ginsburg

Why is Discoverability important today?

8 HOW Interactive Copyright © Suzanne Ginsburg

What can you do to improve Discoverability?

9 HOW Interactive Copyright © Suzanne Ginsburg

The Discoverability Hierarchy

SS  

Concept

Information Architecture

Screen Design

Visual Language

User Education

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)

11 HOW Interactive Copyright © Suzanne Ginsburg

Tip #1. Leverage Mental Models

(Concept)

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.

13 HOW Interactive Copyright © Suzanne Ginsburg

#1. Leverage Mental Models

Leverages mental model of chore

wheel.

14 HOW Interactive Copyright © Suzanne Ginsburg

#1. Leverage Mental Models

Hipstamatic (earlier version) leverages mental model of

camera .

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

16 HOW Interactive Copyright © Suzanne Ginsburg

Tip #2. Provide Contextual Focus

(Information Architecture)

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.

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.

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

20 HOW Interactive Copyright © Suzanne Ginsburg

Tip #3. Include Sneak Peeks

(Screen Design)

21 HOW Interactive Copyright © Suzanne Ginsburg

#3. Include Sneak Peeks

Sketchbook Pro shows the toolbar when app

loads then slides out of view.

22 HOW Interactive Copyright © Suzanne Ginsburg

#3. Include Sneak Peeks

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

23 HOW Interactive Copyright © Suzanne Ginsburg

Tip #4. Show Just-in-Time Content

(Screen Design)

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.

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.

26 HOW Interactive Copyright © Suzanne Ginsburg

Tip #5. Exploit Physical Characteristics

(Visual Language)

27 HOW Interactive Copyright © Suzanne Ginsburg

#5. Exploit Physical Characteristics

Paper exploits physical characteristics of

Moleskines and real paper.

28 HOW Interactive Copyright © Suzanne Ginsburg

#5. Exploit Physical Characteristics

Convertbot’s uses metal visuals and

sound to communicate the

ability to tinker.

29 HOW Interactive Copyright © Suzanne Ginsburg

Tip #6. Spell It Out

(User Education)

30 HOW Interactive Copyright © Suzanne Ginsburg

#6. Provide User Education

Citibank shows annotations just before

first use.

31 HOW Interactive Copyright © Suzanne Ginsburg

#6. Provide User Education

Pulse uses similar approach but more

sketchy style.

32 HOW Interactive Copyright © Suzanne Ginsburg

#6. Provide User Education

Contextual User Education on Bing

(instead of showing tips all at once)

33 HOW Interactive Copyright © Suzanne Ginsburg

#6. Provide User Education

Contextual User Education on Flipboard similar to Bing example

34 HOW Interactive Copyright © Suzanne Ginsburg

Flipboard animates on first use to introduce

signature Flip.

#6. Provide User Education

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)

36 HOW Interactive Copyright © Suzanne Ginsburg

Thanks!

suzanne@ginsburg-design.com

@suzanneginsburg