i213: User Interface Design

1
i213 User Interface Design Development

• Marti Hearst
• Tues, Feb 13, 2007

2
Today

• Review Affordances, Mappings, Mental Models
• Strauss Mouse
• Normans Action Cycle
• Metaphors in Interfaces
• Raskins Locus of Attention

3
Putting These Together

• 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

4
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
• How to design a better one?

5
Digital Watch Redesigned for Affordances (Rachna
Dhamija)
6
Digital Watch Redesigned for Affordances (Ping
Yee)
7
Normans Action Cycle

• Human action has two primary aspects
• Execution doing something
• Evaluation comparison of what happened to what
  was desired

8
Action Cycle
start here
Goals
Evaluation
Execution
The World
9
Action Cycle
start here
Goals
Evaluation Evaluation of interpretations Interpre
ting the perception Perceiving the state of
the world
Execution Intention to act Sequence of
actions Execution of seq uence of actions
The World
10
Normans Action Cycle

• Execution has three stages
• Start with a goal
• Translate into an intention
• Translate into a sequence of actions
• Now execute the actions
• Evaluation has three stages
• Perceive world
• Interpret what was perceived
• Compare with respect to original intentions

11
Gulf of Evaluation

• The amount of effort a person must exert to
  interpret
• the physical state of the system
• how well the expectations and intentions have
  been met
• We want a small gulf!

12
Metaphor in User Interfaces
13
Metaphor

• Lakoff Johnson
• ...the way we think, what we experience, and
  what we do every day is very much a matter of
  metaphor.''
• in our language thinking - argument is war
• he attacked every weak point ... criticisms
  right on target ... if you use that strategy
• We can use metaphor to highlight certain features
  suppress others
• There is some systematicity to the transference

14
Metaphor and Analogy

• Metaphor
• L. metaphora, fr. to carry over, transfer meta
  beyond, over
• The transference of the relation between one set
  of objects to another set for the purpose of
  brief explanation (Websters revised)
• Analogy
• A resemblance of relations an agreement or
  likeness between things in some circumstances or
  effects, when the things are otherwise entirely
  different. (Websters revised)
• 1. Similarity in some respect between things that
  are otherwise dissimilar "the operation of a
  computer presents an interesting analogy to the
  working of the brain (WordNet)
• 2 (logic) inference that if things agree in
  some respects they probably agree in others
  (WordNet)

15
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 tool is like a slide projector
16
The Desktop Metaphor

• Started at Xerox PARC
• Xerox Star (see video)
• Bitmapped screens made it possible
• Not meant to be a real desktop
• Idea is to organize information in a way to allow
  people to use it in the way they user information
  on their desktops
• Allow windows to overlap make the screen act as
  if there were objects on it
• Apple took it farther
• Waste basket, etc
• Microsoft took it to extremes
• Microsoft Bob a recognized failure

17
Macintosh Desktop
18
Calderas Desktop
19
Microsoft Bobs Desktop Metaphor
20
Microsoft Bobs Livingroom Almost not a
metaphor anymore!
21
Beyond the Desktop

• Robertson, George et al. "The Task Gallery A 3D
  Window Manager." In Proceedings of CHI 2000

22
Beyond the Desktop

• Jun Rekimoto, Multiple-Computer User Interfaces
  "Beyond the Desktop" Direct Manipulation
  Environments, ACM CHI2000 Video Proceedings,
  2000.

23
Identify the mis-matched metaphors(from the
Interface Hall of Shame)

• The classic (from the mac desktop)
• To eject a disk you drag it to the trashcan

24
Identify the mis-matched metaphors(from the
Interface Hall of Shame)

• VCR buttons to control a printer??

25
Identify the mis-matched metaphors(from the
Interface Hall of Shame)

• Using tabs to make arbitrary groups

26
The Metaphor of 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)

27
Direct Manipulation uses a Metaphor

• Metaphor
• Computer objects as visible, moveable objects
• Consequences
• Items represented as icons
• Items can be picked up and moved on a surface
• Items can be thrown out
• Items can be copied
• Do we really want to have to drag them to a
  photocopier?
• How much is too much?

28
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

29
Direct manipulation

• Representation directly determines what can
  manipulated

30
Is direct manipulation the way to go?

• Some Disadvantages
• Ill-suited for abstract operations
• Spell-checker?
• Search database by scrolling or by query?
• 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)

31
Guidelines for Design

• Metaphors
• use our knowledge of the familiar and concrete to
  represent abstract concepts
• need not be literal
• have limitations that must be understood

32
Guidelines for Design

• Provide a good conceptual model
• allows users to predict consequences of actions
• communicated thorugh the image of the system
• Make things visible
• relations between users 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

33
Guidelines for Design

• Good Representations
• capture essential elements of the event / world
• deliberately leave out / mute the irrelevant
• appropriate for the user, their task, and their
  interpretation