Your SlideShare is downloading. ×
Website Usability & Eye-tracking by Marco Pretorious (Certified Usability Analyst)
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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!! …

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
1 Comment
1 Like
  • More of my presentations available here:
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Usability and Eye Tracking Marco Pretorius 31 August 2011
  • 2. Agenda• Introduction – Usability – User experience• Eye tracking• Usability lab• Quick usability test example• Usability and Eye tracking examples• Questions
  • 3. Usability
  • 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. “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. 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. 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. 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. Eye tracking
  • 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. Eye tracking• Used in – Psychology and Neuroscience • Reading – Disabled users – control – Marketing research – Advertising – User experience and usability testing
  • 12. Usability lab
  • 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. Nelson Mandela Metropolitan University
  • 15. UNISA
  • 16. 29
  • 17. University of Leuven (Belgium)
  • 18. Quick usability test example NuMetro mobile site
  • 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. Quick usability test example NuMetro mobile site Task 1: What is showing in your area? (Aimed at: Not regular user)
  • 21. Quick usability test example NuMetro mobile site Task 2: What is showing at Canal Walk? (Aimed at: movie buff)
  • 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. Usability and eyetracking examples
  • 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. 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. Eye tracking results: Task 1
  • 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. 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. 50
  • 30. Library• Finding books in your name – Video – gaze plot animation
  • 31. International study with Concept7 (Netherlands)
  • 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. Usability and eyetracking examples
  • 34. Mobile eye tracking• Examples
  • 35. Usability and eyetracking examples
  • 36. Shopping example• Play video
  • 37. IPad example• Play video
  • 38. Safari example• Play video
  • 39. E-Government
  • 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. Conclusions
  • 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. Questions?Marco