0
How toPrototypeLike a Pro             Original iPod Prototype
A pictureis worth a thousand    words             A prototype             is worth a             thousand             pict...
Whats aprototype?
Early versionof an idea
Test able  Early version  of an idea
This is nota prototype
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?
1Plan
Define stories,and identify tasks
Create a userflow 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
3Test
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
4Refine
Discuss resultswith your team
Integrate findings
Test againwith users
5Share
Have yourteam playwith theprototype,instead ofwriting longspecificationdocuments
E nter Key note
Design  toolwithoutfeature creep
clickable      Fast       SlowLow fidelity      High fidelity      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
To design interfaces andtest prototypes     in hoursinstead of days
Paper   sketches             Wireframes           HTML /JS /                                               Flash          ...
Hundreds of UI buildingblocks for...
iPad
iPhone
Web/Desktop
Android
BlackBerry
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 fitness appas part of Phoenix Startup Weekend, anden...
$9 save you 9 hours Get it at Keynotopia
Prototype like a pro
Prototype like a pro
Prototype like a pro
Upcoming SlideShare
Loading in...5
×

Prototype like a pro

606

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
606
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Prototype like a pro"

  1. 1. How toPrototypeLike a Pro Original iPod Prototype
  2. 2. A pictureis worth a thousand words A prototype is worth a thousand pictures
  3. 3. Whats aprototype?
  4. 4. Early versionof an idea
  5. 5. Test able Early version of an idea
  6. 6. This is nota prototype
  7. 7. This is nota prototype
  8. 8. This is
  9. 9. Why Prototype?
  10. 10. To answerquestionsand generate new ones
  11. 11. Validate yourassumptions
  12. 12. comparealternatives
  13. 13. Failearly d an y ea pl ch
  14. 14. To Visualizeyour ideas
  15. 15. To Visualizeyour ideasand share themwith others
  16. 16. To Visualize your ideas and share them with othersTeam users investors clients
  17. 17. So you till youFake it make it
  18. 18. What makes a goodPrototype?
  19. 19. QuickYou can create multiple versions fastand iterate even faster!
  20. 20. Cheap You wouldnt mindthrowing it away andstarting all over again
  21. 21. Favorites Check-in ChatPictures Minimal Contains only core features
  22. 22. Testable You can put it in front ofpeople and have them try it out(instead of just telling them about it)
  23. 23. Measurable You can get thenumbers behind whatsworking and whats not.
  24. 24. And hopefully fun to create and use
  25. 25. How to create a greatPrototype?
  26. 26. 1Plan
  27. 27. Define stories,and identify tasks
  28. 28. Create a userflow diagram
  29. 29. Sketch roughinterface screens Photo courtesy of StevenVanwel on Flickr
  30. 30. 2Build Photo courtesy of Mr. T in DC on Flickr
  31. 31. Main screen Login screenDesign main screens
  32. 32. Create UI states Update StatusProfile pop-up highlight update
  33. 33. Add user interaction
  34. 34. 3Test
  35. 35. Test several prototypesTo get objective feedback
  36. 36. Decide whatto measureTo get accurate feedback
  37. 37. Choose theright usersTo get relevant feedback
  38. 38. Ask them tothink aloudTo get constant feedback
  39. 39. Interview them at the end To get even more feedback
  40. 40. 4Refine
  41. 41. Discuss resultswith your team
  42. 42. Integrate findings
  43. 43. Test againwith users
  44. 44. 5Share
  45. 45. Have yourteam playwith theprototype,instead ofwriting longspecificationdocuments
  46. 46. E nter Key note
  47. 47. Design toolwithoutfeature creep
  48. 48. clickable Fast SlowLow fidelity High fidelity Proto types
  49. 49. Basic shapes The ones you need, without thedistraction of the ones you dont need
  50. 50. AlignmentandSnapping
  51. 51. Copy StyleVisual K Lstyles K LQuickly share styles across shapes
  52. 52. Masterslides- Less copy/paste- Update multiple pageswith a single change
  53. 53. HyperlinksAdd user interaction without writing code
  54. 54. SlideTransitions
  55. 55. ExportHyperlinks are preserved!
  56. 56. Test onDeviceWithout doing any extra work
  57. 57. Works withAdobe suite Copy Paste
  58. 58. And it costsless than $25 The whole iWork suite costs less than most mock-up and prototyping tools
  59. 59. Key not opiaLargest user interface library for Keynote Power point! and
  60. 60. To design interfaces andtest prototypes in hoursinstead of days
  61. 61. Paper sketches Wireframes HTML /JS / Flash Mockups CompsFast Slowlow fidelity Finally! high fidelity
  62. 62. Hundreds of UI buildingblocks for...
  63. 63. iPad
  64. 64. iPhone
  65. 65. Web/Desktop
  66. 66. Android
  67. 67. BlackBerry
  68. 68. Windows Phone 7
  69. 69. and Facebook
  70. 70. Thousands of companies use it!
  71. 71. And everyone loves it!
  72. 72. I love Keynotopia prototyping templates.Used them to rapidly develop a fitness 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!
  73. 73. $9 save you 9 hours Get it at Keynotopia
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×