Browser prototyping for UX

I'm a firm believer in the value of quick iteration. Doing so enables you to find problems with your designs often and early. One of the best ways to iterate faster is prototyping in the browser, where you jump straight from rough sketches or even just a concept into the browser.

Wireframes are the devil

To understand why I feel like this, you need to know where we came from: wireframes. They're boring, annotated functional representations of a concept on paper (or in a PDF, if you're lucky), that do not succeed at getting the message across, simply because you cannot interact with them. They are static assets which just don't cut it in a world of interactive devices. Because of that, the user experience of wireframes is actually quite horrible, ironically. They're often heavy, technical documents.

The purpose of wireframes is to show the structure and behavior of the concept. However, because you can never express these things in a static assets, they are very open to interpretation. At the same time they're the sort of thing you'd throw at your developer and tell him to figure it out. It's not a tool that encourages conversation any other than a hand-off.

In addition to the above, wireframes are a lot of work, that might be for nothing if assumptions the UX designer made in them turn out to be false later. It's time better spent iterating on the design by multiple people.

Prototyping is king

So there are a couple of reasons I firmly believe in the worth of prototyping in any digital project. Prototypes can be built either in any prototyping tool or the browser (and necessary paraphernalia). I prefer the browser, because that's just my thing. Prototyping allows teams to better communicate design, because they're interactive, they can be tested in multiple devices, at whichever size you like. Stakeholders, users and collegeaus can click around and feel how it works, instead of having to use their imagination to fill in the gaps.

Prototypes are also far more accessible compared to wireframes. They're a great way to test flow. Everyone understands what a prototype is, and that it isn't the finalized product as long as you take a little time to explain. It is a premature version of (a part of) the product which is being shaped by the feedback loop so easily constructed using it.

Prototypes do not require a whole lot of documentation to get the point across. They just work, right there, under someone's fingers. As such, they are also perfect for easily user-testing.

Because prototypes require far less documentation, they also save valuable hours. By using the feedback loop and collective knowledge while prototyping, you can arrive at a better solution in less time, with more confidence it actually is the right solution.

Do keep in mind that prototyping should always be a collabarative activity, as to integrate your team better, and be able to align on design in an interactive way.

In short, I believe prototyping can be a great solution for the pitfalls and individuality of wireframes. They should have a part in every modern agile design process.