The Importance of Prototyping for Mobile User Experience
•
0 likes•626 views
This document discusses different approaches to prototyping including storyboards, paper prototypes, printouts, swipeable photo galleries, presentations, and native code. It emphasizes that prototyping allows involving users to refine usability and communicate value to stakeholders. Different types of prototypes are suited to different purposes like brainstorming, proof of concept, or user testing. Rapid prototyping approaches include creating mock-ups, getting user feedback, and iterating. Prototyping is especially important for mobile due to screen flows and animations across devices. Workshops, hackathons, and hack days are approaches that can bring together teams to quickly create prototypes.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to The Importance of Prototyping for Mobile User Experience
Similar to The Importance of Prototyping for Mobile User Experience (20)
More from Christian Glover Wilson
Recently uploaded
Recently uploaded (20)
The Importance of Prototyping for Mobile User Experience
- 1. Prototyping Christian Glover Wilson The Experience is Everything March 2014
- 4. Elaboration of Ideas Reduction of Ideas DESIGN PROCESS Laseau’s Funnel Sketching vs Prototyping
- 5. Prototyping “Incremental iterative refinement” Design vs Prototyping Design “Branching Exploration” vs Sketching User Experiences Bill Buxton
- 6. Prototyping “Getting the design right” Design “Getting the right design” vs Design vs Prototyping
- 7. Prototyping
- 8. What is a prototype? For end-user testing and for communicating functionality to stakeholders Not fully functioning entity Designed quickly, tested and iterated Tells us something
- 9. What is rapid prototyping? Prototyping Create mock-ups, factoring in prior feedback, user experience standards and best practices Reviewing Users experience the prototype and evaluate whether it meets their needs and expectations Refining Integrate feedback by identifying areas that need to be tuned iteration
- 10. Types of prototype? Native Code Paper Prototypes HTML Prototype Printouts Storyboards Swipeable Gallery Tapable Prototype Presentation Time Re-use Cost
- 11. So much to choose from….! What is a prototype?
- 12. Storyboards Good for: • Getting started • User flows • Product-market fit Pros: • Fast • Cheap • Easy • Disposable Cons: • None
- 13. Paper Prototypes Good for: • Brainstorming UIs • Proofs of Concept • Quick user feedback Pros: • Fast • Cheap • Easy • Disposable Cons: • Not detailed • Can’t share remotely • Difficult to update
- 14. Printouts (Wireframes or Mockups) Good for: • UI consistency • Screen flow • User feedback Pros: • Detailed • Fast to iterate • Cheaper than code Cons: • Slower than sketching
- 15. Swipeable Photo Gallery Good for: • UI consistency • Screen flow • User feedback Pros: • Detailed • Faster than code • Cheaper than code • On-device experience Cons: • Miss UI and flow issues uncovered with printouts • Inherently linear
- 16. Keynote/PowerPoint clickable Prototype Good for: • UI consistency • Screen flow • User feedback • Simple animations Pros: • Very quick to create • Shareable • High fidelity • Some transitions and gestures Cons: • Very limited control of logic and flow
- 17. Tappable Prototype Good for: • UI consistency • Screen flow • User feedback • Proof of concept • Living spec Pros: • Fast • Cheap • Easy • Highly shareable Cons: • Slower than paper • Limited to capabilities of tool employed
- 18. HTML prototype Good for: • Troubleshooting scalability issues • Testing across devices • Complete control Pros: • See what the user sees • High level of control of experience Cons: • Slow • Requires code • Skill set
- 19. Native Code Prototype Good for: • Proof of concept • Troubleshooting • Screen flow • User feedback • Living spec Pros: • “Real life” user experience • Allow hardware interactions Cons: • Extra step • Not very rapid • Require deployment • Target specific devices
- 20. Prototyping Tools Tool Barrier to Entry Cost Time Devices Transitions Shareability Code High Free Highest All Yes Remote Axure Medium $289 Medium All Yes Remote InVision Medium $15/mo Low All Yes Remote Flinto Low $8/mo Lower iPhone Yes Remote POP App Lower Free Lower iPhone Android Yes In person Photo Album Lower Free Lower iOS Android Some In person Keynote Low Free Low iOS Android Some Remote Paper Lowest Free Lowest All Yes In person
- 21. Experiential vs Tactical prototyping Emphasis on context and human experience • Bodystorming • Storyboarding • Concept videos Emphasis on user interface and tasks • Sketching • Paper prototypes • On device prototypes
- 22. So why Prototype? Involve users in refining the usability Clearly communicate and demonstrate value to secure funding and support Can utilize spare resource even for short bursts Interesting and motivating for participants
- 24. Why prototyping is so important for mobile Flow is everything (actions span multiple screens) Animations carry meaning More expensive to code Harder to correct issues after deployment
- 25. Approaches
- 26. Hackathons Usually public Typically one day to one week Focused on a technology, API or context Often several competing teams Usually start and end with presentations
- 27. Hack days Usually internal Typically one day to one week Scope may come from team or management Connect disparate parts of the company Find products and value you didn’t know you had
- 28. Workshops Mix of internal and external team Typically one or two days Starts with a clear brief Co-located team, ideally off-site Gamified incentives to participate Outspoken team with required skills or knowledge
- 29. Facilitation
- 30. What causes failure? No champion of the process Lack of understanding Insufficient content Team composition (experience or attitude) Funding Corporate culture (release control, resource bandwidth) Ambiguous scope Unmanageable expectations
- 31. What leads to success? Realistic expectations Skilled coordinator Right tools and equipment A multi-discipline team Version control Efficient reuse Documentation
- 32. Setting scope - questions to ask • What needs to be prototyped? • How extensive is the prototype? • What fidelity is required?
- 33. Some things to test • Flow through the experience • Human Interface principles • Icons language • Custom gestures or animations • Non-standard UI controls • Consistency of designs • Device support … within reason
- 34. Internal PR points Fantastic Return on Investment Demonstrates functionality Utilizes resources efficiently Builds consensus
- 35. In conclusion, consider prototyping to …improve your design decision-making …communicate an idea …gather user feedback …explore the new territory …fine-tune an idea …kick off a project
- 36. Christian Glover Wilson, VP, Technology & Strategy christian.gloverwilson@tigerspike.com | +1 917 310 5249