14013502-3

User Interface Design (UID)

Lecture 05
Prototyping
 Overview
• Prototyping
• Conceptual design
• Concrete design
• Using scenarios
• Generating prototypes
• Construction
Introduction
• There are two aspects to design:
– the conceptual part, which
focuses on the idea of a
product
– the concrete aspect, which
focuses on the details of the
design
• The two are intertwined, and
concrete design issues will
require some consideration in
order to prototype ideas, and
prototyping ideas will lead to an
evolution of the concept.
 Prototyping
• What is a prototype?
• Why prototype?
• Different kinds of prototyping
- Low fidelity
- High fidelity

• Compromises in prototyping
- Vertical

- Horizontal

• Final product needs to be

engineered
 What is a prototype?
A Prototype is one manifestation of a design to
allow stakeholders to interact with it and to
explore its suitability;
:

• a miniature car

• a miniature building or town

• the examples here come

from a 3D printer
 What is a prototype?
• In interaction design
prototype can be
• a series of screen sketches
• a storyboard, i.e., a
cartoon-like series of
scenes
• a PowerPoint slide show
• a video simulating the use
of a system
• a cardboard mock-up
• a piece of software with
limited functionality
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
• Prototypes answer
questions, and support
designers in choosing
between alternatives
Filtering dimensions of prototyping
Manifestation dimensions of prototyping
Manifestation dimensions
are categories of aspects of
how prototypes are Material
implemented relative to a
final artifact.

Specifically, the dimensions

Resolution
are:

Each comprises several

variables determined for Scope
the individual analysis
Manifestation dimensions of prototyping
 What to prototype?

Work flow, task

Technical issues
design

Screen layouts Difficult,

and information controversial,
display critical areas
 Low-fidelity Prototyping
• Uses a medium which is unlike the final medium,
e.g., paper, cardboard

• Is quick, cheap and easily changed

• Examples:
– sketches of screens, task sequences, etc.
– ‘post-it’ notes
– storyboards
– ‘Wizard-of-Oz’
 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
• High-fidelity prototypes can be developed by
integrating existing hardware and software
components
• Danger that users think they have a complete
system…….see compromises
Pros and Cons
 Sketching Designs
• Draw your ideas
– By hand, not by drawing program
– Paper or whiteboard
• Generate many ideas
• Design in a group

6.813/6.831 User Spring

Interface Design and 2011 15
Implementation
 Examples of Design Sketches

6.813/6.831 User Spring

Interface Design and 2011 16
Implementation
 Examples of Design Sketches

6.813/6.831 User Spring

Interface Design and 2011 17
Implementation
 Examples of Design Sketches

6.813/6.831 User Spring

Interface Design and 2011 18
Implementation
 Scenarios
• Scenario is a story about a user using the
system
– Concrete, realistic, but fictional
– Involves a user with a goal
– Follows how the user achieves the goal

6.813/6.831 User Spring

Interface Design and 2011 19
Implementation
 Storyboards
• Sequence of sketches illustrating a scenario
• First prototype of a design
– Shows how the design can actually be used to
satisfy a goal

6.813/6.831 User Spring

Interface Design and 2011 20
Implementation
 Storyboards
• A storyboard is a graphic
organizer that consists of
illustrations or images displayed
in sequence for the purpose of
pre-visualizing a video,
animation, etc.
• It is a series of sketches showing
how a user might progress
through a task using the device
• Often used with scenarios,
bringing more detail, and a
chance to role play
• Used early in design
 Sketching
• Sketching is
important to low-
fidelity prototyping

• Don’t be inhibited
about drawing
ability. Practice
simple symbols
 Card-based prototypes
• Index cards (3 X 5
inches)
• Each card
represents one
screen or part of
screen
• Often used in
website
development
 ‘Wizard-of-Oz’ prototyping
• The user thinks they are interacting with a computer,
but a developer is responding to output rather than the
system.
• Usually done early in design to understand users’
expectations
• What is ‘wrong’ with this approach?

User

>Blurb blurb
>Do this
>Why?
Compromises in prototyping
• All prototypes involve
compromises
• For software-based prototyping
maybe there is a slow response?
sketchy icons? limited
functionality?
• Two common types of compromise
• horizontal: provide a wide
range of functions, but with
little detail
• vertical: provide a lot of detail
for only a few functions
• Compromises in prototypes
mustn't be ignored. Product needs
engineering
 Conceptual design
• A conceptual model is an
outline of what people
can do with a product and
what concepts are
needed to understand
and interact with it

• Transform user
requirements/needs into
a conceptual model

• Consider alternatives:
prototyping helps
Is there a suitable metaphor?
Interface Understand Evaluate

Interface metaphors Three steps: Evaluate metaphors:

combine familiar understand • How much structure
knowledge with new functionality, does it provide?
knowledge in a way identify potential • How much is
that will help the problem areas, relevant to the
user understand the generate metaphors problem?
product. • Is it easy to
represent?
• Will the audience
understand it?
• How extensible is it?
 Considering interaction and interface types

Which interaction type?

• How the user invokes actions

• Four interaction types are:
• Instructing, conversing,
manipulating or exploring

Do different interface
types provide insight?
• shareable, tangible, augmented
reality, etc.
 Expanding the initial conceptual model
• What functions will the product perform?
- What will the product do and what will the human do
(task allocation)?

• How are the functions related to each other?

- Sequential or parallel?
- Categorisations, e.g., all actions related to privacy
(a category) on a smartphone

• What information is needed?

- What data is required to perform the task?
- How is this data to be transformed by the system?
 Many aspects to concrete design
Concrete design
• Color, icons, buttons, interaction devices
etc.

User characteristics and context

• Accessibility, cross-cultural design

Cultural website guidelines

• successful products are … bundles of

social solutions.
• Inventors succeed in a particular culture
because they understand the values,
institutional arrangements, and economic
notions of that culture.
 Using scenarios
• A scenario is an idealised but detailed description of
a specific instance of human-computer interaction
(HCI)

• Used throughout design in various ways

– as a basis for overall design
– scripts for user evaluation of prototypes
– concrete examples of tasks
– as a means of co-operation across
professional boundaries

• Plus and minus scenarios to explore extreme cases

Generate storyboard from scenario
Generate card-based prototype from use case
 Explore the user’s experience
• Use personas, card-based prototypes or
stickies to model the user experience
• Visual representation called:
– design map
– customer/user journey map
– experience map
• Two common representations
– wheel
– timeline
An experience map drawn as a wheel

28
An experience map drawn as a timeline
 Summary
Different kinds of
The final product must
prototyping are used for Prototypes answer
be engineered
different purposes and questions
appropriately
at different stages

To generate conceptual
Two aspects of design: design, consider Storyboards can be
conceptual and interface metaphors, generated from
concrete interaction types and scenarios
interface types

Card-based prototypes
can be generated from
use cases