Prototyping is the panaceaLess talking. Less documentation. More results.

Michael Meikson User Experience Consultant

mike@meikson.com

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

Thank you.

Michael Meikson User Experience Consultant

mike@meikson.com