Your SlideShare is downloading. ×
Prototyping for web and mobile workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Prototyping for web and mobile workshop

228
views

Published on

Published in: Design, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
228
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Test 123
  • Transcript

    • 1. Hands on workshop: prototyping for web and mobile Simon Phillips @uxfellow
    • 2. What we will be covering 1. Introduction to prototyping 2. What goes into a design? 3. Hands on Prototyping exercises 4. Testing and Validation
    • 3. Why should you care?
    • 4. Avoid this!
    • 5. Test ideas early “Prototyping is an effective way of testing and validating proposed functionality and designs prior to investing in development.” - Jonathan Knoll & Russ Unger
    • 6. The Lean Startup model
    • 7. The Lean UX approach Make Think Check
    • 8. The Lean UX approach User Research User flows Contextual Enquiry Rapid Sketching Competitor analysis Think Make Paper Prototyping Wireframes Card sorting Landing page Information Architecture Personas User Journeys Check User testing Google Analytics Heuristic Evaluation Surveys
    • 9. The UX Sweet Spot User Needs The Sweet Spot! Business Needs
    • 10. Tools of the trade
    • 11. Sketching
    • 12. Omnigraffle
    • 13. Axure
    • 14. What goes into a design?
    • 15. Define BEFORE you Design 1. User Research 2. Content Strategy 3. Personas 4. Information Architecture 5. User Flows
    • 16. 1. User Research • User research can be quick and dirty, or detailed and exhaustive • Talk to your customers, contextual enquiry, design research, stakeholder interviews etc • Gather Requirements - define what the site or application needs to do e.g. “Orders can be tracked by entering a tracking code online”
    • 17. 2. Content Strategy • Start with the content first! • Allow your content to drive the structure of your website or app – Not the other way around! • Collect your content into a spreadsheet and create a plan for ongoing updates and maintenance. Kristina Halvorson http://www.contentstrategy.com
    • 18. 3. Proto Personas Start with proto personas that Capture basic Assumptions Our best guess as to who is using (or will use) our product and why. Evolve the persona based on real user data Lean UX by Jeff Gothelf and Josh Seiden
    • 19. 4. Information Architecture “The art and science of structuring, organizing and labeling information to help people find and manage it.” Louis Rosenfeld louisrosenfeld.com
    • 20. 5. User Flows • Map the ideal user journey through your website or app • The touch points should ultimately shape your MVP • Design in flows rather than screens uxdesign.smashingmagazine.com/2012/01/04/stopdesigning-pages-start-designing-flows/
    • 21. Example User Flow
    • 22. Design Studio
    • 23. Recipe App Objectives: • Customers placing orders for ingredients online • Drive traffic by sharing of recipes via social media • User generated recipes
    • 24. Recipe App Requirements: 1. Quick and easy way to find a recipe 2. Users can access over 10,000 recipes 3. Promotional area for featured recipes 4. Users can contribute their own recipes 5. Users can share recipes 6. Users can add ingredients to a “Shopping list”
    • 25. User Flow sketch exercise • • • • • Home screen Category screen Recipe detail screen Shopping list screen Check out screen • • • • Search function Social media integration Filter recipes by type Ratings reviews function
    • 26. The 6-8-5 sketch exercise • Sketch 6 to 8 interface ideas in 5 minutes • Keep sketches rough! • Goal is to collaborate effectively across design and development teams http://www.slideshare.net/runger/big-d-sketchingkey
    • 27. Fold A4 paper 3 times
    • 28. NOTE: If you can draw these you can sketch any interface!
    • 29. Critiquing designs with your team • Present your ideas with your team • Talk about which ideas best address the objectives • Identify features that work the best
    • 30. Round 2 • 4 more interface sketches in 5 minutes • Slightly more refined than before • Review sketches with your team
    • 31. Creating Interactive Prototypes
    • 32. Online Tools Fluid UI HotGloo Balsamiq Proto.io UX Pin MockFlow InvisionApp Solidify Proty Easel And many more…
    • 33. Creating interactive prototypes using Fluid UI Fluidui.com
    • 34. User testing
    • 35. User Testing Very easy read Fantastic guide on Guerrilla usability Testing Provides materials that you could test with tomorrow
    • 36. Steve Krug Test Script Usability test script available for download: http://www.sensible.co m/downloads/testscript.doc
    • 37. 1. Test early “Always test earlier than you think you should” Steer your thinking from real world feedback
    • 38. 2. Test often “One morning per month” Keep testing quick, easy and manageable
    • 39. 3. Small test groups “3 test candidates is a good start” 80% of issues will be revealed in 3 tests or more. 5 people is ideal
    • 40. 4. Make small fixes “When fixing an issue do the least you can do” Small tweaks can often make the most impact
    • 41. Silverback App www.silverbackapp.com
    • 42. Magitest App Mobile user testing (currently iOS only) www.magitest.com
    • 43. Further Reading Online Resources: uxapprentice.com uxdesign.smashingmagazine.com boxesandarrows.com uxmatters.com Recommended Reading: Lean UX by Jeff Gothelf and Josh Seiden Simple and Usable by Giles Colborne Any book by Steve Krug
    • 44. Thank you! Simon Phillips @uxfellow