Heretical Ideas – Stop Using Wireframes

Nov
26
2009

Should we continue with Wireframing at all

Over the years I have been trying to implement UX design tools and techniques into my day-to-day production cycle.   This would be very simple if all my projects where large ones with moderate size teams.   However business reality is that this is not often the case.  The projects I tend to work on, as an independent user experience consultant, can be with a large team for a limited amount of time, to 8-24 weeks as the sole user experience practitioner on a project.

More often it is the case that the projects are just micro projects for small business.  These projects can be anything from 2-3 weeks in length.

The budget on these projects is often very limited.    Often people look at these projects as too small to use any user experience techniques on.  However I have found  you can approach using user experience based tools and techniques two ways for these smaller projects:

  1. Do it all anyway, as you would for a larger project, but do it under the radar at your own cost.   Just because you want to remain pure to the “cause”
  2. Look at a way to reduce or streamline the user experience design tools and techniques so that they can be used on these smaller projects.

I tend to lean towards the latter.  The idea of working endless hours for an ideal when I could be spending the time with my family and friends is just plain silly.  Besides it devalues our industry and the worth of my fellow user experience designers.

Reviewing Wireframes for Small Projects

Now I’ve learned over the years to question the need for everything in my production cycle, there are no sacred cows here.  No special tools or procedures that must be done  – “because it is the way”, because some industry icon told me so.    Guess it’s my scientific training, the old requirement of having some evidence to support an idea or hypothesis.

With the smaller projects wireframes can be useful I have found, but only in a limited sense.  So maybe we should review if we need them at all.

It’s a similar story – you have completed all your user research to the highest level you can within budgetary constraints.    After all this you end up with basically two lists a “must have” and a “wish list” of information and functional elements for the site’s web design.

At this point we can go ahead and start to explore the concepts and ideas for the design.   What we need is a quick and iterative process to design, test and refine a number of design alternatives very cheaply and quickly.   Remember we have a very limited budget in terms of time and resources.

With this considered what are the pluses and minuses for using wireframes within a small project:

Advantages

  1. With simple thumbnail sketches (mini wireframes) using paper and pencil one can very quickly iterate design ideas.
  2. By using automated tools and libraries such as Omni Graffle or Balsamiq one can produce final idea wireframes with within minutes and shoot these off to a client for approval.
  3. Wireframes can also give a base direction for the design, without the final high-fidelity designs having to be being produced.

Disadvantages

  1. Clients often don’t understand wireframes.  They just can’t imagine the design over the top of the fine lines and greyed areas.   It’s like looking at traditional building architectural plans verses a 3D mockup rendering.  Lack of  visualisation skills tend to lead to the requirement for the final high-fidelity  mockups.   It’s at this point with hi-fi that they start to see the design that they understand what it is all about.
  2. Wireframes often cause project time creep as too much time is spent making wireframes perfect and documenting all the requirements on them.
  3. Smaller projects generally don’t have a major interactive component that is radically difference from the mainstream of existing web sites.
  4. The online applications and packages usually used within small business projects are usually open source off the shelf products that can be skinned to meet the client’s visual requirement.   Hence there is little alteration in the interactive component.

Given that we seem to be just wasting our time on reinventing the wheel each time with wireframes, especially for small business projects. In these projects one site can look the same as another at the wireframes level of the design.  One has to consider why keep doing them if they are taking so long to do..

So we should question why keep them at all for smaller projects.

Beyond the idea generation stage discussed above there really isn’t that much use for them.

Even on larger projects we are spending too much time making them perfect, making them into masterpieces, when a few quick pencil sketches is all that is required, be that on a white board or paper.  Documentation is simple – a photograph of the whiteboard or a scan of the piece of paper will suffice.

Alternative Methods – Prototyping

Okay, so if we get rid of wireframes from the process what can we use instead. We still need to represent the base structure or layout with the constrains of the high fidelity design.

This is where I elect to move to rapid prototyping.  I’m not going to detail the process of prototyping here.  But you can use anything for prototyping,  paper, pens , bottle tops. paper clips, post-its, just remember to keep it simple.    The primary goal is to generate and discount ideas  as fast as possible.

Remember your client may not be that familiar with the prototyping process so it’s a good idea to add some detail to your simple prototype before you show it to them.  Flesh them out a little.

If you are using CSS/HTML perchance to prototype, you will have an added advantage.   As the underlying code, even if you are using a framework, can often be reused later on in the development process.  In some ways what we are really doing here is just moving the developmental process forward with a design component.

We can also create a tighter synergy with the design and developmental team as well.  A side effect here is that you tend not to get an overload of crazy design ideas that blow out the developmental budget as the developers can instantly comment of the proposed prototype as well.

One could say that doing the prototypes first is logical as it follows to have the wireframes produced from the outcome of the prototype developmental process.  However that would mean fussing over detailed wireframes. Again in a small project we just don’t have the time.

Simply we move the process from the user research to prototyping to the final high fidelity design.  Eliminating the wireframes.

Tags: , , , , , , , ,

6 comments

  1. Great article. Developing flexible patterns are vital to rapid html prototyping and there are a growing set of great tools out there to make this accessible even to those who are still learning.

    I recommend the Compass, which makes it easy to build and reuse CSS design patters. A good example is the Fancy Buttons plugin. The screencast shows how Compass can be used to make design patterns reusable.

  2. Have you checked out Balsamiq (www.balsamiq.com) – sketch like prototypes so the client gets a good feel for the appearance without expectations that it's nearly finished because they can see real screens…

  3. Good article Gary. As I generally work on fairly large projects there’s a definite need to follow the process and produce exhaustive 800-page UI specs with detailed wireframes and interaction diagrams but I can see how that’s not really appropriate for small sub $5k projects.

    Would you consider this prototyping or wireframing?

    http://www.flickr.com/photos/purecaffeine/3621432701/

  4. @Nathanael Yeah that is more the preliminary five minutes of sketching you do before prototyping. More of a quick series of screenflows. Which you often need to do to ensure you have the right general direction in terms of screens or functionality in place before the prototyping starts.

  5. Good read Gary. We don’t wireframe. We either whiteboard, use paper or objects like erasers, iMac remotes and business cards to represent elements of a page. Then do a sketch pre HTML markup. Gives agility to the process and saves time.

    Nathaneal. I really feel for you dude.

  6. Don’t. Big budgets can be fun in ways other than quick, agile, flexible projects are :)

Comments are now closed, move along, nothing to see here.