1

UI Hall of Fame or Hall of Shame?

2

UI Hall of Shame!

How do you cancel?

3

Human-Computer Interaction (HCI)

Human* the end-user of a program* the others in the organization

Computer* the machine the program runs on

Interaction* the user tells the computer what they want* the computer communicates results

4

User Interfaces

Part of a software program that allows* user to interact with computer* user to carry out their task

HCI = design, prototyping, evaluation, and implementation of user interfaces (UIs)

5

Bad User Interfaces

6

Bad User Interfaces

Hard to tell the difference between the two icons and names

7

UI Design Cycle

Design

Prototype

Evaluate

8

User-centered Design

“Know thy User” Cognitive abilities

* perception* physical manipulation* memory

Organizational / job abilities Keep users involved throughout

project

9

UI Hall of Fame or Shame?

View menu from Visual Forms* two options:

+Non-Visual Objects (e.g., formatting labels)+Source...

10

UI Hall of Shame

Terminology* what are “Non-Visual Objects” & how can you view them?

* why not “Formatting Labels” instead?

11

Attributes of Good UIs

Invisible Minimal training required

* easy to learn

High transfer of training* easy to remember

Predictable Few errors Easy to recover from errors

?

12

Attributes of Good UIs (cont.)

Allow people perform real tasks well* efficient

Flexible Seem “intelligent”

* “do the right thing”

People like it“It is easy to make things hard. It is hard to

make things easy.” -- A. Chapanis, ‘82

13

Good Graphic Design & Color Choice

Appropriately direct attention. How?* use color and layout

From IBM’s RealCD application

+black on black is a bad color choice+shouldn’t need label to tell you this is a button

14

Good Graphic Design & Color Choice (cont.)

Group related objects* alignment & spacing* decorations

A Toolbar from MS Word

Balance & white space Few fonts & colors (5 to 7 colors max.) Remember color deficiency (8% of males)

15

Provide Feedback

16

Feedback Placement

Where the eyes are* insertion point* screen cursor

Audio output* sounds* voice* when might this not be a good idea?

17

Error Prevention Why?

* avoid “fear of failure”* allow faster work

Suppress unavailable commands Confirm dangerous actions

18

UI Hall of Fame or Shame?

Dialog box* ask if you want to delete

+yes (green)+no (red)

Problems?* R-G color deficiency* cultural mismatch

+Western~ green good~ red bad

+Eastern & others differ

19

Visual Illusions

Can you guess the woman’s age? Keep looking.

20

Color Guidelines

Avoid simultaneous display of highly saturated, spectrally extreme colors

Opponent colors go well together* (red & green) or (yellow & blue)

21

Pick Non-adjacent Colors on the Hue Circle

22

Conceptual Models

Mental representation of how object works & how interface controls effect it

People have preconceived models that you may not be able to change* dragging to trash deletes

Interface must communicate model* online help / documentation can help, but

shouldn’t be necessary

23

Visual Clues (affordances)

Well-designed objects have affordances* visible clues to their operation

Poorly-designed objects* no clues* false clues

+teapot with handle and spout on the same side

24

Design Model & User’s Model

Users gets model from experience & usage* through system image

What if the two models don’t match?

Design Model User’s Model

System Image

25

Design Guides

Provide good conceptual model* user wants to understand how interface control

impacts object

Make things visible* if object has function, interface should show it

Map interface controls to user’s model

Provide feedback* what you see is what you get!

26

Interface Hall of Shame or Fame?

For setting cache size in MS Internet Explorer (since changed)

Slider from 1% to 100%

27

Interface Hall of Shame or Fame?

What if you have a big disk? (e.g., 40GB* forced to have at least a 400MB cache* takes away control from the user

What if they don’t know their disk size?

28

Why Model Human Performance?

To test understanding To predict influence of new

technology

29

The Model Human Processor

Developed by Card, Moran, & Newell (‘83)

Long-term Memory

Working MemoryVisual Image

StoreAuditory Image

Store

PerceptualProcessor

CognitiveProcessor

MotorProcessor

Eyes

Ears

Fingers, etc.

sensorybuffers(Dix)

30

What is User-centered Design?

Developers working with target users* help define what the system will do & how* lots of iterative exploration & feedback

Think of the world in users terms* user & customer not the same person ->?

+don’t design for manager’s work process

Understanding work process* points where humans and computers intersect

Not technology-centered/feature driven

31

What is Usability?

Ease of learning* faster the second time and so on...

Recall* remember how from one session to the next

Productivity* perform tasks quickly and efficiently

Minimal error rates* if they occur, good feedback so user can recover

High user satisfaction* confident of success

32

Understanding the User

How do your users work?* task analysis, interviews, & observation

How do your users think?* understand human cognition* observe users performing tasks

How do your users interact with UIs?* observe!

33

Involving the User

Users help designers learn * what is involved in their jobs* what tools they use* i.e, what they do

Developers reveal technical capabilities* builds rapport & an idea of what is possible

Users try prototype & comment on it* developers make incremental changes & iterate

34

Observation Techniques

In the work place Use recording technologies

* notebooks* tape recorders* video cameras

Ask users to think out loud while working* look for job-specific procedures / terminology

Show users transcript & ask about it

35

Summary

User-centered design is different than traditional methodologies

Leads to solving problems up front (cheaper)

Know thy user & involve them in design

Evaluate this web-siteExample