HCI and Design

Today
Assignment 1 is graded
Assignment 3 is posted

Understanding prototype fidelity

What is Digital Prototyping?
Introduction to various digital prototyping tools
Reminder: What is a prototype?
A prototype is an incomplete, early version of a product
There are many approaches to building prototypes for
software user interfaces
UI prototypes can be as simple as a drawing on a piece
of paper or as complex as functional web application
◦ Or anywhere in between those extremes!
Lo-Fi vs. Hi-Fi
Traditionally, prototypes are categorized as either lo-fi
(low fidelity) or hi-fi (high fidelity)
Fidelity can be thought of as how close of an
approximation of the final product is being attempted
In this class, we will often use lo-fi as a synonym for
paper prototyping and hi-fi as a synonym for digital
prototyping
Your design process should use multiple levels of
fidelity as you move from an idea to a fully designed
product
 Dimensions of Fidelity
Fidelity can be
broken down into
four basic
dimensions:
◦ Breadth
◦ Depth
◦ Look
◦ Interaction
http://www.sapdesignguild.org/editions/edition7/
proto_design.asp
Breadth
The “breadth” of a prototype refers to how much of the
product’s functionality is represented in the prototype

◦ A very narrow prototype only represents a single

feature
◦ A broad prototype represents all intended
functionality

◦ Prototypes should generally be as broad as needed to

cover basic or most important tasks, but not much
more
Depth
The “depth” of a prototype refers to how much of the
prototype is functional, and how robust it is
◦ A very shallow prototype has no backend at all and
is hard-coded to respond as though the user had
provided ideal input
◦ A deep prototype has some logic and error-handling
capabilities
◦ At first glance, depth may seem unimportant, but it
affects the amount of exploration a user can do
◦ Thus depth can actually have a profound influence
on user testing!
Look
“Look” is probably what most people think of when
they think of prototype fidelity
It refers to how accurately a prototype represents the
product’s intended appearance, including fonts, colors,
and graphics
It’s generally a good idea to hold off on something that
has a high fidelity look until later in the design process
◦ People are less likely to point out flaws and mistakes
◦ People can easily fixate on the “little” things
◦ You are less likely to throw it out and start again
Interaction
“Interaction” refers to how the prototype handles
input and output
Interaction can often be simulated
For example, you might create a digital prototype for
an iPad application which runs on your desktop and
responds to traditional a traditional mouse and
keyboard
You might use hyperlinks or animation to simulate
clicking interaction (e.g., in Powerpoint)
Hi-Fi Prototyping
Once you have developed a lo-fi prototype and solicited
feedback on it through peer critique and user testing:
◦ You may wish to create another lo-fi prototype
◦ (isn’t iterative design fun?)
◦ Or you may be ready to move on to a hi-fi prototype
Remember, a high fidelity prototype is a substantial time
investment!
It is good for evaluating a working design that has been
derived from a few rounds paper prototyping
Things you will need to consider…
Choice of tool (more in a minute)
Typography / font
Color palette
Device
Interaction
Implementation

Start by creating a digital version of your paper prototype

Then iterate through user testing and feedback
Don’t design a beautiful prototype that can’t be implemented!
Digital Prototyping Tools
There are literally hundreds…
And more released every day.
I don’t know them all!

What you choose will depend on a variety of

factors…
Choosing a tool: Considerations
• Learning Curve
• How long will it take me to learn this tool?
• Usage
• Which device will it be used on?
• Fidelity
• Will it showcase layout structure or complex
interactions?
• Sharing
• Can I collaborate with others on the prototype?
• Cost
• How much am I prepared to pay for this tool?
 Comparing prototyping tools
A cool tool to help you do this: http://www.prototypr.io/prototyping-tools/
 All platforms
Powerpoint or Costs money … but many
Keynote of you have it already
 Only for Mac
Costs money ($99)
Sketch Student discount ($49?)
 All platforms
3 projects free
Figma
 All platforms
Free trial (15 days)
Proto.io Then monthly fee
 All platforms
One project free, then
InVision monthly subscription
 Comparing prototyping tools
A cool tool to help you do this: http://www.prototypr.io/prototyping-tools/
 Let’s Practice
Goal: work through a tutorial using a new digital prototyping tool.
Comparison tool: http://www.prototypr.io/prototyping-tools/
Suggestions (But you can also find your own…..)
Sketch: http://megumi.co/learn/sketch.htm
Figma: https://www.creativebloq.com/how-to/create-a-responsive-
dashboard-with-figma
InVision: https://support.invisionapp.com/hc/en-us/articles/
203009719-How-do-I-get-started-
Proto.io: https://support.proto.io/hc/en-us/articles/221499147-Step-
by-step-Tutorial-Getting-Started
Submit: Upload a screenshot of your work to this google folder.
http://bit.ly/2FtoMW1 THE FILENAME SHOULD BE YOUR NETID!