Out of Box Experience DesignHarry Brignull

Pete Gale

Who are these guys?

Harry Brignull: User Experience Consultant, Madgex

Pete Gale: Head of User Experience, Cogapp

The problem:Self Install Broadband Packages are hard to install yourself

Which means...

Customers call in for help

Call center costs ramp up

Frustrated customers less likely to renew contracts

Which means...

In this case, good OOBE design isn’t just about being nice or ‘building a luxury brand’

- its all about reducing costs!

What’s the problem?

N.D.F.

How Big?

Scherf, K. Consumer Electronics Association Conference, Home Networking Panel, 2002.

With return rates of 20-30%, home networking gear is currently the most returned item at “big box” electronics stores

Kent Sullivan, Microsoft. Paul Sorenson, Intel, Ease Of Use Roundtable, 2004.

How Big?

“No Defect Found” return rate runs as high as 90%+

(depending on product category)

eBrain Research October, 2002 Consumer Electronics Association (CEA)

How Big?

Consumer electronic returns

costs are estimated at $10B annually

(Only 2-5% of returns are found to be defective)

source: wikipedia

Where are we now?

Where the story starts...

A UK ISP approached Flow Interactive to help them with this problem.

I ended up speccing and running an iterative user testing project for them.

Today I am going to give you some insights.

Off the record - no recording please.

Before I start...

Some questions to think about:

★ If OOBE design seems easy, why are OOBEs usually so awful?

★ If you feel like you could do this work - what’s stopping you from pitching for & winning projects like this?

User Centred Design

A quick primer for the unitiated

User Centred Design

A quick primer for the unitiated

A simple recipe, many variations

Prototyping

User Research

Iteration

Collaboration

Survival of the fittest:

with each iteration, you iron out problems.

Web Apps

Physical products

Vehicles

Product packaging

Instructional Materials

Shop floorplans

... literally ANYTHING that

people use!

Web Apps

Physical products

Vehicles

Product packaging

Instructional Materials

Shop floorplans

... literally ANYTHING that

people use!

Out the other side...

Something that caters for user needs.

i.e. more usable, more useful and more enjoyable!

In a nutshellWhat is the challenge for OOBE design?

We wish our users would behave like this…

We wish our users would behave like this…

- Reads the manual before starting

- Extremely careful

- Systematic

- Doesn’t miss a detail

But they actually behave more like this…

But they actually behave more like this…

- They are impatient

- They rarely read big blocks of text

- In the absence of immediate, direct instructions, they will steam ahead

- They expect to be able to “muddle through”

Our challenge is to design the OOBE to work well with

this natural style of user behaviour

Our ApproachHow did we apply the UCD philosophy?

Stakeholder interviews revealed different departmental perspectives

“What’s your definition of success?”

Engineer“Success happens when about all the bits fit into the box safely, cheaply &

efficiently”

Engineer“Success happens when about all the bits fit into the box safely, cheaply &

efficiently”

Packaging designer “Success is a sexy

cardboard template”

Engineer“Success happens when about all the bits fit into the box safely, cheaply &

efficiently”

Developer: “Success happens when

my code complies with the requirement specs”

Packaging designer “Success is a sexy

cardboard template”

The silo effect

To achieve an effective user experience, you have to break the silos.

User Experience Design relies on a holistic view.

Project outline

Traditional usability consulting

Client hands over materials to a consultancy

User testing carried out

Report written, recommendations given

Redesign carried out by Client

Project outline

Traditional usability consulting

Client hands over materials to a consultancy

User testing carried out

Report written, recommendations given

Redesign carried out by ClientX

UX design problems are symptomatic of organizational problems

We wanted to treat the disease, not the symptom.

UX consultancy as relationship therapyPart of it involves showing them how to work together

Project outline

Rapid iteration user testing:

20 real users from all walks of life, 1 on 1 sessions

Given a box and told to self install / think aloud

All client stakeholders took take 1 week out the office and attend the research sessions

The viewing room was not a boring “cinema” set-up, but an active vibrant workshop

✔

Project outline

During sessions, the team would tweak the OOBE and build a new prototype

Between sessions, the newly modified version of the OOBE would be swapped in.

The final prototype was a “living implementation” of the new design (no scope for misinterpretaiton)

A very memorable, engaging experience

✔

Lab set-up

Lab split into two rooms using a divider

Room 1: Hallway - phone connection

Room 2: Spare room - Desktop PC

Analogue camera set-up: user could be seen picture-in-picture in either room. Streamed into viewing room and recorded onto DVD

Live editing: I’d switch camera angles from a console as the user moved around.

Findings

Findings

Ten steps before you start

• Open Box• Evaluate magazine• Evaluate DVD box• Open DVD box• Evaluate paperwork• Open “Set up guide”• Evaluate first layer of instructions• Unfold “set up guide”• Evaluate main instructions

Ten steps before you start

• Open Box• Evaluate magazine• Evaluate DVD box• Open DVD box• Evaluate paperwork• Open “Set up guide”• Evaluate first layer of instructions• Unfold “set up guide”• Evaluate main instructions

EVERY STEP CREATED POTENTIAL FOR USER ERROR

After observing the first few users

we saw that they were overwhelmed by the instructions, and instead tended to do this:

“I’m making an educated guess” [tries to force ethernet

into DSL socket]

“I’m making an educated guess” [tries to force ethernet

into DSL socket]

“My method is trial and error”

“I’m making an educated guess” [tries to force ethernet

into DSL socket]

“My method is trial and error”

“I wouldn’t read the instructions unless I had to”

Lazy = smartBased on prior experience, this heuristic saves effort

1. Muddle through quickly

2. if problem is encountered

3. then refer to instructions

Productive Laziness

“Productive laziness involves avoiding unnecessary work.” - Aaron Sloman, Cognitive Scientist

The chess champion who wins by working through all the possible sequences of moves several steps ahead [...] is not as intelligent as the player who avoids explicitly examining so many cases...”

http://icanhaz.com/cognition

“This looks easy, you just plug the coloured cables into the coloured slots!”

The octapus of death

The octapus of death

The octapus of deathAs soon as they have all the cables hooked in, they are screwed.

We realised we needed to prevent this.

How?

The traditional solution

Read me

first!

The traditional solutionInstructions on how to use the instructions!

Read me

first!

The traditional solutionInstructions on how to use the instructions!

Read me

first!X

A better solutionGuide behaviour through physical affordances

A better solutionGuide behaviour through physical affordances

The Bento Box approachLayering controls sequence of exposure.

The first thing you see = the first thing you do

The new ‘clamshell’ designPresents the user with just two things upon opening: the device and a quickstart guide

Better but not perfectCertain steps were still problematic

Too much information overwhems users So we set to work on simplifying the complex copy and diagrams

If its possible to cut out a word, cut it out. George Orwell

“Your Broadband features.

Your service includes many useful and exciting features. Select what you’d like to set up now from the following list. You can set features up later if you prefer.”

Becomes

“Select the features you wish to install”

“If the illustrator has taken the time to draw

this, then it must be significant in some

way.”

This diagram was intended to show the various devices that need a microfilter

Users tended to stall here, and would visually scan the diagram looking for the key point. They thought

they were missing something.

The message communicated in this diagram is much clearer.

There are no unnecessary details.

Every drop of ink serves a purpose.

Another pain pointWhere’s the damn password?

Wep Key:

57c50e60b4c553d97597b8a078

... On the back of the modem in another room!

Umm, is that a Zero or an O?Transcription errors are an inevitable problem

We added a “wireless details” card

The problem went away completely!

We added a “wireless details” card

The problem went away completely!

Demonstrates the need for ecological validityA classic lab set-up would have the missed this problem

Cumulative costs

With HTML and CSS, improvements are a one-off cost, but not with physical products!

Even tiny tweaks need to have extensive cost-benefit evaluation...

cost

No of units

html

physical

Conclusions

Where do I start?

Where do I start?

Affordances to manage starting points Progressive disclosure to manage complexity

Allow for implicit checking & error correction

Technical solutions to technical problems

Context

Which cable? where?

Consistency

Consistency

Ensure consistency let users check this

Thank you