Human-Centered Design

Design of Everyday Things - 1988 & 2002

Don Norman's magnum opus

Totally revolutionize how I personally look at design

Introduction to Human Centered Design for a wider audience

Core Book Topics

It is not the user's fault when they have trouble with completing a task

4 main design principles

"Consider the Door"

Two main actions: open the door, close the door

Hinges, supporting columns, push plates tell user where to interact

By removing those design features, users lose visibility & run into issues

Doors as "Natural" design

With doors that push, the designer must provide signals that naturally indicate where to push. These need not destroy the aesthetics.

Put a vertical plate on the side to be pushed, nothing on the other. Or make the supporting pillars visible. The vertical plate and supporting pillars are natural signals, naturally interpreted, without any need to be conscious of them.

Affordances

What are the fundamental properties of an object?

What do these properties tell you about interacting with that object?

Examples of Objects & Their Affordances

A chair affords ("is for") support and, therefore, affords sitting. A chair can also be carried.

Glass is for seeing through, and for breaking. Wood is normally used for solidity, opacity, support, or carving.

Flat, porous, smooth surfaces are for writing on. So wood is also for writing on.

Why Take Advantage of Affordances?

When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction is required.

…When simple things need pictures, labels, or instructions, the design has failed.

Conceptual Models

Your design should show how the thing it interacts with works

A figure of a temperature control of a refrigerator, showing two dials and a chart of settings for temperature settings of a freezer and a fresh food section.
With two controls, one for each of the freezer and fresh food sections, what does this imply about how a refrigerator works?

Implied Conceptual Model of Refrigerator

A diagram of an incorrect conceptual model of a refrigerator, where the freezer and fresh food sections are controlled separately.
The two dials of the controls imply that each section of the fridge is controlled by a separate mechanism, because the controls are not linked.

Real Conceptual Model of Refrigerator

A diagram of a correct conceptual model of a refrigerator, where the freezer dial controls the cooling and the fresh food dial controls the flow of cool air to the fresh food section.
There are some hints to this in the controls, namely that the dials are labelled differently, but in general because the controls are separate, you often end up setting the fridge incorrectly because the conceptual model isn't mapped well.

Two Other Concepts from HCD

Mapping: How do the controls map to the effects of those controls?
What do you do in a car to turn the wheels?

Feedback: How do you provide the user with the right information to help them control the thing?
When someone makes a mistake, how do you tell them?

A Good Example of Design: Scissors

Even if you haven't seen or used scissors, you can see that the number of possible actions is limited

Affordances: The holes all but ask to insert something into them

Constraints: The big hole fits multiple fingers, the small hole fits only one

Conceptual Model: Obvious in that you move the holes and it moves two blades toward each other

A Bad Example: Digital Watches

A classic silver Casio digital watch, with three buttons and a LCD screen
On a stereotypical digital watch, what do the buttons do? How do you set the time?
What happens when we remove the labels on the buttons?

7 Reasons Why Bad Design Happens

7 Principles of Good Design

  1. Use both knowledge in the world and knowledge in the head.
  2. Simplify the structure of tasks.
  3. Make things visible: bridge the gulfs of Execution and Evaluation.
  4. Get the mappings right.
  5. Exploit the power of constraints, both natural and artificial.
  6. Design for error.
  7. When all else fails, standardize.

How Do These Principles Apply To The Web?

What does a link look like? A button?

What does a web page look like? A web app?

How can we provide better feedback to users?

How can we simplify the steps needed for a task to be completed?