Design, prototyping and construction

1
Design, prototyping and construction
2
Overview

• Prototyping and construction
• Conceptual design
• Physical design
• Generating prototypes
• Tool support

3
Design and prototyping
Identify needs/ establish requirements
(Re)Design
Evaluate
Build an interactive version
Final product
4
What is a prototype?

• In other design fields a prototype is a
  small-scale model
• a miniature building town
• a miniature car

5
What is a prototype in Interaction Design?

• a series of screen sketches
• a storyboard, i.e. a cartoon-like series of
  scenes
• a lump of wood (e.g. PalmPilot)
• a cardboard mock-up
• a Powerpoint slide show
• a video simulating the use of a system
• a piece of software with limited functionality
  written in the target language or in another
  language

6
Why prototype?

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

7
What to prototype?

• Technical issues
• Work flow, task design
• Screen layouts and information display
• Difficult, controversial, critical areas

8
But before we start prototyping

• The most important thing to design is the users
  conceptual model. Everything else should be
  subordinated to making that model clear, obvious,
  and substantial. That is almost exactly the
  opposite of how most software is designed.
  (Liddle, 1996, p. 17)
• A conceptual model is a high-level description of
  how a system is organized and operates. (Johnson
  and Henderson, 2002, p. 26)

9
Conceptual models and mental models

• Ideally, users mental models should be
  compatible with the designers conceptual models

10
Conceptual models

• Types of activities
• Giving instructions
• Manipulating and navigating
• Conversing
• Exploring and browsing
• Metaphors and analogies

11
Instructing vs. manipulating

• Still very common
• Have to learn syntax
• Frequent error messages
• Lack of feedback
• Efficient use of space
• Efficient interaction for repetitive actions

• Most common
• No syntax to learn
• Error messages rarely needed
• Immediate feedback
• Space gobblers
• Some actions are awkward to perform

12
Conversing

• Underlying model of having a conversation with
  another human
• Range from simple voice recognition menu-driven
  systems to more complex natural language
  dialogues
• Examples include timetables, search engines,
  advice-giving systems, help systems

13
Conversing

• Allows users, especially novices and
  technophobes, to interact with the system in a
  way that is familiar
• Expectations can become too high
• Misunderstandings can arise when the system does
  not know how to parse what the user says

14
Conversing
15
Exploring and browsing

• Similar to how people browse information with
  existing media (e.g. newspapers, magazines,
  libraries, pamphlets)
• Information is structured to allow flexibility in
  way user is able to search for information

16
What would be the most suitable conceptual model
for

• A car racing 3D video game?
• An application for downloading music off the web?
  
• An online system to support troubleshooting of
  computer hardware problems?
• Programming?

17
Conceptual models based on objects

• Usually based on an analogy with something in the
  physical world
• Examples include books, tools, vehicles
• Classic Star Interfacebased on officeobjects

Johnson et al (1989)
18
Benefits of metaphors

• Makes learning new systems easier
• Helps users understand the underlying conceptual
  model
• Can be very innovative and enable the realm of
  computers and their applications to be made more
  accessible to a greater diversity of users

19
Problems with metaphors
20
Types of prototypes

• Different kinds of prototyping
• Low fidelity
• High fidelity
• Evolutionary
• Throw-away
• Compromises in prototyping
• Vertical
• Horizontal

21
Low-fidelity Prototyping

• Uses a medium which is unlike the final medium,
  e.g. paper, cardboard
• Sketches of screens with post-it notes (task
  sequences)
• Card-based
• Storyboards
• Wizard-of-Oz
• Quick, cheap, easily changed

22
Sketching

• Sketching is important to low-fidelity
  prototyping
• Dont be inhibited about drawing ability (even I
  sketch regularly)

23
Card-based prototypes

• Index cards (3 X 5 inches)
• Each card represents one screen or part of screen
• Often used in website development

24
Storyboards

• Often used with scenarios, bringing more detail,
  and a chance to role play

• It is a series of sketches showing how a user
  might progress through a task using the device
• Used early in design

25
Wizard-of-Oz prototyping

• Users thinks they are interacting with a
  computer, but a developer is responding to output
  rather than the system.

• What could the shortcomings of this approach be?

User
gtBlurb blurb gtDo this gtWhy?
26
High-fidelity prototyping

• Uses materials that you would expect to be in the
  final product.
• Prototype looks more like the final system than a
  low-fidelity version.
• Common prototyping environments include
  Macromedia Director or Flash.
• Danger that users think they have a full system

27
(No Transcript)
28
Summary

• Prototyping enables designers to build designs
  iteratively and involve users
• The most important thing to design is the users
  conceptual model
• Different kinds of prototyping are used for
  different purposes and at different stages
• Low fidelity at early stages for initial design
  solution attempts
• High fidelity later to refine design solution

29
Further reading

• Chapters 2 and 9 of the textbook
• Chapter 5 of Dix, A., Finley, J., Abowd, G., and
  Beale, R. 2004 Human-Computer Interaction (3rd
  Ed.). Prentice-Hall, Inc.
• Chapter 9 of Benyon, Turner and Turner (2005).
  Designing Interactive Systems