Date post: | 27-Jun-2015 |
Category: |
Internet |
Upload: | michael-meikson |
View: | 570 times |
Download: | 0 times |
Prototyping is the panaceaLess talking. Less documentation. More results.
Michael Meikson User Experience Consultant
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
UX is all things to all people• It’s still a relatively new field
• Many disciplines are involved
• Preponderance of jargon, process and documentation
UX IS NOT UIUX IS NOT UIWhat does UX actually mean? The various UX roles that a person can fulfill are plentiful. Some are
whole jobs, some whole careers; others are tactical roles we all move in and out of.
What so many UX designers would like you to remember is that UX is not just UI design.
Field researchFace to face interviewingCreation of user testsGathering and organizing statisticsCreating personasProduct designFeature writingRequirement writingGraphic artsInteraction designInformation architectureUsabilityPrototypingInterface layoutInterface designVisual designTaxonomy creationTerminology creationCopywritingPresenting and speakingWorking tightly with programmersBrainstorm coordinationDesign culture evangelism
Field researchFace to face interviewingCreation of user testsGathering and organizing statisticsCreating personasProduct designFeature writingRequirement writingGraphic artsInteraction designInformation architectureUsabilityPrototypingInterface layoutInterface designVisual designTaxonomy creationTerminology creationCopywritingPresenting and speakingWorking tightly with programmersBrainstorm coordinationDesign 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.”
Get your print or web copy of this poster at www.uxisnotui.comhelloerik.com/ux-is-not-uiAn offshoot of @Erik_UX
elisabethhubert.com/2012/12/interaction-design-beyond-the-interface/Inspired by @lishubert
“Prototypes create this dramatic shift in the conversation - suddenly it becomes
tangible and the silence goes away.”
Jony Ive, Apple
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
UX IS NOT UIUX IS NOT UIWhat does UX actually mean? The various UX roles that a person can fulfill are plentiful. Some are
whole jobs, some whole careers; others are tactical roles we all move in and out of.
What so many UX designers would like you to remember is that UX is not just UI design.
Field researchFace to face interviewingCreation of user testsGathering and organizing statisticsCreating personasProduct designFeature writingRequirement writingGraphic artsInteraction designInformation architectureUsabilityPrototypingInterface layoutInterface designVisual designTaxonomy creationTerminology creationCopywritingPresenting and speakingWorking tightly with programmersBrainstorm coordinationDesign culture evangelism
Field researchFace to face interviewingCreation of user testsGathering and organizing statisticsCreating personasProduct designFeature writingRequirement writingGraphic artsInteraction designInformation architectureUsabilityPrototypingInterface layoutInterface designVisual designTaxonomy creationTerminology creationCopywritingPresenting and speakingWorking tightly with programmersBrainstorm coordinationDesign 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.”
Get your print or web copy of this poster at www.uxisnotui.comhelloerik.com/ux-is-not-uiAn offshoot of @Erik_UX
elisabethhubert.com/2012/12/interaction-design-beyond-the-interface/Inspired by @lishubert
Prototyping is model-makingThe closer it is to the finished product, the easier it is to get good feedback.
Closeness to finished is called “fidelity.”
Models are typically made from different material than the final product…
3D filament Styrofoam Wood
…but software prototypes are made with software
Choose your tools wiselyMost 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.
Classes of prototyping toolsPen & 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
Pen & paperEase 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
Keynote & PowerpointEase 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
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
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?
Swift, FramerEase 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
Assessment of prototyping toolsPen & 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 toolsAwesome 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.
Case studies[Several case studies omitted due to confidentiality]
DashportA concept for replacing the business phone
CASE STUDY
Tablet UI prototype• Touch-based VoIP & CRM
hybrid in custom hardware package
• Designed for Android tablets; leverages Google UI standards
CASE STUDY
View prototype
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