Design Psychology

1
Design Psychology

• Loren Terveen
• CS 5115, Fall 2008
• September 17

2
Objectives for today

• H of F/S
• Project deliverables for next week
• Discuss Design of Everyday Things
• Identify and exemplify key concepts and
  principles for analyzing user interfaces and
  other designs
• Finalize project group formation

3
Next weeks Hall of Fame/Shame Schedule

• Monday
• Jon McLachlan Evan Long
• Alan Wyman Michael Raymond 
• Wednesday
• Justin Keller Sean Kapisak
• Danny Rado Greg Maddox 
• Slides to me by 6 pm the night before (.ppt)
• Youre going to get 3-5 minutes practice!
• Dont try to cram in a million slides full of
  text!

4
Project deliverables for next week

• Lets look at the project guide

5
Where we are

• Last time we took a quick tour of human cognition
  
• We need to understand human capabilities so we
  can design systems that make up for our
  limitations and enhance our strengths
• Don Normans Design of Everyday Things offers
  principles for creating usable designs

6
Seven Stages of Action
Goals
Evaluation of the interpretations
Intention to act
Interpreting the perception
Sequence of actions
Execution of the action sequence
Perceiving the state of the world
The World
7
But things can go wrong at any of these stages
Notably Gulf of Execution Gulf of Evaluation
8
Gulfs of Execution Evaluation
Goals
Evaluation of the interpretations
Intention to act
GULF OF EXECUTION
Interpreting the perception
GULF OF EVALUATION
Sequence of actions
Execution of the action sequence
Perceiving the state of the world
The World
9
The Gulf of Execution

• Does the system provide actions that correspond
  to the users intentions?
• The difference between intentions and allowable
  actions is the Gulf of Execution

10
The Gulf of Evaluation

• Does the system provide a physical representation
  that can be readily perceived and interpreted in
  terms of the users intentions and expectations?
• The Gulf of Evaluation reflects the amount of
  effort that the person must exert to interpret
  the physical state of the system and determine
  how well the intentions have been met.

11
The Seven Stages as Design Aids
Ask yourself how easily can the user
Determine the function of the system?
Tell if the system is in the desired state?
Tell what actions are possible?
Determine a mapping from system state to
interpretation
Determine a mapping from intention to physical
action?
Perform the action?
Tell what state the system is in?
12
principles for good design

• Conceptual models
• Visibility and affordances
• Mappings
• Feedback ? Causality
• Constraints
• Knowledge in the world
• Standardization
• Designing for error

13
Conceptual Model

• People are explanatory creatures we will come
  up with models of how things work
• Rule 1 of interface design an interface is well
  designed when it behaves exactly as users think
  it will
• Put it another way the designers job is to make
  it easy for users to create the right model of
  the system

14
Designer and user models
Goal user model and design model should be
identical
So system image must lead user to acquire a user
model equal to the design model
User
Designer
System
15
The notorious case of refrigerator temperature
control

• Two things to control
• Temperature of fresh food compartment
• Temperature of freezer compartment

16
Instructions (already a bad sign!)
What if I just want to make the freezer warmer?
17
A sensible user model derived from the system
image
The Freezer Control controls the freezer
temperature and the Fresh Food Control controls
the fresh food temperature
18
But the design model is completely different!
19
And theres a big problem with feedback, too!
20
So how does a designer help users acquire the
right model?

• Visibility
• Affordances
• Constraints
• Mappings
• Feedback

21
Visibility

• Dont hide controls!
• telephones hold, transfer, 3-way call etc.
• VCR programming
• Make status available
• well-designed display (e.g., progress bars)
• use sound if needed (click/beep/etc.)

22
Affordances

• Actual and perceived properties of an object that
  determine how it could possibly be used
• A chair affords sitting
• A button affords pushing
• A knob affords turning
• A slot affords sticking things in

23
Affordances in GUIs?

• Does a button icon afford clicking?
• Maybe but what does the click mean?
• Meaning is arbitrary, and is assigned by
  designers
• Norman I put an affordance there I wonder if
  the object affords clicking affordances this,
  affordances that. And no data, just opinion.
  Yikes! What had I unleashed upon the world?
• Bottom line affordances arent as useful in
  GUIs as in physical design

24
Mappings

• Mappings used to determine relationships
• Between actions and results
• Controller and controlled
• Take advantage of physical analogies and cultural
  standards

25
Example turning on burners on a stove

• Which dial controls which burner?

26
(No Transcript)
27
(No Transcript)
28

• Why dont all stoves use this design?
• Is it ugly? More expensive? Less safe? ?

29
Constraints

• Limit the range of possible actions / design
  choices
• Physical Constraints
• Only some possibilities are physically possible
  (only one way to put a VCR tape in a player, a
  cassette tape in a cassette player but not a CD
  in a CD player)
• Semantic Constraints
• Only some possibilities make sense (rear view
  mirrors)
• Cultural Constraints
• Only some possibilities are acceptable (redstop,
  green-go)
• Logical Constraints
• General principles e.g., every part should be
  used (4 things to be controlled ? 4 switches)

30
Feedback

• Remember that people will build models
• And feedback leads to causal models if Y
  happened after X, then X caused Y
• So provide the proper feedback immediately
  respond to user actions dont hide the results!
• Did I press the button? (visual and/or audio
  feedback)
• All actions should have effects
• Promote exploration

31
Put knowledge in the world

• So users dont have to keep it all in their heads
• Menus, toolbars
• Agendas
• Graphical workspaces
• Provide memory aids
• so users dont have to remember information
  between screens

32
Knowledge in the head vs. in the world

• Retrieval
• Learning
• Efficiency of use
• Ease of first-time use
• Aesthetics

33
Knowledge In The World
Recognition, not Recall
Partial, good enough descriptions stored
34
To err is human

• Slips errors in automatic actions easy to
  detect
• Capture errors
• Description errors
• Data-driven errors
• Associative action errors
• Loss of activation errors
• Mode errors
• Mistakes errors in intention or logic hard to
  detect

35
Preventing errors

• Avoiding slips
• Different things should look different
• Consistent confirmation is not useful
• Immediate confirmation may not be useful
• Simplify tasks
• Make task structure narrow or shallow

36
Oops, I opened my trunk
Controls to open trunk and access gas tank are
right next to each other
37
More ways to prevent errors

• Support recovery
• Undo and backups
• Support exploration toward a goal
• Prevent errors with forcing functions failure
  in one step means later steps cant be done
• Make illegal actions unavailable
• Disable buttons or menus
• Turn illegal actions into legal ones

38
Last resort - standardization

• Fewer things to memorize
• Quicker to learn
• Clocks should run clockwise
• But note that standards are culture-dependent!

39
Standards and cultures

• What does the color red mean?
• US danger, warning,
• India purity
• What color should a wedding dress be?
• US white
• India red yellow
• How do you turn on a faucet?
• US counter-clockwise
• UK clockwise
• Problems with icons mailboxes, trashcans,

40
A usable design - scissors

• Affordances
• Holes for something to be inserted
• Constraints
• Big hole for several fingers, small hole for
  thumb
• Mappings
• Between holes and fingers suggested and
  constrained by appearance
• A cultural standard
• Conceptual model
• Implications of actions clear feedback is
  immediate

41
A problematic design digital watch

• Affordances
• 4 buttons to push, but not clear what they do
• Constraints, mappings
• Unknown no natural relations or constraints
• Transfer
• Little/none from analog watches
• Standardization
• Still quite variable

42
Applying the principles
43
How do I pump the gas?
44
Push To Start
45
Design Principle

• Visibility
• Affordances

46
Setting Options in MS Word
47
(No Transcript)
48
(No Transcript)
49
Design Principle

• Conceptual model What happened?!?

50
Which string turns on the fan, which turns on the
light?
51
Design Principle

• Mappings

52
Whats that thing in the corner?
53
Its a mop sink!
54
Design Principle

• Affordances
• Conceptual Model
• Standardization

55
Reflections on DOET

• Was written 15 years ago
• Talks about things like doors, slide projectors,
  refrigerators, not GUIs
• So how well does it apply to designing GUIs in
  2007? What does it leave out?
• Group Discussion
• Form groups of 3-5 people
• Discuss this question 5 minutes
• Report out 10 minutes
• Segue from DOET to TCUID

56
Next Steps

• Next steps
• Next week
• Will begin discussing task- and user-centered
  design process
• You H of F/S presentations begin
• Readings
• TCUID chapters 1 and 2
• Preece Chapter 10
• Project

57
Hall of Fame /Hall of Shame Kameleon 8-in-1
Universal Remote Control

• ReAnn Dargus
• Fall 2004 CS 5115 Student

58
Whats a Kameleon?

• Controls 8 devices
• CD player
• DVD player
• Cable box / satellite receiver
• Television
• VCR
• PVR
• Audio amplifier/receiver / home-theater-in-a-box
  device
• Auxiliary mode
• When a device is selected, the appropriate
  controls for this device appear magically (or
  through an LCD display) on the screen.

http//www.mykameleon.com/technology_demo.html
59
Design Constructs - Kameleon

• Conceptual model
• () Has similar function buttons, size, shape as
  typical URC.
• Standardization
• () Functions copied from current individual
  remotes/ URCs.
• Visibility
• () Key concept! ..name given for ability to
  change faces
• (-) You can still see the buttons during the day!
• (-) Auto-off function -- you need to shake to
  use.
• Affordances
• (-) Sort of large, but graspable by most (hard
  for me)
• (-) Buttons do not present affordances they make
  a GUI.
• Feedback
• () Animated icons.
• () Tactile feedback on a button
• (-) Cannot feel a difference between functions
• () Environment changes (tv screen, sound, )

60
Design Constructs Contd

• Knowledge in the world
• () User always knows current function mode.
• (-) Need to SCROLL to see all controls for
  current mode.
• Constraints
• () Once youre in a function mode, only those
  items are controlled (logical and semantic).
• Mappings to User Expectations
• () Pushing up on channel increases channel.
• (-) Pushing on TV does not necessarily bring up
  TV options
• (also for Conceptual Model).
• Designing for error
• (-) There are too many up/dn options. Which is
  which?
• (-) Takes too many menus to accomplish simple
  tasks. (too deep)

61
Hall of Fame, or Shame?(Current score 9() vs.
9(-) )

• Watching TV, now lets watch a movie.

• Look at remote.
• What function are we in?
• Can I push PLAY here?
• Do I need to SCROLL?

• Make the mode DVD / Confirm by watching remote.
• Push play (brings you to main DVD menu)

• Its not loud enough
• Push Volume up.
• No feedback?
• Push TV icon
• Push Volume up.
• Barely there..
• Push Receiver/AUX
• Push Volume up

• Okay.. Now how do I start this movie??
• Push Play again.. Oh wait, its not there.

• UGH!!!!!

62
Hall of Shame

• Too much of everything. Does not support a task.
• Expert mode Home Theater Menu
• User can set specific keys to specific tools and
  set up what is visible ie. Volume Control

• THIS is a hall of fame design hidden in the same
  remote