Eye Tracking in User Experience Design

Transcription

1 Eye Tracking in User Experience Design Jennifer Romano Bergstrom, Ph.D Andrew Jonathan Schall i'p-&>,' JDIIL ELSEVIER AMSTERDAM BOSTON HEIDELBERG LONDON NEW Y0RK * OXFORD * PARIS * SAN DIEGO SAN FRANCISCO SINGAPORE SYDNEY TOKYO Morgan Kaufmann is an imprint of Elsevier M<

2 CONTENTS ACKNOWLEDGMENTS ABOUT THE EDITORS LIST OF CONTRIBUTORS FOREWORD xiii xv xvii xix Section 1 Overview of Eye Tracking and Visual Search CHAPTER 1 Introduction to Eye Tracking 3 What Is Eye Tracking? 3 How Eye Tracking Works 3 What Eye Trackers Can and Cannot Tell Us 6 Location 6 Duration 7 Movement 8 Eye Tracking Past and Present 9 MedievalTorture Devices and Early Eye Trackers 9 Maturity of EyeTracking into a User Experience Research Tool 11 Hardware Designed for Quick and Easy Data Capture 13 Participant Friendly 14 Analysis Software Designed for User Experience Researchers 14 EyeTracking Can EmpowerYour DesignTeam 18 Gaining Insights from Eye Gaze 20 See Where People Looked, Not Where They Think They Looked 20 Determining the Effectiveness of a Visual Hierarchy 20 Conclusion 25 Acknowledgments 25 References 25 vii

3 CHAPTER 2 Visual Search 27 Introduction 27 How Do We Visually Search for Information on Web Pages? 28 What Does Visual Search Look Like? 30 AreThere DifferentTypes ofvisual Search? 34 Visual Search Behavior of SERPs 35 Can Images of Faces Impact Our Search Behavior More Than OtherTypes of Images? 37 What is Banner Blindness, and Why is it Important? 38 The Road Ahead for Designing Visual Search Experiences 42 References 43 Evaluating the User Experience I 3 Usability Testing 49 Introduction 49 Incorporating EyeTracking in Usability Testing 51 Eye-Tracking Data Provides a Comprehensive Picture of Users' Experience and Can Help Inform the Design 55 Fixations and Saccades 56 Areas of Interest (AOIs) 57 Gaze Opacity and Heat Maps 61 Gaze Plots 64 Communicating Usability Results More Effectively with Clients 67 EyeTracking Can Convince Clients to Make Design Changes to Improve Usability 68 Eye-Tracking Visuals Can Aid in the Effort for User-Centered Design 70 Considerations and Drawbacks with EyeTracking in Usability Studies 72 Time 72 Analysis Software 73 Think Aloud, Age, and EyeTracking 75 Conclusion 77 Acknowledgments 78 References 78 Physiological Response Measurements 81 Introduction 81 Dimensions of Physiological Response Measures 83 Subjective versus Objective 83 Real Time versus Delayed 85 Natural Context versus Artificial Lab 87 Invasive versus Non-Invasive 88 Practicality of Incorporating Biometrics 89 Physiological Response Measurement in UX 89 Pupil Dilation 89 Facial Emotion Recognition 93 Skin Conductance 95 Neuroimaging: EEG 98

4 Measuring Valence 105 Conclusion 105 Acknowledgments 106 References 106 Eye Tracking for Specific Applications CHAPTER 5 Forms and Surveys 111 Introduction 111 Forms and Surveys Have a Lot in Common 112 Some Examples of What We Can Learn from Eye Tracking Forms and Surveys 114 People Read Pages with Questions onthem Differently from Other Pages 114 People Look for Buttons Near the Response Boxes 118 People Fill in Forms More Quickly if the Labels Are Near the Fields 120 Users Get Confused about WhetherThey Are Supposed to Write Over ExistingText 122 Users May Miss Error MessagesThat Are Too Far from the Error 122 Double-Banked Lists of Response Options Appear Shorter 126 When Eye Tracking of Forms and Surveys Works (and When it Does Not) 127 Gaze and Attention Are Different 129 Slot-In Answers: Gaze and AttentionTogetherToward Questions 131 Gathered Answers: Gaze and Attention Split 131 Created Answers: Gaze Toward Questions, Attention Elsewhere 132 Third-Party Answers: Gaze and Attention Elsewhere 133 Conclusion 136 Acknowledgments 137 References 137 Information Architecture and Web Navigation Introduction 139 Methods to Evaluate IA 139 EyeTracking to Evaluate Navigation in Context 141 Primary Navigation 142 Why Users Should Not Spend MuchTime Looking at Navigation 143 Subnavigation 145 Breadcrumb Navigation 148 Contextual Navigation 149 Utility Navigation 151 Dynamic Menus 155 Visual Hierarchy and Grouping 157 Evaluating the Visual Hierarchy of Navigational Elements Measuring Navigation Usability 159

5 x Contents Conclusion 162 References 162 CHAPTER 7 Web Content 163 Hunting and Gathering: Information Foraging and Information Scent 163 How Many Words Do Users See? 164 What Words Do Users Look At? 165 See IfYour Content Is Causing Confusion 166 How Do Users Read Online? 166 Reading versus Scanning 167 Standard Scanning Patterns 168 Vertical Attention 169 Horizontal Attention 170 The Chicken andthe Egg 170 Mobile Content 170 Writing fortheway We Read 171 The Lead 171 The Body 172 The Ending 172 Designing Effective Web Content 172 Visual Hierarchy 173 White Space 173 Front Loading 174 Headlines 175 Headings and Subheadings 175 Paragraph Text 175 Justifying Text 176 Lists 177 Numerals 178 Image Captions 178 Fonts and Typography 179 Colors, Contrast, and Emphasis 181 Conclusion 183 References 183 E-commerce Websites 187 Introduction 187 Types of E-commerce Sites 189 Measuring Interactions 195 Commerce 196 User Experience 197 Conceptual Models for Designing, Analyzing, and Interpreting EyeTracking 198 UserTypes and Models 203 Design of Eye-Tracking Studies for E-commerce 204 Considerations Prior to Data Collection 205 Approaches to Data Analysis of E-commerce Websites 207 Visualizing the Results of an E-commerce Study 209 So How DoesThis Help Me Sell Socks? 212 Conclusion 215 References 216

6 ts xi CHAPTER 9 Social Media 217 Introduction 217 Why User ExperienceTesting of Social Media Is Important for Brands 218 Model of Visual Attention 218 Facebook 221 Research Findings 224 Making Elements Work fortheir Place on the Page 231 Content Hot Spots: Maximize Content Exposure Using Attractors, Directors, and Informers 232 Cover Crafting: Getting the Most Out of Cover Photos 237 Out with the Old In with the...timeline? 237 Summary for Facebook 240 Google+ 241 Summary for Google+ 243 YouTube 243 Summary foryoutube 245 Linkedln 245 Summary for Linkedln 247 The Future for Social Media 248 TenThings Every Community Manager Should Know Make Elements Work fortheir Place on the Page Content Hot Spots-Maximize Content Exposure Using Attractors Get the Most Out of Cover Photos Give the Fans WhatThey Want Strategically Position Content Use Constructs That Are Familiar to Users Use Imagery to Highlight Key Information Consider Page Structure Personalize Elements Use Ads "Right" 251 Conclusion 251 References 252 CHAPTER 10 Mobile 255 Introduction 255 What Can EyeTrackingTell us About Mobile Design? 258 The Mobile User Experience 258 Mobile Device Size Impacts the UX 259 Mobile Device EyeTracking in Action 263 EyeTracking whentesting a Log-In Page on Mobile Apps 263 EyeTracking the Core Features of a Mobile App 264 EyeTracking Mobile User Experiences across Multiple Devices 269 EyeTracking WhenTesting e-readers 273 TheTechnology Behind EyeTracking Mobile Device Usage..280 Setting Up a Mobile Eye-Tracking Study 284 Analyzing Mobile Eye-Tracking Data 286 Conclusion 287 References 288

7 CHAPTER 11 Gaming 291 Introduction 291 Two Roles of EyeTracking in Video Games 292 Relevant Game Design Elements for UX EyeTracking and Challenges 295 Menu 295 Cutscenes 297 Overlays 298 Gameplay 300 Common Eye-Tracking Research Questions and Analysis Techniques in Video Games 303 Defining the Research Questions 303 Conclusion 308 References 309 EyeTracking with Unique Populations HAPTER 12 Older Adults 313 Introduction 313 Website Navigation and Search Behavior of Older Adults Conducting UX Research with Older Adults Include Large Groups of Older andyounger Participants Collect Demographic Data Slow Down 324 Conclusion 324 References Low Literacy Users 331 Introduction 331 The Impact of Literacy on Web Use 332 The Value of EyeTracking When Designing for Low Literacy 333 Conclusion 346 References 346 Conclusion The Future of EyeTracking and User Experience Integrating EyeTracking into User-Centered Design Methodology 351 Continued Improvements to Eye-TrackingTechnology 353 The Future of the Eye-TrackingTechnology 355 Ubiquitous EyeTracking 359 Taking the Next Step 359 References 360 GLOSSARY 361 INDEX 367