WE05 Eye Tracking the User Experience
-
Upload
lisaherrod -
Category
Economy & Finance
-
view
7.369 -
download
0
description
Transcript of WE05 Eye Tracking the User Experience
![Page 1: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/1.jpg)
Lisa Herrod Web Essentials 05
![Page 2: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/2.jpg)
Lisa Herrod Web Essentials 05
![Page 3: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/3.jpg)
This presentationEyeTracking in Usability Testing
User Based Evaluations
EyeTracking Examples
Case Studies
![Page 4: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/4.jpg)
What makes a site usable?
LEARNABILITY,MEMORABILITY,EFFECTIVENESS,EFFICIENCY,SATISFACTION,ICAN’TGETNO,ERRORS,DANANA,CONSISTENCY, ANDLOTSMORE
![Page 5: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/5.jpg)
What makes a site usable?
• Current standards and best practice• Consistent design• Accessibility• Relevant to user needs• Focused
![Page 6: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/6.jpg)
Designing with User Focus
ImprovesUsabilityAccessibilityEase and efficiency of task completionUsers’ satisfaction and confidence on site
![Page 7: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/7.jpg)
Two ways to design
1. Designing with usability principals2. Evaluating your designs for usability
![Page 8: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/8.jpg)
Two ways to design 1. Designing with Usability
Usability experts and users involved in the design process
![Page 9: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/9.jpg)
Two ways to design 2. Usability Evaluation
Usability experts and users evaluate product at key stages
![Page 10: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/10.jpg)
Two Case Studies1. Blue Scope Steel
2. Australian Wool Innovation
![Page 11: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/11.jpg)
Methods of Testing• Surveys and questionnaires• Focus Group• Expert Review• Compliance Review• EyeTracking Study • User Based Evaluation
![Page 12: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/12.jpg)
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
![Page 13: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/13.jpg)
Blue Scope Steelusability evaluation
![Page 14: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/14.jpg)
![Page 15: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/15.jpg)
![Page 16: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/16.jpg)
![Page 17: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/17.jpg)
![Page 18: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/18.jpg)
Wooldesigning with
usability
![Page 19: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/19.jpg)
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
![Page 20: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/20.jpg)
Wool: Design 3
![Page 21: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/21.jpg)
Wool: Design 3
![Page 22: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/22.jpg)
Wool: Design 2
![Page 23: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/23.jpg)
Wool: Design 2
![Page 24: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/24.jpg)
Wool: Design 1
![Page 25: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/25.jpg)
Wool: Design 1
![Page 26: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/26.jpg)
EyeTracking
Imagine if you could see your site through the eyes of the user from concept to completion…
![Page 27: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/27.jpg)
EyeTracking ApproachEye-tracking and on the spot interview
Qualitative in-depth
discussion
Qualitative observation and context
![Page 28: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/28.jpg)
EyeTracking• Usually in conjunction with a UBE
• Compliments User Based Evaluation
• Provides additional information
• Objective, visual deliverables
![Page 29: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/29.jpg)
EyeTracking• One to one In-depth discussions
• Typical length is 1 hour
• Allows for a ‘stream of consciousness’
to come through
![Page 30: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/30.jpg)
• EyeTracking is combined with qualitative research of UBE
• Objective, visual outputs of – Viewed site designs– Attention paid to page elements– User interactions
Overall Approach
![Page 31: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/31.jpg)
Let’s see how it works…
![Page 32: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/32.jpg)
Lab
![Page 33: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/33.jpg)
camera
![Page 34: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/34.jpg)
Near-infrared beams allow camera to accurately track eye behaviour
Participant tracked
![Page 35: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/35.jpg)
Calibration Matrix
![Page 36: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/36.jpg)
Calibrating Eye to Screen
… note ‘white spot’ on pupil
![Page 37: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/37.jpg)
A Bit of Pub Trivia
(like you’re ever going to get this at your local…)
![Page 38: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/38.jpg)
ET Trivia
Initial methods for tracking the actual
location of eye fixations involved direct
mechanical contact with the cornea…
![Page 39: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/39.jpg)
Example EyeTracking Outputs
![Page 40: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/40.jpg)
Scan Paths
![Page 41: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/41.jpg)
Marking up for 3D graphs
![Page 42: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/42.jpg)
3D graphs
![Page 43: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/43.jpg)
Contour Map
![Page 44: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/44.jpg)
Two More Case Studies
1. Side by Side NavigationHudson, Firminger & Weakley
2. WorkCover NSW
![Page 45: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/45.jpg)
Side by Side navigation
![Page 46: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/46.jpg)
Side by Side - open
![Page 47: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/47.jpg)
Side by Side Navigation – Scan Path 1
![Page 48: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/48.jpg)
Side by Side Navigation – Scan Path 2
![Page 49: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/49.jpg)
Side by Side Navigation – Scan Path 3
![Page 50: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/50.jpg)
WorkCover NSW
![Page 51: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/51.jpg)
WorkCover NSW - Home
5 Areas of navigation
![Page 52: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/52.jpg)
WorkCover NSW - Cascading Menu
5 Areas of navigation
![Page 53: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/53.jpg)
WorkCover NSW - Dropdown Menu
5 Areas of navigation
![Page 54: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/54.jpg)
WC-ET Crosshair
![Page 55: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/55.jpg)
WC- No ET
![Page 56: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/56.jpg)
Scan Path tracks eye movements
![Page 57: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/57.jpg)
Workcover NSW – Dwell Times
![Page 58: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/58.jpg)
Workcover NSW – Contour Map
![Page 59: WE05 Eye Tracking the User Experience](https://reader033.fdocuments.in/reader033/viewer/2022061103/53f208118d7f72104c8b4cfa/html5/thumbnails/59.jpg)
Thankyou…I’ll be here for the next couple of days, but feel free to contact me any time at: