Download - Presentation
![Page 1: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/1.jpg)
![Page 2: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/2.jpg)
Human Computer Interaction
and Usability Design
Audrey Troutt
Daniel Sheiner
![Page 3: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/3.jpg)
Preview
Why usability matters What usability is Design Principles Usability Testing The Future of HCI
![Page 4: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/4.jpg)
Why it matters
Human performance suffers under pressure Usable software sells Unusable software makes people unhappy
![Page 5: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/5.jpg)
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"
![Page 6: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/6.jpg)
![Page 7: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/7.jpg)
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
![Page 8: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/8.jpg)
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
![Page 9: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/9.jpg)
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
![Page 10: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/10.jpg)
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
![Page 11: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/11.jpg)
Conceptual Model
Cognitive representation: Functions Mapping of controls to functions Actions
Good mapping: Intuitive One-to-one Visible
![Page 12: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/12.jpg)
Visibility
We process images faster than language.
![Page 13: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/13.jpg)
![Page 14: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/14.jpg)
![Page 15: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/15.jpg)
Visibility
Sensory stimulation improves memory Emotion associated with information
improves memory Graphics make a stronger impression on
memory than text
![Page 16: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/16.jpg)
Stylistic Consistency
![Page 17: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/17.jpg)
Abstract Logos vs. Metaphors
![Page 18: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/18.jpg)
Culturally Familiar Metaphors
![Page 19: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/19.jpg)
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
![Page 20: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/20.jpg)
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.
![Page 21: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/21.jpg)
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
![Page 22: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/22.jpg)
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
![Page 23: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/23.jpg)
What if I NEED many controls?
![Page 24: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/24.jpg)
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
![Page 25: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/25.jpg)
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
![Page 26: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/26.jpg)
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.
![Page 27: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/27.jpg)
Disabilities
Cognitive Impairments Physical Impairments Perceptual Impairments
![Page 28: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/28.jpg)
Assistive Technologies
Screen Readers Braille Displays
![Page 29: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/29.jpg)
Assistive Technologies
Speech recognition Head and eye tracking technology
![Page 30: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/30.jpg)
Assistive Technology
Electrophysiological data
![Page 31: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/31.jpg)
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.
![Page 32: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/32.jpg)
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.
![Page 33: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/33.jpg)
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
![Page 34: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/34.jpg)
Usability Testing
User testing methods for software designers
![Page 35: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/35.jpg)
Usability Testing Methods
User Surveys
Observation
Automated Testing
Special Users: Usability Testing with Children
![Page 36: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/36.jpg)
Usability Testing Methods
User Surveys
Observation
Automated Testing
Special Users: Usability Testing with Children
![Page 37: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/37.jpg)
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
![Page 38: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/38.jpg)
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
![Page 39: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/39.jpg)
Sample SUMI questions
![Page 40: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/40.jpg)
Usability Testing Methods
User Surveys
Observation
Automated Testing
Special Users: Usability Testing with Children
![Page 41: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/41.jpg)
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
![Page 42: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/42.jpg)
Observation: ten easy steps1. 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.
![Page 43: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/43.jpg)
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
![Page 44: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/44.jpg)
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.
![Page 45: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/45.jpg)
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
![Page 46: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/46.jpg)
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.
![Page 47: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/47.jpg)
Usability Testing Methods
User Surveys
Observation
Automated Testing
Special Users: Usability Testing with Children
![Page 48: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/48.jpg)
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.
![Page 49: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/49.jpg)
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.
![Page 50: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/50.jpg)
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)
![Page 51: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/51.jpg)
Automated Testing: Eye Tracking
Advantages Capture unconscious thoughts and
decisions—more data than from think-aloud
User is not distracted by having to think aloud
Disadvantages Cost Lab setting only Expertise needed to interpret data Devices look uncomfortable
![Page 52: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/52.jpg)
Automated Testing: Mouse-tracking
Kent L. Norman and Emanuele Panizzi. "Levels of Automation and User Participation in Usability Testing." Interacting with Computers 18. (2006): 246-264.
![Page 53: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/53.jpg)
Usability Testing Methods
User Surveys
Observation
Automated Testing
Special Users: Usability Testing with Children
![Page 54: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/54.jpg)
Usability testing with children Games and educational software for children make up a huge part
of software on the market. Usable software sells, but how can you test for usability with children?
What if your users can’t sit still through traditional observation? What if they can’t assign a number to their feelings about the
software?
*Gavin Sim et al.. "All work and no play: Measuring fun, usability, and learning in software for children." Computers & Education 26. (2006): 235-248.
The Smileyometer*
![Page 55: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/55.jpg)
The Future of HCI design
![Page 56: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/56.jpg)
The Future of HCI: Time for Revolution
There have been no major innovations in HCI design since 1976. That was when they came out with the WIMP (windows, icons,
mouse, pointer) interface.
![Page 57: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/57.jpg)
The Future of HCI?The Multi-touch Screen
Described as “interface free”
Instead of WIMP interface, files, images, videos and running programs are more like physical objects you can touch, move and manipulate.
Video: Multi-Touch Screen Demo
![Page 58: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/58.jpg)
Future of HCI: Existing Technologies
Eye-tracking
Speech Recognition
Most major innovations in HCI were first developed for use in games. So, look to video games for the next major innovation in
HCI design
![Page 59: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/59.jpg)
HCI design and Usability Testing:THE END
Know your users
Test early and often
![Page 60: Presentation](https://reader036.vdocuments.mx/reader036/viewer/2022081516/555128ceb4c905f1528b4a3f/html5/thumbnails/60.jpg)
Image sources: slide number and link 6. http://www.vhml.org/theses/nannip/HCI_final_files/image001.gif
12. Norman, Donald A. The Design of Everyday Things. New York: Doubleday. 1990.
28. http://www.braillenet.org/accessibilite/livreblanc/images/braille3.jpg
29. http://www.boosttechnology.com/
32. Norman, Donald A. The Design of Everyday Things. New York: Doubleday. 1990.
45. http://www.nngroup.com/reports/prototyping/hifi_homepage_testing.jpg
45. http://people.csail.mit.edu/msbernst/tdr/usertesting.html
50. http://stephenslighthouse.sirsi.com/archives/thermal.png
50. http://www.uxmatters.com/MT/archives/000040.php
51. http://www.eyelinkinfo.com/optns_desk_optics.php
51. http://news.thomasnet.com/images/large/464/464278.jpg
57. http://cs.nyu.edu/~jhan/ftirtouch/
59. http://www.nevtron.si/borderline/archive2/intuiti.gif