Human-Computer Interaction

Conceptual Design

1

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

2

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

3

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.

4

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?

5

Visual affordances of a scrollbar

6

Mappings

• Mapping: – Relationships between two things

• Between controls and their results

7

Mappings• For devices, appliances

– 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

8

Mapping controls to physical outcomes

backright

frontleft

backleft

frontright

24 possibilities, requires: -visible labels -memory

arbitrary full mapping

back front front back

2 possibilities per side =4 total possibilities

paired

9

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

10

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

11

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

12

Mental Models

• Mental models built from– affordances– constraints– mappings– positive transfer – cultural associations/standards– instructions– interactions

13

Good Example

• Scissors– affordances:

• 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

14

Bad Example

• Digital Watch– affordances

• 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

15

Digital Watch Redesigned for Affordances (Rachna Dhamija)

16

Digital Watch Redesigned for Affordances (Ping Yee)

17

Interface Metaphors• Definition of Metaphor

– 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 toolis like

a slide projector 18

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 usersE.g., file deletion metaphors

– trashcan– black hole– paper shredder– pit bull terrier– nuclear disposal unit...

19

Metaphors continued• Caveat

– metaphors can be overdone!• Common pitfalls

– 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

20

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

21

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

22

Direct manipulation• Representation directly determines what can manipulated

23

Phone list

List metaphor Rolodex metaphor

24

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)

25

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

26

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

27

Conventional Applications: A Mix

28

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

29

Summary• Good Representations– 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

30