Prototyping

Low-Fidelity Prototyping
High-Fidelity Prototyping
Prototyping Dimensions
Announcement

▪ Lab 0 marks: released

▪ Lab 1 marks: Monday
▪ Project step 1: due this Friday
▪ Project step 2: released

Prototyping 2
Prototyping 3
IDEO Shopping Cart

▪ https://www.youtube.com/watch?v=M66ZU2PCIcM

Prototyping 4
Prototyping 5
User Centered Design Process

Generate lots of ideas

Grasp issues and
potential solutions

Prototyping 6
What is a Prototype?

▪ In other design fields a prototype is a small-scale model:

- a miniature car
- a miniature building or town
- a juicer

Prototyping 7
What is a Prototype?

▪ In interaction design it can be (among other things):

- a series of screen sketches, i.e. not necessarily
related
- a storyboard, i.e. a cartoon-like series of scenes
- a Powerpoint slide show, e.g., simulation
- a video simulating the use of a system
- a cardboard mock-up
- a piece of software with limited functionality
written in a language

▪ Key point:
- Goal is to NOT the artifact, but the feedback

Image source: Nintendo

Prototyping 8
Sketch of A Screen HTML Page

Prototyping 9
Prototyping 10
Prototyping 11
Prototyping 12
Prototyping 13
Prototyping 14
Prototyping 15
Lensmouse

Prototyping 16
Prototyping 17
https://www.theregister.com/2011/01/20/appl
e_touchscreen_mouse_patent_filing/

Prototyping 18
Why Prototype?

▪ Communication: discuss ideas with stakeholders

- “Where’s the ON button?”

▪ Evaluate interface effectiveness for communicating conceptual

model
- “Whoops, users didn’t understand that.”

▪ Develop requirements and/or specifications •

- “Uh-oh, here’s something we forgot.”

▪ Learning and problem solving

- “Hey, that will work!”

▪ Further develop conceptual and physical design

- “That’s way too heavy”

▪ Save time and money

- Don’t waste time coding/building the wrong thing

Prototyping 19
Why Prototype?

Prototyping 20
Prototype Progression

Prototyping 21
 Sketching

▪ Simulate a user experience with enough fidelity to allow third-

party comment on the value of the new product.

Prototyping 22
Source: https://www.design1st.com/how-much-do-hw-prototypes-cost/
 3D Model

Source: https://www.design1st.com/how-much-do-hw-prototypes-cost/
Prototyping 23
 Pre-Production

Source: https://www.design1st.com/how-much-do-hw-prototypes-cost/
Prototyping 24
 High-Fidelity Prototype

Source: https://www.design1st.com/how-much-do-hw-prototypes-cost/
Prototyping 25
Example: Kodak DC210 Prototype

▪ A digital camera developed at IDEO, at a time when such Cameras

had not yet broken into the consumer space.
▪ IDEO was tasked to find a way to make sense of possible digital
camera interactions

Prototyping 26
What to Prototype?

▪ Screen layouts and information display: placement of different

widgets, types of widgets, etc
- e.g. should edit fields come after/before control buttons

▪ Work flow, task design: the sequence of steps required to

achieve the task
- e.g. flow from one screen to another, changes on the screen

▪ Difficult, controversial, critical areas: provide alternative

solutions to be assessed
- e.g. business critical reports with specific alignment of fields

▪ Technical issues: will the graphics rendered be fast enough?

Prototyping 27
When to prototype?

▪ To get out of an early, focused discussion, and to reach

agreement
▪ when you need to communicate ideas
- design team, managers, users etc.

▪ when you have questions and you can’t proceed:

- functionality:
structure, sequencing, flow, clarity & completeness of
information
Example: knob versus slider for controlling volume
- appearance:
branding, clarity, aesthetics, color, shape, etc.
screen too crowded? actions clear, or lost in clutter?
- specifications:
“design by prototyping” (evolutionary approach)
how many files to show in file selection box

Prototyping 28
Prototyping Process

▪ You never get it right first time

▪ If at first you don’t succeed …

OK?
design prototype evaluate done!

re-design

Prototyping 29
Prototype Fidelity

There are many types of prototypes, ranging anywhere between

these two extremes:
▪ Low fidelity: prototype doesn’t look much like final product,
operation of the prototype may be simulated and slower.
▪ High fidelity: prototype looks and operates like the real product.

low-fi fidelity high-fi

Prototyping 30
Low-Fidelity Prototyping

▪ Low-fidelity prototypes use a medium which is unlike the final

medium, e.g. paper, cardboard

▪ Purpose:
- Brainstorm competing representations
- Elicit user reactions / suggestions

▪ Examples:
- Storyboards
- Paper prototypes
- Wireframes

Prototyping 31
Storyboards Example: A Reminder Software

Prototyping 32
Storyboarding

▪ All about user tasks, not interface

▪ Like comic strip with bad drawing
▪ Conveys setting:
- People
- Environment
- Task being accomplished

▪ Conveys sequence:
- Steps involved
- What task is being illustrated?

▪ Conveys satisfaction:
- What motivates people to use this system?

Prototyping 33
Benefits of Storyboarding

▪ Holistic focus: helps emphasize how an interface accomplishes a

task
▪ Avoid commitment to a particular user interface
▪ Helps get all the stockholders on the same page in terms of their
goal

Prototyping 35
Paper Prototypes

▪ Paper Prototypes
- After storyboarding – know what your app accomplishes
- Best for figuring out the user interface (UI)
- Don’t have to look beautiful or exact

Image source: UX Playground

Prototyping 36
Paper Prototypes

http://www.youtube.com/watch?v=FS00UIo12Xk

Prototyping 37
Paper Prototypes

Show Interface Layout Show Menu Items Show Popups

Prototyping 38
Paper Prototypes

Show Loading Time Show Selection Changes

Prototyping 39
Show Sliding Window

Prototyping 40
Paper Prototyping

▪ Benefits
- Leverage common design skills: Everyone can sketch and can
build paper prototypes.
- Allow early testing: testing prototypes early lets product teams
find big-picture problems
- Support rapid experimentation: Different user interface
elements can be drawn, cut out, copied to make extras, and then
assembled on a new piece of paper
- Facilitate adjustments: easy to make changes during the
testing session

Prototyping 41
Paper Prototyping

▪ Limitations
- An additional person is required to conduct the test session
- Paper prototypes are less suitable for visually-complex or highly-
interactive interfaces
- Requires some imagination on users part
- forces you to stay in “early design” mode

Prototyping 42
Evaluation Example

▪ https://www.youtube.com/watch?v=GrV2SZuRPv0

Prototyping 43
 FrameWire: Automatically Extracting Interaction Logic
from Paper Prototyping Tests

- http://www.youtube.com/watch?v=q6pGIOhr3d0&feature=youtu.be
Design Process 44
Real-time Code Generation

▪ https://www.youtube.com/watch?v=_oet4GOzcRQ

Prototyping 45
Paper Prototyping Image Quality

▪ Rendering: How good should it look?

- Good enough to elicit feedback about critical/risky design issues

▪ Creation speed is of the essence!

▪ Modifications - when?
- While user is present, get immediate feedback.
- Make changes without loosing users’ context.

▪ Coding effort in paper prototyping is always zero

- No code to write or rewrite until design is stabilized

Prototyping 46
What you can learn from a paper prototype

▪ Conceptual model
- Do users understand it?

▪ Functionality
- Does it do what’s needed? Missing features?

▪ Navigation & task flow

- Can users find their way around?
- Are information preconditions met?

▪ Terminology
- Do users understand labels?

▪ Screen contents
- What needs to go on the screen?

Prototyping 47
What you can’t learn

▪ Look: color, font, whitespace, etc

▪ Feel: efficiency issues
▪ Response time
▪ Are small changes noticed?
- Even the tiniest change to a paper prototype is clearly visible to
user
▪ Exploration vs. deliberation
- Users are more deliberate with a paper prototype; they don’t
explore or thrash as much

Prototyping 48
Wireframes

▪ A wireframe:
- presents the information that will be displayed on the page
- gives an outline of structure and layout of the page
- conveys the overall direction and description of the user
interface
▪ Note that wireframes are often low to medium fidelity.

Prototyping 49
Methods Of Wireframing

▪ Sketching: Hand-drawn sketches are quick to

create and quick to iterate on

▪ Graphic design software: Adobe Photoshop

or Illustrator.

▪ UX design software: Wireframe.cc, Balsamiq,

Adobe Xd

Prototyping 50
Low-Fidelity Prototyping
▪ Pros
- Inexpensive: extremely low cost.
- Fast: quickly explore different ideas without too much effort
- Collaborative: people can be involved in the design process

▪ Cons
- Limited interactivity: Hard to convey complex animations or
transitions
- Misleading:
Users often more inclined to comment on designs that appear
less “finished”
Client (i.e., the person paying you) might be confused by the
lack of programming

Prototyping 51