The case for higher fidelity wireframing

5
minute read

Many of us first became familiar with the term “paper prototyping” in the late 90s, and if you’re like me, it was a pretty easy sell. Usability as a discipline was in its infancy, and concepts like planning and testing made a whole lot of sense. It still blows my mind that in 1997 I was designing websites with no blueprint to speak of. No one was talking about user-centric design. Best practices and the industry experts we rely on now just didn’t exist. And as a result, designers designed for themselves, hoping it was at least partially representative of the end user.

Just by the fact alone that prototyping was done on actual paper made it somehow sound more organic and intellectual. And after the first few experiences conducting such tests, it was clear we were on to something. The case for a low tech approach like paper prototyping was that it could be done quickly, cheaply, and before anything happened on screen. This brought to mind images of architects sketching their concepts on rudimentary paper, giving the author a sense that their work carried more value. Really though, what we gained here was the time spent validating the approach with actual users. The paper part of it actually felt somewhat gimmicky. (and it seems we’ve now come full circle) Sigh.

Information and interaction design has come a long way since then, and UX designers have a seemingly bottomless toolkit of applications, libraries, and services to develop prototypes. In my career, wireframing has moved from Quark Xpress to Photoshop to Visio to ultra-low-tech HTML layouts to fully interactive Axure prototypes. Either efficiency or fidelity motivated each step along the way. And here’s what gets me:

On the one hand, we find ourselves making a case for the simplistic, black and white wireframes. The boring vanilla ones. We tell ourselves that they keep the user from being distracted by the shiny objects a visual design carries with it, and that they’re infinitely easier - and cheaper - to produce.

At the same time though, it’s just as easy to make a very compelling case for ultra-high fidelity wireframes. The chocolate sprinkle and whipped cream-laden ones where we give significant consideration to details like typography, colour, motion and full-blown interactivity. Making a case for this approach seems just as obvious - higher fidelity represents a truer-to-final experience, presumably giving us much more accurate results through testing.

Acknowledging that higher fidelity equals higher cost, it’s easy to see why so much of our usability testing still relies on the vanilla versions. After years of going back and forth, however, I’m confident that any savings resulting from overly simplistic wireframes are actually offset by the risk of not using a more detailed version. In other words, while we may spend less time preparing the vanilla prototypes, chances are we will spend more time later in the project - or worse, find ourselves with an inferior product - than had we invested adequately up front.

For a UX designer with even the slightest visual design competency, there are numerous tools available today to create near-final, highly polished prototypes. In cases where I’ve followed this approach, the visual design phase becomes virtually unnecessary in the best cases or mindlessly simple in the worst.

And while gathering user feedback is crucial, the other huge benefit higher fidelity prototyping provides is for our clients to gain a better sense of the end product. It leaves so little open to interpretation that the rewards are reaped in every subsequent phase of the project. From visual design to development, to QA and even project management.

If you’re still mocking up your wireframes in Visio or PowerPoint, first off, my apologies. Next, take some time to explore the many UX tools we now have available. Below are a few of my go-to tools and services:

Axure

The most complete and full-featured prototyping tool out there. Tied with Photoshop as my most used app over the past couple years. Paired with Axure’s cloud prototype hosting service AxShare to test your designs, it’s a combo that’s relatively hard to beat. Client based, PC and Mac. By far the most expensive, but also the most powerful.

UxPin

Entirely cloud-based prototyping tool with features similar to Axure. Extremely easy to use, supports responsive designs, comes with an impressive list of built-in behaviours. Affordable and simple.

Balsamiq

A middle ground between Axure and UxPin, Balsamiq adds more interactions and control over your prototypes without the steep price tag. Windows, Mac, Linux clients or cloud-based with myBalsamiq. To be honest I haven’t tried Balsamiq in about a year and a half so I can’t speak to its newer features. But a $79/seat, it’s a great alternative to Axure.

InVision

InVision allows for the creation of ultra-high fidelity prototypes from your Jpegs, PSDs or other artwork formats. Interactions are fairly limited, but this is the tool to use to present a functional version of your interface designs quickly. Best of all, it’s entirely free.

While there may be a slight learning curve and up-front investment to evolve your current process, I’m confident you’ll see your return many times over.

About the author

Steve Coppola is a user experience & digital marketing professional - and founder of Input UX. With close to 30 years of agency experience, he has worked with many of the world's most respected brands in various capacities including UI/UX design, product design, customer research, usability testing, and front end development.
Find out more about Input UX

Find out how we can help

We provide a wide range of user experience and digital marketing services, accustomed to working with our clients through large scale, end-to-end solutions or quick, single-service engagements.

Explore our servicesGet in touch with us

More insights and commentary

VIEW ALL BLOG POSTS