Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Eye Tracking the Mobile UX - What you Need to Know


Published on

talk at MoDevUX on May 19, 2014

It is important for mobile app and website designers to test their products with typical end users to ensure the products work as intended and that an optimal user experience (UX) is provided. What many designers do not know is that getting user feedback, including understanding what users look at while using a product, is not as difficult as it once was. Modern technology has made this technique quite simple and affordable.

User experience testing of mobile devices with typical end users can be conducted in many ways, including remotely, in-the-field, and in-the-lab. A benefit of in-lab testing is the ability to conduct eye tracking to assess elements of the product that are engaging or that are ignored. In this workshop, you will learn about modern eye tracking of mobile devices and the basic things you need to know to understand your users. We will discuss common issues that we frequently discover and ways to prevent these common mistakes in your designs. We will conduct a live mobile usability test! Attendees will learn about the various methods to collect user data and the pros and cons of each.

  • Login to see the comments

Eye Tracking the Mobile UX - What you Need to Know

  1. 1. Eye Tracking the User Experience of Mobile: What You Need to Know Jennifer Romano Bergstrom, David Hawkins, Jon Strohl, Jake Sauser May 19, 2014 MoDevUX| McLean, VA @forsmarshgroup @gomodev
  2. 2. 2 @forsmarshgroup #modevux Technology Revolutions %ofAmericanadults 90% of American adults have a cell phone 58% have a smartphone 42% have an tablet 32% have an e-reader
  3. 3. 3 The % of cell phone owners who use their cell phone to… @forsmarshgroup #modevux
  4. 4. 4 %ofAmericanadults%ofAmericanadults Cell Phone Activities @forsmarshgroup #modevux
  5. 5. 5 Nielsen: The Cross-Platform Report, Quarter 2, 2012-US @forsmarshgroup #modevux
  6. 6. 6 Eye tracking paperCompare the UX across devices @forsmarshgroup #modevux Tablet App Homepage Tablet Web Homepage Android App Homepage
  7. 7. 7 Examine specific features @forsmarshgroup #modevux
  8. 8. 8 Krug, S. (2000) Don‟t Make Me Think. Pearson Education *NEW 3rd Edition (2014)* What we design for…and reality @forsmarshgroup #modevux
  9. 9. 9 He, Siu, Strohl, & Chaparro (2014). Mobile. In Romano Bergstrom & Schall (Eds). Eye Tracking in User Experience Design. Morgan Kaufmann. Users read what they need to read @forsmarshgroup #modevux
  10. 10. 10 OBSERVATION AL + Ethnography + Time to complete task + Reaction time + Selection/click behavior + Ability to complete tasks + Accuracy IMPLICIT + Facial expression analysis + Eye tracking + Electrodermal activity (EDA) + Behavioral analysis + Linguistic analysis of verbalizations + Implicit associations + Pupil dilation EXPLICI T+ Post-task satisfaction questionnaires + In-session difficulty ratings + Verbal responses + Moderator follow up + Real-time +/- dial UX Data @forsmarshgroup #modevux
  11. 11. Traditional UX research is good at explaining what people say and do, not what they think and feel. Why should we measure implicit? @forsmarshgroup #modevux
  12. 12. 1212 Implicit data 12 6 6.5 7 7.5 8 8.5 9 00:00.00 00:07.50 00:15.00 00:22.50 00:30.00 00:37.50 00:45.00 00:52.50 Begin date and time selection. End date and time selection. Trouble with scrolling. More trouble with scrolling. Implicit data @forsmarshgroup #modevux
  13. 13. 13 Modern eye tracking Mobile Eye Tracking
  14. 14. 14 Mobile low-fi paper prototypes @forsmarshgroup #modevux
  15. 15. Match icon functionality across devices. 15 • “I‟m going to click on it, but it's not doing anything. That is annoying.” • “Do these not work?” UX Best Practice: Reduce the amount of non-clickable real estate on the homepage. Focus on making icons and images clickable. This will help the homepage feel more intuitive as users expect icons and images to function as active links. Logo should link to the homepage, similar to the way logos work on websites. Clicks along the bottom of the PC homepage showing that participants expected the icons to be working links. Homepage on the iPad website does not display the clickable links below each icon. @forsmarshgroup #modevux Icon functionality across devices
  16. 16. Issue: Vague error messages increase visual workload. 16 UX Best Practice: Specifically explain the error, and place the messages near where the error occurs so the user can quickly fix the error and move on. • “How do I advance to the next screen?” • “It seems like it's stuck on the screen.” M Gaze Plot: After getting an error message, the participant had to search all over the screen to find the missing field. @forsmarshgroup #modevux Vague error messages
  17. 17. Keyboards may block important text fields. 17 UX Best Practice: Design the layout of the page such that important functions are always visible while the keyboard is open. 0 1 2 3 4 5 6 7 8 9 10 Tablet PC Smart Phone NumberofiPadWebParticipants Tablet Web Users: Least Favorite Device @forsmarshgroup #modevux Keyboards
  18. 18. Issue: The ‘Back’ button is not consistent. 18 UX Best Practice: Make the location of the „Next‟ button consistent across all devices by placing it in the lower right corner. This will assure users that their selections will be saved and promote a sense of linear progression. • “I was expecting „Next,‟ but I guess I have to push „Back.‟” • “It was hard to get confidence that I was proceeding in the right way.” • “It didn't seem to flow, if you will—you had to go back and forth.” @forsmarshgroup #modevux Inconsistent button location across devices
  19. 19. Issue: The location of ‘Next’ is not intuitive. 19 * Couper, M.P., Baker, R., & Mechling, J. (2011). Placement and Design of Navigation Buttons in Web Surveys. Survey Practice, 4(1). • “Where and how you click is a bit counter-intuitive. [It‟s] not super obvious which button to click to get to next sections.” • “I feel like the „Next‟ should be at the bottom and not the top.” UX Best Practice: Users expect consistency and for navigation buttons to be close to the last entry field.* Place all „Next‟ and navigation buttons near the last entry fields. Intuitive „Next‟ button location Non-intuitive „Next‟ button location @forsmarshgroup #modevux (Non) Intuitive navigation
  20. 20. Issue: Workload is high when searching for entries. 20 UX Best Practice: Follow users‟ mental model: Arrange previous entries with the most recent at the top. @forsmarshgroup #modevux Ordering content
  21. 21. 21 Assess the UX across devices • Not necessarily the same UX across all devices • Different issues occur • Match user expectations and product objectives • Conduct UX testing with real users @forsmarshgroup #modevuxAssess the UX across devices
  22. 22.
  23. 23. 23 @forsmarshgroup #modevux Info: Register:
  24. 24. 24 @forsmarshgroup #modevux
  25. 25. Thank you! • Twitter: @forsmarshgroup • LinkedIn: • Blog: Jennifer Romano Bergstrom @romanocog MoDevUX | McLean, VA