Prototyping Ideas

“ Simplicity is the ultimate sophistication.

-- Leonardo Da Vinci
13,000 pages
 Screen sketch Software 3D printed model

Cardboard mockup Video

What does prototype mean in interaction design?

 Communication
Create shared preview among all stakeholders

Decision-Making
Compare design variations and resolve conflicts

Evaluation & Feedback

Fast and inexpensive ways to refine design

Why do we need prototypes ?

 High

Medium

Low

Prototypes categorized by Fidelity

 Low Medium High

Prototypes categorized by Fidelity

 Paper Digital

Prototypes categorized by Medium

 Only 2 Steps ？!

How to prototype ?
 1. Sketch key pages on separate paper
2. Specify how user will transition between
them using Arrows

1. Create key pages by placing UI elements

in the right place.

2. Add interactivity by establishing links

between them
 anything
familiar?
1

2
1. Balsamiq

Sketchy
Style

Balsamiq Mockups

lightweight, low fidelity, rapid prototyping tool

75 built-in UI elements + 187 icons + UGC community
Easy to use, intuitive, but not interactive enough
Widgets

Workspace
2. Axure

PS In
Prototype
Design
Axure RP

Medium-high fidelity enterprise-level prototyping solution

Generate realistic functional prototype without coding
Highly interactive , longer learning curve
Sitemap Interact!

Workspace
Static
Widgets
property

Dynamic
Masters Page property
 3. POP (Prototyping On Paper)

Paper
and Mobile
Only!

Hand-drawn joy + easy mobile presentation

Design on paper  Take pictures  Simulate
Design in the wild…
Resources
Printable sketching templates
http://www.tripwiremagazine.com/2012/07/free-printable-sketching-wireframing-templates.html

Balsamiq
Download: http://balsamiq.com/download/
Liscense name: HCI Online 0214
Liscense key: eJzzzU/OLi0odswsqvFw9lTwz8vJzEtVMDAyNKkxNLY0NjM0NzMAgZqQGkMAR9gNSA==
UI Library: https://mockupstogo.mybalsamiq.com/projects
Chrome plug-in:
https://chrome.google.com/webstore/detail/balsamiq-mockups/pplbmgaodhjmbklkgkgmlghaekcfhhkk
Example: http://web.cs.dal.ca/~hzhou/3130/prototype/balsimiq.rar

Axure
Axure 7: http://www.axure.com/downloadthanks?dl=70pc
UI Library: http://www.axure.com/community/widget-libraries
Example: http://web.cs.dal.ca/~hzhou/3130/prototype/axure.rar
 POP
https://popapp.in/

Mockflow
http://www.mockflow.com/

Justinmind
Download: http://www.justinmind.com/
Installation instruction:
http://www.justinmind.com/media/Justinmind_Prototyper_license_installation.pdf
Liscense key: JP-evaluation-50-professional-42864482-4473==

By using this software and this academic licence provided for UC San Diego / Coursera you agree that
the software will not be used on any projects whose outputs will be used by a commercial, government,
political or religious organisation. If you cannot agree, you must purchase a full licence.
Reference
1. http://arthistory.about.com/cs/namesdd/a/leonardo.htm
2. http://www.slideshare.net/UXPA/design-like-davinciv11
3. web.nmsu.edu/~ogden/cs485/class9-10.ppt
4. http://www.smashingmagazine.com/2010/06/16/design-
better-faster-with-rapid-prototyping/
5. http://www.slideshare.net/Rachel_Hinman/mobile-
prototyping-essentials-workshop-part-2
Exercise

Design a low-fidelity prototype (paper or digital) for

at least one user story in your project.
* Be sure to answer the following questions before you start:
• Who is the user?
• What is the task?
• Why would the user need to complete this task?
• When and Where (scenario/context)?
• How could the user go through the task with your prototype?