Foundations of User-Centered Design

Questions about the Project?• Done in groups• ~4 members• Projects must have at least two real users (who are

not members of the team)• Find a project that you can get excited about• Find people with shared goals, vision, and work

style• Get started now!

– If you have a project, start selling it

Types of Projects• Induce change:

– Take an existing interaction and make it more efficient or add new capabilities

• Invent new forms– Enable new behaviors

Refrain from• Building from the “ground up”• Investing too much in the “back end”• Yet another attempt at a well known or commonly

pursued interface:

– To do lists, grocery finders, course schedulers, apartment finders, mail or news readers, etc.

Friday

You will conduct a brainstorming activity with a small group.

You don’t NEED to have a specific idea for this.

Next Monday

You will each make a ONE MINUTE pitch of an idea.

You will submit two power point slides prior to class.

Hall of Fame or Shame?

• My task: after taking a cup and filling it with soda, I need to put a lid on the cup

Analysis

• Why is the first one a candidate for Hall of Shame, while the other is a candidate for the Hall of Fame?– Mappings

• But: must consider context

Exercise

• Another taste of what you’ll be doing….

A two-person game• Start with the numbers 1, 2, 3, ..., 9

• Alternate turns, taking one number at a time• Player one Xs out the number they want to take• Payer two circles the number they want to take

• A player wins when they have any 3 numbers that sum to 15– e.g., 1, 3, 9, 5 wins because 1+9+5 equals 15

• If numbers are all used with no winner, the game is a draw

OK, now try it another way

1

2

34

5

67

8

9

Now, observe

• Do you really need the numbers?

• An interface is a representation of a problem/task

• A well-designed interface can wholly transform a task, making it much simpler

Moving On – Today’s Objectives

• “Refresh your memory" of some basic human psychology

• Begin to discuss design principles based on these principles

The Core Process of UI Design

• Understand User Behavior

• Map Behavior to Interaction

• Evaluate

Human Cognition

• It’s Human-Computer Interaction, User Interface Design so we need to understand something about human capabilities

• … so a very brief overview of human cognitive capabilities as relevant to HCI

Human Cognition

• Attention

• Perception and recognition

• Memory

• Learning

• Problem solving and reasoning

Attention

• From the range of available possibilities, select what to concentrate on

• Visual or auditory scanning

• Factors that affect ease of focusing on the right stuff:– Specificity of goals– Information display

Attention – Design Implications

• Information relevant to the current task should be salient

• Graphical techniques – layout, ordering, organization, underlining, color, animation – can be used to achieve this goal

• But don’t visually clutter the interface: plain interfaces can be easier to use

Attention - Example

• My Task – Enter the query “task centered user interface design” into a search engine.

• Consider two interfaces that support web search; evaluate both from the perspective of being able to focus on where to enter your query.

Perception

• Acquiring information from the environment

• Involves using different senses • Vision is dominant sense for sighted people

• Results in internal experience of external events

Perception – Design Implications

• Icons should be designed so users can easily distinguish their meanings

• Sounds should be clearly audible and distinguishable

• Text should be legible and distinguishable from the background

Perception - Example

• My goal is to read the new messages in an online forum

Icons: are their meanings clear?

Attention: easy to focus on the right stuff?

Also true for auditory cues

• Microsoft Money generates the “Exclamation” sound whenever a new transaction is entered into an account.– Annoying in it’s own right– But is this the proper choice of sounds?

Memory• Short-Term Memory

– Instant, effortless recall – Severely limited capacity – “7 plus or minus 2”– “Chunking”– Fragile

• Long-Term Memory– “Unlimited” capacity– Takes time/effort to store and retrieve– Interpretative– Retrieval is context-sensitive– rote memory vs. relationships vs. explanation

Memory (continued)

• People are really good at remembering some things– Visual cues, especially faces

• People are much better at recognizing things than recalling them

• People are good at associative reminding• People remember the typical case and the

exceptions

Memory – Design Implications

• Don’t make users remember complicated procedures

• Limit number of items in text menus• Design interfaces that promote recognition

over recall• Give users resources to help them visually

encode information (colors, icons, time stamps, etc.)

More than 7 +- 2 items in menu – bad?

Groups of Contacts

Icons Representing

Individual contacts

Group Icons

Visual representation of contacts – recognition, not recall

Pictures

Spatial organization of information

Learning

• Acquiring new knowledge or skills

• Exploratory learning – learning by doing

• Scaffolding or “training wheels”

Learning – Design Implications

• Create interfaces that encourage exploration– Easy to try out and undo actions

• Design interfaces that constrain and guide users to select the right action

• Provide multiple, linked representations

Can undo picture editing action

Can learn about actions that are not available in current context

Problem solving and reasoning

• Conscious/reflective activity– Thinking over one’s options– Figuring out the best option or solution– Making a plan– Weighing pros and cons

Problem solving – Design Implications

• Provide the proper information and aids

• But, even better – design to make problem-solving and reasoning unnecessary

Example

• What’s the best flight from Vancouver to Montreal?– Time– Layovers– Plane changes– Price– …

Representation 1

AC 117 Vancouver Calgary 7:00 9:00

Cdn 321 Vancouver Calgary 9:00 12:00

Cdn 355 Calgary Montreal 13:30 19:30

AC 123 Calgary Toronto 12:30 16:30

AC 123 Toronto Montreal 16:45 17:30

* Time zones: van-cal + 1 ; cal – tor, mon + 2

Representation 2

Vancouver

Calgary

Toronto

Montreal

7 9 11 13 15 17

8 10 12 14 16 18

10 12 14 16 18

20

AC 117

AC 123

Cdn 321

Cdn 355

Another Example:Tax Preparation Software

• User doesn’t have to do computation

• User doesn’t have to figure out which form to use

• Instead, software poses questions that users are likely to be able to answer

Next Steps

• Reading: – Start reading DOET (Finish by Sept. 9)

• Project:– “It Bugs Me” Activity – Bring to class Friday

– Begin brainstorming ideas – Bring next Monday

• Next class:– Studio : “It Bugs Me” and getting to know each other