using eye tracking to redesign your interface - lesley kew

people

Using Eye Tracking to Redesign User Interface Text

Lesley Kew

Lesley Kew

[email protected]

Copyright Intuit Corporation. Lesley Kew

Lesley KewSenior XD Writing Manager, QuickBooks Ecosystem

2

About me


Eye tracking:•I’ll give you a quick tour of eye tracking•I’ll show you what we discovered when we tested our in-product text:-What people really see-What they ignore

•You’ll leave here with some design patterns based on our eye tracking•You’ll know how to make the business case for eye tracking

3

Here’s what I’ll be talking about today

Copyright Intuit Corporation. Lesley Kew4

My team at Intuit creates all the in-product content for QuickBooks

UI TextFirst-Time Use Design

Websites

Support Content

Videos

User Guides


At Intuit, writing is about design.

5


We design the end-to-end content experience

Buy

First-Time Use

Usage

Help

Support


Net Promoter scores are 40 points higher when we answer questions in the workflow

7

Primary Content

It’s right in the UI

Secondary You hover over it to get to it

Tertiary You have to search for it

ExternalGo to a site and search

for it

Call Support

As users move further away from the workflow, they get more stressed and frustrated.

When we prevent questions our net promoter scores=40

If customers have to call support, net promoter = -2


Doing this content work is a lot like tuning an engine.


The first moment in the user experience usually starts with something like this


People are happiest when they purchase


They see their own data


Joy!


But then they run into trouble: Welcome to the wall of words!


We write content, but sometimes users don’t see it, even when it’s in front of them.

15

The problem…


Stressed people are less able to absorb new information.

*Distraction Theory: Stressed people are less able to absorb new information.

*Attentional Control Theory: Stressed people are less able to focus too!

16

Because…


Struggle: It’s only cute in bulldogs


We did eye tracking in the areas where customers tended to need help the most

SupportUsage Messaging Help


You’ve created great content, so why are your

users still struggling?

19


You’ve created great content, so why are your

users still struggling?

20


Do people actually see our content?We used the Tobii eye tracker to find out

22

Introducing our eye tracker

Hi!


The eye tracker can see you looking at it

Tip your head sideways,

and they move

Yes, those really

are your eyes


You create the test on a timeline

It’s easy.

Just drag content

to the timeline.


Heat maps: Colored spots show areas that get viewed the most


Opacity Map: Show just the things people look at

The reverse of a heat map. Areas that weren’t viewed get blacked out.


Gaze plots tell you the viewing order


Time info tells you how long you’ve looked at the screen


• Error messages• Knowledge content• Help content• First-time use content

29

We eye tracked the content which drove the most support calls


Errors


Errors: Some tell you things are fine


Some are offering help


Some are telling you that disaster is ahead

These are the messages most likely

to produce calls.


But ours used to all look like this, yawn


And users were missing the point


We eye-tracked a typical message in the middle of a workflow


Here’s what people actually saw


What eye tracking tells us: Users skip the message and go to the action button

Our users didn’t read the whole message. They scanned right down to the action button and moved on.


We refreshed the content, and added some fonts and layout


Different fonts and more info: The user reads more of the message

More of this message was read by users.

People look at the button first, then review the message


Does adding a photo increase engagement?

We know people like photos. Does it make a difference in engagement?


Does adding a photo increase engagement? Not really.

Users looked at the header line a little longer.

But they still went to the action button.


What happens when we add a graphic?


What happens when we add a graphic? The graphic gets all of the attention


When a user actually reads the message:

10 – 32 seconds

When they ignore the message: 2-4 seconds.

45

How long do users spend reading error messages?


People read buttons first, then they read the rest of

the message.

They read the body text

last, and only after reading the button.

Messages: How people read messages

They skim the left margin

The headline surprises them

enough to keep them on

the page


Make buttons descriptive: ‘Yes, save my changes’, ‘No, don’t save

my changes’

Vary fonts and bolding.

This headline works because it draws them to the page.

Messages: Ways to use this info

Bullets and bolding

work.


Buttons are expensive

Buttons that describe what will happen are ideal. But they tend to be expensive to build.

More descriptive buttons means less

body text.


Help and Knowledge Base Content


KBs and Help: Users are a happier if they can answer their own questions

But getting them to engage with the content is a big challenge.


How do we get people to want to look at our this content?


How fast can we get users to see the answer to a question?

And can we get people of focus long enough to see the content they’re looking for?

55

KBs and Help: End-to-end test


We start them off by giving them a problem


Help: People viewed this for an average of 17 seconds

Traditional help: People found the answer.


A closer view


Traditional KB

The answer is right here.


Traditional KB. Users didn’t see the answer, but liked the format

Users didn’t see the answer, but they liked

this KB more


Warm and friendly KB: What if we make the text friendlier, and add a photo?


“Wow. This page is overwhelming.” -User

Users saw the answer, but were so overwhelmed by the page they clicked out in

6.78 seconds.

They liked the photo, but found it distracting.


We tried putting a video on the KB

About half of the users would have watched this. Everyone saw it though.


What we learned:Treat KBs like part of the UIEliminate distractions. “There’s too much going

on this page.”

Embrace white space. “This is the only page I’d

come back to.”

Use video carefully. Video works for some folks, not everyone.


If users designed a KB, what would it look like?


Here are some things that worked really well


What about UI text?

Users read it once – when they first use the product.

Intuit Proprietary & Confidential

UI text: After first use, the user’s data is the star of the show

68

First-time users see the UI text.

This is the user’s own financial info. No wonder they find it more interesting than my text!


In menus, yes

• No verbs, 32 seconds Verbs, 27 seconds

69

Other cool things: Are verbs faster? Use verbs in menus, speed things up 15%


First Time Use bubbles: They work!


• Constructing test: 1 hour. I create a group of tests. • Recruiting candidates: It depends on number of

candidates. I’m lucky. We’ve got recruiters.• Running tests: Number of participants x 45 minutes each. I run a group of tests. I schedule 45 minutes per person. And typically, I’ll have someone take about 5 tests.• Data analysis: A few hours per test batch. You can spend

a lot of time here because the data is fascinating.

71

Designing and running a test:How long does this take?


Data that helps:• Where’s your big customer problem? • What does it cost you in support calls per year?• Estimate the savings: You can probably save 5 - 10% of

support calls by fixing messaging/help/kb problems.• So, if you spend $100k on support calls every year on a

certain problem, you can estimate that you can save $5,000 -10,000 by doing eye tracking and fixing the problem.

72

How to make the argument for this


That’s it.

Any questions?

73


Lesley [email protected]

74

Questions?


• Distraction theory: Ashcraft & Kirk, 2001; Baumeister, 1984;Beilock & Carr, 2005• Attentional Control Theory; Eysenck et al., 2007

75

Appendix: Distraction and Attentional Control Theories

using eye tracking to redesign your interface - lesley kew

Marketing

workflowcopyright intuit

layoutcopyright intuit

bulldogscopyright intuit

mostcopyright intuit

sawcopyright intuit

timelinecopyright intuit

aheadcopyright intuit

finecopyright intuit