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
