How to prototype like a pro

How toPrototypeLike a Pro Original iPod Prototype

A pictureis worth a thousand words A prototype is worth a thousand pictures

Whats aprototype?

Early versionof an idea

Test able Early version of an idea

This is nota prototype

This is

Why Prototype?

To answerquestionsand generate new ones

Validate yourassumptions

comparealternatives

Failearly d an y ea pl ch

To Visualizeyour ideas

To Visualizeyour ideasand share themwith others

To Visualize your ideas and share them with othersTeam users investors clients

So you till youFake it make it

What makes a goodPrototype?

QuickYou can create multiple versions fastand iterate even faster!

Cheap You wouldnt mindthrowing it away andstarting all over again

Favorites Check-in ChatPictures Minimal Contains only core features

Testable You can put it in front ofpeople and have them try it out(instead of just telling them about it)

Measurable You can get thenumbers behind whatsworking and whats not.

And hopefully fun to create and use

How to create a greatPrototype?

Deﬁne stories,and identify tasks

Create a userﬂow diagram

Sketch roughinterface screens Photo courtesy of StevenVanwel on Flickr

2Build Photo courtesy of Mr. T in DC on Flickr

Main screen Login screenDesign main screens

Create UI states Update StatusProfile pop-up highlight update

Add user interaction

Test several prototypesTo get objective feedback

Decide whatto measureTo get accurate feedback

Choose theright usersTo get relevant feedback

Ask them tothink aloudTo get constant feedback

Interview them at the end To get even more feedback

4Reﬁne

Discuss resultswith your team

Integrate ﬁndings

Test againwith users

5Share

Have yourteam playwith theprototype,instead ofwriting longspeciﬁcationdocuments

otypi ng ﬂ avorsProt

Paper sketches Wireframes HTML /JS / Flash Mockups CompsFast Slowlow ﬁdelity high ﬁdelity

Paper sketches Wireframes HTML /JS / Flash Mockups CompsFast Slowlow ﬁdelity high ﬁdelity Possible?

E nter Key note

Design toolwithoutfeature creep

clickable Fast SlowLow ﬁdelity High ﬁdelity Proto types

Basic shapes The ones you need, without thedistraction of the ones you dont need

AlignmentandSnapping

Copy StyleVisual K Lstyles K LQuickly share styles across shapes

Masterslides- Less copy/paste- Update multiple pageswith a single change

HyperlinksAdd user interaction without writing code

SlideTransitions

ExportHyperlinks are preserved!

Test onDeviceWithout doing any extra work

Works withAdobe suite Copy Paste

And it costsless than $25 The whole iWork suite costs less than most mock-up and prototyping tools

Key not opiaLargest user interface library for Keynote Power point! and

Hundreds of UI building blocks for...

iPhone

Web/Desktop

Android

Windows Phone 7

and Facebook

Thousands of companies use it!

And everyone loves it!

I love Keynotopia prototyping templates.Used them to rapidly develop a ﬁtness appas part of Phoenix Startup Weekend, andended up winning the peoples choice andbest presentation! -Matt Clower, iOS developer I work for a major corporation and my prototype consisted of over 150 slides. Keynotopia turned 60 days worth of work to 20. The executives loved the presentation and are contemplating implementing the app. -Shawn Smith, UX Designer Because it saves time and money!

$9 save you 9 hours Get it at Keynotopia+ free video tutorial on how to prototype an iPhone app in 13 minutes

http://keynotopia.com	7829
http://blog.amirkhella.com	4850
http://www.amirkhella.com	3063
http://amirkhella.com	892
http://cgt256.wordpress.com	660
http://www.scoop.it	63
http://www.conseilsmarketing.fr	54
http://crossthebreeze.posterous.com	38
http://zicht4.nl.dev.zicht.nl	30
http://belhawary.blogspot.com	20
http://translate.googleusercontent.com	20
http://orangeway.posterous.com	14
http://webcache.googleusercontent.com	11
https://twimg0-a.akamaihd.net	9
http://localhost:1414	9
http://paper.li	7
https://si0.twimg.com	5
http://geeksenavion.posterous.com	4
http://twitter.com	4
http://sidneyevematrix.posterous.com	4
http://tomgraber.posterous.com	4
http://zicht.nl.local	4
http://www.conseilsmarketing.com	3
http://julianogimenez.com	3
http://mmudassir.posterous.com	2
http://static.slidesharecdn.com	2
https://courses.quinnipiac.edu	1
http://drizzlin.com	1
http://www.squidoo.com	1
http://belhawary.blogspot.in	1
http://blog.amirkhella.com} {861266790\|\|\|pingback	1
http://www.allaboutbusiness.ie	1
http://www.netvibes.com	1
http://www.julianogimenez.com	1
http://1925844806.nvmodules.netvibes.com	1
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com	1
http://belhawary.blogspot.it	1

How to prototype like a pro

by Amir Khella on Dec 07, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

37 Embeds 17,615

Statistics

How to prototype like a pro — Presentation Transcript