WE05 Eye Tracking the User Experience

Lisa Herrod Web Essentials 05

Lisa Herrod Web Essentials 05

This presentationEyeTracking in Usability Testing

User Based Evaluations

EyeTracking Examples

Case Studies

What makes a site usable?

LEARNABILITY,MEMORABILITY,EFFECTIVENESS,EFFICIENCY,SATISFACTION,ICAN’TGETNO,ERRORS,DANANA,CONSISTENCY, ANDLOTSMORE

What makes a site usable?

• Current standards and best practice• Consistent design• Accessibility• Relevant to user needs• Focused

Designing with User Focus

ImprovesUsabilityAccessibilityEase and efficiency of task completionUsers’ satisfaction and confidence on site

Two ways to design

1. Designing with usability principals2. Evaluating your designs for usability

Two ways to design 1. Designing with Usability

Usability experts and users involved in the design process

Two ways to design 2. Usability Evaluation

Usability experts and users evaluate product at key stages

Two Case Studies1. Blue Scope Steel

2. Australian Wool Innovation

Methods of Testing• Surveys and questionnaires• Focus Group• Expert Review• Compliance Review• EyeTracking Study • User Based Evaluation

User Based Evaluation• 6-8 users per primary demographic• Users work through a task list• User actions and feedback combined with

Usability ‘heuristics’ • Reporting of issues and recommendations

Blue Scope Steelusability evaluation

Wooldesigning with

usability

Australian Wool Innovation• Comparative evaluation: 3 Designs• Key Focus: Navigation and Labelling• One-on-one user based evaluation• 6 participants• Primary demographic: Members of site• Balance Male / Female

Wool: Design 3

Wool: Design 3

Wool: Design 2

Wool: Design 2

Wool: Design 1

Wool: Design 1

EyeTracking

Imagine if you could see your site through the eyes of the user from concept to completion…

EyeTracking ApproachEye-tracking and on the spot interview

Qualitative in-depth

discussion

Qualitative observation and context

EyeTracking• Usually in conjunction with a UBE

• Compliments User Based Evaluation

• Provides additional information

• Objective, visual deliverables

EyeTracking• One to one In-depth discussions

• Typical length is 1 hour

• Allows for a ‘stream of consciousness’

to come through

• EyeTracking is combined with qualitative research of UBE

• Objective, visual outputs of – Viewed site designs– Attention paid to page elements– User interactions

Overall Approach

Let’s see how it works…

Lab

camera

Near-infrared beams allow camera to accurately track eye behaviour

Participant tracked

Calibration Matrix

Calibrating Eye to Screen

… note ‘white spot’ on pupil

A Bit of Pub Trivia

(like you’re ever going to get this at your local…)

ET Trivia

Initial methods for tracking the actual

location of eye fixations involved direct

mechanical contact with the cornea…

Example EyeTracking Outputs

Scan Paths

Marking up for 3D graphs

3D graphs

Contour Map

Two More Case Studies

1. Side by Side NavigationHudson, Firminger & Weakley

2. WorkCover NSW

Side by Side navigation

Side by Side - open

Side by Side Navigation – Scan Path 1

Side by Side Navigation – Scan Path 2

Side by Side Navigation – Scan Path 3

WorkCover NSW

WorkCover NSW - Home

5 Areas of navigation

WorkCover NSW - Cascading Menu

5 Areas of navigation

WorkCover NSW - Dropdown Menu

5 Areas of navigation

WC-ET Crosshair

WC- No ET

Scan Path tracks eye movements

Workcover NSW – Dwell Times

Workcover NSW – Contour Map

Thankyou…I’ll be here for the next couple of days, but feel free to contact me any time at:

[email protected]