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.

Website Usability & Eye-tracking by Marco Pretorious (Certified Usability Analyst)


Published on

Things to consider when designing a website to make your site visitor's life easier!!

Note: There were some videos which were show to illustrate a point, however the presentation provides sufficient information and suggestion so you will not miss them.

Published in: Design, Technology
  • More of my presentations available here:
    Are you sure you want to  Yes  No
    Your message goes here

Website Usability & Eye-tracking by Marco Pretorious (Certified Usability Analyst)

  1. 1. Usability and Eye Tracking Marco Pretorius 31 August 2011
  2. 2. Agenda• Introduction – Usability – User experience• Eye tracking• Usability lab• Quick usability test example• Usability and Eye tracking examples• Questions
  3. 3. Usability
  4. 4. What is usability?• Usability is a quality attribute relating to how easy something is to use • (Nielsen and Loranger, 2006)• ISO9241-11: Usability is the – effectiveness – efficiency and – satisfaction – with which specified users – achieve specified goals – in particular environments
  5. 5. “Usability really just means making sure that somethingworks well:• that a person of average (or even below average) ability and experience• can use the thing• – whether it’s a website, a fighter jet, or a revolving door –• for its intended purpose without getting hopelessly frustrated.”-Steve Krug (2000)
  6. 6. What is user experience?• Making products and services that are not only usable but also useful and appealing • (Schaffer, 2004)• Includes customer service, branding, marketing• User experience takes a broader view, looking at the individual’s entire interaction with something, as well as the thoughts, feelings and perceptions that result from the interaction • (Tullis and Albert, 2008)• Differentiating factor from more traditional usability work is a wider end goal: – not just achieving effectiveness, efficiency and satisfaction – but optimising the whole user experience from expectation through actual interaction to reflection of the experience • (Bevan, 2009)
  7. 7. What is usability?• Effectiveness – Can users achieve what they need by using the product?• Ease of learning – How fast can a user who has never seen the interface learn to use it?• Efficiency of use – How fast can users complete the task?• Memorability – Can users remember enough to reuse the interface effectively?• Error prevention – Can users complete tasks without making errors?• Satisfaction – How much does the user like using the system? – User’s feelings, motivations, values – Trust
  8. 8. What is usability testing?• Usability testing involves – measuring the performance of users on tasks with regard to • the ease of use, • the task time, and • the user’s perception of the experience • of the product, software application, website or system – Based on Performance – Purpose: Feedback
  9. 9. Eye tracking
  10. 10. Eye tracking• A technique to determine eye movement and eye fixation patterns of a person• The human eye moves by alternating between • Saccades • Quick movement of the eye • Move focus from one area to the next • Fixation • Time spent looking at the newly found area
  11. 11. Eye tracking• Used in – Psychology and Neuroscience • Reading – Disabled users – control – Marketing research – Advertising – User experience and usability testing
  12. 12. Usability lab
  13. 13. Usability lab• A usability laboratory is a state-of-the-art facility designed to support the observation of Human Computer Interaction (HCI)• Users are brought into a controlled environment, in which they are asked to do specific tasks within specific timeframes• Evaluators – observe the problem(s) the participant might have – videotape the participant – analyse the data
  14. 14. Nelson Mandela Metropolitan University
  15. 15. UNISA
  16. 16. 29
  17. 17. University of Leuven (Belgium)
  18. 18. Quick usability test example NuMetro mobile site
  19. 19. Quick usability test example NuMetro mobile site Typical user: Everyone…no! Example: - Movie buff (1 movie a week) - Movie enthusiast (1 movie a month) - Not regular (1 movie a year)
  20. 20. Quick usability test example NuMetro mobile site Task 1: What is showing in your area? (Aimed at: Not regular user)
  21. 21. Quick usability test example NuMetro mobile site Task 2: What is showing at Canal Walk? (Aimed at: movie buff)
  22. 22. Quick usability test example NuMetro mobile site Task 3: Book a ticket for Jock of the Bushveld at the Waterfront (tomorrow around 5pm)?
  23. 23. Usability and eyetracking examples
  24. 24. Learning Management System• Participant Profile – Full-time UNISA students who have to submit assignments online – 10 participants – 5 male, 5 female – 7 different languages – 5 expert, 5 non-expert Web users
  25. 25. Learning Management SystemTask example: Submit a PDF file• Task completion: 70%• Assistance needed: 40%• Errors made: 100%• Median task completion time: 115.60 seconds• Play video: (PDF)
  26. 26. Eye tracking results: Task 1
  27. 27. College website results• The usability of a College website on the university’s information portal• Participant Profile – Prospective and current students as well as academic and administrative staff – 15 participants – 5 prospective, 5 current and 5 staff members – 10 male, 5 female – 9 different languages – 8 proficient; 7 competent
  28. 28. College website resultsTask: Find the webpage of the College• Only 6 participants found page on 1st attempt – 5 proficient participants• Median time to find it – Proficient participants 37.1 s – Competent participants 62.9 s• Show video• Heat maps
  29. 29. 50
  30. 30. Library• Finding books in your name – Video – gaze plot animation
  31. 31. International study with Concept7 (Netherlands)
  32. 32. International Study – Concept 7 • Consumers’ information needs on e-commerce websites – Question are there are cultural differences in this respect? – Can a website simply be copied and translated? • Research took place in 6 different countries – SA, Germany, UK, Netherlands, France, Colombia • In every country 30 people performed a task on the website • Data was collected through eye tracking and a questionnaire • In South Africa they pay much more attention to product specifications than in any other country investigated • In South Africa they pay much more attention to prices and promotions than all other countries except Germany
  33. 33. Usability and eyetracking examples
  34. 34. Mobile eye tracking• Examples
  35. 35. Usability and eyetracking examples
  36. 36. Shopping example• Play video
  37. 37. IPad example• Play video
  38. 38. Safari example• Play video
  39. 39. E-Government
  40. 40. Cape Gateway website•• V1 enhancements• V2 in process (Drupal platform) – User centered design and agile process • Surveys • Focus groups • Information Architecture • Wireframes • Design • Usability and eye tracking testing – Phased and iterative roll-out
  41. 41. Conclusions
  42. 42. Conclusions• Who is using your website/system? • Design around the user• A few of the benefits: • Reducing design cycles • Avoid building unnecessary functions • Avoid wasted development time • Increasing sales • Avoiding “reinventing the wheel (reusable templates) • Avoiding disasters • Increase customer satisfaction• If we don’t… • Play video
  43. 43. Questions?Marco