The Beginner’s Guide to UX Prototyping

Author: Ezequiel Bruni (Webdesigner Depot) · Published: April 4, 2016 · URL: http://www.webdesignerdepot.com/2016/04/the-beginners-guide-to-ux-prototyping/ (now https://webdesignerdepot.com/the-beginners-guide-to-ux-prototyping/)

One-line: A 2016 primer on why static wireframes aren’t prototypes, the four fidelities of prototype and when to use each, and a snapshot of the prototyping-app market just as Adobe entered it.

Summary

Bruni frames the piece around a moment: Adobe had just released Experience Design (XD) in preview, combining a screen-design app with a prototyping app, and he expected a wave of designers who had never prototyped to start. So the guide is for beginners — principles first, then further reading, then a long list of tools.

What a prototype is for. A prototype is like an old software demo disk, only simpler. Its purpose “is not so much to get prospective customers to buy a product, as to help you make a better one” — to check the concept works as intended, and to show clients or investors how it’s supposed to work. Wireframes and static mockups usually don’t qualify, because they are static and can’t convey functionality; that gap breeds misconceptions in clients and developers alike. What makes something a prototype “is not interactivity itself, but the conveyance of information about a product’s intended functionality.” You need one whenever you need to show how something works — even for a simple brochure site, where clients have asked him whether clicking “About Us” goes to another page. Prototypes are also the right object for early user testing, before big changes get expensive.

Four kinds, by stage of the project.

1. Conceptual — form doesn’t matter at all, only interactions and processes: a flow chart, post-it notes, a slide deck, or a video of yourself “flailing your arms wildly.” Used before the project has a name.
2. Low-fi — layout and screen size enter; often interchangeable with wireframes, often on paper, made fast and discarded faster. “So don’t get attached.”
3. Medium-fi — for when low-fi won’t get the point across but the style guide and assets aren’t done. Often built in prototyping apps or in HTML/CSS on a framework; “Bootstrap and Foundation are probably two of the biggest prototyping tools out there right now.” Useful for literal-minded clients who can’t look past a sketchy header.
4. High-fi — final mockups made interactive for sign-off, either as static HTML/CSS or by importing images or PSDs into an app that fakes the interactions.

The choice depends on the designer, the client, the project and the stage — and on how well the client reads abstract visuals.

Methods. Video and presentation prototypes sell an idea to investors with a commercial formula (introduce a problem, show the product solving it, optional dancing mascot). Wireframes are best when drawn and thrown away. Paper prototypes are cut-out interface elements that can be rearranged, and they feel more real because a client can touch them — “Half of UX design is about re-creating the feeling of physical interaction with a digital interface.” App-built prototypes bring that tactile feel back on a device. Code prototypes suit browser-first designers and interaction-heavy products, can be reused in the final build, and are fastest on the framework the product will ship on — but are too slow for early stages.

The 2016 tool market. The closing list is a time capsule: Adobe XD (Mac-only preview), presentation software, InVision (which had just bought Silver Flows to connect Sketch), Justinmind, Marvel, Axure ($289 per license, aimed at enterprises), HotGloo, Proto.io, Zurb’s Solidify, POP (photograph paper sketches into a clickable prototype), Flairbuilder, Flinto and UXPin. His advice on choosing: “there are lots of great apps to choose from” is both the good news and the bad news.

Full text

Archived privately against link rot: ../attachments/the-beginners-guide-to-ux-prototyping/the-beginners-guide-to-ux-prototyping.md

Connections

• User-Centered Design — prototyping is how the iterate-on-approximations loop gets run in practice; Bruni’s case for testing early prototypes with users is the same instinct.
• Product Design — the working craft of deciding what a product does and how it feels before it’s built.
• Sketching in Mockups — the same low-fidelity argument from the tool side: Balsamiq’s designer on keeping early sketches rough so nobody gets attached.
• InVision — one of the “big names” in Bruni’s 2016 tool list, noted for version control and real-time collaboration and feedback.