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.

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 something
works 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)

9. 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

10. 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

11. Eye tracking

12. 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

15. Eye tracking
• Used in
– Psychology and Neuroscience
• Reading
– Disabled users – control
– Marketing research
– Advertising
– User experience and usability testing

24. Usability lab

25. 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

26. Nelson Mandela
Metropolitan
University

28. UNISA

29. 29

31. University of Leuven
(Belgium)

35. Quick usability test
example
NuMetro mobile site
http://m.numetro.co.za

36. Quick usability test
example
NuMetro mobile site
http://m.numetro.co.za
Typical user: Everyone…no!
Example:
- Movie buff (1 movie a week)
- Movie enthusiast (1 movie a month)
- Not regular (1 movie a year)

37. Quick usability test
example
NuMetro mobile site
http://m.numetro.co.za
Task 1: What is showing in your area?
(Aimed at: Not regular user)

38. Quick usability test
example
NuMetro mobile site
http://m.numetro.co.za
Task 2: What is showing at Canal Walk?
(Aimed at: movie buff)

39. Quick usability test
example
NuMetro mobile site
http://m.numetro.co.za
Task 3: Book a ticket for Jock of the
Bushveld at the Waterfront (tomorrow
around 5pm)?

40. Usability and eye
tracking examples

41. 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

42. Learning Management System
Task example: Submit a PDF file
• Task completion: 70%
• Assistance needed: 40%
• Errors made: 100%
• Median task completion time: 115.60 seconds
• Play video: (PDF)

43. Eye tracking results: Task 1

46. 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

47. College website results
Task: 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

50. 50

51. Library
• Finding books in your name
– Video – gaze plot animation

52. International study with
Concept7
(Netherlands)

53. 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
Booking.com
• 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

57. Usability and eye
tracking examples

58. Mobile eye tracking
• Examples

63. Usability and eye
tracking examples

64. Shopping example
• Play video

65. IPad example
• Play video

66. Safari example
• Play video

67. E-Government

68. Cape Gateway website
• www.capegateway.gov.za
• 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

71. Conclusions

72. 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

73. Questions?
Marco Pretorius
marco.pretorius@gmail.com