Design and Prototyping II

1
Design and Prototyping -- II

• Victor Kaptelinin
• November 8, 2006

2
Overview

• Prototyping
• Prototypes and scenarios in conceptual design
• Physical design
• Design principles
• Reflecting on design and prototyping

3
Prototyping

• A prototype in interaction design can be (among
  other things)
• a series of screen sketchesa storyboard, i.e. a
  cartoon-like series of scenes a PowerPoint slide
  showa video simulating the use of a systema
  lump of wood (e.g. PalmPilot)a cardboard
  mock-upa piece of software with limited
  functionality written in the target language or
  in another language

4
Why prototype?

• Evaluation and feedback are central to
  interaction design
• Stakeholders can see, hold, interact with a
  prototype more easily than a document or a
  drawing
• Team members can communicate effectively
• You can test out ideas for yourself
• It encourages reflection very important aspect
  of design
• Prototypes answer questions, and support
  designers in choosing between alternatives

5
Low-fidelity prototypes

• Use a medium which is unlike the final medium,
  e.g. paper, cardboard
• They are quick, cheap and easily changed
• Examples
• Sketches of screens, task sequences, etc
• Post-it notes
• Storyboards (series of sketches showing how a
  user might progress through a task using the
  device)
• Index cards
• Wizard-of-Oz

6
Hi-fidelity prototypes

• Use materials that you would expect to be in the
  final product
• Prototype looks more like the final system than a
  low-fidelity version
• For a high-fidelity software prototype common
  environments include Macromedia Director, Visual
  Basic, and Smalltalk
• Danger that users think they have a full
  system.see compromises

7
Scenarios and prototypes in conceptual design

• Scenarios
• Express proposed or imagined situations
• Used throughout design in various ways
• scripts for user evaluation of prototypes
• concrete examples of tasks
• as a means of co-operation
• Plus and minus scenarios to explore extreme cases
• Prototypes
• Allow evaluation of emerging ideas
• Low-fidelity prototypes used early on,
  high-fidelity prototypes used later

8
Physical design

• Considers more concrete, detailed issues of
  designing the interface
• Different kinds of widgets (dialog boxes,
  toolbars, icons, menus etc)
• menu design
• icon design
• screen design
• information display
• Iteration between physical and conceptual design
• Guidelines for physical design

9
Design principles (from PRS ch. 1, pp. 21-26)

• Visibility
• A function should be visible
• Feedback
• Sending information back to the user about what
  has been done. Includes sound, highlighting,
  animation, etc.
• Constraints
• Restricting the possible actions that can be
  performed. Helps prevent user from selecting
  incorrect options
• Three main types (Norman, 1999) physical,
  cultural, logical
• Mapping
• Relationship between controls and their movements
  and the results in the world

10
Design principles (contd)

• Consistency
• Design interfaces to have similar operations and
  use similar elements for similar tasks
• Internal and external
• Affordance
• Refers to an attribute of an object that allows
  people to know how to use it (e.g. a mouse button
  invites pushing, a door handle affords pulling)

11
Example Firefly

• http//www.fireflymobile.com/