Human Computer Interaction and Usability Design

2. Human Computer Interaction and Usability Design Audrey Troutt Daniel Sheiner

3. Preview • Why usability matters • What usability is • Design Principles • Usability Testing • The Future of HCI

4. Why it matters • Human performance suffers under pressure • Usable software sells • Unusable software makes people unhappy

5. Definition of Usability • "Easy to use" • "The extent to which a product can be used by specified users to achieve specific goals with effectiveness, efficiency, and satisfaction in a specified context of use"

7. History • 1970's • Xerox Palo Alto Research Center (PARC) • Xerox Star • WIMP (windows, icons, menus, pointers) paradigm • WYSIWYG word processor • 1982 First conference on computer usability • SIGCHI • 1998 International Organization of Standards • First published standards for human-computer interface design

8. Action • Write a research paper, play chess, read the news • Choose a font, move a bishop, open the New York Times website • Click mouse, press key • Contract muscles

9. Seven Stages of Action • Forming the goal • Specifying the intention • Specifying the action • Executing the action • Perceiving the state of the world • Interpreting the state of the world • Evaluating the outcome

10. Seven Stages of Action • Forming the goal • Specifying the intention • Specifying the action • Executing the action • Perceiving the state of the world • Interpreting the state of the world • Evaluating the outcome

11. Conceptual Model • Cognitive representation: • Functions • Mapping of controls to functions • Actions • Good mapping: • Intuitive • One-to-one • Visible

12. Visibility • We process images faster than language.

15. Visibility • Sensory stimulation improves memory • Emotion associated with information improves memory • Graphics make a stronger impression on memory than text

16. Stylistic Consistency

17. Abstract Logos vs. Metaphors

18. Culturally Familiar Metaphors

19. One to one correspondence • One function per control facilitates graphical representation. • A visible control with one function reminds the user of its function. • Multiple functions per control: • lead to arbitrary mappings • less effective / efficient learning • confusing / frustrating • minimizes flexibility of application

20. Intuitive Mapping • It's easier to integrate new knowledge into memory if it relates to pre-existing knowledge. • Intuitive controls almost don't have to be learned. • Use physical analogies and standardized practices.

21. Seven Stages of Action • Forming the goal • Specifying the intention • Specifying the action • Executing the action • Perceiving the state of the world • Interpreting the state of the world • Evaluating the outcome

22. Executing the Action • The more complex the action, the more opportunities for user error at every stage of action up to and including execution. • Automate as much of the action as possible without taking necessary control away from the user. • Minimize controls • Simplify controls

23. What if I NEED many controls?

24. Seven Stages of Action • Forming the goal • Specifying the intention • Specifying the action • Executing the action • Perceiving the state of the world • Interpreting the state of the world • Evaluating the outcome

25. Feedback • Beginners need it to learn. • Experienced users need it to fix mistakes. • It can provide useful information about the program's state, enabling the user to better form the next goal. • Visual feedback • Audio feedback

26. Usable  Explorable • Explorability is necessary for users to form complete conceptual maps. • Visible controls inspire curiosity about their functions. • Feedback directly demonstrates a control's function. • Minimize cost of error. • Provide warnings before processing irreversible actions.

27. Disabilities • Cognitive Impairments • Physical Impairments • Perceptual Impairments

28. Assistive Technologies • Screen Readers • Braille Displays

29. Assistive Technologies • Speech recognition • Head and eye tracking technology

30. Assistive Technology • Electrophysiological data

31. What can programmers do? • Provide flexible software that provides the same output in multiple formats and offers multiple ways for the user to issue similar commands.

32. Why is so much software unusable? • Engineers assume what's obvious to them is obvious to users. • Engineers lack familiarity with the details of the everyday activities their users will perform with the software.

33. Task Analysis • You must understand • who the users are • how these particular users think • how they perform tasks without software • how the software will improve their performance • the range of resources available to users • the environment in which users will use the software • Test at every stage

34. Usability Testing User testing methods for software designers

35. Usability Testing Methods • User Surveys • Observation • Automated Testing • Special Users: Usability Testing with Children

36. Usability Testing Methods • User Surveys • Observation • Automated Testing • Special Users: Usability Testing with Children

37. User Surveys • Provide subjective measure of overall user satisfaction. • Can indicate if usability problems exist • Cannot identify causes of usability problems • Pre-designed surveys for software testing: • QUIS—Questionnaire for User Interaction Satisfaction Human-Computer Interaction Lab (HCIL) at the University of Maryland at College Park http://www.lap.umd.edu/QUIS $1,000-$50 • SUMI—Software Usability Measurement Inventory University College Cork, Ireland http://sumi.ucc.ie€2,500-Free • PUTQ—Perdue Usability Testing Questionnaire Perdue University http://www.acm.org/perlman/question.cgi?form=PUTQ Free

38. Sample QUIS questions 5.4 Messages which appear on screen: confusing clear 1   2   3   4   5   6   7   8   9 NA 5.4.1 Instructions for commands or choice: confusing clear 1   2   3   4   5   6   7   8   9 NA

39. Sample SUMI questions

40. Usability Testing Methods • User Surveys • Observation • Automated Testing • Special Users: Usability Testing with Children

41. Observation • Simply observe people using your software without telling them how it works. • Gives enormous insight into assumptions you, the designer, have made that don’t match up to the users’ experience. • Low cost • Can be used at any phase of development • Even one or two observations can be useful • Observations can also be much more structured (and expensive) • Hire professional usability specialists to observe • Outsource observations to usability lab • Large number of users • Remote observation: test users worldwide

42. Observation: ten easy steps 1. Set up the observation. 2. Bring in the user and describe the purpose of the observation. 3. Tell the user that it's okay to quit at any time. 4. Talk about and demonstrate equipment in the room. 5. Explain how to 'think-aloud'. Kathleen Gomoll, “Some Techniques for Observing Users.” The Art of Human-Computer Interface Design. Brenda Laurel, Ed. (Massachusetts: Addison Wesley Publishing Company, 1990) 85.

43. Step 5: Explain how to ‘think-aloud’ • User is asked to verbalize every thought, action and question while using the software • Observer records this information by hand, audio or video. • Advantage: Can provide valuable insight into the causes of and possible solutions to usability problems • Potential problem: Verbalizing actions and thoughts changes users’ experience with software

44. Observation: ten easy steps (cont.) 6. Explain that you will not provide help. 7. Describe tasks and introduce the product. 8. Ask if there are any questions before you start; begin the observation. 9. Conclude the observation. 10. Use the results. Kathleen Gomoll, “Some Techniques for Observing Users.” The Art of Human-Computer Interface Design. Brenda Laurel, Ed. (Massachusetts: Addison Wesley Publishing Company, 1990) 85.

45. Observation: Discount Usability Engineering • Prototyping does not need to be expensive • You do not need to have a finished interface to start testing the ideas with users

46. Observation: Discount Usability Engineering • Example: Icon testing • Print out icons • Ask users to guess what the icon represents • Variability in responses means an ambiguous icon. • If no one guesses right, re-design icon • Example: Cart sorting • Write potential menu items on index cards • Have user sort cards into stacks of related items • Ask user to give each stack a descriptive name • Helps when designing menus Examples borrowed from Jakob Nielsen and Bill Curtis. "Applying discount Usability Engineering." IEEE Software 12. 1 (Jan. 1995): 98-100.

47. Usability Testing Methods • User Surveys • Observation • Automated Testing • Special Users: Usability Testing with Children

48. Automated Testing • Basic idea: Remove the observer • Observations require observers, which can be expensive. • Data from observations is filtered through observer. • Automatically record what users do with software, and maybe also video/audio recording for think-aloud. • History file: Recorded data including all input from user. For example: button clicks, mouse path, entered text. May be synchronized with video.

49. Automated Testing: Simulated Users • Artificially intelligent users “model the perceptual and cognitive processes of real users.”* • Possibly give the same kind of feedback as from history files or even think-aloud. • Only experimental applications have been developed. *Kent L. Norman and Emanuele Panizzi. "Levels of Automation and User Participation in Usability Testing." Interacting with Computers 18. (2006): 246-264.

50. Automated Testing: Eye Tracking • In general, what the user looks at is what the user is thinking about. • Replaces think-aloud technique • Data presented as a heat map or gaze path. “The eye is the mirror of the soul, and the soul is the mirror of our thoughts.”--John Elvesjo, founder of Tobii Technology (producer of eye-tracking hardware)