Foundations of HCI

1
Foundations of HCI

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

2
Objectives for today

• Review some fundamentals of human psychology
• Illustrate their application to interface design
• Will do another Hall of Fame/Shame at end
• A little more project planning

3
Announcements

• Hall of Fame/Shame schedule
• Your teams/preferences due by Wednesday
• First two weeks set
• Group Info Forms will be up on the web site
  today due by Wednesday noon
• Note on Open House constraints
• Remember 4-5 unannounced quizzes
• Immediately after the HoF/S presentations

4
(No Transcript)
5
Human Cognition

• Its Human-Computer Interaction, User Interface
  Design so we need to understand something about
  human capabilities
• so a brief overview of human cognitive
  capabilities as relevant to HCI
• Goal use this knowledge to guide design of
  interfaces that extend peoples abilities and
  compensate for weaknesses

6
Human Cognition

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

7
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

8
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

9
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

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

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

16
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

17
Perception - Example

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

18
Icons are their meanings clear?
Attention easy to focus on the right stuff?
19
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

20
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

21
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.)?

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
Problem solving and reasoning

• Conscious reflective
• Thinking over ones options
• Figuring out the best option or solution
• Making a plan
• Weighing pros and cons

29
Task Structure
30
Problem solving Design Implications

• Provide the proper information and aids
• But, even better design to make problem-solving
  and reasoning unnecessary

31
Spreadsheet
32
Tax Preparation Software

• User doesnt have to do computation
• User doesnt have to figure out which form to use
• Instead, software poses questions that users are
  likely to be able to answer

33
Example

• Whats the best flight from Vancouver to
  Montreal?
• Time
• Layovers
• Plane changes
• Price

34
Representation 1
Time zones van-cal ? 1 cal tor, mon ? 2
35
Representation 2
7
9
11
13
15
17
Vancouver
Cdn 321
AC 117
8
10
12
14
16
18
Calgary
Cdn 355
AC 123
20
Toronto
10
12
14
16
18
Montreal
36
Hall of Shame/Fame

• Brian Terlson
• Fall 2006 student

37
Shameful The Godfather
38
Why The Godfather is Terrible

• Poor visibility and poor focus
• The interface tries to do too much in one screen.
• Eg. There are so many scroll bars that it can
  take quite some time to simply find the right
  one!
• Completing simple tasks requires scanning
  everything in the UI and toggling every button
  and moving every scroll bar (since items may be
  hidden) or memorizing it beforehand.
• Tab interface not consistent with Windows
  standard. Tabs just look like any other button.
• Icons are not good and often meaningless.
• Can accomplish the same thing on multiple screens
  such as changing the title tag, can be done in
  no less than 3 different screens and in two
  different pop-up dialogs.

39
Fame Apple Front Row
40
What rocks about Front Row

• Consistency with existing UIs and programs
• The icons are all recognizable items from OS X
• The menus for music and pictures are the same as
  those in iTunes and iPhoto.
• The DVD player and video playing interface is
  familiar to anyone who has used a DVD player
  before.
• Natural mapping between buttons action desired
  and buttons on remote rotating icons around,
  scrolling through lists are natural.
• Remote is simple and does all required functions
  easy to learn and retain functions even in
  short term memory.
• Program gives great feedback when items are
  selected or moved both sound and visual.
• The program is easy to use and easy to learn a
  great UI!