1. ©2008 Regents of the University of Minnesota. Usability Services Lab at the University of Minnesota

2. ©2008 Regents of the University of Minnesota.2 Tour and Demo for the American Distance Education Consortium April 21, 2008 Josh Carroll David Rosen Usability Consultant carr0234@umn.edurose0414@umn.edu Alice de la Cova Usability Services Manager a-dela@umn.edu

3. ©2008 Regents of the University of Minnesota.3 A team in the Digital Media Center within the Office of Information Technology (OIT) The lab itself is sponsored by OIT and the Digital Technology Center (DTC) 5 academic departments are stakeholder partners that benefit from the lab –Computer Science and Engineering –Design, Housing and Apparel –Journalism and Mass Communication –Kinesiology –Writing Studies Background about us:

4. ©2008 Regents of the University of Minnesota.4 Enable a project team to see a user interface design from the user’s perspective i.e. “through the user’s eyes” Our Goal:

5. ©2008 Regents of the University of Minnesota.5 What is Usability? Usability Services’ working definition: Ability of users to accomplish their own objectives without outside help Usability.gov: How well users can learn and use a product to achieve their goals, and how satisfied they are with the process Joseph Dumas and Ginny Redish: How quickly and easily people who use a product can accomplish their tasks

6. ©2008 Regents of the University of Minnesota.6 What Does Usability Measure? It measures the quality of a user’s experience in terms of: –Effectiveness and efficiency –Ease in learning and remembering –Error handling Error-free process Understandable error messages Recoverability –Subjective satisfaction Is the look and feel compatible with the purpose? Do users regard the design as pleasant/satisfying?

7. ©2008 Regents of the University of Minnesota.7 If your web site isn’t usable… User Interface Engineering, Inc.: –People cannot find the information they seek on web sites 60% of the time –People will take 7 seconds before giving up on a site Jakob Nielsen: –Studies show users have a low tolerance for difficult designs or slow sites. –Users don’t want to learn how to use a home page –Users must understand the function of the site and how to navigate it immediately after scanning the home page

8. ©2008 Regents of the University of Minnesota.8 The ROI of Usability Find usability problems early when they are easier and less expensive to fix www.usability.gov: 63% of all software projects overrun their budget or estimate 80% of maintenance cost is due to unmet or unforeseen user requirements Designing good user interfaces is a cost-saving strategy Cost of fixing a problem is 10x more in development than in design Cost of fixing a problem is 100x more in production than in design

9. ©2008 Regents of the University of Minnesota.9 Pull or Push? It is not sufficient for a product or process to be “possible to use”.

10. ©2008 Regents of the University of Minnesota.10 User-centered Design Usability evaluations allow the user’s voice to be heard at the design phase, before the product is developed and delivered to the users.

11. ©2008 Regents of the University of Minnesota.11 Financial Aid Award Notice and Acceptance Web application before usability evaluation

12. ©2008 Regents of the University of Minnesota.12 This is how it looked after design changes:

13. ©2008 Regents of the University of Minnesota.13 Usability Evaluation Basics Recruit 6-8 people from your target audience –Must actually be users or potential users –Not attempting to draw statistical conclusions –We are looking for aspects of the design that are causing problems for users –You don’t need 100 instances of a usability issue to know it’s a problem With 8 users who are representative of your target audience, expect to see about 95% of the issues you would get if you were to add more participants With 6 users, expect to see about 75% of the issues

14. ©2008 Regents of the University of Minnesota.14 Usability Evaluation Basics Evaluators try out the product one at a time while the team watches Evaluators complete some typical tasks using the product

15. ©2008 Regents of the University of Minnesota.15 Usability Evaluation Basics Observers watch and take notes on usability issues We ask the evaluators open-ended debriefing questions afterwards

16. ©2008 Regents of the University of Minnesota.16 Usability Evaluation Basics After the evaluation session is over, we debrief the project team about what they observed

17. ©2008 Regents of the University of Minnesota.17

18. ©2008 Regents of the University of Minnesota.18 What a usability evaluation isn’t … A test of the participants’ intelligence or abilities A critique of the web designer’s ability or talent A prediction of how many users will have a certain usability issue that is discovered through the evaluation process

19. ©2008 Regents of the University of Minnesota.19 Eye-tracking also helps us to “see through the user’s eyes”

20. ©2008 Regents of the University of Minnesota.20 What is Eye-Tracking? Where is the user looking on a computer screen? Not just what’s on the computer screen and where the cursor is Real-time viewing Recording for playback Plot of sequence of locations the user looked at Map of locations where multiple users looked the most

21. ©2008 Regents of the University of Minnesota.21 Early Eye-Tracking Equipment From Popular Mechanics, Nov. 1953

22. ©2008 Regents of the University of Minnesota.22 How Our Eye-Tracker Works Calibrate the eye-tracker to recognize what to expect when the user looks at 9 locations on the computer screen A camera detects light reflections from the user’s eyes.

23. ©2008 Regents of the University of Minnesota.23 The Eye’s Retina To read, we move our eyes so the text is projected on the fovea. To read, we move our eyes so the text is projected on the fovea. (Wikipedia) Fovea Pupil Retina Optic Nerve Fovea: Central part of the retina, extends about 2 degrees out, has most of the cone cells and handles color vision, gives us the sharpest image Parafoveal area: Part of the retina that is 2 to 10 degrees out from the center Peripheral area: More than 10 degrees out from the center

24. ©2008 Regents of the University of Minnesota.24 What does this mean? You can see things with all 3 parts of the retina To read text, you use the fovea You can see there is a picture on the screen by using your parafoveal and peripheral vision, without knowing exactly what’s in the picture What if you see something with your peripheral vision on the right side of a web page and assume it’s an ad?

25. ©2008 Regents of the University of Minnesota.25 What Eye-Tracking Does Shows where on the computer screen you are looking with your central vision (the fovea) Doesn’t show what you see with your parafoveal or peripheral vision Shows what the user read and other things that were interesting enough to look at closely

26. ©2008 Regents of the University of Minnesota.26 Eye-tracker deliverables include recordings, gaze plots and hot spot maps

27. ©2008 Regents of the University of Minnesota.27 How Eye-Tracking Helps with Usability Evaluations Biggest payoff is that the observers understand better what the user is thinking while using the software Some questions don’t come up anymore: Did the user read the instructions? Did the user ever see the “Submit” button? Did the picture distract from the text? Did the user notice the top navigation bar?

28. ©2008 Regents of the University of Minnesota.28 What we can learn from eye-tracking in usability evaluations Where the user looks first When a user doesn’t look at the banners Whether a user looks at images or avoids them When a user reads the same text over and over – Text may be hard to read – Wording may be hard to understand Whether a user ever saw a specific content item What a user looked at before abandoning a web page

29. ©2008 Regents of the University of Minnesota.29 Usability Evaluations vs. Stand-alone Eye-Tracking Studies To have predictive value about where users will look on a web page: –Minimum of 30 users –Valid eye-tracker calibration for each user –User completes tasks silently

30. ©2008 Regents of the University of Minnesota.30 Stand-alone Eye-Tracking Studies Good for predicting where users will look on a web page under certain circumstances We want the user to behave as realistically as possible Good for comparing the effectiveness of several designs in eliciting certain user behavior Examples: –Which version of an ad is most effective in getting the reader to notice the brand name ? –Which version of a search results page is most effective at getting the user to see the sponsored links?

31. ©2008 Regents of the University of Minnesota.31 Considerations for Eye-Tracking Studies Must have a statistically significant sample of participants who have valid eye-tracker calibrations –At least 30 participants to draw conclusions from hot spot maps –Screen participants in advance to increase likelihood of calibration validity –Schedule more participants than needed Need to ensure that the tasks present each participant with the same pages –May need to require that a “forced path” or an exact query be provided to the participant to use in a task

32. ©2008 Regents of the University of Minnesota.32 Other Considerations for Eye-Tracking Studies You won’t learn why a participant looked at a feature on a page, or what the participant thinks about it –Need to interview participants after the eye-tracking session to learn what they think about a design Role of pre-study surveys and post-study surveys or debriefing sessions –Eye-tracking studies to predict where users will look –This might not identify usability issues –It won’t tell you whether participants love or hate a design

33. ©2008 Regents of the University of Minnesota.33 What we can learn from stand-alone eye-tracking studies Determine what gets attention on a design Compare effectiveness of different designs Find out if certain features are getting too much attention Find out where users expect to find certain features Example: Is the search function in the top navigation? Determine if some content is being ignored Example: When text is placed on top of a picture, is it seen?

34. ©2008 Regents of the University of Minnesota.34 Cost Considerations Eye-tracking studies are expensive, because of the large number of participants Usability evaluations can be completed with 8 participants. Don’t invest in an eye-tracking study for a web page until you have identified and resolved usability issues with the page.

35. ©2008 Regents of the University of Minnesota.35 Observations about Web Pages Text and Readability –Users want a page they can scan Not paragraphs of text Get to the point quickly Use headers, white space, bullet-points, tables, etc. to help people scan for information –Users take a lot longer to read small fonts –Misspelled words or acronyms slow users down and force them to re-read text

36. ©2008 Regents of the University of Minnesota.36 Observations about Web Pages Page Titles –Unclear page titles discourage further looks at the page Navigation –Make the left navigation menu items in the same style and left- justify them –Make top navigation menus distinguishable from banner –Don’t rely on mouse-over actions to reveal menus Search –Users rely on layout clues to identify where to look for a search result –Often only the first few words in a search result are read

37. ©2008 Regents of the University of Minnesota.37 Observations about Web Pages Ads and Images –Users avoid looking at anything they think might be an ad Often they think graphical links are ads –Sponsored links or ads in the right navigation are ignored Successful ones use the same style as the rest of the page If information is important, don’t remove it from the center of the page in order to put it in its own box on the right side –Don’t put links or text you want to have read on top of a graphical image

38. ©2008 Regents of the University of Minnesota.38 More Info about Usability Evaluations Recommended: Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests, by Jeffrey Rubin (John Wiley & Sons, Inc., 1994)

39. ©2008 Regents of the University of Minnesota.39 More Info about Usability Evaluations www.usability.gov

40. ©2008 Regents of the University of Minnesota.40 Info about Teaching Usability Methods WRIT 4501: Usability and Human Factors in Technical Communication Offered Spring semester every year Taught by Lee-Ann Kastman Breuch lkbreuch@umn.edu

41. ©2008 Regents of the University of Minnesota. Demo