ISYS6308

User Experience Design

Prototyping
 Prototyping
week 09
Overview
This session discussed aspects of prototyping in UX Design, as the activities under
taken to ensure the needs of the user. Why and how prototyping is required. Two
prototyping approach also explained that paper-prototyping and digital prototyping.
Finally, what next after prototyping is done.
 Objectives Prototyping
Prototyping

o LO5. Create UX for a Business, base on

design
• Objectives
• Explain why UX projects need
prototyping, and how do project
accomplish the prototyping ?
• Explain the differences between
paper prototyping and digital
prototyping.
• Explain processes for
conducting the prototype ?
• Create prototyping for UX
development project.
 Prototyping
• Prototyping is the act of or the art of
creating, mimicking, or testing all or
part of the functionality of an
application or website with users.
• Prototypes can be created in an analog
state (such as with whiteboards or
pencil and paper) or in a digital state
(with PowerPoint or Keynote, Acrobat,
Visio, omnigraffle, Axure, HTML, or
other technology-based tools).
• Prototyping should be an iterative
process because prototypes are
generally created to identify issues
with or to validate the user experience.
• Once you gather feedback, you can
make modifications to the prototype for
additional testing.
• a successful (enough) prototype can keep
a project moving forward into other
phases of the development lifecycle.
• Remember that prototyping is a process
it’s not an artifact. You might end up
creating screens and (sometimes mock)
functionality that you call a prototype,
but these are a part of prototyping;
• The outcome of the prototyping process
is actionable internal or external feedback
on concepts in order to enhance and
improve the design.
 Prototyping
• Prototyping very effective
when using a representative
sampling of a system. You
don’t have to create a
simulation of the entire system,
you only need to simulate key
parts and/or interactions. In
most cases, you will want to
test a handful of concepts and
your prototype should include
only those concepts.
– Methods for prototyping :
» Analog using whiteboarding,
pencil-and-paper sketching,
storyboarding, cardboard cut-outs,
and so on.
» Digital using digital tools that allow
you to create interactive prototypes
and engage your test users in a more
realistic environment.
– The method selected will largely
depend upon the time and materials
available to you, as well as your target
audience and their sophistication
level.
 Paper Prototyping
» Prototyping activities where
the use of paper as a means to
convey an idea or concept as
well as systems or web
applications to users tools
needed are pencils and pens,
paper, scissors, and anything
you can swipe from the art
department or buy at a local
office supply store
• Paper prototyping is flexible and also
cheap and simple. The process is simple:
– Sketch the portion of the functionality
you want to test.
– Present the functionality to the user(s).
– Document the feedback (it’s paper, so
flip your prototype over and start
writing).
– Then move on to the next user, or
make updates and start over.
 7 myths about paper
prototyping

1. I can’t draw well enough to create a

paper prototype.
2. Wireframes are the same as paper
prototypes.
3. I can do it just as well with Visio.
4. Whiteboarding is just as effective.
5. Users behave differently with a paper
prototype than with a real system.
6. It looks unprofessional.
7. I can’t prototype interactivity.
 Digital
Digital Prototyping
Prototyping

o Prototyping use digital or electronic media.

o Digital prototyping pulls from many other
aspects of the design process :
o Refer to your personas when presenting or testing
your digital prototype,
o Refer to your wireframes for blocking and visual
treatment of the prototype,
o Refer to visual design assets for a realistic fit and
finish to your prototype.
 Digital
Digital Prototyping
Prototyping

o Wireframes can show the audience that

the project is still a work in progress and
not the final, production-ready site.
o During design testing with users, you will
find that the most important aspect of the
prototype is how realistically it represents
the final system.
 Digital Prototyping

• The outcome of your digital prototype rests on three

factors:
– Who are you building this prototype for, and why?
– What types of resources, tools, and skills do you have available?
– What does your timeline look like?
 Digital Prototyping
o Two ways to build an digital prototype:
 Hand-coding the HTML, is the digital equivalent of a
paper prototype. it is free and easy.
 Using a WYSiWYg editor, such as Adobe
Dreamweaver, Realmac’s Rapid- Weaver, Axure, or
Microsoft Visual Studio. more web-based tools have
begun to proliferate, such as: Handcraft (formerly
Quplo), Justinmind, Balsamiq, ixEdit, Pencil,
Mockflow, JustProto, inVision, and Protoshare.
 Digital Prototyping
10 Graphic & Web Design Tools That Will Explode in 2015
1. Webydo : http://www.webydo.com/
2. Invision : http://www.invisionapp.com/
3. Ink : http://zurb.com/ink
4. Infogram : https://infogr.am/
5. Pixlr : https://pixlr.com/
6. Rinse : http://rinse.io/
7. Material-UI : http://material-ui.com/
8. Frameless : http://stakes.github.io/Frameless
9. Typegenius : http://www.typegenius.com/
10.Skillshare : https://www.skillshare.com/
 PROTOTYPING TOOLS

http://uxdesignweekly.com/ux-resources/prototyping-tools/
 Wireframes are dead,
long live rapid prototyping..?

• Why ditch wireframes?

– Wireframes (which are static by nature) are not
well suited to defining dynamic on-page
interactions, such as expanding content, AJAX
style reveals and animations.
– Wireframes are not very user friendly (which is
kind of ironic for a UX design tool).
– Wireframes are typically very open to
interpretation.
– Wireframes can encourage the ‘lob it over the
fence’ approach to design.
– Wireframes can be too prescriptive.
– Wireframes often add unnecessary drag to the
design process and can encourage death by
documentation (a particularly nasty way to
go).

http://www.uxforthemasses.com/rapid-prototyping/
 Wireframes are dead,
long live rapid prototyping..?

• Bypassing wireframes
with rapid prototyping
– Prototypes are a much better at
communicating a design.

– Prototypes are more user friendly.

– Prototypes require less

documentation 

– Prototypes better support user-

centred design.

– Prototypes require less work.

http://www.uxforthemasses.com/rapid-prototyping/
 Benefits of prototyping
1. Make The System A
Better Quality
2. Identify Problems
Early
3. User Involvement
4. Meet User Needs
5. Cost Savings
• Sometimes developers do not fully
understand what users expect.
Prototyping makes it possible to resolve
misunderstandings identification at the
beginning of the process. Users can
identify possible improvements that can
be made before the system is complete.
End users feel more involved in the
development of the system. A system
that has been through prototyping will
generally have improved the quality of
design and approach to user needs.
cheaper fix system problems in the early
stages of development rather than
towards the end of the project
 What Happens After Prototyping?
 Suppose you have completed your prototyping process,
you will need to synthesize your results and turn them
into something actionable.
» If you were paper prototyping, you might need to
begin creating digital wireframes based on the
feedback you received, if you are already in a digital
wireframe mode, you may need to update your
wireframes and proceed through your project
process, or you may need to take your feedback and
update your prototype for another round of reviews.
 What Happens After Prototyping?
• Todd Zaki Warfel (www.messagefirst.com), shared that
Prototypes are a way to achieve one or more of the
following goals:
 Work your way through a design
 Create a common communication platform
 Sell your design ideas internally (e.g., to your boss,
other designers, etc.)
 Test technical feasibility
 Test design concepts with end users/customers
o Reference
1. Russ Unger and Carolyn Chandler. (2012). A Project Guide to UX Design: for User
Experience Designers in the Field or in The Making, 2th Edition, New Riders City,
Berkeley, CA, ISBN: 978-0-321-81538-5
2. Jesmond Alen and James Chudley, (2012), Smashing UX Design : Foundations for
Designing Online User Experiences, John Wiley & Sons Ltd., West Sussex, PO19
8SQ.
3. Ezra Schwartz and Elizabeth Srail (2014), Prototyping Essentials with Axure , 2 th
Edition, Packt Publishing, Birmingham, ISBN- 978-1-84969-832-0.
4. http://www.quora.com/What-is-the-difference-between-wire-framing-and-
prototyping-in-UX-design

TERIMA KASIH