Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Similar a Building a Prototype Without an Engineer
Similar a Building a Prototype Without an Engineer (20)
Último
Último (20)
Building a Prototype Without an Engineer
- 1. Building a prototype without writing a line of code. Maggie Steciuk UX/UI Designer Terrible Labs @msteciuk maggie@terriblelabs.com
- 4. StereoPill
- 5. Awesome.me
- 6. Ticket Fairy
- 7. Agenda • Why prototype? • Selecting the right approach • Dive into specific methods • How to get started? • Which tools to use? • Limits of prototyping • Q&A
- 8. Everything starts with an idea
- 10. “The products startups build are really experiments” ERIC RIES, THE LEAN STARTUP
- 11. THE LEAN STARTUP PROCESS
- 12. Prototyping
- 13. Why Prototype? • Fail early (and cheaply) • Communicate functionality • Determine feasibility • Better understand the problem • Test usability • Resolve conflicts • Gather financial support
- 14. What am I trying to accomplish? Intent Who’s going to see it? Audience
- 15. Intent
- 17. Audience
- 18. Visual Fidelity
- 20. How done something looks should correspond to how done something is.
- 22. VISUAL FIDELITY Functional vs. Visual Fidelity FUNCTIONAL FIDELITY
- 23. SLOW & EXPENSIVE VISUAL FIDELITY Functional vs. Visual Fidelity CHEAP & FAST FUNCTIONAL FIDELITY SLOW & EXPENSIVE
- 24. SLOW & EXPENSIVE Functional vs. Visual Fidelity Design Expertise Technical Expertise VISUAL FIDELITY CHEAP & FAST FUNCTIONAL FIDELITY SLOW & EXPENSIVE
- 25. SLOW & EXPENSIVE Functional vs. Visual Fidelity Design Expertise Technical Expertise VISUAL FIDELITY CHEAP & FAST FUNCTIONAL FIDELITY SLOW & EXPENSIVE
- 26. SLOW & EXPENSIVE Functional vs. Visual Fidelity Design Expertise Technical Expertise VISUAL FIDELITY CHEAP & FAST FUNCTIONAL FIDELITY SLOW & EXPENSIVE
- 27. Criteria for picking The right approach • Intent & Audience • Cost & time • Familiarity & learnability • Collaboration • Distribution • Throwaway vs. reusable
- 28. Sketches & Storyboards Wireframes HTML Paper prototypes prototypes Interactive Interactive wireframes design comps High-fidelity Production-ready comps prototypes
- 29. Functional vs. Visual Fidelity High-fidelity Interactive comps design Fully comps interactive, high VISUAL FIDELITY fidelity prototypes Wireframes Interactive wireframes Sketches FUNCTIONAL FIDELITY
- 31. Sketching Pen and paper, iPad/tablet, Dry erase board
- 32. Documenting an Research tool idea Creating a shared Validating UX communication design direction Thinking through a Mapping out user design flow
- 33. 1. Mapping out user flow
- 45. But where to begin?
- 47. User goals Business goals Showcase their talents Improve engagement Create a beautiful profile Increase conversion Inward Paths Outward Paths External search Register to join the site Core content / functionality Internal search Contact user Navigation Engage with content Linked in email signature Shared via social net work User profile See similar people Share Link from website Add content Trigger words Core elements Calls to Action My name Avatar, name, loc, interests “Awesome” Showcase Audio, written posts Sign up, Log in Talents, interests Photos, videos
- 48. Cores & Paths
- 49. Home Page
- 51. Home Page Content Search Other RSS Engines Sites
- 52. Home Page Content Search Other RSS Engines Sites
- 53. Content This is the CORE
- 54. Flickr
- 55. Netflix
- 56. Rogue Amoeba
- 57. Inward Paths Outward Paths CORE
- 58. Home Page Content Search Other RSS Engines Sites
- 59. Inward Paths Outward Paths Home page Search engine Social media (Twitter, etc) CORE Other sites
- 60. Flickr
- 61. Netflix
- 62. Rogue Amoeba
- 63. Inward Paths Outward Paths Home page Share or forward to a friend Search engine Favorite / Like / etc... Social media (Twitter, etc) CORE Download Other sites Buy
- 64. User goals Business goals Showcase their talents Connect users Become a destination for great Create a beautiful profile content Inward Paths Outward Paths External search Register to join the site Core content / functionality Internal search Add content Navigation “Like” content Linked in email signature User profile See similar people Shared via social net work Share Link from website Contact a user Trigger words Core elements Calls to Action “Maggie Steciuk” Avatar, name, loc, interests “Awesome” “showcase talents” Audio, written posts Sign up, Log in “eportfolio” Photos, videos
- 65. User goals Business goals Inward Paths Outward Paths Core content / functionality Trigger words Core elements Calls to Action
- 71. Wireframes Pen & Paper, Balsamiq, Axure, Keynote/Powerpoint
- 72. Selling an idea to stakeholders Testing high- level concepts with users Visualizing user flow or documenting functionality
- 77. Maggie SteciukMaggie Contact BOSTON, MA Send
- 78. Maggie SteciukMaggie Contact BOSTON, MA Hey, Maggie! Just thought I’d let you know this presentation is going exceptionally well. Hardly anybody in the front of the room fell asleep. Send
- 79. Maggie Steciuk BOSTON, MA Your message has been sent.
- 82. logo Ticket Fairy Scan Ticket Wallet Tickets
- 83. Align barcode within brackets Scan X
- 84. Back Ticket Fairy 823879389349 02/02/2013 3:15pm Chevrlolet OPP 98 DARTMOUTH ST METER FEE UNPAID - CD252 $30.00 Pay ticket Remind me
- 85. Back Ticket Fairy Visa ending in 2355 MasterCard ending in 3234 Add a Card
- 86. Back Ticket Fairy You’re almost done! Violation number 32453456 issued on 2/2/2013 near Darmouth St will be paid using VISA ending in 2145 $30.00 Submit Payment
- 87. Back Ticket Fairy Success! Your payment was submitted. You will receive an email confirmation from the City of Boston. Scan Another Ticket
- 90. Keynote • Powerful drawing tools • Master slides make it easy to reuse UI elements • Hyperlinks add “clickability” • Works well with Adobe CS
- 94. User goals Business goals Showcase their talents Improve engagement Create a beautiful profile Increase conversion Inward Paths Outward Paths External search Register to join the site Core content / functionality Internal search Contact user Navigation Engage with content Linked in email signature Shared via social net work User profile See similar people Share Link from website Add content Trigger words Core elements Calls to Action My name Avatar, name, loc, interests “Awesome” Showcase Audio, written posts Sign up, Log in Talents, interests Photos, videos
- 98. Interactive Design Comps Photoshop, Illustrator, InVision (and Keynote, too)
- 99. Communicating UI design Distributing design documentation User testing
- 109. Benefits
- 111. Proto.io
- 112. Proto.io
- 116. Prototyping New Features Photo credit: @hedcase at Deviantart.com
- 117. 1. Plan the tasks you need to test
- 119. 3. Test early, test often
- 121. 5. One change at a time
- 122. 6. Beware of Dead Ends
- 123. Takeaways • Sketch a user flow • Beginning with the core, sketch or create simple wireframes of application screens • Add interactivity and visual polish as needed • Consider audience & intent when selecting the right approach, but make it minimally real. • Prototype early and often (no need to code) • Have a nice app!*
- 124. Resources • Sketching: • Design pattern library (http://developer.yahoo.com) • Templates: http://interfacesketch.tumblr.com/ • POP for iPhone: http://popapp.in/ • Wireframing: • SketchFlow (http://microsoft.com/expression) • Axure (http://www.axure.com) • Balsamiq (http://www.balsamiq.com) • Keynote Kung Fu (http://keynotekungfu.com/) • Keynotopia (http://www.keynotopia.com/themes) • High-fidelity prototypes: • InVision: (http://www.invisionapp.com) • http://Proto.io
- 125. Building a prototype without writing a line of code. Maggie Steciuk UX/UI Designer Terrible Labs @msteciuk maggie@terriblelabs.com