1. Human-Computer Interaction
Conceptual Design

2. Affordances
Affordance: The perceived and actual properties of an object that determine how it could possibly be used.
Knobs are for turning
Some affordances are obvious, some learned
Glass can be seen through
Glass breaks easily
Sometimes visual plus physical feedback
Floppy disk example
Rectangular – can’t insert sideways
Tabs on the disk prevent the drive from letting it be fully inserted backwards

3. Affordances Perceived can differ from real affordance
Chair: real affordance
Affords sitting
Affords standing for changing a lightbulb
Affords jamming a door open
Chair: false affordance
Can be moved, but not if bolted down

4. Affordances in Computer Screen-Based Interfaces
Designer only has control over perceived affordances
Display screen, pointing device, selection buttons, keyboard
These afford touching, pointing, looking, clicking on the display.

5. Affordances in Computer Screen-Based Interfaces
Most of this affordance is of no value
Example: if the display is not touch-sensitive, even though the screen affords touching, touching has no effect.
Example:
does a graphical object on the screen afford clicking?
yes, but the real question is does the user perceive this affordance; does the user recognize that clicking on the icon is a meaningful, useful action?

6. Visual affordances of a scrollbar

7. Mappings Mapping: Relationships between two things
Between controls and their results

8. Mappings For devices, appliances For computer UI design
Natural mappings use constraints and correspondences in the physical world
Controls on a stove
Controls on a car
Radio volume
Knob goes left to right to control volume
Should also go in and out for front to rear speakers
For computer UI design
Mapping between controls and their actions on the computer
Controls on a digital watch
Controls on a word processor program

9. Mapping controls to physical outcomes
back right
front left
back left
front right
24 possibilities, requires:
-visible labels -memory
arbitrary
back
front
2 possibilities per side
=4 total possibilities
paired
full mapping

10. Transfer Effects
People transfer their expectations from familiar objects to similar new ones
positive transfer: previous experience applies to new situation
negative transfer: previous experience conflicts with new situation

11. Cultural Associations
Groups of people learn idioms
red = danger, green = go
But these differ in different places
Light switches
America: down is off
Britain: down is on
Faucets
America: counter-clockwise is on
Britain: counter-clockwise is off

12. Mental Models People have mental models of how things work:
how does your car start?
how does an ATM machine work?
how does your computer boot?
Allows people to make predictions about how things will work

13. Mental Models Mental models built from affordances constraints
mappings
positive transfer
cultural associations/standards
instructions
interactions

14. Good Example Scissors affordances: constraints mapping
holes for insertion of fingers
blades for cutting
constraints
big hole for several fingers, small hole for thumb
mapping
between holes and fingers suggested and constrained by appearance
positive transfer
learnt when young
conceptual model
implications clear of how the operating parts work

15. Bad Example Digital Watch affordances contraints and mapping unknown
four push buttons, not clear what they do
contraints and mapping unknown
no visible relation between buttons and the end-result of their actions
negative transfer
little association with analog watches
cultural standards
somewhat standardized functionality, but highly variable
conceptual model
must be taught; not obvious

16. Digital Watch Redesigned for Affordances (Rachna Dhamija)

17. Digital Watch Redesigned for Affordances (Ping Yee)

18. Interface Metaphors Definition of Metaphor Purpose Problem
application of name or descriptive term to an object to which it is not literally applicable
Purpose
function as natural models
leverages our knowledge of familiar, concrete objects/experiences to understand abstract computer and task concepts
Problem
metaphor may portray inaccurate or naive conceptual model of the system
A presentation tool
is like
a slide projector

19. Interface Metaphors Use metaphors that matches user's conceptual task
desktop metaphor for office workers
paintbrush metaphor for artists...
Given a choice, choose the metaphor
close to the way the system works
Ensure emotional tone is appropriate to users
E.g., file deletion metaphors
trashcan
black hole
paper shredder
pit bull terrier
nuclear disposal unit...

20. Metaphors continued Caveat Common pitfalls metaphors can be overdone!
overly literal
unnecessary fidelity
excessive interactions
overly cute
novelty quickly wears off
overly restrictive
cannot move beyond
mismatched
does not match user’s task and/or thinking

21. Direct Manipulation Direct Engagement
the feeling of working directly on the task
Direct Manipulation
An interface that behaves as though the interaction was with a real-world object rather than with an abstract system
Central ideas
visibility of the objects of interest
rapid, reversible, incremental actions
manipulation by pointing and moving
immediate and continuous display of results
Almost always based on a metaphor
mapped onto some facet of the real world task semantics

22. Object-Action vs Action-Object
Select object, then do action
interface emphasizes 'nouns' (visible objects) rather than 'verbs' (actions)
Advantages
closer to real world
modeless interaction
actions always within context of object
inappropriate ones can be hidden
generic commands
the same type of action can be performed on the object
eg drag ‘n drop:
my.doc
move

23. Direct manipulation
Representation directly determines what can manipulated

24. Phone list
List metaphor
Rolodex metaphor

25. Direct Manipulation
Xerox Star: pioneered in early '80s, copied by almost everyone
simulates desktop with icons
in and out baskets
file folders and documents
calculators
printers
blank forms for letters and memos
small number of generic actions applicable system wide
move, copy, delete, show properties, again, undo, help
eg same way to move text, documents, etc
property sheets
pop-up form, alterable by user
What you see is what you get (WYSIWYG)

26. Xerox Star continued Star's observers:
objects understood in terms of their visual characteristics
affordances, constraints
actions understood in terms of their effects on the screen
causality
intuitively reasonable actions can be performed at any time
conceptual model

27. Is direct manipulation the way to go?
Some Disadvantages
Ill-suited for abstract operations
spell-checker?
Tedium
manually search large database vs query
Task domain may not have adequate physical/visual metaphor
Metaphor may be overly-restrictive
Solution: Most systems combine direct manipulation and abstractions
word processor:
WYSIWYG document (direct manipulation)
buttons, menus, dialog boxes (abstractions, but direct manipulation “in the small”)

28. Conventional Applications: A Mix

29. Guidelines for Design Provide a good conceptual model
allows users to predict consequences of actions
communicated through the image of the system
Make things visible
relations between user’s intentions, required actions, and results should be
sensible
consistent
meaningful (non-arbitrary)
make use of visible affordances, mappings, and constraints
remind person of what can be done and how to do it

30. Summary Good Representations Metaphors Direct manipulation
captures essential elements of the event / world
deliberately leaves out / mutes the irrelevant
appropriate for the person, their task, and their interpretation
Metaphors
uses our knowledge of the familiar and concrete to represent abstract concepts
need not be literal
has limitations that must be understood
Direct manipulation
visibility of the objects of interest
rapid, reversible, incremental actions
manipulation by pointing and moving
immediate and continuous display of results