3/2/2004an introduction to user interface design matthew plumlee

3/2/2004 An Introduction to User Interface Design

An Introduction toUser Interface Design

Matthew Plumlee

Outline

• What is User Interface Design?

• Models– Norman’s model of task performance– User’s mental models

• Schneiderman’s “8 Golden Rules”

What is a User Interface?

• Are user interfaces only on computers?

• Are user interfaces only on computers?– Pencil

• Are user interfaces only on computers?– Pencil– Flashlight, light switch

• Are user interfaces only on computers?– Pencil– Flashlight, light switch– Measuring tape

• Are user interfaces only on computers?– Pencil– Flashlight, light switch– Measuring tape– Frying pan

• What do all of these things have in common?

• Tools, Affordances (The Psychology of Everyday Things)

Examples of Affordances

• Doorknobs, push handles, pull handles

• Buttons/switches– Raised boxes are for pushing– Objlong boxes in tracks are for sliding

• Dials—round things are for turning

• Handles are for grabbing onto/pulling

• Can suggest use, can suggest misuse

What is User Interface Design?

• User interface…– facilitates the use of a tool…

• User interface…– facilitates the use of a tool…– that tool aids in the completion of a task

• User interface design:– Creation of user interfaces that best facilitate

the use of a particular tool to complete a task

• User interface design:– Creation of user interfaces that best facilitate

the use of a particular tool ot complete a task– For computers, actually a bit less direct

(consider mouse/keyboard vs. touchscreen, etc.)

Roadmap

• Today:– Models involving users, some general

guidelines for computer UI design

Roadmap

• Today:– Models involving users, some general

guidelines for computer UI design

• After Spring Break:– Design process– Testing and evaluation– Examples

Models

• 3 Kinds of Models– Explanatory theories (hypotheses)

• Example: Why does patient stop when doctor looks at computer all of a sudden?

Models

– Empirical laws (quantitative, tested hypotheses)• Example: Fitt’s Law

Models

– Empirical laws (quantitative, tested hypotheses)• Example: Fitt’s Law

– Dynamic models (simulation)• Example: what follows…

Model of Task Performance• Donald Norman (affordance guy)

• How the user interacts:– Establish goal to be achieved

• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal

• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal– Specify action sequence for that intention

• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal– Specify action sequence for that intention– Execute the action

• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal– Specify action sequence for that intention– Execute the action– Perceive the system state

• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal– Specify action sequence for that intention– Execute the action– Perceive the system state– Interpret the state as perceived

• How the user interacts:– Establish goal to be achieved– Form intention for action that will achieve goal– Specify action sequence for that intention– Execute the action– Perceive the system state– Interpret the state as perceived– Evaluate system state w.r.t goals & intentions

Model of Task PerformanceGoal

Intention

Interpretation

Evaluation

Action Seq.

Execution Perception

Physical Activity

Mental Activity

Intention

Interpretation

Evaluation

Action Seq.

Physical Activity

Make a copy of two pages from a book to fit on one piece of paper

Intention

Interpretation

Evaluation

Action Seq.

Physical Activity

Use the photocopier to reduce the image so two pages fit on one page

Intention

Interpretation

Evaluation

Action Seq.

Physical Activity

• Put book on copier

• Set magnification

• Push COPY

• Retrieve copy

Intention

Interpretation

Evaluation

Action Seq.

Physical Activity

• Put book on copier

• Set magnification

• Push COPY

• Retrieve copy

Intention

Interpretation

Evaluation

Action Seq.

Physical Activity

Look at resulting copy

Intention

Interpretation

Evaluation

Action Seq.

Physical Activity

It appears that the right edge of the second page was cut off

Intention

Interpretation

Evaluation

Action Seq.

Physical Activity

The two pages don’t fit on one page as intended…

Intention

Interpretation

Evaluation

Action Seq.

Physical Activity

Use the photocopier to reduce the image so two pages fit on one page, only this time try a smaller magnification…

Intention

Interpretation

Evaluation

Action Seq.

Physical Activity

• Intentions can be nested

• As an interface designer, want to bridge gap between user’s goal and physical activity (involving the system).

Mental Models

• How does a user form an intention, or devise an action sequence?

Mental Models

• How does the user know how to interpret what is perceived, or evaluate it against the intention?

Mental Models

• How does the user know how to interpret what is perceived, or evaluate it against the intention?

• Analyze your own thought processes…

Mental Models

• When you try to solve a problem, what do you do? (Think of a specific problem like getting home or fixing a flat tire…)

Mental Models

• When you try to solve a problem, what do you do? (Think of a specific problem like getting home or fixing a flat tire…)

• Some things you might do:– Envision completed goal (2 pages on one)– Take inventory of what objects are available– Take inventory of what actions can be taken– Think about what reactions would be triggered

Object-Action vs. Action-Object

• Most natural to think of solutions rooted in objects (tools)– Objects support or facilitate certain actions– Some (cars, computers, people) exhibit regular

behaviors based on interaction

• Object-Action Interface model (GUIs, C++)

• Action-Object Interface model (command line interfaces, C)

Survey of Useful Mental Models

• Object-Action Models– What objects available, what actions supported

• State Transition Models– Object/system transitions between behavior modes

Example: telephone—Pick-up (dial-tone); push numbers (silence); done pushing numbers (more silence, then either ring or busy)…

• Mapping Models– Sequences of user actions learned for given intention

Example: calculator (multi-digit number entry); bolding a word in text editor (highlight word w/ dbl-click, hit Ctrl-B or bold button)…

• Analogical Models– Adapt old model of interaction to new interface

Example: Used to driving particular car, will use same model of interaction for driving other cars or game simulations (not metaphor!)

• Analogical Models– Adapt old model of interaction to new interface

• Mixed Models (combine above—handles exceptions)

Simple Example: E-mail Client

• Consider Pat, who has used other e-mail clients in the past. How might Pat use this e-mail client, using what mental models?

Send Read Forward Reply

Bob@abc.com: You may have won…

Joan@xyz.com: You’re behind in…

Kale@my.net: Fun virus. Click me!

SuperMail.exe _O X

• Beginning: Analogical—list, forward, reply work fine

SuperMail.exe _O X

• What does “Send” do (what is the object, what is action)?

SuperMail.exe _O X

• Say interface waits while message is being sent, but lookslike it hangs… eventually learned as a state transition.

SuperMail.exe _O X

• Eventually,learned asstate transition Send Read Forward Reply

SuperMail.exe _O X

• Eventually,learned asstate transition

• What happens whenthe thing actuallydoes hang?…

SuperMail.exe _O X

Schneiderman’s 8 Golden Rules

• Consistency Be consistent within

application: colors, fonts, terminology, etc.

Be consistent with other applications (analogy to literature)

Good to copy the standard practice

• Consistency

• Shortcuts for experts

“You’re only a beginner once”

Create/allow special key sequences to be used to bypass long selection processes

Automatic command/ object-name/address expansion

• Consistency

• Feedback

Every action should be confirmed

Many levels: highlighting/color change, audible or haptic click, visual “depressing” of buttons, real-time movement of objects

Wait icons: hourglass

• Consistency

• Feedback

• Sequence closure

Group actions in sequences w/ beginning, middle,and end so people can drop their mental baggage at the end of each process (options, contingency plans, anxiety, etc.)

Example: install

• Consistency

• Feedback

• Error prevention/handling

Design so users can’t make serious errors

Don’t allow alpha chars in number fields, check number ranges

Detect errors, suggest simple instructions for recovery (web forms)

Error recovery for crashes (autosave)

• Consistency

• Feedback

• Reversibility of actions

Deep/infinite undo Relieves user anxiety

(you can try things without worrying about messing up your data or breaking the interface).

• Consistency

• Feedback

• Internal locus of control

The human generally should be in control of a human-computer system

Non-obvious or unexpected responses/ actions by computer lead to anxiety or frustration on the user’s part

• Consistency

• Feedback

• Internal locus of control

• Reduce short-term memory load

Humans have a very limited capacity for both working memory.

Generally considered 7 ± 2 for verbal items, 3-4 for visual items

Long-term memory is another story (see shortcuts for experts)

Creativity, Customization

• What about creativity and customization?– Creativity: good for unique situations (nothing

has been established), or solution is radically better than established practice

– Customization: Are you really going to customize your browser for each computer you come to? Consider customization as something outside normal scope of end-user activities

• Artistic creativity, customization are fine

3/2/2004an introduction to user interface design matthew plumlee

Documents

1 long-term liabilities acctg 5120 david plumlee

tuningworkfunconof halfnia3gold&interface&with...

the racket graphical interface toolkit...the racket...

user interface localizer: a system for making decision...

neurophone: brain- mobile phone interface using a wireless...

ancestryfreepages.rootsweb.com/~vancgenealogyrecords/genealogy... ·...

energy drinks morgan plumlee and elizabeth monnig

the effects of globalization on the accounting academic...

1 stockholders’ equity acctg 5120 david plumlee. page2...

mining removes rocks and minerals that contain useful metals...

botosan plumlee wen 2011

development of conduction, convection, spreading and ... ·...

a real-time vision interface based on gaze detection —...

usgs environmental characterization of flood … · by...

jeffrey kemp matthew prokop michael sanfilippo. project...

by: christian plumlee brianna johnson tyrell gilmore

j. r. soc. interface published online 22 july 2008 ... ›...

investorscope - stanford hci group · investorscope \...

uc berkeley cs160 - user interface design, prototyping, and...

1 accounting for income taxes acctg 5120 david plumlee