Prototyping is the new UX

The traditional UX process generates a tremendous amount of upfront documentation: strategy, research findings, competitive analyses, personas, sitemaps. And then come pages and pages of static wireframes with annotations alongside.  Meanwhile, everyone is anxiously awaiting a deliverable that actually resembles the finished product so they can provide some meaningful feedback.

That deliverable is a prototype: a lifelike model of the final product that runs on the target browser or device. UI elements actually work; animations and transitions are realistic. A prototype feels like the final product, or at least a decent approximation of it. This is a big change from reviewing hand-drawn sketches or a PDF containing pages of wireframes and specs.

“Prototypes create this dramatic shift in the conversation - suddenly it becomes tangible and the silence goes away.”

Jony Ive, Apple

Prototypes remove ambiguity. Your audience doesn’t have to work so hard to imagine what you’re talking about, and is empowered to provide much clearer and more actionable feedback.

Prototyping is the mark of a true UX practitioner. Anyone can talk theory and best practices, sketch pictures and diagrams, or present slideshows in a meeting. A prototype is the only UX artifact that can go from concept to review to testing to development. It’s the thing that everyone sees and ultimately determines what is built.

Prototype early, prototype often

I’ve heard of UX practitioners or companies who take the time to go through the entire traditional UX process, and only then create a prototype from the resulting static wireframes.

To me, this seems astonishingly inefficient. At that point most of the key decisions have already been made, so the prototype is simply an animated version of all the documentation that has come before.

I advocate replacing the traditional UX process entirely: start prototyping from day one in low fidelity, and begin a sequence of rapid iteration that eventually ends in a high-fidelity model. Prototyping then becomes the core practice of UX design, and provides a context for all decisions. When a question or idea comes up, it’s no longer an abstraction — people can envision how it would affect the prototype-in-progress.

Tools define what’s possible

This dramatic change is driven (like most dramatic changes) by technology. A new wave of powerful prototyping tools is enabling UX practitioners to produce interactive models faster and more efficiently than ever.

Like all forms of model-making, prototypes depend upon the properties of the tools used to create them. A wooden model of a building communicates one kind of information; a 3D animated walkthrough of the same building communicates something else entirely.

Fortunately in software design, we have the luxury of modeling software with other software, so the results can be amazingly accurate. In fact, you’ll often have to explain to clients that this is not the final product; just a prototype. In my view, this is a very good problem to have.

Broadly speaking, prototyping tools fall into three categories.

1. Clickable slideshows

If you’ve already got some page layouts designed in Photoshop or your favorite design tool, you can quickly make them interactive using tools like Invision orFlinto.

Just upload your designs, link the pages together, and voila, you’ve got a simple clickable model. Because it’s so easy to get started, especially for non-technical designers, these tools have become incredibly popular.

The downside is that they are quite primitive from an interaction standpoint. You can’t simulate any in-page interactions: hover states, expanding menus, active droplists, accordions, etc. Everything is treated as a separate screen. It’s inefficient, especially considering that you must design in a desktop application and then export and transfer the images to a web application.

So I don’t consider InvisionFlinto or their competitors to be true prototyping tools at all, despite their successful efforts to market themselves as such. They are really just clickable slideshows in a browser. But they are a good way to present final visual designs.

2. Component-based prototypes

True prototyping tools, such as AxureUXpinProto.io, or Balsamiq, are all structured the same way. They provide libraries of interactive components, sometimes called widgets, that can be laid out, customized and “programmed” — without writing code.

The output is HTML (except for Balsamiq which is Flash-based), so it looks, feels and works like a real website. They can also be used to prototype native apps, though touch interactions are not nearly as smooth and elegant.

The learning curve for these tools is a bit steeper of course. But it’s significantly lower than writing front-end code. In my opinion, component-based prototyping tools offer the best balance of fidelity and speed, enabling designers to quickly produce and iterate life-like models without burning precious development hours.

My tool of choice is Axure, which is a desktop application that can publish directly to the web. I’ve tried UXpin andProto.io, which are web-based, and I find that working in a browser is clumsy and too dependent on reliable web access. Developers seem to love Balsamiq, I suspect, because it limits your design choices to their trademark “hand-drawn” style. But since it is Flash-based and cannot produce HTML, I don’t see it as a viable option.

3. Lightweight development environments

A new class of prototyping tools is emerging which truly blurs the line between development and design.

FramerHypePixate, and Google’s recently acquired Form are all powerful tools that can simulate interactions on native devices with unprecedented fidelity. Each of these tools has its own quirks, and varying levels of learning complexity.

Framer, for example, is actually a Javascript authoring environment so its output can run in a browser, web or mobile — however it requires hand-writing code.Hype is an HTML5 animation studio so its output is similarly JS-based.

Pixate is a web application enabling a user to create detailed animations from their designs and display the result in a companion native application. And Formis very nearly a development studio, similar to Facebook’s Origami project, where visual controls replace the need to write code by hand.

Designer Meng To has also produced an excellent e-book on prototyping in Apple’s Swift environment together with designs created in Sketch. This is truly impressive stuff; however it crosses the line from design into true development. That means a steeper learning curve, slower iteration cycles, and again the two-app workflow.

Generally speaking, the advantage of these more advanced tools is that they can produce truly lifelike animations and touch interactions. But they are highly focused on what happens within an individual screen and aren’t great for considering the overall application flow, the most critical high-level decision in UX.

Prototyping is the modern approach to UX

The traditional UX process assumes a totally blank canvas, and suggests a structured method for exploring every aspect of a solution. While this may seem like an open-minded and logical approach, I believe it is too academic, blind to the realities of today’s rapidly evolving technology landscape.

Today, there are many well-understood best practices, plenty of design templates and kits, and of course a universe of sites and apps tackling every imaginable business challenge — probably including whatever you are working on. It’s naive and inefficient to pretend you are starting from scratch.

Prototyping first enables the practitioner to make intelligent hypotheses, represent them as interactive models and iterate on them in real time wth stakeholders. It’s a paradigm shift in UX practice that I believe becoming the new standard in the field.