Friday, January 30

1
Friday, January 30

• Psychology and HCI
• Project Groups and Ideas

2
Foundations of User Interfaces

• Field of Human-Computer Interaction (HCI)
• Psychology
• Computer Science
• Ergonomics
• other disciplines
• Focus Design Computer Systemsfor Humans

3
Human Capabilities

• Humans are very good at
• recognizing (images, voices, etc.)
• associative memory
• explaining phenomena
• Humans are very limited in
• short-term memory
• complex, multi-layered tasks
• perfection

4
Quick review of human capabilities

• Goal use this knowledge to guide design of
  interfaces that extend peoples abilities and
  compensate for weaknesses

5
Human Cognition

• Attention
• Perception and recognition
• Memory
• Learning
• Problem solving and reasoning

6
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

7
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 dont visually clutter the interface plain
  interfaces can be easier to use

8
Attention - Example

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

9
(No Transcript)
10
(No Transcript)
11
Two more examples
12
(No Transcript)
13
(No Transcript)
14
Perception

• Acquiring information from the environment using
  different senses
• Results in internal experience of external events
• Vision is dominant sense for sighted people

15
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

16
Perception - Example

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

17
Icons are their meanings clear?
Attention easy to focus on the right stuff?
18
Memory

• Short-Term Memory
• Severely limited capacity 7 plus or minus 2
• Instant, effortless recall
• 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

19
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

20
Memory Design Implications

• Dont make users remember complicated procedures
• Design interfaces that promote recognition over
  recall
• Give users resources to help them visually encode
  information (colors, icons, time stamps, etc.)?

21
Memory Promote recognition over recall
22
More than 7 - 2 items in menu bad?
What about a voice menu?
23
Visual representation of contacts recognition,
not recall
Spatial organization of information
Pictures
24
Learning

• Acquiring new knowledge or skills
• Exploratory learning learning by doing
• Scaffolding or training wheels

25
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

26
Examples

• Graphical editors
• Simulation environments

27
(No Transcript)
28
(No Transcript)
29
Don Norman Design of Everyday Things

• Based on knowledge of human capabilities, Norman
  offers principles for creating usable designs

30
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
31
But things can go wrong at any of these stages
Notably Gulf of Execution Gulf of Evaluation
32
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
33
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

34
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.

35
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?
36
principles for good design

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

37
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

38
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
39
So how does a designer help users acquire the
right model?

• Visibility
• Affordances
• Constraints
• Mappings
• Feedback

40
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.)

41
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
• Intended to help users discover interaction
  possibilities

42
Affordances in GUIs?

• Does a button icon afford clicking? Does a
  scrollbar afford scrolling?
• 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

43
Mappings

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

44
Which lid is the right size?
45
Which lid is the right size?
46
Example turning on burners on a stove

• Which dial controls which burner?

47
(No Transcript)
48
(No Transcript)
49

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

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

51
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

52
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

53
Knowledge in the head vs. in the world

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

54
Knowledge In The World
Recognition, not Recall
Partial, good enough descriptions stored
55
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

56
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

57
Oops, I opened my trunk
Controls to open trunk and access gas tank are
right next to each other
58
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

59
Last resort - standardization

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

60
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
• Icons mailboxes, trashcans,
• India washing machines, cereal

61
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

62
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

63
More examples
64
Setting Options in MS Word
65
(No Transcript)
66
(No Transcript)
67
Design Principle

• Conceptual model What happened?!?

68
Which string turns on the fan, which turns on the
light?
69
Design Principle

• Mappings

70
Summary Design Checklist
71
Design Checklist

• Affordances
• Do interface objects afford their operations?
• Do interface objects afford illegal operations?
• Is it easy to tell what can be done with objects?

72
Design Checklist

• Visibility of Controls
• Are all controls clearly visible on the screen or
  in menus?
• Is it easy to tell how to do something?Are there
  critical parameters hidden away?

73
Design Checklist

• Feedback
• Does every input provide appropriate feedback?
• Is it easy to determine the effect after an
  operation?

74
Design Checklist

• Conceptual Models
• What is the users model of the application?
• How will the user get a correct model?

75
Design Checklist

• Mappings
• Are there clear correspondences between controls
  and their objects?
• Is graphical layout exploited (horizontal,vertical
  )?

76
Design Checklist

• Constraints
• Does the application constrain the user to legal
  operations?
• Do constraints help the user simplify the problem?

77
Design Checklist

• Knowledge in the World
• Is the user expected to remember many things?
• Is the user expected to remember things from
  screen to screen?
• Is relevant information kept on the screen?

78
Design Checklist

• Error Avoidance/Handling
• Is there an undo operation? Multi-level undo?
• Are irreversible actions harder to perform?
• Do forcing functions prevent errors?

79
Design Checklist

• Standardization
• When making choices, does the application follow
  existing standards?
• Is there a standard look-and-feel?
• Was the application built using a standard set of
  tools?

80
(No Transcript)
81
Project Groups and Ideas

• The redundancy principle
• Make sure your group is one person larger than
  you need

82
Project Proposal

• Essential elements
• Identification of a need
• Users
• Lack of adequate current tools
• Identification of an advantage
• Special insight into problem
• Unique skills

83
First Steps

• Figure out the domain of the project
• Identify at least two willing users
• Brainstorm as a group on your initial approach

84
The Proposal Itself

• What is the domain or problem?
• Who are the users and what do you know about them
  and their activities or tasks?
• What are the best alternatives out there, and why
  arent they good enough?
• What is your approach/insight?

85
Process

• Now
• Projects needing people
• People with project ideas
• Next week
• Rapid feedback
• Serious concerns
• Immediate issues