prototyping for web and mobile workshop
DESCRIPTION
TRANSCRIPT
Hands on workshop: prototyping for web
and mobile
Simon Phillips @uxfellow
What we will be covering
1. Introduction to prototyping
2. What goes into a design?
3. Hands on Prototyping exercises
4. Testing and Validation
Why should you care?
Avoid this!
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
The Lean Startup model
The Lean UX approach
Think Make
Check
The Lean UX approach
Think Make
Check
User Research
Contextual Enquiry
Competitor analysis
Card sorting
Information Architecture
Personas
User Journeys
User flows
Rapid Sketching
Paper Prototyping
Wireframes
Landing page
User testing
Google Analytics
Heuristic Evaluation
Surveys
The UX Sweet Spot
User Needs
Business Needs
TheSweetSpot!
Tools of the trade
Sketching
Omnigraffle
Axure
What goes into a design?
Define BEFORE you Design
1. User Research
2. Content Strategy
3. Personas
4. Information Architecture
5. User Flows
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”
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
3. Proto PersonasStart 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
4. Information Architecture
“The art and science of structuring, organizing and labeling information to help people find and manage it.”
Louis Rosenfeld louisrosenfeld.com
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/stop-designing-pages-start-designing-flows/
Example User Flow
Design Studio
Recipe App Objectives:
• Customers placing orders for ingredients online
• Drive traffic by sharing of recipes via social media
• User generated recipes
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”
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
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
Fold A4 paper 3 times
NOTE: If you can draw these you can sketch any interface!
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
Round 2
• 4 more interface sketches in 5 minutes
• Slightly more refined than before
• Review sketches with your team
Creating Interactive Prototypes
Online Tools
Fluid UIBalsamiq
UX PinInvisionApp
Proty
HotGlooProto.io
MockFlowSolidify
Easel
And many more…
User testing
User TestingVery easy read
Fantastic guide on Guerrilla usability Testing
Provides materials that you could test with tomorrow
Steve Krug Test Script
Usability test script available for download:
http://www.sensible.com/downloads/test-script.doc
1. Test early
“Always test earlier than you think you should”
Steer your thinking from real world feedback
2. Test often
“One morning per month”
Keep testing quick, easy and manageable
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
4. Make small fixes
“When fixing an issue do the least you can do”
Small tweaks can often make the most impact
Further ReadingOnline 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
Thank you!
Simon Phillips @uxfellow