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?




• 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






• 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

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++)





• 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

[email protected]: You may have won…

[email protected]: You’re behind in…

[email protected]: Fun virus. Click me!

SuperMail.exe _O X

mailto:[email protected]





• 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





– 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