Fake It Till You Make It: An introduction to UX prototyping

Mike Tyson said it best: "Everyone has a plan until they get punched in the face."

No matter how pixel-perfect your designs are and how well-thought-out the product vision, first contact with users can be a humbling experience. By prototyping your work, UX designers can build shared understanding internally and speed the process of external validation.

Transcript

1. An Introduction To UX Prototyping FAKE IT - till you - MAKE IT
2. Hi there.
3. Jay Stakelon Product Design @Fullscreen ~10 years digital design, web engineering, product management, startups ! ! ! ! ! ! @stakelon http://speakerdeck.com/stakes
4. Let’s begin with a really quick and oversimplified history of software product development methods
5. Waterfall development c. 1970 http://www.flickr.com/photos/iain/353671249/
6. REQUIREMENTS DESIGN DEVELOPMENT TESTING DEPLOYMENT MAINTENANCE
7. REQUIREMENTS DESIGN DEVELOPMENT TESTING DEPLOYMENT MAINTENANCE Sitemaps User Flows Visual Design Wireframes
8. Lightweight methodologies c. 2000 http://www.flickr.com/photos/alandd/4637759763/
9. ↻ Think > Make > Check ↻ Build > Measure > Learn LEAN STARTUP LEAN UX
10. Jeff Gothelf, http://www.jeffgothelf.com/blog/
11. Why prototyping?
12. Ideas are cheap http://www.flickr.com/photos/cannedtuna/7034085653/
13. Building things is expensive http://www.cashcats.biz/
14. Concept and understand what you’re building AN OBVIOUS REASON
15. Sketching http://www.flickr.com/photos/seeminglee/8685101737/
16. Sketchboarding
17. Create a shared understanding of what you’re building A GOOD REASON
18. Site mapping
19. User flows
20. Wireframes
21. Validate what you’re building A GREAT REASON
22. PROTOTYPING REDUCES RISK
23. “No plan survives first contact with customers” Steve Blank http://www.flickr.com/photos/61382024@N02/7513008946/
24. “Everyone has a plan until they get punched in the face” Mike Tyson
25. TIME COST
27. TIME COST
29. If wireframes are the blueprints http://www.flickr.com/photos/wscullin/3770015203/
30. and your product is the structure http://www.flickr.com/photos/seeminglee/8685101737/
31. then prototypes are the scale models
32. An architect wouldn’t break ground on a building without creating scale models. Don’t build software without prototyping.
33. Techniques + tools
34. MINIMAL REALISM
35. HIGH FIDELITY
36. http://www.flickr.com/photos/therefore/4091203853/ PAPER PROTOTYPING As minimally real as you can get
37. CREATING A PAPER PROTOTYPE Start with a user story Create sketches for each step String sketches together into flows
38. TESTING WITH A PAPER PROTOTYPE You get to be the “computer” Set up the scenario Give clear tasks to the user Ask your user to think aloud
39. http://www.flickr.com/photos/timothygreigdotcom/2119080316/ CLICKABLE WIREFRAMES Understand and test user flows
40. Omnigraffle http://www.omnigroup.com/omnigraffle
41. Visio http://office.microsoft.com/en-us/visio/
42. Balsamiq http://balsamiq.com/
43. HTML/CSS http://getbootstrap.com/
44. http://www.flickr.com/photos/caveman_92223/3173436256/ VISUAL PROTOTYPES Validate designs at higher fidelity
45. Axure http://www.axure.com/
46. Invision http://www.invisionapp.com/
47. Keynote http://www.apple.com/mac/keynote/
48. http://www.flickr.com/photos/caveman_92223/3173436256/ INTERACTIVE PROTOTYPES The fit and finish of a completed app
49. Hype http://tumult.com/hype/
50. Quartz Composer + Origami http://facebook.github.io/origami/
51. Framer.js http://www.framerjs.com/
52. HIGH FIDELITY Paper prototypes Visual prototypes Clickable wireframes Interactive prototypes
53. Learn more
54. PROTOTYPING RESOURCES http://hackdesign.org/lessons/10 http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/ http://www.uxbooth.com/articles/considering-prototypes/ http://uxdesign.cc/ux-tools/ http://interchangeproject.org/2013/11/02/paper-prototyping/ http://www.userfocus.co.uk/articles/paperprototyping.html http://www.uxuios.com/post/70714789733/fast-sketching-via-the-crazy-eights-technique http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/ ! !
55. Thank you