Chapter 1

The Psychopathology of Everyday Things

Characteristics of a Good CHI Project

• Not just a standard, everyday UI– Can aim at a new UI; there is a lot of effort in social, mobile,

ubiquitous technologies …– One possibility for more traditional interfaces is to think of

what is wrong with it; aim for better– A third possibility is to add something unique to a common UI

type• Interesting cognitive or social issues to address

– People have limits on their attention, perception, memory, rational thought, etc.

– Social interactions require awareness, communication, coordination, recovery from breakdowns, etc.

Chapter 1• The problem of use: discoverability and understanding• Types of design: industrial design/interaction

design/experience design/human-centered design • Affordances and signifiers• Mappings and feedback• Conceptual models and mental models• The system image (combined system presentation)• Feature creep/usefulness vs. usability/paradox of

technology• Knowing what matters to users/customers/etc.

Bad designs– Elevator controls and labels on the bottom row all look the same,

so it is easy to push a label by mistake instead of a control button

– People do not make same mistake for the labels and buttons on the top row. Why not?

From: www.baddesigns.com

Good and bad design

• What is wrong with the Apex remote?

• Why is the TiVo remote so much better designed?– Peanut shaped to fit in

hand– Logical layout and color-

coded, distinctive buttons– Easy to locate buttons

What to design• Need to take into account:

– Who the users are– What activities are being carried out– Where the interaction is taking place

• Need to optimize the interactions users have with a product– So that they match the users’ activities and needs

Understanding users’ needs

Asymmetry of interaction

– Need to take into account what people are good and bad at

Tradition and Transcendence

– Consider what might help people in the way they currently do things

No Arm-Chair Quarterbacking

– Listen to what people want and get them involved

– Use tried and tested user-centered methods

Which kind of design?• Lots of terms are used to discuss CHI-related design practices

– user interface design, – software design, – human-centered design, – product design, – web design, – experience design (UX)– interaction design

The meanings vary both in terms of the central focus of the activity (e.g. interface vs. experience) and in whether they view the activity as

– more upstream activity (i.e. determining what the software should do) or– more downstream activity (e.g. designing to meet an existing specification,

engineering)

HCI and interaction design

The User Experience

• How a product behaves and is used by people in the real world– the way people feel about it and their pleasure and satisfaction when

using it, looking at it, holding it, and opening or closing it– “every product that is used by someone has a user experience:

newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2003)

• Cannot design a user experience, only design for a user experience

Visibility• This is a control panel for an elevator

• How does it work?

• Push a button for the floor you want?

• Nothing happens. Push any other button? Still nothing. What do you need to do?

It is not visible as to what to do!

From: www.baddesigns.com

Visibility

…you need to insert your room card in the slot by the buttons to get the elevator to work!

How would you make this action more visible?

• make the card reader more obvious• provide an auditory message, that says what to do

(which language?)• provide a big label next to the card reader that

flashes when someone enters• make relevant parts visible• make what has to be done obvious

What do I do if I am wearing black?

• Invisible automaticcontrols can make it more difficult to use

Affordances & Signifiers• Affordance: Something that can be done with an object

– Often misinterpreted as a signifier in CHI discussions• Signifier: Refers to an attribute of an object that allows people

to know how to use it– e.g. a mouse button invites pushing, a door handle affords pulling

• Since Norman’s original introduction of the concept in software design, it has been much popularised in interaction design to discuss how to design interface objects– e.g. scrollbars to afford moving up and down, icons to afford clicking on

• What do ‘signifiers’ have to offer software design?– Interfaces are virtual and do not have signifiers like physical objects– Instead use of interfaces involves learned conventions of mappings between action and effect at

the interface• Some mappings are better than others

Physical Signifiers

How do these physical objects signify their use? Are they obvious?

Virtual Signifiers

How do the following screen objects afford?What if you were a novice user?Would you know what to do with them?

Logical or ambiguous design?• Where do you plug the mouse?

• Where do you plug the keyboard?

• top or bottom connector?

• Do the color coded icons help?

From: www.baddesigns.com

How to design them more logically(i) A provides direct adjacent

mapping between icon and connector

(ii) B provides color coding to associate the connectors with the labels

From: www.baddesigns.com

Mappings: Avoiding Ambiguous Design

Feedback

• Sending information back to the user about what has been done

• Includes sound, highlighting, animation and combinations of these

– e.g. when screen button clicked on provides sound or red highlight feedback:

“ccclichhk”

Because Software Signifiers are Learned: Consistency

• Design interfaces to have similar operations and use similar elements for similar tasks

• For example:– always use ctrl key plus first initial of the

command for an operation – ctrl+C, ctrl+S, ctrl+O• Main benefit is consistent interfaces are easier

to learn and use

When consistency breaks down• What happens if there is more than one command starting

with the same letter?– e.g. save, spelling, select, style

• Have to find other initials or combinations of keys, thereby breaking the consistency rule– e.g. ctrl+S, ctrl+Sp, ctrl+shift+L

• Increases learning burden on user, making them more prone to errors

Internal and external consistency

• Internal consistency refers to designing operations to behave the same within an application– Difficult to achieve with complex interfaces

• External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices– Like Apple’s design guidelines on applications

Conceptual Models and Mental Models

Conceptual model

• Need to first think about how the system will appear to users (i.e. how they will understand it)

• A conceptual model is: – “a high-level description of how a system is organized and

operates.” (Johnson and Henderson, 2002, p. 26)

– Not a description of the user interface but a structure outlining the concepts and the relationships between them

• Conceptual models can be presented through signifiers in the design and through descriptions and documentation

Helps the design team

• Orient themselves towards asking questions about how the conceptual model will be understood by users

• Not to become narrowly focused early on

• Establish a set of common terms they all understand and agree upon

• Reduce the chance of misunderstandings and confusion arising later on

Main components

• Major metaphors and analogies that are used to convey how to understand what a product is for and how to use it for an activity.

• Concepts that users are exposed to through the product

• The relationships between the concepts– e.g., one object contains another

• The mappings between the concepts and the user experience the product is designed to support

Mental models

• Users develop an understanding of a system through learning and using it

• Knowledge is often described as a mental model– How to use the system (what to do next)– What to do with unfamiliar systems or unexpected

situations (how the system works)

• People make inferences using mental models of how to carry out tasks

Mental models

• Craik (1943) described mental models as internal constructions of some aspect of the external world enabling predictions to be made

• Involves unconscious and conscious processes, where images and analogies are activated

• Deep versus shallow models (e.g. how to drive a car and how it works)

Everyday reasoning and mental models

(a) You arrive home on a cold winter’s night to a cold house. How do you get the house to warm up as quickly as possible? Set the thermostat to be at its highest or to the desired temperature?

(b) You arrive home starving hungry. You look in the fridge and find all that is left is an uncooked pizza. You have an electric oven. Do you warm it up to 375 degrees first and then put it in (as specified by the instructions) or turn the oven up higher to try to warm it up quicker?

Heating up a room or oven that is thermostat-controlled

• Many people have erroneous mental models (Kempton, 1996)

• Why?– General valve theory, where ‘more is more’

principle is generalised to different settings (e.g. gas pedal, gas cooker, tap, radio volume)

– Thermostats based on model of on-off switch model

A classic conceptual model: the spreadsheet

• Analogous to ledger sheet

• Interactive and computational

• Easy to understand• Greatly extending

what accountants and others could do

www.bricklin.com/history/refcards.htm

Why was it so good?

• It was simple, clear, and obvious to the users how to use the application and what it could do

• “It is just a tool to allow others to work out their ideas and reduce the tedium of repeating the same calculations.”

• Capitalized on user’s familiarity with ledger sheets• Got the computer to perform a range of different

calculations and recalculations in response to user input

Another classic

• 8010 Star office system targeted at workers not interested in computing per se

• Spent several person-years at beginning working out the conceptual model

• Simplified the electronic world, making it seem more familiar, less alien, and easier to learn

Johnson et al (1989)

The Star interface

Interface metaphors• Designed to be similar to a physical entity but also has own

properties– e.g. desktop metaphor, search engine

• Exploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’

• Conjures up the essence of the unfamiliar activity, enabling users to leverage of this to understand more aspects of the unfamiliar functionality

• People find it easier to learn and talk about what they are doing at the computer interface in terms familiar to them

Benefits of interface metaphors

• Makes learning new systems easier• Helps users understand the underlying

conceptual model• Can be innovative and enable the realm of

computers and their applications to be made more accessible to a greater diversity of users

Problems with interface metaphors• Can constrain designers in the way they conceptualize a

problem space and limit designers’ imagination in coming up with new conceptual models

• Can conflict with design principles• Users’ mental model may only be accurate for parts of

software connected to the metaphor– Difficulty going beyond surface features

• Can inadvertently use bad existing designs and transfer the bad parts over

• Mixed-metaphors can be confusing to users• May break conventional and cultural rules

– e.g., recycle bin placed on desktop

Chapter 1• The problem of use: discoverability and understanding• Types of design: industrial design/interaction

design/experience design/human-centered design • Affordances and signifiers• Mappings and feedback• Conceptual models and mental models• The system image (combined system presentation)• Feature creep/usefulness vs. usability/paradox of

technology• Knowing what matters to users/customers/etc.