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

49eec51ef4a3335cb3247a41d1f08971?s=47 Jay Stakelon
February 17, 2014

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.

49eec51ef4a3335cb3247a41d1f08971?s=128

Jay Stakelon

February 17, 2014
Tweet

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

  26. None
  27. TIME COST

  28. None
  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