Using Eye Tracking To Redesign Your Interface - Lesley Kew

people

Using Eye Tracking to Redesign User Interface Text

Lesley Kew

lesley_kew@intuit.com

Copyright Intuit Corporation. Lesley Kew

Lesley KewSenior XD Writing Manager, QuickBooks Ecosystem

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

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.

We design the end-to-end content experience

First-Time Use

Support

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

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

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.

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!

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?

You’ve created great content, so why are your

users still struggling?

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

Introducing our eye tracker

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

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.

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

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?

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

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

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.

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.

How to make the argument for this

That’s it.

Any questions?

Lesley KewLesley_Kew@Intuit.com

Questions?

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

Appendix: Distraction and Attentional Control Theories

Using Eye Tracking To Redesign Your Interface - Lesley Kew

Marketing

7477 lmctour kew

Efl rgs kew

Physiotherapy Kew

Hak & Kew WN.ppt

How to optimise patient outcomes and system improvements ......2018/09/12 · How to optimise patient outcomes and system improvements by redesign of cancer follow up pathways Lesley

7477 digitalstory kew

KEW Definitions

Lesley Pearse

Property Outlook Kew

Lesley dabell

Lesley 2013

Tatacara Kew

Prestige Kew Gardens

Glazier kew

Lesley Flipbook

Martek - Kew Riverside

Design history kew

C.V Lesley

kew brand guidelines

Lesley Alway