The computer's needs are alien
to the needs of the person using it.
Every interactive product you touch was designed by someone whose frame of reference was themselves. HCI exists to break that loop: study the human, design the interaction, measure it against usability and user experience goals rather than against a feature list.
LEARNING OUTCOMES
- Define HCI and explain its interdisciplinary scope.
- Discuss how HCI evolved from ergonomics to experience design.
- Describe the four activities in the interaction design process.
- Distinguish usability goals from user experience goals.
- Apply the five core design principles to critique a real interface.
The problem HCI was invented to solve
A good programmer understands the nature and needs of the machine. But the nature and needs of the machine are utterly alien to the nature and needs of the human who will use it. That gap is where bad products are born.
- Designers see how rich the product is in features and functions, and stop seeing how hard it is to use.
- They ignore how many hours it takes to learn, because they already know it.
- They do work hard to make it easy to use - but their frame of reference is themselves, so it ends up easy for other software engineers and impossible for everyone else.
The elevator panel
Labels and control buttons on the bottom row all look identical, so people press a label by mistake. Nobody makes that error on the top row, where labels and buttons look different. The fix was never a manual - it was visual distinction.
The vending machine
You must press a button first to activate the bill reader, but every vending machine on earth takes the bill first. It contravenes a well-known convention, so users fail even though each individual step is simple.
The remote control
A generic remote is a grid of identical grey buttons. The TiVo remote is peanut-shaped to sit in the hand, colour-coded, with distinctive shapes you can find by touch. Same function, completely different interaction.
Three failures, three principles, one sentence: elevator = visibility, vending machine = consistency with convention, remote = affordance you can feel. If you can retell those three objects you have already recalled half of the design-principles section.
What HCI actually is
HCI is the study of all aspects of how people interact with computers, and of the extent to which people and computers influence each other. It is a two-way street by definition.
| Source | Definition worth quoting |
|---|---|
| ACM SIGCHI (1992) | Concerned with the design, evaluation and implementation of interactive computing systems for human use, and with the study of major phenomena surrounding them. |
| Shneiderman | An interdisciplinary design science - it began by combining the data-gathering methods and intellectual frameworks of experimental psychology with the tools of computer science. |
| Dix (1998) | The study of people, computer technology, and the ways these influence each other. We study HCI to determine how to make technology more usable by people. |
| Carroll (2002) | The study and practice of usability - creating technology people will want to use, will be able to use, and will find effective when used. |
Pull the four words in the name apart, because the exam does:
Human
Not only one person. An individual user, a group working together, or a sequence of users inside an organisation.
Computer
Desktop machine, large-scale system, pocket device, embedded system (photocopier, microwave), or pure software (search engine, word processor).
User interface
The parts of the computer the user actually comes into contact with.
Interaction
A dialogue with feedback and control throughout a task - the user invokes print, the interface replies with a dialog box.
Experimental psychology, computer science, educational and industrial psychology, industrial and graphic design, technical writing, human factors / ergonomics, information architecture, anthropology and sociology. HCI is a bridge discipline; no single field owns it.
Who, what, where - then optimise
Before you can design an interaction you have to take three things into account: who the users are, what activities are being carried out, and where the interaction takes place. Only then can you optimise the interaction so it matches the users' activities and needs.
- Take into account what people are good and bad at - not what you wish they were good at.
- Consider what might help people in the way they currently do things.
- Think through what might provide a quality user experience, not just a working one.
- Listen to what people want and get them involved.
- Use tried and tested user-centred methods rather than intuition.
Pecking at a grid keyboard with a remote, swiping two alphanumeric rows on a touchpad, or speaking to a smart speaker? There is no universal answer - the right one depends on the task (a one-word search versus a password), the user, and the room. That is the whole point of the who/what/where triad.
One size fits nobody
Interaction design helps designers appreciate that one size does not fit all, identify incorrect assumptions about user groups, and stay aware of both people's sensitivities and their capabilities.
Accessibility
The extent to which an interactive product is accessible by as many people as possible. The focus is on people with disabilities - Android accessibility services, Apple VoiceOver.
Inclusiveness
Making products and services accommodate the widest possible number of people - smartphones designed for all and made available regardless of disability, education, age or income.
Disability is not a fixed property of a person. It changes with age or recovery, its impact varies across a single day and across environments, and it is often created by technology that demands an interaction some people cannot perform.
| Classification | Examples |
|---|---|
| Sensory impairment | Loss of vision or hearing; peripheral vision only, colour blindness, no light perception. |
| Physical impairment | Loss of function in one or more body parts after a stroke or spinal cord injury. |
| Cognitive impairment | Learning impairment, or loss of memory / cognitive function with old age. |
| Duration category | Example |
|---|---|
| Permanent | A long-term wheelchair user. |
| Temporary | Recovery after an accident or illness. |
| Situational | A noisy environment means a person cannot hear the audio prompt. |
Design can also make impairment desirable rather than clinical: prosthetics have moved from functional-and-ugly to fashionable, and people now speak of wearing their wheels rather than using a wheelchair.
Is 5/21/2015 or 21/5/2015 correct for an international form? Neither - the answer is to avoid ambiguous formats altogether. And note the asymmetry the slides raise: smartphones are accepted almost universally, while websites get very different reactions across cultures. Hardware conventions travel; content conventions do not.
P-T-S for duration - Permanent, Temporary, Situational - and S-P-C for type - Sensory, Physical, Cognitive. Two three-letter chunks beat six loose terms.
Four activities of interaction design
Interaction design is a process, and this lecture states it in its shortest form.
- Establishing requirementsFind out who the users are and what support the product could usefully provide.
- Developing alternativesGenerate more than one candidate design rather than defending the first idea.
- PrototypingBuild something users can interact with, because designs cannot be judged on paper alone.
- EvaluatingTest it, feed what you learn back into the requirements, and go round again.
Users are involved throughout development; usability and UX goals are identified, documented and agreed at the beginning; and iteration runs through all four activities. Miss any one and it is no longer interaction design.
The six usability goals
Usability goals are about performance - can the product be used well? They are the measurable half of the picture.
| Goal | The question it answers |
|---|---|
| Effective to use | How good is the product at doing what it is supposed to do? |
| Efficient to use | Does the way the product works support the user in doing their task quickly? |
| Safe to use | Does it protect users from undesirable or dangerous situations, including their own errors? |
| Good utility | Does it provide the right kind of functionality at all? |
| Easy to learn | How easy is the system to learn to use? |
| Easy to remember | How easy is it to remember how to use after a period away? |
Which of the six matters most is not a property of the product - it is a property of the user in front of it:
- Novice users need learnability.
- Infrequent users need memorability.
- Experts need efficiency.
No user is uniformly novice or expert. Expertise splits into domain experience, application experience and feature experience - a veteran accountant can be a total novice in your new accounting app, and an expert in your app can be a novice in one obscure feature of it.
E-E-S-U-L-R: Effective, Efficient, Safe, Utility, Learn, Remember. Read it as "Every Engineer Should Use Less Repetition". Then attach the three user types: Novice-learn, Infrequent-remember, Expert-efficient.
UX: what it feels like, not what it does
UX is how a product behaves and is used in the real world - how people feel about it, their pleasure and satisfaction in using, looking at, holding, opening or closing it. Every product used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters (Garrett, 2010).
Nielsen & Norman (2014)
All aspects of the end-user's interaction with the company, its services, and its products.
Hornbæk & Hertzum (2017)
How users perceive a product - whether a smartwatch reads as sleek or chunky - and their emotional reaction to it.
You cannot design a user experience. You can only design for a user experience. The experience happens inside the person, not inside the product.
| Desirable UX qualities | Undesirable UX qualities |
|---|---|
| satisfying, enjoyable, engaging, pleasurable, exciting, entertaining | boring, frustrating, unpleasant |
| helpful, motivating, challenging, enhancing sociability, supporting creativity | patronizing, making one feel guilty, making one feel stupid |
| cognitively stimulating, fun, provocative, surprising, rewarding, emotionally fulfilling | annoying, childish, cutesy, gimmicky |
The iPod is the textbook success: a quality experience from the very start - simple, elegant, a distinct brand, pleasurable, a must-have fashion item with catchy names. None of those words is a usability metric.
How do usability goals differ from UX goals? Are there trade-offs between them - can a product be both fun and safe? And how easy is each to measure? Usability goals are largely objective and measurable; UX goals are subjective and measured indirectly through people's own accounts.
The five principles, with the slides' own examples
Design principles are generalizable abstractions for thinking about design - the do's and don'ts, what to provide and what not to provide at the interface. They come from a mix of theory-based knowledge, experience and common sense.
1. Visibility
Make it visible what can be done. The elevator control panel where you cannot tell what to push fails here, and invisible automatic controls (a tap that will not see your hand, a sensor that misses you if you are wearing black) fail harder because there is nothing to inspect at all.
2. Feedback
Send information back to the user about what has been done - sound, highlighting, animation, or combinations. A screen button that flashes red and clicks when pressed is doing feedback.
3. Constraints
Restrict the possible actions so incorrect options cannot be selected: greying out menu items so only permissible actions remain, or shaping a key so it enters a lock only one way.
4. Consistency
Use similar operations and similar elements for similar tasks. Ctrl+C for copy, Ctrl+S for save. Consistent interfaces are easier to learn and use.
5. Affordances
An attribute of an object that gives a clue to how it is used. Physical: a door affords pulling, a cup handle affords grasping. Virtual: an icon affords clicking, a scrollbar affords moving up and down.
Consistency is the one the lecture pushes furthest, because it is the one that breaks:
- What happens when several commands start with the same letter - save, spelling, select, style? You are forced into Ctrl+S, Ctrl+Sp, Ctrl+Shift+L, breaking the very rule that made the shortcuts learnable, and increasing the learning burden and error rate.
- Internal consistency: operations behave the same way within one application. Hard to achieve as interfaces grow complex.
- External consistency: operations and interfaces are the same across applications and devices. Very rarely achieved, because it depends on different designers' preferences.
Where do you plug in the mouse, top or bottom connector? Colour-coded icons alone may not help. Two better designs: (i) place the icon directly adjacent to its connector so the mapping is spatial, or (ii) colour-code so each connector is tied to its label. This is visibility plus mapping doing the work that a manual otherwise has to do.
V-F-C-C-A - "Very Few Clumsy Cars Accelerate". Visibility, Feedback, Constraints, Consistency, Affordances. Then anchor each to one physical object: elevator panel, red flash, greyed menu, Ctrl+C, door handle.
Mistakes students usually make
Each claim below is the wrong answer; the line beneath it is the correction, in the wording this course marks against.
Shortest correct answers
The night-before table: every term in this lecture with the smallest answer that still earns the mark.
| Concept | Shortest correct answer |
|---|---|
| HCI | Design, evaluation and implementation of interactive computing systems for human use, plus study of the phenomena around them. |
| Interaction | A dialogue with feedback and control while performing a task. |
| Interaction design process | Establish requirements → develop alternatives → prototype → evaluate (iterate). |
| Usability goals (6) | Effective, efficient, safe, good utility, easy to learn, easy to remember. |
| UX goals | Desirable felt qualities (satisfying, engaging, pleasurable) and undesirable ones (frustrating, patronizing, gimmicky). |
| Design principles (5) | Visibility, feedback, constraints, consistency, affordances. |
| Accessibility | Extent to which a product is usable by as many people as possible, focusing on disability. |
| Inclusiveness | Accommodating the widest possible number of people regardless of ability, education, age or income. |
| Impairment categories | Sensory / physical / cognitive; permanent / temporary / situational. |
| Internal vs external consistency | Same behaviour within one app vs same behaviour across apps and devices. |
Exam-style application
Write your own answer first, then open the model answer. These are the longer-form questions this material generates.
Take the vending machine that requires a button press before it accepts a bill. Name the principle it violates and give the one-line redesign.
Your team says the new dashboard "has a great user experience because we designed one." Rewrite that claim so it is defensible in this course.
A hospital drug-dosing screen must be usable by both new residents and consultants who use it fifty times a day. Which usability goals conflict, and how would you resolve it?
Check yourself
6 questions. Every option is explained after submitting, including why the wrong ones are wrong.