Prototyping is the panacea
6 likes•1,043 views
Michael Meikson discusses the importance of prototyping in user experience (UX) design, emphasizing that it facilitates faster consensus and reduces reliance on cumbersome documentation. He categorizes various prototyping tools, highlighting Axure as the optimal choice for complex interactions, while also noting simpler methods like pen and paper for early ideation. The document also touches on case studies showcasing hardware design processes that parallel software prototyping methods.
![Case studies
[Several case studies omitted due to confidentiality]](https://image.slidesharecdn.com/prototypingdeck-abridged-141116230930-conversion-gate01/85/Prototyping-is-the-panacea-17-320.jpg)
Prototyping is the panacea
- 1. Prototyping is the panacea Less talking. Less documentation. More results. Michael Meikson User Experience Consultant [email protected]
- 2. About me • UX Consultant in NYC • Clients are startups, enterprises and agencies • Broad range of industry expertise • Started career as a visual designer • UX teacher and speaker Launch portfolio site View LinkedIn Profile
- 3. UX is all things to all people • It’s still a relatively new field • Many disciplines are involved • Preponderance of jargon, process and documentation What so many UX designers would like you to remember is that UX is not just UI design. Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism HOW UX WANTS TO BE SEEN HOW UX IS TYPICALLY SEEN “UX is the intangible design of a strategy that brings us to a solution.”
- 4. “Prototypes create this dramatic shift in the conversation - suddenly it becomes tangible and the silence goes away.” Jony Ive, Apple
- 5. Why I focus on prototyping • User research is (mostly) useless • Documentation is be overwhelming and inefficient • Prototypes get you to consensus faster than any other method What so many UX designers would like you to remember is that UX is not just UI design. Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism HOW UX WANTS TO BE SEEN HOW UX IS TYPICALLY SEEN “UX is the intangible design of a strategy that brings us to a solution.”
- 6. Prototyping is model-making The closer it is to the finished product, the easier it is to get good feedback. Closeness to finished is called “fidelity.”
- 7. Models are typically made from different material than the final product… 3D filament Styrofoam Wood
- 8. …but software prototypes are made with software
- 9. Choose your tools wisely Most design tools work in basically the same way. Not so for prototyping tools — they vary widely in functionality and approach. Want the short version? Axure is the best.
- 10. Classes of prototyping tools Pen & Paper Pen & Paper Everyone Slideshows with links Keynote & Powerpoint Non-design professionals Hotspots on top of your designs Invision, Flinto, etc. Visual designers Component-based prototyping Axure, Justinmind, UXpin, Proto.io UX designers Light developer tools Swift, Framer Developers
- 11. Pen & paper Ease of learning Visual Fidelity Functional Fidelity Portability across devices Speed of workflow • Everyone can draw basic boxes and arrows • Best used during the earliest stages of the process to quickly describe high-level concepts • Can be useful in workshops and group contexts due to its immediacy
- 12. Keynote & Powerpoint Ease of learning Visual Fidelity Functional Fidelity Portability across devices Speed of workflow • Commonly used office tools can be adapted to create pretty good prototypes • Keynote in particular has excellent animation and transitions • Keynotopia is a great resource • Learning interactions is more advanced, and even when used properly doesn’t allow for much complexity
- 13. Invision, Flinto, etc. Ease of learning Visual Fidelity Functional Fidelity Portability across devices Speed of workflow (factoring in external design) • Design your screens in Photoshop, Sketch or whatever, then upload an create clickable hotspots • Easy learning curve for designers • Designs look as good as possible • No ability to define interactions beyond simple transitions from one screen to another
- 14. Axure, UXpin, etc. Ease of learning Visual Fidelity Functional Fidelity Portability across devices Speed of workflow • Component-based design tools that enable non-coders to define complex interactions for each page element • The result is rendered in HTML and viewable on any browser or device • Not great for visual design • Avoid the web-based tools (UXpin, Proto.io). The workflow is just too heavy. Would you use a web- based Photoshop?
- 15. Swift, Framer Ease of learning Visual Fidelity (varies) Functional Fidelity Portability across devices Speed of workflow • These are streamlined, condensed development environments (Swift is iOS, Framer is Javascript) • Requires knowledge of code; no different from actual front-end development • Steep learning curve and slower workflow make this impractical for rapid prototyping by non- developers
- 16. Assessment of prototyping tools Pen & Paper Great for starting off and brainstorming Slideshows with links A useful, easy way for business users to communicate basic ideas to designers Hotspots on top of your designs Easy for visual designers to work with, but it’s really just a glorified slideshow. Plus, you’re working across two apps. Component-based prototyping Axure is the best all-around prototyping solution. Avoid web-based tools as they are janky and unreliable. Light developer tools Awesome if you can do it, but it’s rare to have decent coding chops and design skills to boot. Also, you’re working in two apps.
- 17. Case studies [Several case studies omitted due to confidentiality]
- 18. Dashport A concept for replacing the business phone CASE STUDY
- 19. Tablet UI prototype • Touch-based VoIP & CRM hybrid in custom hardware package • Designed for Android tablets; leverages Google UI standards CASE STUDY View prototype
- 20. Hardware is fun, too! • This has nothing to do with software prototyping, but it shows the similarities of design processes • This was done on a 3D printer over months of iteration • Tension is provided using a torque hinge, same mechanism that props up your laptop display CASE STUDY
- 21. Thank you. Michael Meikson User Experience Consultant [email protected]