Presentation

1,111 views
1,001 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,111
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Presentation

  1. 2. Human Computer Interaction and Usability Design Audrey Troutt Daniel Sheiner
  2. 3. Preview <ul><li>Why usability matters </li></ul><ul><li>What usability is </li></ul><ul><li>Design Principles </li></ul><ul><li>Usability Testing </li></ul><ul><li>The Future of HCI </li></ul>
  3. 4. Why it matters <ul><li>Human performance suffers under pressure </li></ul><ul><li>Usable software sells </li></ul><ul><li>Unusable software makes people unhappy </li></ul>
  4. 5. Definition of Usability <ul><li>&quot;Easy to use&quot; </li></ul><ul><li>&quot;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&quot; </li></ul>
  5. 7. History <ul><li>1970's </li></ul><ul><ul><li>Xerox Palo Alto Research Center (PARC) </li></ul></ul><ul><ul><ul><li>Xerox Star </li></ul></ul></ul><ul><ul><ul><li>WIMP (windows, icons, menus, pointers) paradigm </li></ul></ul></ul><ul><ul><ul><li>WYSIWYG word processor </li></ul></ul></ul><ul><li>1982 First conference on computer usability </li></ul><ul><ul><li>SIGCHI </li></ul></ul><ul><li>1998 International Organization of Standards </li></ul><ul><ul><li>First published standards for human-computer interface design </li></ul></ul>
  6. 8. Action <ul><li>Write a research paper, play chess, read the news </li></ul><ul><li>Choose a font, move a bishop, open the New York Times website </li></ul><ul><li>Click mouse, press key </li></ul><ul><li>Contract muscles </li></ul>
  7. 9. Seven Stages of Action <ul><li>Forming the goal </li></ul><ul><li>Specifying the intention </li></ul><ul><li>Specifying the action </li></ul><ul><li>Executing the action </li></ul><ul><li>Perceiving the state of the world </li></ul><ul><li>Interpreting the state of the world </li></ul><ul><li>Evaluating the outcome </li></ul>
  8. 10. Seven Stages of Action <ul><li>Forming the goal </li></ul><ul><li>Specifying the intention </li></ul><ul><li>Specifying the action </li></ul><ul><li>Executing the action </li></ul><ul><li>Perceiving the state of the world </li></ul><ul><li>Interpreting the state of the world </li></ul><ul><li>Evaluating the outcome </li></ul>
  9. 11. Conceptual Model <ul><li>Cognitive representation: </li></ul><ul><ul><li>Functions </li></ul></ul><ul><ul><li>Mapping of controls to functions </li></ul></ul><ul><ul><li>Actions </li></ul></ul><ul><li>Good mapping: </li></ul><ul><ul><li>Intuitive </li></ul></ul><ul><ul><li>One-to-one </li></ul></ul><ul><ul><li>Visible </li></ul></ul>
  10. 12. Visibility <ul><li>We process images faster than language. </li></ul>
  11. 15. Visibility <ul><li>Sensory stimulation improves memory </li></ul><ul><li>Emotion associated with information improves memory </li></ul><ul><li>Graphics make a stronger impression on memory than text </li></ul>
  12. 16. Stylistic Consistency
  13. 17. Abstract Logos vs. Metaphors
  14. 18. Culturally Familiar Metaphors
  15. 19. One to one correspondence <ul><li>One function per control facilitates graphical representation. </li></ul><ul><li>A visible control with one function reminds the user of its function. </li></ul><ul><li>Multiple functions per control: </li></ul><ul><ul><li>lead to arbitrary mappings </li></ul></ul><ul><ul><ul><li>less effective / efficient learning </li></ul></ul></ul><ul><ul><ul><li>confusing / frustrating </li></ul></ul></ul><ul><ul><ul><li>minimizes flexibility of application </li></ul></ul></ul>
  16. 20. Intuitive Mapping <ul><li>It's easier to integrate new knowledge into memory if it relates to pre-existing knowledge. </li></ul><ul><li>Intuitive controls almost don't have to be learned. </li></ul><ul><li>Use physical analogies and standardized practices. </li></ul>
  17. 21. Seven Stages of Action <ul><li>Forming the goal </li></ul><ul><li>Specifying the intention </li></ul><ul><li>Specifying the action </li></ul><ul><li>Executing the action </li></ul><ul><li>Perceiving the state of the world </li></ul><ul><li>Interpreting the state of the world </li></ul><ul><li>Evaluating the outcome </li></ul>
  18. 22. Executing the Action <ul><li>The more complex the action, the more opportunities for user error at every stage of action up to and including execution. </li></ul><ul><li>Automate as much of the action as possible without taking necessary control away from the user. </li></ul><ul><ul><li>Minimize controls </li></ul></ul><ul><ul><li>Simplify controls </li></ul></ul>
  19. 23. What if I NEED many controls?
  20. 24. Seven Stages of Action <ul><li>Forming the goal </li></ul><ul><li>Specifying the intention </li></ul><ul><li>Specifying the action </li></ul><ul><li>Executing the action </li></ul><ul><li>Perceiving the state of the world </li></ul><ul><li>Interpreting the state of the world </li></ul><ul><li>Evaluating the outcome </li></ul>
  21. 25. Feedback <ul><li>Beginners need it to learn. </li></ul><ul><li>Experienced users need it to fix mistakes. </li></ul><ul><li>It can provide useful information about the program's state, enabling the user to better form the next goal. </li></ul><ul><li>Visual feedback </li></ul><ul><li>Audio feedback </li></ul>
  22. 26. Usable  Explorable <ul><li>Explorability is necessary for users to form complete conceptual maps. </li></ul><ul><li>Visible controls inspire curiosity about their functions. </li></ul><ul><li>Feedback directly demonstrates a control's function. </li></ul><ul><li>Minimize cost of error. </li></ul><ul><li>Provide warnings before processing irreversible actions. </li></ul>
  23. 27. Disabilities <ul><li>Cognitive Impairments </li></ul><ul><li>Physical Impairments </li></ul><ul><li>Perceptual Impairments </li></ul>
  24. 28. Assistive Technologies <ul><li>Screen Readers </li></ul><ul><li>Braille Displays </li></ul>
  25. 29. Assistive Technologies <ul><li>Speech recognition </li></ul><ul><li>Head and eye tracking technology </li></ul>
  26. 30. Assistive Technology <ul><li>Electrophysiological data </li></ul>
  27. 31. What can programmers do? <ul><li>Provide flexible software that provides the same output in multiple formats and offers multiple ways for the user to issue similar commands. </li></ul>
  28. 32. Why is so much software unusable? <ul><li>Engineers assume what's obvious to them is obvious to users. </li></ul><ul><li>Engineers lack familiarity with the details of the everyday activities their users will perform with the software. </li></ul>
  29. 33. Task Analysis <ul><li>You must understand </li></ul><ul><ul><li>who the users are </li></ul></ul><ul><ul><li>how these particular users think </li></ul></ul><ul><ul><li>how they perform tasks without software </li></ul></ul><ul><ul><li>how the software will improve their performance </li></ul></ul><ul><ul><li>the range of resources available to users </li></ul></ul><ul><ul><li>the environment in which users will use the software </li></ul></ul><ul><li>Test at every stage </li></ul>
  30. 34. Usability Testing User testing methods for software designers
  31. 35. Usability Testing Methods <ul><li>User Surveys </li></ul><ul><li>Observation </li></ul><ul><li>Automated Testing </li></ul><ul><li>Special Users: Usability Testing with Children </li></ul>
  32. 36. Usability Testing Methods <ul><li>User Surveys </li></ul><ul><li>Observation </li></ul><ul><li>Automated Testing </li></ul><ul><li>Special Users: Usability Testing with Children </li></ul>
  33. 37. User Surveys <ul><li>Provide subjective measure of overall user satisfaction. </li></ul><ul><li>Can indicate if usability problems exist </li></ul><ul><ul><li>Cannot identify causes of usability problems </li></ul></ul><ul><li>Pre-designed surveys for software testing: </li></ul><ul><ul><li>QUIS—Questionnaire for User Interaction Satisfaction </li></ul></ul><ul><ul><li>Human-Computer Interaction Lab (HCIL) at the University of Maryland at College Park </li></ul></ul><ul><ul><ul><li>http://www.lap.umd.edu/QUIS $1,000-$50 </li></ul></ul></ul><ul><ul><li>SUMI—Software Usability Measurement Inventory </li></ul></ul><ul><ul><li>University College Cork, Ireland </li></ul></ul><ul><ul><li>http:// sumi.ucc.ie € 2,500-Free </li></ul></ul><ul><ul><li>PUTQ—Perdue Usability Testing Questionnaire </li></ul></ul><ul><ul><li>Perdue University </li></ul></ul><ul><ul><li>http://www.acm.org/perlman/question.cgi?form=PUTQ Free </li></ul></ul>
  34. 38. Sample QUIS questions <ul><li>5.4 Messages which appear on screen: confusing clear </li></ul><ul><li> 1   2   3   4   5   6   7   8   9 NA </li></ul><ul><li>5.4.1 Instructions for commands or choice: confusing clear 1   2   3   4   5   6   7   8   9 NA </li></ul>
  35. 39. Sample SUMI questions
  36. 40. Usability Testing Methods <ul><li>User Surveys </li></ul><ul><li>Observation </li></ul><ul><li>Automated Testing </li></ul><ul><li>Special Users: Usability Testing with Children </li></ul>
  37. 41. Observation <ul><li>Simply observe people using your software without telling them how it works. </li></ul><ul><ul><li>Gives enormous insight into assumptions you, the designer, have made that don’t match up to the users’ experience. </li></ul></ul><ul><ul><li>Low cost </li></ul></ul><ul><ul><li>Can be used at any phase of development </li></ul></ul><ul><ul><li>Even one or two observations can be useful </li></ul></ul><ul><li>Observations can also be much more structured (and expensive) </li></ul><ul><ul><li>Hire professional usability specialists to observe </li></ul></ul><ul><ul><li>Outsource observations to usability lab </li></ul></ul><ul><ul><li>Large number of users </li></ul></ul><ul><ul><li>Remote observation: test users worldwide </li></ul></ul>
  38. 42. Observation: ten easy steps <ul><li>1. Set up the observation. </li></ul><ul><li>2. Bring in the user and describe the purpose of the observation. </li></ul><ul><li>3. Tell the user that it's okay to quit at any time. </li></ul><ul><li>4. Talk about and demonstrate equipment in the room. </li></ul><ul><li>5. Explain how to 'think-aloud'. </li></ul><ul><li>Kathleen Gomoll, “Some Techniques for Observing Users.” The Art of Human-Computer Interface Design . Brenda Laurel, Ed. (Massachusetts: Addison Wesley Publishing Company, 1990) 85. </li></ul>
  39. 43. Step 5: Explain how to ‘think-aloud’ <ul><li>User is asked to verbalize every thought, action and question while using the software </li></ul><ul><li>Observer records this information by hand, audio or video. </li></ul><ul><li>Advantage: Can provide valuable insight into the causes of and possible solutions to usability problems </li></ul><ul><li>Potential problem: Verbalizing actions and thoughts changes users’ experience with software </li></ul>
  40. 44. Observation: ten easy steps (cont.) <ul><li>6. Explain that you will not provide help. </li></ul><ul><li>7. Describe tasks and introduce the product. </li></ul><ul><li>8. Ask if there are any questions before you start; begin the observation. </li></ul><ul><li>9. Conclude the observation. </li></ul><ul><li>10. Use the results. </li></ul><ul><li>Kathleen Gomoll, “Some Techniques for Observing Users.” The Art of Human-Computer Interface Design . Brenda Laurel, Ed. (Massachusetts: Addison Wesley Publishing Company, 1990) 85. </li></ul>
  41. 45. Observation: Discount Usability Engineering <ul><li>Prototyping does not need to be expensive </li></ul><ul><li>You do not need to have a finished interface to start testing the ideas with users </li></ul>
  42. 46. Observation: Discount Usability Engineering <ul><li>Example: Icon testing </li></ul><ul><ul><li>Print out icons </li></ul></ul><ul><ul><li>Ask users to guess what the icon represents </li></ul></ul><ul><ul><li>Variability in responses means an ambiguous icon. </li></ul></ul><ul><ul><li>If no one guesses right, re-design icon </li></ul></ul><ul><li>Example: Cart sorting </li></ul><ul><ul><li>Write potential menu items on index cards </li></ul></ul><ul><ul><li>Have user sort cards into stacks of related items </li></ul></ul><ul><ul><li>Ask user to give each stack a descriptive name </li></ul></ul><ul><ul><li>Helps when designing menus </li></ul></ul>Examples borrowed from Jakob Nielsen and Bill Curtis. &quot;Applying discount Usability Engineering.&quot; IEEE Software 12. 1 (Jan. 1995): 98-100.
  43. 47. Usability Testing Methods <ul><li>User Surveys </li></ul><ul><li>Observation </li></ul><ul><li>Automated Testing </li></ul><ul><li>Special Users: Usability Testing with Children </li></ul>
  44. 48. Automated Testing <ul><li>Basic idea: Remove the observer </li></ul><ul><ul><li>Observations require observers, which can be expensive. </li></ul></ul><ul><ul><li>Data from observations is filtered through observer. </li></ul></ul><ul><li>Automatically record what users do with software, and maybe also video/audio recording for think-aloud. </li></ul><ul><li>History file : Recorded data including all input from user. For example: button clicks, mouse path, entered text. May be synchronized with video. </li></ul>
  45. 49. Automated Testing: Simulated Users <ul><li>Artificially intelligent users “model the perceptual and cognitive processes of real users.”* </li></ul><ul><li>Possibly give the same kind of feedback as from history files or even think-aloud. </li></ul><ul><li>Only experimental applications have been developed. </li></ul>*Kent L. Norman and Emanuele Panizzi. &quot;Levels of Automation and User Participation in Usability Testing.&quot; Interacting with Computers 18. (2006): 246-264.
  46. 50. Automated Testing: Eye Tracking <ul><li>In general, what the user looks at is what the user is thinking about. </li></ul><ul><li>Replaces think-aloud technique </li></ul><ul><li>Data presented as a heat map or gaze path. </li></ul><ul><li>“ 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) </li></ul>
  47. 51. Automated Testing: Eye Tracking <ul><li>Advantages </li></ul><ul><ul><li>Capture unconscious thoughts and decisions—more data than from think-aloud </li></ul></ul><ul><ul><li>User is not distracted by having to think aloud </li></ul></ul><ul><li>Disadvantages </li></ul><ul><ul><li>Cost </li></ul></ul><ul><ul><li>Lab setting only </li></ul></ul><ul><ul><li>Expertise needed to interpret data </li></ul></ul><ul><ul><li>Devices look uncomfortable </li></ul></ul>
  48. 52. Automated Testing: Mouse-tracking Kent L. Norman and Emanuele Panizzi. &quot;Levels of Automation and User Participation in Usability Testing.&quot; Interacting with Computers 18. (2006): 246-264.
  49. 53. Usability Testing Methods <ul><li>User Surveys </li></ul><ul><li>Observation </li></ul><ul><li>Automated Testing </li></ul><ul><li>Special Users: Usability Testing with Children </li></ul>
  50. 54. Usability testing with children <ul><li>Games and educational software for children make up a huge part of software on the market. </li></ul><ul><ul><li>Usable software sells, but how can you test for usability with children? </li></ul></ul><ul><li>What if your users can’t sit still through traditional observation? </li></ul><ul><li>What if they can’t assign a number to their feelings about the software? </li></ul>*Gavin Sim et al.. &quot;All work and no play: Measuring fun, usability, and learning in software for children.&quot; Computers & Education 26. (2006): 235-248. The Smileyometer*
  51. 55. The Future of HCI design
  52. 56. The Future of HCI: Time for Revolution <ul><li>There have been no major innovations in HCI design since 1976. </li></ul><ul><ul><li>That was when they came out with the WIMP (windows, icons, mouse, pointer) interface. </li></ul></ul>
  53. 57. The Future of HCI? The Multi-touch Screen <ul><li>Described as “interface free” </li></ul><ul><li>Instead of WIMP interface, files, images, videos and running programs are more like physical objects you can touch, move and manipulate. </li></ul><ul><li>Video: Multi-Touch Screen Demo </li></ul>
  54. 58. Future of HCI: Existing Technologies <ul><li>Eye-tracking </li></ul><ul><li>Speech Recognition </li></ul><ul><li>Most major innovations in HCI were first developed for use in games. </li></ul><ul><ul><li>So, look to video games for the next major innovation in HCI design </li></ul></ul>
  55. 59. HCI design and Usability Testing: THE END <ul><li>Know your users </li></ul><ul><li>Test early and often </li></ul>
  56. 60. Image sources: slide number and link <ul><li>6. http://www.vhml.org/theses/nannip/HCI_final_files/image001.gif </li></ul><ul><li>12. Norman, Donald A. The Design of Everyday Things . New York: Doubleday. 1990. </li></ul><ul><li>28. http://www.braillenet.org/accessibilite/livreblanc/images/braille3.jpg </li></ul><ul><li>29. http://www.boosttechnology.com/ </li></ul><ul><li>32. Norman, Donald A. The Design of Everyday Things . New York: Doubleday. 1990. </li></ul><ul><li>45. http://www.nngroup.com/reports/prototyping/hifi_homepage_testing.jpg </li></ul><ul><li>45. http://people.csail.mit.edu/msbernst/tdr/usertesting.html </li></ul><ul><li>50. http://stephenslighthouse.sirsi.com/archives/thermal.png </li></ul><ul><li>50. http://www.uxmatters.com/MT/archives/000040.php </li></ul><ul><li>51. http://www.eyelinkinfo.com/optns_desk_optics.php </li></ul><ul><li>51. http://news.thomasnet.com/images/large/464/464278.jpg </li></ul><ul><li>57. http://cs.nyu.edu/~jhan/ftirtouch/ </li></ul><ul><li>59. http://www.nevtron.si/borderline/archive2/intuiti.gif </li></ul>

×