Advanced Human Computer Interaction Fall, 2019

Advanced Human Computer

Interaction
Riphah Institute for Computing and
Applied Sciences
Dr. Ayesha Kashif

Ideation and Prototyping

Dr. Ayesha Kashif – Riphah Int. Univ 1

Advanced Human Computer Interaction Fall, 2019

Prototyping
▪ What is a Prototype
▪ Definition
▪ Static Vs Dynamic Prototype
▪ Prototyping as a Mindset
▪ Prototyping Examples
▪ Architecture
▪ Industrial Design
▪ Personal Electronics
▪ Softwares and Apps
▪ Why We Prototype
▪ Fidelity of Prototypes
▪ The Process of Prototyping

What is a Prototype
▪ Definition
▪ “A first, typical or preliminary model of something,
especially a machine, from which other forms are developed
or copied.” definition from Oxford
▪ The word originates from the Greek prōtotupos, meaning
“first example.”
▪ By this definition, anything that takes an idea out of your
head and makes it visible to others may be considered a
prototype.
▪ The critical element that this definition is missing is the
intention to test and improve the prototype over time. So our
definition of a prototype moving forward is:
▪ “a manifestation of an idea into a format that
communicates the idea to others or is tested with users,
with the intention to improve that idea over time”.

Dr. Ayesha Kashif – Riphah Int. Univ 2

Advanced Human Computer Interaction Fall, 2019

What is a Prototype
▪ Static vs Dynamic Prototype
▪ Some designers believe a
prototype is anything that is
testable and improvable,
▪ while others believe a prototype is
specifically an interactive version
of an idea
▪ If you choose to see everything as a
prototype, interactive or static, and
use it as an opportunity to test your
assumptions through any means
possible,
▪ you will develop the mindset of
incremental improvement and
constant feedback that will greatly
benefit your product.
Static versus interactive prototypes

What is a Prototype
▪ Prototyping as a Mindset
▪ Protype is a mindset where you are comfortable with testing
unfinished ideas in order to make the best result possible.
▪ Showing unfinished work may feel like it goes against your
grain and nature you may like to display finished, polished,
perfect designs.
▪ To be successful, you must build comfort with vulnerability
and be open to feedback.
▪ As you start getting more feedback and incorporating it into
your designs, you’ll see the longer-term benefit in the
success of your projects.
▪ Your prototyping and research may even help inform your
team’s launch dates and prioritize your backlog of future
features.

Dr. Ayesha Kashif – Riphah Int. Univ 3

Advanced Human Computer Interaction Fall, 2019

What is a Prototype: Examples

▪ Architecture
▪ Some of their prototypes include
▪ floor plans
▪ which are drawn and redrawn based on user input and needs,
▪ airflow models
▪ testing ventilation throughout a space by showing how air will move
through the rooms,
▪ daylight models
▪ improving window design by
testing how much light they
let in at any point in the day
or year,
▪ material studies, and
aesthetic models

What is a Prototype: Examples

▪ Architecture
▪ More Complex Models
▪ simulated walk-throughs to test the interior feeling and experience of
spaces both on screen and in virtual reality
▪ allows architects to communicate design decisions with clients at
different stages to get approval and
▪ to communicate final specifications to contractors and engineers for
them to build on site.

Dr. Ayesha Kashif – Riphah Int. Univ 4

Advanced Human Computer Interaction Fall, 2019

What is a Prototype: Examples

▪ Industrial Design
▪ design new shapes and
forms for their physical
products, they test along
the way to make sure their
designs are
▪ ergonomic
▪ easy to use
▪ the forms they design are
manufacturable

Shape models for the OXO Good Grips Swivel

Peeler (photo courtesy of OXO)

What is a Prototype: Examples

▪ Best Sellers: OXO Peeler

Dr. Ayesha Kashif – Riphah Int. Univ 5

Advanced Human Computer Interaction Fall, 2019

What is a Prototype: Examples

▪ Personal Electronics
▪ When developing personal electronics, a subset of industrial
design, designers begin with sketches and studies of form.
▪ Additionally, they deal with layers of complexity, including
choosing and testing the necessary electrical components and
combining them together until the whole system works.
▪ The decisions they make about which components to use have
wider implications for the form factor and layout of the final
device.

Once the individual pieces are assembled, a more complex prototype can
test user interactions

What is a Prototype: Examples

▪ Software And Apps
▪ Software designers create prototypes to fully think through how users
will interact and find their way through complex interfaces.
▪ These prototypes include user flows to show an ideal user path and to
determine the functionality that the user will need;
▪ wireframes in a testable form (either paper or clickable);
▪ coded prototypes; and
▪ visually designed, high-fidelity prototypes
▪ Each of these prototypes incrementally gets better, and allows the designer
to improve the overall interactions with the software throughout the
process based on testing.

Digital software and apps need initial

paper prototypes,
clickable prototypes,
and high-fidelity prototypes to
develop intricate interactions

Dr. Ayesha Kashif – Riphah Int. Univ 6

Advanced Human Computer Interaction Fall, 2019

What is a Prototype
▪ Prototyping for Products
▪ Product development encompasses many processes for
bringing a new product, service, or experience to market
▪ and includes
▪ business strategy,
▪ market research,
▪ value propositions,
▪ technical specifications,
▪ sales,
▪ design, and
▪ development

• UX Strategy: How to Devise Innovative Digital Products that People Want by Jaime Levy.
• the Lean Startup series of books (O’Reilly).

Prototyping
▪ What is a Prototype
▪ Why We Prototype
▪ To Understand
▪ To Communicate
▪ To Test and Improve
▪ To Advocate
▪ Fidelity of Prototypes
▪ The Process of Prototyping

Dr. Ayesha Kashif – Riphah Int. Univ 7

Advanced Human Computer Interaction Fall, 2019

Why We Prototype: Understand

▪ To Understand
▪ Prototyping is a great way to not only understand the
problem you’re currently trying to solve, but to illuminate
alternative problems you should solve instead.
▪ This process is called problem discovery, and it can help
you find the root cause of your user’s pain, which might be
different than your originally assumed user problem.

Problem discovery and exploratory

research can help define the
direction of your project

Why We Prototype: Understand

▪ To Understand
▪ For example, Segway saw an opportunity area between pedestrian walking
and car driving, but didn’t spend adequate time researching and
validating their problem space
▪ They decided to address this problem with a stand-upon solution,

▪ but when it hit the market,

there were too many
assumptions they had
already made that were
not true, including:
▪ access to usable
infrastructure,
▪ non-rainy climates,
▪ no need for multiple
passengers, and
▪ viability at their price point.
Segway failed to validate their problem early
enough to fix their product design

Dr. Ayesha Kashif – Riphah Int. Univ 8

Advanced Human Computer Interaction Fall, 2019

Why We Prototype: Understand

▪ Alternative Solutions
▪ Early on, you should try out as many variations that you can
think of, instead of sticking with your first original idea
▪ The best way to explore is to make quick prototypes of all
the different ways to solve the user’s problem.
▪ Then you can
conduct task-based
tests or A/B tests to
compare two or more
versions of the same
interaction to see
which one performs
better.
Explore many ways to solve your problem

Why We Prototype: Communicate

▪ To Communicate
▪ Your fellow designers
▪ can understand the thoughts and concepts behind a low-fidelity prototype
(that doesn’t look much like the final version) and can help you think of
alternative ways to solve your interaction problems.
▪ You can use mid- or high-fidelity prototypes
▪ to get feedback from your colleagues about the visual design and more
intricate interactions later in the process
▪ If you’re meeting with stakeholders
▪ you need to appropriately show where you are in the process and set
proper expectations for the work you will share.
▪ stick with a mid or mixed-fidelity prototype, with this fidelity level, the
stakeholder doesn’t have to imagine how the product will look in real life
(either in a browser or as a physical object) and they can feel confident in
the direction the design work is moving.
▪ If you’re communicating with developers or manufacturers
▪ who will produce your product, it’s best to have a high-fidelity prototype
to show exactly how the final product should look and act.

Dr. Ayesha Kashif – Riphah Int. Univ 9

Advanced Human Computer Interaction Fall, 2019

Why We Prototype: Test and Improve

▪ To Test and Improve
▪ Make a few smaller tests that focus on each specific variable so
that you can really understand what confuses the user, and fix it.
▪ Finally, each of the prototypes you make will be specifically
designed for a unique assumption. The assumptions can be based
on usability, proving value, or business strategy. Some examples
include:
▪ Users can find their way to a specific feature
▪ The information architecture of the page is intuitive
▪ The user understands the chosen terminology and UI text
▪ The product and its functions is valuable enough for the amount of
time it takes to use it
▪ A user can complete the ideal, full function of the product using the
current interface design

Why We Prototype: Advocate

▪ To Advocate
▪ When working with a larger team that includes product
managers, business stakeholders, and a large development team,
it’s necessary to demonstrate the value and reasoning behind
design decisions rather than simply showing them the visual
results
▪ As a designer, you are
the champion for the
users, and it’s your job
to create the best, most
intuitive design that
will benefit them and
solve their problems.
Use prototypes to demonstrate your
idea and explain your design decisions

Dr. Ayesha Kashif – Riphah Int. Univ 10

Advanced Human Computer Interaction Fall, 2019

Prototyping
▪ What is a Prototype
▪ Why We Prototype
▪ Fidelity of Prototypes
▪ Low-Fidelity
▪ Mid-Fidelity
▪ High Fidelity
▪ Mixed Fidelity/Dimensions of Fidelity
▪ The Process of Prototyping

Fidelity for Prototypes

▪ Fidelity
▪ Fidelity means how closely the prototype looks and acts like
the finished product.
▪ You’ll find that you make more prototypes earlier in the
process, and fewer as your idea becomes more refined.
▪ If a prototype’s fidelity is too low, the user might not
understand the context and get lost in the generalities.
▪ If a prototype’s fidelity level is too high, the user will
subconsciously believe that the design is “finished” and will
only give feedback on polishing areas instead of the broad
concepts.

Dr. Ayesha Kashif – Riphah Int. Univ 11

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes

▪ There’s also a balance between the time and effort it takes to
make the prototype and the value you’ll get from testing at that
specific fidelity

Fidelity for Prototypes: Low Fidelity

▪ Low-fidelity prototypes are best for
▪ testing your core concepts,
▪ getting over initial fears,
▪ thinking through many ideas, and
▪ catching potential problems before they get too big to fix.
▪ This type of prototype
▪ doesn’t look like your final product at all;
▪ it’s in a different medium,
▪ at a different size, and is usually
▪ not visually designed
▪ although you should be thinking about visual design during this
whole process.

Dr. Ayesha Kashif – Riphah Int. Univ 12

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Low Fidelity

▪ Examples
▪ paper prototypes,
▪ circuit building,
▪ storyboards,
▪ wireframes,
▪ mood boards,
▪ sketches, and
▪ component prototypes
Low-fidelity prototypes take all sorts of
forms and can test high level concepts

Fidelity for Prototypes: Low Fidelity

▪ Wireframing
▪ A wireframe is a two-
dimensional illustration
of a page’s interface that
specifically focuses on
▪ space allocation and
▪ prioritization of content,
▪ functionalities available,
▪ and intended behaviors.

https://www.usability.gov/how-to-and-
tools/methods/wireframing.html

Dr. Ayesha Kashif – Riphah Int. Univ 13

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Low Fidelity

▪ Sketches

Fidelity for Prototypes: Low Fidelity

▪ Sketches

Dr. Ayesha Kashif – Riphah Int. Univ 14

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Low Fidelity

▪ Storyboards

Fidelity for Prototypes: Low Fidelity

Dr. Ayesha Kashif – Riphah Int. Univ 15

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Low Fidelity

Fidelity for Prototypes: Low Fidelity

▪ The goal of a low-fidelity prototype is to
▪ test basic and big assumptions, including
▪ user flows;
▪ information architecture
▪ labeling,
▪ navigation layout and
▪ basic organization;
▪ and user mental models.
▪ With this rough prototype, your user won’t waste time
giving feedback on the execution and appearance of the
interface or device, and rather
▪ will focus on the overall use and flow of the product.

Dr. Ayesha Kashif – Riphah Int. Univ 16

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Low Fidelity

▪ Card Sorting Example
▪ Working on the initial information architecture of a site
▪ how a site is organized,
▪ what terminology to use for the specific user, and
▪ how to group labels in the most intuitive way
▪ give user a set of cards that has all of navigation pages and
names on them and ask them to organize the cards in a way that
makes sense for her or him.
▪ This activity allows to understand the user’s mental model
because each individual will organize differently, and navigation
needs to work for all of these different mental models.
▪ It takes very little time, material, and effort to make a card-
sorting activity, and we don’t need an interface to test.
▪ We can learn a lot about users, though, and improve the layout
and navigation of our product to better suit them.

Fidelity for Prototypes: Low Fidelity

▪ After card sorting, immediately create a low-fidelity
prototype of the proposed navigation or alternative
navigation solutions with a little bit of the content on each
page to give context.
▪ by asking people to find
specific information, I can
clearly see if they
▪ understand the navigation
labels and how they’re
grouped, and
▪ how quickly they get to their
goal.

A low-fidelity prototype allows

the user to interact with the
navigation for better testing

Dr. Ayesha Kashif – Riphah Int. Univ 17

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Mid Fidelity

▪ Mid-fidelity prototypes start to look like your final product
in at least one dimension
▪ They are a good balance between cost (time or otherwise)
and value.
▪ Mid-fidelity prototypes start to incorporate
▪ visual design,
▪ interactions,
▪ functionality, and
▪ the final medium
▪ on the body,
▪ onscreen,
▪ in-browser, or
▪ physically designed

Fidelity for Prototypes: Mid Fidelity

▪ Some examples include
▪ clickable prototypes,
▪ style tiles,
▪ Axure prototypes,
▪ coded prototypes, and A mid-fidelity electronic prototype
▪ a variety of electronic includes more interactive components
prototypes

Mid-fidelity digital prototypes are more You can create style tiles to
complex than their low-fidelity versions communicate the future visual design

Dr. Ayesha Kashif – Riphah Int. Univ 18

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Mid Fidelity

▪ Mid-fidelity prototypes are useful for communication with stakeholders
who might not have the ability to properly “read” low-fidelity work.
▪ You’re showing a more refined view of the concept with better context.
▪ Another example of mid-fidelity prototypes are clickable versions of
your wireframes
▪ You can use a program like
▪ PoP, InVision, Proto.io, Flinto, or UXPin to quickly build simple
prototypes to test your assumptions.
▪ Once you’ve made the mid-fidelity prototype, you can have the user
interact with it on a specific device.
▪ You can have your smartphone
app displayed on a smartphone
template or have your user access
it on the actual device to get
feedback on the design in context.

Fidelity for Prototypes: High Fidelity

▪ High-fidelity prototypes are the
real deal.
▪ They are visually designed and
are in the final medium of either
physical materials or code in a
browser.
▪ These prototypes have real
content and most paths available
to click or interact with.
▪ Some examples include a
▪ highly polished electronic smart
object, High-fidelity prototypes look like the
▪ a coded app, real experience
▪ or a fully designed digital
experience

Dr. Ayesha Kashif – Riphah Int. Univ 19

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: High Fidelity

▪ At this point, most of your assumptions should have been
tested in earlier prototypes.
▪ It’s best to use this prototype to test small details like
▪ overall user reactions to the experience,
▪ animations or motion,
▪ legibility of the font sizes,
▪ long-term wearability, or
▪ size of the final buttons.
▪ High-fidelity prototypes cost more to
▪ make in time,
▪ skill level, and the
▪ software or coding needed to complete them.

Fidelity for Prototypes: High Fidelity

▪ At this point in the process, it’s best to work with the team that will be
involved with making your product: either developers, industrial
designers, manufacturers, or electrical engineers.
▪ By collaborating with these teams to build prototypes, you are more
likely to design something that’s feasible to make, and able to be
manufactured.
▪ If you’re unable to work directly with these teams, but still need to test
at a high fidelity, consult professionals for feasibility feedback.
▪ Then you can make complex digital prototypes with specific software
like
▪ Sketch for visuals and
▪ Axure for interactions or
▪ physical prototypes using commercially available components.
▪ You can make high-fidelity physical prototypes by
▪ CNC milling, casting, sewing soft goods, or having circuit boards
printed for you.

Dr. Ayesha Kashif – Riphah Int. Univ 20

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: High Fidelity

▪ if the results are positive,
they can quickly ship the
prototype into
production
▪ even after shipping a
final product, most Agile
teams will continue to
improve on the product
based on user feedback
and backlog of
improvements.

A production-level coded prototype might

be able to be shipped if testing goes well

Fidelity for Prototypes: Comparison

▪ Pros and Cons

Dr. Ayesha Kashif – Riphah Int. Univ 21

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes

▪ The Five Dimensions of Fidelity
▪ In addition to pure low-, mid-, and high-fidelity prototypes, you
can make a mixed-fidelity prototype by prioritizing the five
dimensions of fidelity:
1. visual refinement,
2. breadth of functionality,
3. depth of functionality,
4. interactivity, and
5. data model
▪ These five dimensions give you a fine-tooth approach to
determining what to include in your prototype and how to mix a
custom fidelity for your goal.

Fidelity for Prototypes: Dimensions

1. Visual Refinement
▪ Visual refinement is the amount of pixel-perfect design or
material polish you’ve put into your interface or physical
object.
▪ Depending on your goal (e.g., understanding or testing),
you might choose to have a lower fidelity in visual design to
indicate the ideas are not solidified and are in process.
▪ Using lower-fidelity visuals, such as
▪ a boxy wireframe with sketchy lines or breadboards,
▪ will focus user feedback on the
▪ larger concepts of the user flow,
▪ instead of getting reactions to the
▪ colors, material choices, and intricate details

Dr. Ayesha Kashif – Riphah Int. Univ 22

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Dimensions

1. Visual Refinement

You may choose to use a low-fidelity prototype to get high-level feedback

Fidelity for Prototypes: Dimensions

1. Visual Refinement
▪ Toward the end of your process, you’ll want to test a higher-
fidelity visual design to ensure
▪ the accessibility, touch and feel, and visual details are supporting
the user.
▪ This prototype will be the opportunity
▪ to check contrast ratios,
▪ material interactions,
▪ aesthetic reactions,
▪ and legibility.

Dr. Ayesha Kashif – Riphah Int. Univ 23

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Dimensions

1. Visual Refinement
▪ You’ll want users to experience the app or object in the natural
environment and context that they will use it in.

High-fidelity visuals allow you to test the touch

and feel and accessibility of your designs

Fidelity for Prototypes: Dimensions

2. Breadth of functionality
▪ The breadth of the prototype indicates how much of the broad
functionality is represented in the prototype.
▪ For example, if I’m creating a new music app or audio device where a
listener can
▪ choose an album or song to play,
▪ can make playlists, and
▪ can purchase music,
▪ a higher-fidelity breadth would include all of these options as clickable
in the interface or physical model.
▪ I can test how the user would use these different features together.

A high-fidelity breadth will allow

the user to interact with all of the
clickable features of an app

Dr. Ayesha Kashif – Riphah Int. Univ 24

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Dimensions

2. Breadth of functionality
▪ A lower fidelity of breadth might only focus on a single function,
to make it easier to design and test that specific feature.
▪ The broader a prototype is, the better you can test the full set of
tasks a user will interact with and the better you can test the full
app or smart object’s navigation.

A low-fidelity breadth focuses

on one small piece of the
functionality of a product

Fidelity for Prototypes: Dimensions

3. Depth of functionality
▪ The depth of the prototype indicates how detailed an
individual feature of the prototype is built out to be.
▪ You can have one or multiple deep parts of the prototype,
depending on the tasks you create for testing.
▪ Later in your process, your team (or multiple teams) might
make many of the features deep so that the user can try
different features of the product in one test.

Dr. Ayesha Kashif – Riphah Int. Univ 25

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Dimensions

3. Depth of functionality
▪ For the same music app example, I
might focus my user test on the
playlist feature by building out the
whole user flow for
▪ creating a playlist, and
▪ not creating the flow for purchasing
music or
▪ playing songs or albums.
▪ Or I might create the buttons for
scrolling through music options for
the device
▪ A higher fidelity in the depth of the
features lets you test individual
tasks the user will do within your
product. A high-fidelity depth contains all aspects of
a specific function of the product

Fidelity for Prototypes: Dimensions

3. Depth of functionality
▪ A lower fidelity of depth is beneficial to test shallow navigation
assumptions.
▪ The user does not need to interact deeply with a feature; they
need to find how to get to it.

A low-fidelity depth contains a

shallow representation of the
functions of a product

Dr. Ayesha Kashif – Riphah Int. Univ 26

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Dimensions

You can combine breadth and depth to create very effective

and targeted prototypes

Fidelity for Prototypes: Dimensions

4. Interactivity
▪ The interactivity of the prototype indicates how the
interactive parts of the app or product are displayed to the
user.
▪ Some aspects include
▪ “call to action” buttons,
▪ physical buttons,
▪ how the page loads,
▪ LED reactions to button press,
▪ how interface elements animate,
▪ how the product reacts to user input, and
▪ the types of physical, visible, and audio outputs of electronics.

Dr. Ayesha Kashif – Riphah Int. Univ 27

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Dimensions

4. Interactivity
▪ For our music app example, a
low-fidelity interaction would
be
▪ a paper prototype or mid-
fidelity prototype that
▪ allows the user to “click” to
different pages, but
▪ doesn’t realistically show how
the interface would move
between those pages
▪ As I create a higher-fidelity
interaction, I have the menu
slide out from the side, and
▪ the names of the albums and
artists slide into the list with a
bit of a bounce.

Fidelity for Prototypes: Dimensions

4. Interactivity
▪ Interactions provide crucial
context through cues and
choreography of parts for the
user,
▪ so make sure you’re testing this
throughout your process.
▪ They can even set the voice and
tone of the entire experience
based on the reactions to the
user
▪ You’ll need to use prototyping
software or more in-depth
microcontroller coding to help High-fidelity interactivity includes clickable
create animations and elements for inputs, animations and
automated reactions to user transitions, and outputs
input.

Dr. Ayesha Kashif – Riphah Int. Univ 28

Advanced Human Computer Interaction Fall, 2019

Fidelity for Prototypes: Dimensions

5. Data Model
▪ The data model encompasses the content that a
user interacts with in the interface and
▪ the data utilized in both the frontend and
backend of a product.
▪ Lower-fidelity content, such as lorem ipsum
(dummy text), doesn’t provide much context to
the user, and
▪ might lead the user and the visual design astray
by not providing a proper understanding of the
content that will be on the page.
▪ It’s important to have real data behind physical
products too,
▪ so that you can assess specific backend
structures and information processing, and find
helpful code to help you move faster. Low-fidelity data models might
cause you to make mistakes in
your design

Fidelity for Prototypes: Dimensions

5. Data Model
▪ If you don’t have real data
for your product,
▪ request it or create your
own basic content that’s
similar to what your final
content will be,
▪ or partner with developers
to get the correct code and
backend structures.
▪ This will allow you to test
the tone and delivery of
your messaging, or the
voice of your smart object
or wearable. By using real song titles, you’ll ensure you’re
leaving enough space for the extremes

Dr. Ayesha Kashif – Riphah Int. Univ 29

Advanced Human Computer Interaction Fall, 2019

Prototyping
▪ What is a Prototype
▪ Why We Prototype
▪ Fidelity of Prototypes
▪ The Process of Prototyping
▪ Minimum Viable Prototype
▪ Identify Users and Problem
▪ User Flow
▪ Prototype
▪ Test, Take Stock and Repeat
▪ Exploration-Centric
▪ Audience-Centric

The Process of Prototyping

▪ Your prototyping process will
take a slightly different path
depending on the purpose for
each prototype, and the process
can vary depending on your
goals,
▪ audience, and
▪ assumptions.

make an overall
assessment of a particular
situation, typically before
making a decision
The process of prototyping depends on your
goals, audience, and assumptions

Dr. Ayesha Kashif – Riphah Int. Univ 30

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Choose

▪ Guidelines to choose Proper Process
▪ To choose the proper process to follow, use these guidelines.
▪ Are you trying out prototyping, or don’t know what to do first?
▪ Try making a “minimum viable prototype.”
▪ Is your purpose to generate lots of different solutions for a problem?
▪ Then your process will be focused on exploration.
▪ Will you use the prototype to communicate or advocate for a certain
direction?
▪ Then you need to concentrate on your specific audience.
▪ Do you have a question or assumption to test?
▪ Your process will be focused on that assumption.
▪ Establishing the goal and focus of your process will ground your
prototype,
▪ and limit the scope so that it doesn’t get too difficult to make.

The Process of Prototyping: Minimum Viable

▪ Minimum Viable Prototype
▪ If you don’t know where to start, you have limited time, or
you want to try out prototyping before applying it to your
work, use this process as a guide.
▪ Step 1: Establish Who Your Users Are And Identify
Their Problem
▪ pain point or problem you’re solving for your users, think
of a few different ways to solve that problem.

Dr. Ayesha Kashif – Riphah Int. Univ 31

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Minimum Viable

▪ Step 2: Write Out A User Flow That
Solves Their Problem
▪ Now that you have
▪ a user,
▪ a problem, and a
▪ direction to solve it,
▪ you’re ready to create the
▪ user flow that supports that direction.
▪ A user flow is the journey the user
takes to complete their goal.
▪ You can write it out in
▪ sentences,
▪ make a diagram, or This user flow demonstrates how
▪ draw it as a storyboard. one checks out on Amazon

The Process of Prototyping: Minimum Viable

▪ Step 2: Write Out A User Flow That Solves Their Problem
▪ Your user flow will help you determine the scope of the prototype that
you need to create, or the extent of the subject matter that a prototype
covers.
▪ If your main pain point (specific problem that prospective customers of your
business are experiencing) is the signup process of an app, you don’t
need to include the entire functional usage of your app in the
prototype.
▪ Start by prototyping, testing, and improving the signup process.
▪ By prioritizing and scoping your work properly, you’ll save time
and be able to focus on very tangible results faster.
▪ This scoping exercise is especially helpful with electronics, to
ensure that the different components are functioning before
combining them together.

Dr. Ayesha Kashif – Riphah Int. Univ 32

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Minimum Viable

▪ Step 2: Write Out A User
Flow That Solves Their
Problem
▪ One way to determine
priority is to ask yourself “if
this assumption is false,
will it block the product
from being useful or
selling?”
▪ You’ll want to start with the
one that would completely
derail your product if it’s
wrong.
You can prioritize your assumptions based on
the value it will have versus the time or effort
it would take to test it

The Process of Prototyping: Minimum Viable

▪ Step 2: Write Out A
User Flow That Solves
Their Problem
▪ Example
▪ the UI text you choose for
your navigation might
not match your user’s
mental model.
▪ If you choose witty text
instead of direct
terminology,
▪ your user might not
understand how to find
specific functions of your Testing your call-to-action text is a high priority
product

Dr. Ayesha Kashif – Riphah Int. Univ 33

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Minimum Viable

▪ Another example is choosing the icon types for a smart object
interface

Icons should be tested in order to make sure

your user understands what they represent

The Process of Prototyping: Minimum Viable

▪ Step 3: Make The Prototype To Address The User Flow
▪ Take the user flow that you’ve written or diagrammed and
▪ draw wireframes or combine the necessary electrical components that
you need to create the prototype that you require.
▪ At this point, you’ll need to choose what fidelity level would be best.

Once you decide the assumption you’re testing, you can

build a specific prototype to address it

Dr. Ayesha Kashif – Riphah Int. Univ 34

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Minimum Viable

▪ Step 4: Test, Take Stock Of Results, And Repeat
▪ Now you’re ready to test the prototype! Write up your research
plan find a few users to test with, and observe what went
well and what didn’t.
▪ It’s best to have an additional person help you with your
user test so you can ask questions and they can take notes.
▪ Keep in mind that it’s a good thing if the user gets lost or
doesn’t complete the task properly.
▪ That means you’ve found an area you can improve, and that
the prototype was a good use of time.

The Process of Prototyping: Minimum Viable

▪ After testing with a few different people
take stock of your notes.
▪ Did a pattern emerge from the
feedback?
▪ Was your assumption validated or
invalidated?
▪ Did any other insights pop up randomly
that you didn’t previously consider?
▪ Take these insights back to your original
user and problem, and think through
how you can improve the experience.
▪ Go back through this process and make
another prototype with a newly
prioritized list of assumptions based on
your user testing.

Dr. Ayesha Kashif – Riphah Int. Univ 35

Advanced Human Computer Interaction Fall, 2019

Prototyping
▪ What is a Prototype
▪ Why We Prototype
▪ Fidelity of Prototypes
▪ The Process of Prototyping
▪ Minimum Viable Prototype
▪ Exploration-Centric
▪ Generate Lots of Ways to Solve User’s Problems
▪ Group Similar Ideas Together
▪ Decide a Direction based on Prioritization
▪ Audience-Centric

The Process of Prototyping: Exploration-Centric

▪ Exploration-Centric
▪ The exploration-centric process spends more time on
generative ideation and less time on creating prototyping
artifacts.
▪ However, it’s helpful to think through ideas in an
interactive way, instead of merely through sketches or
wireframes.
▪ Your goal for exploring is to find the right problem to solve,
to make an educated decision on the way or ways to solve
the problem, and to set yourself up so you can
▪ communicate and test many variations on that solution with
later prototypes.

Dr. Ayesha Kashif – Riphah Int. Univ 36

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Exploration-Centric

▪ Step 1: Generate Lots Of Ways To Solve The User’s
Problem
▪ Using Post-its and
Sharpies (or any other
drawing method)
▪ loosely draw or write out
one solution idea per
Post-it and immediately
put it up on a wall
▪ This ideation exercise
can be done solo or with
your whole team. With a
group of people, you can
riff off one another’s
ideas as they’re placed
on the wall.
An ideation session brainstorm

The Process of Prototyping: Exploration-Centric

▪ Alternatively, you can

perform this activity
remotely by using the
variety of different
▪ “sticky note” software
options, including
Mural, Post-it Plus, or
Stormboard
▪ Make sure your full
team participates,
including design,
development, and Online collaboration software is a good way to include
business partners. remote teammates in ideation

Dr. Ayesha Kashif – Riphah Int. Univ 37

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Exploration-Centric

▪ Step 2: Group Similar
Ideas Together To
Create Overall
Categories
▪ As your wall, or web
page, begins to fill with
ideas, and after the
participants start slowing
down with their ideas,
▪ begin grouping the ideas
into similar topics or
solutions, in a process
called affinity mapping Group your Post-its into categories

The Process of Prototyping: Exploration-Centric

▪ These similar categories will show you the strongest directions
forward, and give you a few specific ideas to begin prototyping.
▪ During the ideation, keep track of assumptions as you hear them,
and make sure to research those points by talking to users at a
later time.

▪ By determining what
statements are assumed
or valid, you’ll gain
more confidence that
you’re solving the right
problem before you get too
far into the development
process.

Keep track of your assumptions throughout

your ideation session

Dr. Ayesha Kashif – Riphah Int. Univ 38

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Exploration-Centric

▪ Step 3: Decide A Direction
Forward Based On Your
Prioritization
▪ Look over your prioritized
solution direction and
determine which one or two
ideas to take forward into
actual prototyping
▪ keeps a cloud-based folder
to hold our ideation artifacts
▪ (pictures of Post-it
brainstorms, grouping, and
prioritized solutions),
▪ and we host much of our
research and design work in
an internal GitHub Wiki for You can vote on the best ideas with dots
the development and Or you can decide which direction to go based
business teams to access. on a prioritization grid

Prototyping
▪ What is a Prototype
▪ Why We Prototype
▪ Fidelity of Prototypes
▪ The Process of Prototyping
▪ Minimum Viable Prototype
▪ Exploration-Centric
▪ Audience-Centric
▪ Determine Audience, Goals and Fidelity Level
▪ What do you Need to Reach Goal
▪ Present the Prototype to your Audience

Dr. Ayesha Kashif – Riphah Int. Univ 39

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Audience-Centric

▪ Audience-Centric
▪ The process of prototyping for communication has a big
emphasis on the audience and what you’re trying to get
across in your communication.
▪ Step 1: Determine Your Audience, Your Goal, And
The Fidelity Level
▪ Are you talking with fellow designers for feedback?
▪ Is this a stakeholder presentation to get approval?
▪ Are you selling a concept to a client?
▪ Are you explaining a final design to a developer?

The Process of Prototyping: Audience-Centric

▪ Each of these audiences needs a specific context set for them to
help them understand your ideas.

Dr. Ayesha Kashif – Riphah Int. Univ 40

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Audience-Centric

▪ Based on audience choose language
▪ For designers:
▪ set the context and clear expectations for what type of feedback you
need
▪ For Stakeholders and Clients:
▪ you’ll need to talk in business terms, including
▪ the time to market,
▪ unique value propositions, and
▪ the value of the design tasks in real,
▪ measurable numbers
▪ For developers:
▪ you’ll need to discuss
▪ frameworks,
▪ code bases,
▪ performance budgets, and where to submit software issues.

The Process of Prototyping: Audience-Centric

Use the correct terminology when communicating with business stakeholders

Dr. Ayesha Kashif – Riphah Int. Univ 41

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Audience-Centric

▪ Step 2: What Do You Need To Include To Reach Your
Goal?
▪ The next decision you need to make is what to include in
the prototype to communicate and achieve your goal.
▪ Do you need a certain level of functionality or will the basic
clickable wireframing be enough information?
▪ Do you need to communicate specific, intricate details or
overarching directions?

The Process of Prototyping: Audience-Centric

For stakeholder or
client sign-off, you’ll
need to represent
most of the user flow
and full experience of
the product

A higher-fidelity user flow (in the dimension of depth and breadth) is often a good
choice for certain stakeholders (image courtesy of Sushi Sutasirisap)

Dr. Ayesha Kashif – Riphah Int. Univ 42

Advanced Human Computer Interaction Fall, 2019

The Process of Prototyping: Audience-Centric

▪ For development, you’ll need to target the parts of a product that
are assumed feasible, but haven’t been confirmed. Motion and
animations for digital products are a good example of work that
you need to communicate to developers.
▪ Intended sensor inputs and outputs are an example for physical
products.

It’s important to communicate motion and animations to

your developers early on (image courtesy of Flinto.com)

The Process of Prototyping: Audience-Centric

▪ Step 3: Present The Prototype To Your Audience
▪ It’s best to present the prototype through a story, using the
user persona to walk through the portion of the user flow
you decided to include.
▪ Give enough context at the beginning of your presentation
so that your audience knows what the goal of the
presentation is.

Dr. Ayesha Kashif – Riphah Int. Univ 43

Advanced Human Computer Interaction Fall, 2019

References
▪ Kathryn McElroy - Prototyping for Designers_ Developing the
Best Digital and Physical Products-O’Reilly Media (2017)
▪ The UX Book- Process and Guidelines for Ensuring a Quality User
Experience, Rex Hartson
▪ (6th Edition) Ben Shneiderman Designing the User Interface
Strategies for Effective Human-Computer Interaction
▪ [Alan Cooper, 2014] About-Face_-the-essentials-of-interaction-
design-wiley
▪ UX Strategy: How to Devise Innovative Digital Products that
People Want by Jaime Levy
▪ http://theleanstartup.com/the-lean-series
▪ https://hci.stanford.edu/research/prototyping/

Dr. Ayesha Kashif – Riphah Int. Univ 44