Intro to Human Computer Interaction

Dr Charles Martin

Acknowledgement of Country

Image of Canberra from Mt Painter towards Black Mountain

Charles Martin (that’s me!)

Senior Lecturer, ANU School of Computing

computer musician, percussionist, computer scientist

homepage

SMCCLAB: Sound, Music, and Creative Computing Lab

What is HCI?

It’s “Human Computer Interaction”.

But what does that mean?

Human meets computer?

What is Human Computer Interaction

Research that:

  • considers how humans can and do use computers
  • proposes computer systems (incl. software) that can be better used by humans
  • uncovers the needs of different kinds of computer users
  • works out how people can participate in designing computer systems
  • understands the roles of computer systems in society, politics, social movements and beyond.

Interdisciplinary Research

All HCI research is interdisciplinary:

  • Computer Science
  • Engineering
  • Human Factors / Ergonomics
  • Cognitive Science / Psychology
  • Social Science
  • Design

A brief history of HCI…

Starting with ergonomics & human factors.

  • 20th Century: Humans started to operate complex machines
  • Post 1945: engineering focus on operator’s cognition, response, decisions, perceptions, etc
  • Ergonomics or human factors coined in 1950s to describe the human requirements for designing machines and systems.
An aircraft cockpit interior

HCI history: The computer

  • Computing in the 1950s-70s meant mainframes and batch processing—normal people didn’t use computers!
  • 1968: Douglas Engelbart introduced prototype concepts for interactive computing as we know it:
    • Mouse
    • GUI
    • Collaboration
  • Called the “mother of all demos”: https://youtu.be/yJDv-zdhzMY
Computer from MOAD

HCI history: The start of “users”

  • ~1980s: big interest in using computers in workplaces and homes
  • Demand for computers to work for normal people (not just trained operators)
  • 1983: first annual ACM SIGCHI Conference (Special Interest Group on Computer-Human Interaction)

Now:

A computer for users

HCI history: The “wave” theory

  • First wave: Human Factors in Computing (1980-1992)
    • Optimising/measuring efficiency, cognitive psychology approach, studying individual users. Lab setting.
  • Second wave: Cognitive revolution — mind and computer coupled (1992-2006)
    • Optimise interactions, hypothesis testing, affordances, activity theory, user-centred design. Work environments.
  • Third wave: Situated perspectives (Bødker 2015) (2006-)
    • Consumer tech, participation and sharing, pervasive computing, AR, tangible interaction, home environments,
  • Fourth wave: Entanglement HCI (Frauenberger 2019) (2019-)
    • Computer and humans entangled in society: focus on values, accessibility, diversity, policy, law, ethics, individuals’ and society’s responsibilities

What does HCI research involve?

  • Understanding how computers are used in society.
  • Working with people to understand how they use computers.
  • Designing new human-computer interfaces (applications).
  • Working with people (users) to design and evaluate the above.
An HCI presentation in 2022

HCI again in fewer words…

In short, this is what we will do in this course.

  1. Understanding people

  2. Designing interfaces

  3. Evaluating interfaces

COMP3900/6390 Course Structure

  • 12 lectures: every week, Kambri Cinema, here with me!
    • theory, content, explanation of skills, discussion, questions, comfy chairs!
  • 10 tutorials: weeks 2–11, with your tutor!
    • activities, practice, discussion, making, researching, doing.
    • Pre-class and in-class tasks! (worth 1% of course mark for each tutorial, 10% total)
  • 3 assignments/projects: by yourself
    • Prototype: create a prototype that solves a problem (20%, due Monday week 5)
    • User Research: conduct a small-scale user study (30%, due Monday week 9)
    • Final Project: design a prototype and evaluate it with users (40%, due Monday week 13)

Pre-class and in-class tasks

There are 10 tutorials in this course and one set of marked pre- and in-class tasks associated with each one. Worth 1% each week = 10% total over the semester.

  • Pre-class task: a weekly post on the course forum (100-200 words) which will be discussed and developed during class
    • see the weekly tutorial description for the task specification
  • In-class tasks: main content of the tutorials which includes
    • conceptualising and discussing HCI topics,
    • experimenting with prototyping and research methods,
    • collaborating with other students,
    • developing and evaluating interactive system designs
  • In-person assessment. If you don’t attend your tutorial you will not get a mark without an extension.

Week 2 Tutorial: Making

Pre-class task:

Choose a computer or digital technology that played an important role in your early life. It could be a device, an application, or a website. Upload an image of this technology on the forum. You can upload a photo, sketch, or an image found online (remember to provide a reference). Write a reflective post (100-200 words) about this technology (see prompts on canvas)

In-class tasks:

  1. talk about an interactive technology that is meaningful to you
  2. think and talk about usability and user experience
  3. do some arts and crafts (make zines) to reflect on this to start off the semester

Assignments

  • individual tasks, but require some collaboration
    • that is: you need to study people in User Research and the Final Project, you will find people in your tutorial to study! (they will also find you!)
  • assignments will involve
    • making (prototyping, sketching, coding, building, constructing, designing, soldering?)
    • researching (reading, asking, analysing, measuring, discovering, finding, concluding)
    • communicating (reflecting, discussing, referencing, writing, presenting)
  • no late submissions permitted without an extension
  • all submission is through Gitlab

Assignment 1: Prototype an Animal Computer Interaction

TL;DR: Animals are smart now. Sketch and prototype a computer system for an everyday task that works for one kind of animal as well as humans. More details on Canvas.

How can this dog play the GBA SP? (Alison Pan, Unsplash)

last thing: referencing

Every assessment submission has a place for references.

You must provide at least two references

You must reference any code/ideas taken from other places (internet, books, classmates)

You must use ACM referencing format, look on the assessment pages for examples

You must reference any text/code/ideas drawn from generative AI systems

This is about integrity: respect for your sources and your classmates.

who has a question?

????

Usability

A familiar interface. (Image: Leon Seibert on Unsplash)

Another interface

Another familiar interface.

A Week 1 favourite for ANU lecturers…

Oh boy.

More interfaces…

A technology Charles likes. Why?

Activity: Positive and Negative Experiences with Technology

Turn to the person next to you, find out their name, and then discuss:

An example of a technology you find easy/interesting/enjoyable to use (and why)

and:

An example of a technology you find difficult/annoying/frustrating to use (and why)

We’ll chat for 3 minutes and then share a few with the room.

How do we create computing systems for people?

Depends on the users, settings, contexts, and activities. Need to consider:

  • people who are going to use our system
  • how they think, work, play, interact
  • places and settings in which the system is used
  • tasks or activities for which the system will be used
  • interfaces and devices that people already use
  • people’s needs, values, and aspirations

Usability Goals (Designing User Interfaces)

Some practical goals that can be tested:

  1. Time to learn
  2. Speed of performance
  3. Rate of errors
  4. Retention over time
  5. Subjective satisfaction

(Shneiderman et al., 2018) (one version, another coming right up…)

Usability Goals (Interaction Design, Beyond HCI)

  • Effective to use (effectiveness)
  • Efficient to use (efficiency)
  • Safe to use (safety)
  • Having good utility (utility)
  • Easy to learn (learnability)
  • Easy to remember how to use (memorability)

This version from: (Rogers et al., 2023)

Raffaele et al. (2016), illustrating Rogers et al. (2023)

Usability Goal 1: Effectiveness

  • That it works, the task can be completed.
  • How well can the task be completed?
  • Think quality of the output.
A desk phone. Image Source: Photo by Dan Dennis on Unsplash

Usability Goal 2: Efficiency

  • The way the product supports the task.
  • Support high productivity?
  • Use less energy?
Which interface is more efficient?

Usability Goal 3: Safety

  • Protecting users from errors
  • Preventing undesirable outcomes
  • Recovering when mistakes are made (if not when!)
Are you sure you want to delete everything?

Usability Goal 4: Utility

  • The right kind of functionality for the user’s needs.
  • Appropriate functions to carry out tasks
  • The tasks can be completed in the right way.
Tablet vs mouse for drawing? Unsplash

Usability Goal 5: Learnability

  • How easy is it to learn the system?
  • Is it intuitive?
  • Does it take time/training?
Some complicated software. Photo by Nejc Soklič on Unsplash

Usability Goal 6: Memorability

  • Will users remember how to use it later?
  • Are there supports for infrequent functions?
Annual tax return filing Photo by Kelly Sikkema

User Experience

Charles finds this technology joyful.

Usability vs Joy

“It is not enough that we build products that function, that are understandable and usable, we also need to build joy and excitement, pleasure and fun, and yes, beauty into people’s lives” (Norman, 2013)

How can we test for joy? Is this compatible with the usability goals?

Charles finds this technology joyful.

Another example…

Charles editing a lecture in neovim (:w)

User experience

“How people feel about a product and their pleasure and satisfaction when using it, looking at it, holding it, and opening and closing it” (Rogers et al., 2023, p. 13)

Desirable aspects: Satisfying, Helpful, Fun, Enjoyable, Motivating, Provocative, Engaging, Challenging, Surprising, Pleasurable, Enhances Socialibility, Rewarding, Exciting, Supporting creativity, Emotionally fulfilling, Cognitively stimulating, Experiencing flow.

Undesirable aspects: Boring, Unpleasant, Frustrating, Patronising, Makes you feel guilty, Annoying, Cutesy, Childish, Gimmicky.

Usability vs User Experience

Rogers/Sharpe/Preece illustrate user experience as surrounding usability.

Raffaele et al. (2016), illustrating Rogers et al. (2023)

Thinking about Technology as Experience

Can we unpack how we experience technology? (McCarthy & Wright, 2004)

Four Threads of Experience

Compositional, Sensual, Emotional, Spatio-temporal.

Six Sense-Making Processes

Anticipating, Connecting, Interpreting, Reflecting, Appropriating, Recounting.

Threads of Experience:

  • Compositional: How do the elements of an experience fit together to form a coherent whole?
  • Sensual: What does the design and texture and the overall atmosphere make us feel?
  • Emotional: What emotions color the experience for us?
  • Spatio-temporal: What effects do place and time have on our experience?

Experience Processes

  • Anticipating: We never come to technology unprejudiced.
  • Connecting: We make a judgment in an instant and without much thought.
  • Interpreting: We work out what’s going on and how we feel about it.
  • Reflecting: We examine and evaluate what is happening in an interaction.
  • Appropriating: We work out how a new experience fits with other experiences we have had and with our sense of self.
  • Recounting: We enjoy storytelling and make sense of experience in stories.

Two designs for a voicemail system

The marble answering machine. (Durrell Bishop, 1992)
A desk phone. Image Source: Photo by Dan Dennis on Unsplash

Poll Time!

Is the marble answering machine a good design?

  • Yes?
  • No?
  • Maybe?

Why?

Video: Usefulness, Utility, Usability

Usefulness, Utility, Usability: 3 Goals of UX Design (Jakob Nielsen)

Improving Usability and Experience

What can we do to ensure good usability and good user experience?

Design Principles

  • Visibility
  • Feedback
  • Constraints
  • Mapping
  • Consistency
  • Affordances

From Design of Everyday things (Norman, 2013)

Which mapping is natural? (Source: Wikimedia)

Understanding Users

  • Users are not all the same
  • Different ages, cultures, backgrounds, abilities, interests
  • Various research methods available for understanding users and their contexts
  • Don’t assume; research and find out.
  • Accessibility and inclusivity are important

Images from the paper “Never Too Old: Engaging Retired People Inventing the Future with MaKey MaKey” (Rogers et al., 2014)

Conceptual Models

  • Model: a simplified description of a system or process
  • Conceptual model: high-level description of how a system is organized and operates
  • Includes:
    • Metaphors, analogies
    • Concepts and their relationships
    • Mappings
  • These elements inform the interaction design and user experiences

Video: What is a conceptual model?

What is a mental model? (NNGroup)

Interface Metaphors

Exploit similarities to user’s knowledge of other domains. E.g.,

  • Cards: Familiar, strong associations (playing, business, credit), flick through, sort, themed, structured
  • Desktop and Recycle bin
  • Shopping trolley and checkout
  • Surfing the web
A highly metaphorical interface. (Gentner & Nielsen, 1996)

Interaction Types

Five types of interaction models:

  • Instructing
  • Conversing
  • Manipulating
  • Exploring
  • Responding

Image source: Uriel Soberanes Image source: Fikri Rasyid Image source: Szabo Viktor

Questions

Who has a question?

References

Gentner, D., & Nielsen, J. (1996). The anti-mac interface. Commun. ACM, 39(8), 70–82. https://doi.org/10.1145/232014.232032
McCarthy, J., & Wright, P. (2004). Technology as experience. Interactions, 11(5), 42–43. https://doi.org/10.1145/1015530.1015549
Norman, D. A. (2013). The design of everyday things: Revised and expanded edition. Basic Books.
Raffaele, R., Carvalho, B., Lins, A., Marques, L., & Soares, M. M. (2016). Digital game for teaching and learning: An analysis of usability and experience of educational games. In A. Marcus (Ed.), Design, user experience, and usability: Novel user experiences (pp. 303–310). Springer International Publishing.
Rogers, Y., Paay, J., Brereton, M., Vaisutis, K. L., Marsden, G., & Vetere, F. (2014). Never too old: Engaging retired people inventing the future with MaKey MaKey. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 3913–3922. https://doi.org/10.1145/2556288.2557184
Rogers, Y., Sharp, H., & Preece, J. (2023). Interaction design: Beyond human-computer interaction, 6th edition. John Wiley & Sons, Inc. https://quicklink.anu.edu.au/kv9b
Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N., & Diakopoulos, N. (2018). Designing the user interface: Strategies for effective human-computer interaction, 6th edition. Pearson. https://quicklink.anu.edu.au/kv9b