Human Computer Interaction

School of Software Engineering, Tongji University

Human-computer Interaction (HCI) involves the study, planning, and design of the interaction between people (users) and computers. It is often regarded as the intersection of computer science, behavioral sciences, design and several other fields of study. The term was popularized by Card, Moran, and Newell in their seminal 1983 book, "The Psychology of Human-Computer Interaction", although the authors first used the term in 1980, and the first known use was in 1975. The term connotes that, unlike other tools with only limited uses (such as a hammer, useful for driving nails, but not much else), a computer has many affordances for use and this takes place in an open-ended dialog between the user and the computer.

Because human-computer interaction studies a human and a machine in conjunction, it draws from supporting knowledge on both the machine and the human side. On the machine side, techniques in computer graphics, operating systems, programming languages, and development environments are relevant. On the human side, communication theory, graphic and industrial design disciplines, linguistics, social sciences, cognitive psychology, and human factors such as computer user satisfaction are relevant. Engineering and design methods are also relevant. Due to the multidisciplinary nature of HCI, people with different backgrounds contribute to its success. HCI is also sometimes referred to as man-machine interaction (MMI) or computer-human interaction (CHI).

From Wikipedia, the free encyclopedia
  1. (Mar. 12) Course page is online.
  2. (Apr. 24) Grades of Assignment 1 are available.
  3. top 3 for your reference, click thumbnails to download

  4. (May 25) Grades of Assignment 2 are available.
  5. top 3 for your reference, click thumbnails to download

  6. (Jun. 3) Requirements for the Final Projects are available.
  7. (Jul. 4) Grades of Assignment 3, are available. NEW
  8. (Jul. 4) Grades of Final Project are available. NEW
  9. (Jul. 4) Final Grades are available. NEW
Dr. Shuang LIANG
Room 314, JiShi Building
Teaching Assistant
Room 316, JiShi Building
  • 10:00-11:40, Tuesday
  • 10:00-11:40, Thursday (every two weeks)
Room 319, JiShi Building, Jiading Campus
Office Hours
16:00-17:00, Friday

Course Schedule

Contents Objectives Slides Further Readings
  • Explain the difference between good and poor interaction design.
  • Describe what interaction design is and how it relates to human-computer interaction and other fields.
  • Explain the relationship between user experience and usability.
  • Describe what and who is involved in the process of interaction design.
  • Outline the different forms of guidance used in interaction design.
  • Enable you to evaluate an interactive product and explain what is good and bad about it in terms of the goals and core principles of interaction design.
  1. COOPER, A., REIMAN, R. and CRONIN, D. (2007) About Face 3.0: The essentials of interaction design. John Wiley & Sons Inc.
  2. GARRETT, J. J. (2010) The Elements of User Experience: User-centered design for the web and beyond (2nd edn). New Riders Press.
  3. GRUDIN, J. (1990) The computer reaches out: The historical continuity of interface design. In CHI'90 Proceedings. ACM, New York, pp. 261-268.
  4. LIDWELL, W., HOLDEN, K. and BUTLER, J. (2003) Universal Principles of Design. Rockport Publishers, Inc.
  5. NORMAN, D. (1988) The Design of Everyday Things. Basic Books (especially Chapter 1).
  6. SAFFER, D. (2010) Designing for Interaction (2nd edn). New Riders Press.
Understanding and Conceptualizing Interaction
  • Explain what is meant by the problem space.
  • Explain how to conceptual interaction
  • Describe what a conceptual model is and how to begin to formulate one.
  • Discuss the use of interface metaphors as part of a conceptual model.
  • Outline the core interaction types for informing the development of a conceptual model.
  • Introduce paradigms, theories, models, and frameworks informing interaction design.
  1. DOURISH, P. (2001) Where the Action Is. MIT Press. [url]
  2. GREENFIELD, A. (2006) Everyware: The dawning age of ubiquitous computing. Easy Riders.
  3. HARPER, R., RODDEN, T., ROGERS, Y. and SELLEN, A. (2008) Being Human: HCI in the year 2020. Microsoft. [pdf]
  4. JOHNSON, J. and HENDERSON, A. (2002) Conceptual Models: Begin by designing what to design, interactions, January/February 2002, ACM Press, pp. 25-32.
  5. JOHNSON, M. and LAKOFF, G. (1980) Metaphors We Live By. The University of Chicago Press.
  6. MCCULLOUGH, M. (2004) Digital Ground: Architecture, pervasive computing and environmental knowing. MIT Press.
Cognitive Aspects
  • Explain what cognition is and why it is important for interaction design.
  • Discuss what attention is and its effects on our ability to multitask.
  • Describe how memory can be enhanced through technology aids.
  • Explain what mental models are.
  • Show the difference between classic internal cognitive frameworks (e.g. mental models) and more recent external cognitive approaches (e.g. distributed cognitive) that have been applied to HCI.
  • Enable you to try to elicit a mental model and be able to understand what it means.
  1. CLARK, A. (2003) Natural Born Cyborgs: Minds, technologies, and the future of human intelligence. Oxford University Press.
  2. ERICKSON, T. D. and MCDONALD, D. W. (2008) HCI Remixed: Reflections on works that have influenced the HCI community. MIT Press.
  3. GIGERENZER, G. (2008) Gut Feelings. Penguin.
  4. JACKO, J. and SEARS, A. (eds) (2007) The Human-Computer Interaction Handbook: Fundamentals, evolving technologies and emerging applications (2nd edn). Lawrence Erlbaum Associates.
  5. NORMAN, D. (1988) The Design of Everyday Things. Basic Books, New York.
  6. NORMAN, D. (1993) Things That Make Us Smart. Addison-Wesley.
Emotional Interaction
  • Cover how emotions relate to the user experience.
  • Provide examples of interfaces that are both pleasurable and usable.
  • Explain what expressive interfaces are and the effects they can have on people.
  • Describe how technologies can be designed to change people's attitudes and behavior.
  • Give an overview on how anthropomorphism has been applied in interaction design.
  • Present well-known models and frameworks of emotion and pleasure.
  • Enable you to critique the persuasive impact of an online agent on customers.
  1. FOGG, B. J. (2003) Persuasive Technology: Using computers to change what we think and do. Morgan Kaufmann.
  2. JORDAN, P. W. (2000) Designing Pleasurable Products. Taylor & Francis.
  3. LEDOUX, J. E. (1998) The Emotional Brain: The mysterious underpinnings of emotional life. Simon & Schuster.
  4. NORMAN, D. (2004) Emotional Design: Why we love (or hate) everyday things. Basic Books.
  5. WRIGHT, P. and McCARTHY, J. (2010) Experience-Centered Design. Morgan and Claypool's.
Social Interaction
  • Usability and Adoption in Social Media Platforms
  • Designing for Ongoing Participation
  • Web 2.0 Features
  • Design for Sharing
[pdf1] [pdf2] [pdf3] [pdf4]
  1. Joshua Porter. Designing for the Social Web. [amazon]
  • Provide an overview of the many different kinds of interfaces.
  • Highlight the main design and research issues for each of the interfaces.
  • Discuss the difference between graphical (GUIs) and natural user interfaces (NUIs).
  • Consider which interface is best for a given application or activity.

Many of the best books on designing interfaces have been developed for the practitioner market. They are often written in a humorous and highly accessible way, replete with cartoons, worldly prescriptions, and figures. They also use modern fonts that make the text very appealing. We recommend:

  1. JOHNSON, J. (2007) GUI Bloopers. 2.0: Common user interface design don'ts and dos, (2nd edn). Morgan Kaufmann.

There are also many good practical guides on web usability and interaction design that have been published by New Riders. Some are updated on a regular basis while others are new. These include:

  1. KRUG, S. (2005) Don't Make Me Think! (2nd edn). New Riders Press.
  2. NIELSEN, J., and LORANGER, H. (2006) Prioritizing Web Usability. New Riders Press.
  3. VEEN, J. (2001) The Art and Science of Web Design. New Riders Press.

And finally, a thought-provoking essay that everyone should read (a shorter version is also available on Don Norman's website):

  1. NORMAN, D. (2010) Natural interfaces are not natural, interactions, May/June, 6-10.
The Process of Interaction Design
  • Consider what doing interaction design involves.
  • Explain some advantages of involving users in development.
  • Explain the main principles of a user-centered approach.
  • Present a simple lifecycle model of interaction design.
  • Ask and provide answers for some important questions about the interaction design process.
  • Consider how interaction design activities can be integrated into the wider product development lifecycle.
  1. GREENBAUM, J. and KYNG, M. (eds) (1991) Design at Work: Co-operative design of computer systems. Lawrence Erlbaum.
  2. HIGHSMITH, J. (2002) Agile Software Development Ecosystems. Addison-Wesley.
  3. KELLEY, T., with LITTMAN, J. (2004) The Art of Innovation. Profile Books.
  4. NIELSEN, J. (1993) Usability Engineering. Morgan Kaufmann.
  5. SEFFAH, A., GULLIKSEN, J. and DESMARAIS, M. C. (2005) Human-Centered Software Engineering. Springer.
  6. SOMMERVILLE, I. (2006) Software Engineering (8th edn). Addison-Wesley.
Design, Prototyping and Construction
  • Describe prototyping and different types of prototyping activities.
  • Enable you to produce simple prototypes from the models developed during the requirements activity.
  • Enable you to produce a conceptual model for a product and justify your choices.
  • Explain the use of scenarios and prototypes in design.
  • Discuss a range of support available for interaction design.
  1. CARROLL, J. M. (ed.) (1995) Scenario-based Design. John Wiley & Sons, Inc.
  2. LAZAR, J. (ed.) (2007) Universal Usability: Designing information systems for diverse user populations. John Wiley & Sons Ltd.
  3. SNYDER, C. (2003) Paper Prototyping. Morgan Kaufmann.
  4. TIDWELL, J. (2005) Designing Interfaces: Patterns for Effective Interaction. O'Reilly Media Inc.


The purpose of the project is to enable the students to get some hands-on experience in the design, implementation and evaluation of human computer interaction by applying them to real-world problems. You are encouraged to relate your research interests and research topics for the project. You can use your own data for your project topic, or download data sets from open data resources. In either case, you should get prior approaval before starting your project.

You are free to use any programming language and any opensource toolkit. You can write the codes yourself or use any code that is available in the public domain. In case you use somebody else's code, you are required to properly cite its source and know the details of the algorithms that the code implements.

You are required to work in groups of two or three, and submit a project proposal, a final report written in a conference paper format, and make a presentation during the mid-term and final weeks. When preparing your report, please use the IEEE conference format. Tentative schedule of the project is as follows:

  • Project proposal: Submit a 1-2 page proposal that describes the problem you would like to tackle, objective of the study, background of the problem, related work, etc. Also provide a short list of related references. (This could contribute to the "introduction" part of your final report)
  • Mid-term progress presentation: Make a 15 minute presentation about your progress with the project, such as the propposed algorithms, hardware/software tools and data that you plan to utilize, and the evaluation strategies that you plan to use. Also provide plans for the rest of the semester. A mid-term progress report is not compulsory, but encouraged and will be bonused. (This could contribute to the "methodology" part of your final report)
  • Final report: Submit a readable and well-organized report that provides proper motivation for the task, proper citation and discussion of related literature, proper explanation of the details of the approach and implementation strategies, proper performance evaluation, and detailed discussion of the results. Highlight your contributions and conclusions. Also submit well-documented software with your report.
  • Presentation: Make a 20 minute presentation of your work to the class. The presenter should not be the same as that of the mid-term progress presentation. Each student is expected to attend all presentations. Each team member should also provide a written description of her/his own contributions to the project.


Interaction Design: Beyond Human - Computer Interaction

Yvonne Rogers, Helen Sharp, Jenny Preece,
3rd Edition, John Wiley & Sons, April 2011

"In many years of using this text for my courses... I have continually been impressed at the clarity and accessibility to students at all levels. The book has kept up with the changes in the field and has become THE text in human-computer interaction."
Terry Winograd, Professor of Computer Science, Stanford University, USA