Alex Bovee

I’ve read a lot of great posts recently on the future of wireframes and if the low-fidelity mockup should go the way of the dodo.  In one post, the writer advocates using the technology framework itself for creating a mockup – or in other words, producing web-ready HTML/Javascript/CSS (and corresponding graphics from Photoshop or Fireworks) to create a semi-close-to-real-world model for the end site.  Another post has the perspective that low fidelity wire-framing tools do not provide the modeling capabilities for the interactivity and dynamic nature of web 2.0 sites.  A central theme to both posts is that iteration takes time and that the low/medium fidelity wireframing process adds an unnecessary layer to the design process. 

In general, I agree on both fronts.  I can certainly understand how each of these arguments is valid given a set of circumstances.  However, I do think there are cases in which it still makes sense to produce low-fidelity wireframes.  I’ve outlined these below, but first, some definition:

The “Throw-Away” Mockup – Defined

I’m defining the throw away mockup as a wireframe which, for all intents and purposes, is completely unusable to produce anything that will go in production.  This includes mockups that are just rough drafts done on paper, perhaps designed in powerpoint, or in a rapid low or medium fidelity wireframing tool such as Balsamiq.  The outputs from these tools cannot be transformed directly into HTML, but rather are good for socialization, brainstorming, and rapid iteration.  Their final drafts must later be translated into a production format (images, CSS, & HTML) which can then be staged to a developer.

When would you use Low-Fidelity Design Tools in the Design Process?

There are several reasons why you might want to use low-fidelity design tools to rapidly prototype a design.  Here are a few:

• When the Design Concept is Still a Rough Idea: If you don’t have a good idea of how something should work, it’s probably not smart to dive right into Photoshop. At the early stages of an idea, you’re going to go through lots of iterations.  Redesigning user experience and optimizing interactions takes time, thought, and lots of rework.  Unless you’re a supreme whiz at photoshop and can burn through iterations quickly, you’re probably better off starting on paper and then migrating the design to something more industrial strength later.
• When the site is extremely sophisticated: I recently drafted up some Balsamiq designs for a Health 2.0 consumer web company.  If you’ve ever touched the healthcare space, you’ll know it’s very complicated.  There are lots of data elements and translating user flows into simple, intuitive interfaces requires thought and iteration.  Creating production ready mockups in this case would almost certainly be a waste of time.  Throwing out a fully drafted HTML page with CSS and Photoshop template to boot is costly (both to your time and sanity).  Using a low-fidelity mockup tool helps keep the cost of this rework down to a minimum.  Designing Interactive has a good, short write up on this same point.
• When feedback is critical, but comes after design: In a real-time collaborative environment, feedback is immediate.  Drafting up screen elements and flows on a whiteboard lends itself to instant iteration.  However, there are many times when design is done independently and feedback comes after the fact.  In this environment, collaborators may be much less likely to tear down your design if they believe you’ve put a lot of effort into creating it.  Paper, Powerpoint, and Balsamiq mockups look ugly… and that’s the point.  No one will be afraid to tell you your design stinks if it looks hand drawn.
• When product owners are not proficient with high fidelity design tools:  In most startups, the product is owned by the founders.  Sometimes founders are great with design tools, but that’s just not always the case.  Furthermore, becoming proficient with sophisticated graphics tools is not an easy task and probably isn’t a learning curve you want to tackle when you’re already biting off more than you can chew.  In this case, it’s better to work with low-fi mockup tools to create good enough mockups that you can then collaborate on with designers.

You may notice that three of these four reasons could also be put succinctly: “when you believe you’ll have lots of iterations” (the 4th reason is skill centric).  Before jumping in to create high fidelity wireframes, use this litmus test to think about how much iteration it might take to get the design right and select the right tool accordingly.