Upload
senwe
View
56
Download
0
Embed Size (px)
DESCRIPTION
Pr o totyping I deas. “. ”. Simplicity is the ultimate sophistication. -- Leonardo Da Vinci. 13,000. pages. Software. Screen sketch. 3D printed model. Video. Cardboard mockup. What does prototype mean in interaction design?. Decision-Making. - PowerPoint PPT Presentation
Citation preview
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?