Pr o totyping I deas

Prototyping Ideas

Simplicity is the ultimate sophistication.“ -- Leonardo Da Vinci

13,000

pages

What does prototype mean in interaction design?

Screen sketch

Cardboard mockup Video

3D printed modelSoftware

Why do we need prototypes ?

Decision-MakingCompare design variations and resolve conflicts

CommunicationCreate shared preview among all stakeholders

Evaluation & FeedbackFast and inexpensive ways to refine design

Prototypes categorized by Fidelity

Low

Medium

High

Prototypes categorized by Fidelity

Low HighMedium

Prototypes categorized by Medium

Paper Digital

How to prototype ?

Only Steps ？ !2

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

Paper

Digital

anything

familiar?

1

2

Balsamiq Mockups

lightweight, low fidelity, rapid prototyping tool

1. Balsamiq

SketchyStyle

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

Workspace

Widgets

Axure RP

Medium-high fidelity enterprise-level prototyping solution

2. Axure

PS In Prototype

Design

Generate realistic functional prototype without codingHighly interactive , longer learning curve

Sitemap

Widgets

Masters

Workspace

Page

Interact!

Staticproperty

Dynamicproperty

drag

add

3. POP

Design on paper Take pictures SimulateHand-drawn joy + easy mobile presentation

(Prototyping On Paper)

Paper and Mobile

Only!

Design in the wild…

ResourcesPrintable sketching templateshttp://www.tripwiremagazine.com/2012/07/free-printable-sketching-wireframing-templates.html

Balsamiqhttp://balsamiq.com/download/ Download:

Liscense name: HCI Online 0214Liscense key: eJzzzU/OLi0odswsqvFw9lTwz8vJzEtVMDAyNKkxNLY0NjM0NzMAgZqQGkMAR9gNSA==UI Library: https://mockupstogo.mybalsamiq.com/projects

https://chrome.google.com/webstore/detail/balsamiq-mockups/pplbmgaodhjmbklkgkgmlghaekcfhhkk Chrome plug-in:

Axurehttp://www.axure.com/downloadthanks?dl=70pc Axure 7:

Example:

Example:

UI Library: http://www.axure.com/community/widget-libraries http://web.cs.dal.ca/~hzhou/3130/prototype/axure.rar

http://web.cs.dal.ca/~hzhou/3130/prototype/balsimiq.rar

Mockflowhttp://www.mockflow.com/

Justinmindhttp://www.justinmind.com/ Download:

Installation instruction:

Liscense key: JP-evaluation-50-professional-42864482-4473==

POPhttps://popapp.in/

http://www.justinmind.com/media/Justinmind_Prototyper_license_installation.pdf

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.

1. http://arthistory.about.com/cs/namesdd/a/leonardo.htm2. http://www.slideshare.net/UXPA/design-like-davinciv113. web.nmsu.edu/~ogden/cs485/class9-10.ppt4. 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

Reference

Design a low-fidelity prototype (paper or digital) for at least one user story in your project.

Exercise

* 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?