introduction to human-computer interaction and …wildem/prague 2007/hciworkshop... · introduction...
TRANSCRIPT
![Page 1: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/1.jpg)
INTRODUCTION TO HUMAN-COMPUTER INTERACTION
AND INTERACTION DESIGN
Barbara M. WildemuthSchool of Information & Library Science
University of North Carolina at Chapel Hill
HCI Seminar, Institute for Information Studies and Librarianship, Charles University, 9 October 2007
![Page 2: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/2.jpg)
Norman’s Stages of Action Model
PhysicalSystem
UserGoals
ActionSpecification
InterfaceMechanism
Intentions
InterfaceDisplay
Interpre-tation
Evaluation
Hutchins, Hollan, & Norman, 1986
![Page 3: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/3.jpg)
Affordances
• An attribute of an object that supports a particular interaction with it– Chairs afford sitting
![Page 4: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/4.jpg)
Affordances
PhysicalSystem
UserGoals
ActionSpecification
InterfaceMechanism
Intentions
InterfaceDisplay
Interpre-tation
Evaluation
S C
P
F
S
C
AFFORDANCES(Hartson, 2003)S=SensoryC=CognitiveP=PhysicalF=Functional
![Page 5: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/5.jpg)
Quick-Think Exercise
• Consider google as a physical system.– What user goals might motivate the use of
google?– What interface mechanisms are provided for
interaction?– What sensory, cognitive, physical, and functional
affordances does google’s search interface provide?
– What interface display characteristics can support interpretation and evaluation?
– What sensory, cognitive, physical, and functional affordances does google’s results list provide?
![Page 6: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/6.jpg)
Where does interaction design begin?
• Understand the intended users• Understand the goals they want to
accomplish
![Page 7: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/7.jpg)
Consider the design of this building
![Page 8: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/8.jpg)
Does the quality of the design make a difference?
• Yes, because people won’t use a system that is unusable
![Page 9: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/9.jpg)
Designing interactions
• Design: To create, fashion, execute, or construct according to plan (Merriam-Webster online dictionary)
![Page 10: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/10.jpg)
The Design Lifecycle
• See Gulliksen et al. (2003) diagram pdf, http://www.it.uu.se/research/hci/acsd/KeyPrinciplesPoster-v.1.2en.pdf
![Page 11: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/11.jpg)
Quick-Think Exercise
• Imagine that you are re-designing the website for the Charles University Institute of Information Studies and Librarianship.– Who should you consult about their needs for
the website? Be sure to consider both its users and other stakeholders.
– What information would you try to find out from each group or person?
![Page 12: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/12.jpg)
Quick-Think Exercise
• Have you ever been involved in the design of a computer system? Something similar?
• How closely does your experience match with the systems development lifecycle described by Gulliksen and his colleagues?
![Page 13: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/13.jpg)
What are the characteristics of a “good” design?
• The system is usable– Effective, efficient, safe, useful, easy to
learn, easy to remember
• The system provides a satisfactory user experience– Enjoyable, engaging, fun to use
Based on Sharp, Preece & Rogers, 2006
![Page 14: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/14.jpg)
User experience examples• From architecture:
– New Czech national library– Liberec Library
• From museum websites:– Mucha Museum– Museum of Communism
• From e-commerce websites:– Lord & Taylor– H&M– WalMart– Tesco
• J.K. Rowling website
![Page 15: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/15.jpg)
Quick-Think Exercise
• For each example, list a few adjectives describing how your group “feels” about the example.
• Are there any particular aspects of the design that give you these feelings?
![Page 16: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/16.jpg)
New Czech National Library
![Page 17: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/17.jpg)
Knihovna Liberec
![Page 18: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/18.jpg)
Some online examples
• Go on the internet to see examples:– Mucha Museum– Museum of Communism
![Page 19: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/19.jpg)
Museum of Communism image
![Page 20: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/20.jpg)
More online examples
• Go on the internet to see:– Lord & Taylor– H&M– WalMart– Tesco– J.K. Rowling website (active)
![Page 21: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/21.jpg)
Summary
• Human-computer interaction is an iterative cycle
• We can design information systems to afford (and even encourage) particular user behaviors
• User-centered design requires careful analysis of user characteristics and the goals that users want to achieve
• Good quality designs should be usable and enjoyable to use
![Page 22: INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND …wildem/Prague 2007/HCIworkshop... · INTRODUCTION TO HUMAN-COMPUTER INTERACTION AND INTERACTION DESIGN Barbara M. Wildemuth School](https://reader035.vdocuments.us/reader035/viewer/2022070800/5f0246d67e708231d4037623/html5/thumbnails/22.jpg)
References• Gibson, J.J. (1977). The theory of affordances. In Shaw, R., & Bransford,
J. (eds.), Perceiving, Acting, and Knowing: Toward an Ecological Psychology. Hillsdale, NJ: Lawrence Erlbaum, 67-82.
• Gulliksen, J., Göransson, B., Boivie, I., Vlomkvist, S., Persson, J., & Cajander, A. (2003). Key principles for user-centred systems design. Behaviour & Information Technology, 22(6), 397-409. Poster online at http://www.it.uu.se/research/hci/acsd/KeyPrinciplesPoster-v.1.2en.pdf.
• Hartson, H. R. (2003). Cognitive, physical, sensory, and functional affordances in interaction design. Behaviour & Information Technology, 22(5), 315-338.
• Hutchins, E. L., Hollan, J. D., & Norman, D. A. (1986). Direct manipulation interfaces. In Norman, D. A., & Draper, S. W. (eds.), User Centered System Design. Hillsdale, NJ: Lawrence Erlbaum, 87-124.
• Sharp, H., Preece, J., & Rogers, Y. (2006). Interaction Design: Beyond Human-Computer Interaction. New York: Wiley.
• Stone, D., Jarrett, C., Woodroffe, M., & Minocha, S. (2005). User Interface Design and Evaluation. Morgan Kaufmann.
• Wadlow, M. G. (1994). Design as a way of life. SIGCHI Bulletin, 26(1), 7-8.