stevenclark.com.au

Matt Robin pointed out in the comments of Design Techniques 6: Wireframes that the process of wireframes sometimes comes under the the name prototyping. That’s very true and a few of the techniques I will mention here will involve the idea of prototypes – wireframes and HTML storyboards (there will be more). But first you may be wondering what prototyping is and what it really means so I’d better elaborate.

What is Prototyping

Prototyping is any technique where you create an artefact which represents at least a stage of the product you are working on. For example if I was building a house I might come to a meeting with a model of the house and we would discuss various features in the context of us all being aware this is not the actual product.

There are numerous levels of prototypes which you need to be aware of including low and high fidelity prototypes as well as horizontal and vertical prototypes. That does sound a bit confusing but stick with me.

Low Fidelity and High Fidelity Prototypes

Low fidelity to high fidelity prototypes are a sliding scale. Low fidelity prototypes are made of paper or something very easily torn up and thrown into the bin or scribbled back and repurposed. My version of a wireframe is generally a low fidelity prototype – easy and very fast to manufacture with little of myself invested. At the low fidelity end its about communicating ideas. Whereas high fidelity prototypes will be in the form of something like an interactive web site which may include some functionality – hyperlinks work or the order system processes a sample customer. High fidelity prototypes take longer to develop and have a lot more of yourself invested in them – they are much harder to change (in both time and money). In the middle are varying degrees of prototype which sit somewhere between the extremes.

Horizontal and Vertical Prototypes

Horizontal prototypes and vertical prototypes are concerned with the scope of the prototype. A horizontal prototype will represent the whole system in a cursory way – perhaps a low fidelity paper prototype – whereas a vertical prototype will offer a small high fidelity and highly functional part of the system. There is a tradeoff between the two in that you only have a certain time to represent the object with a prototype – if you just make your site for example it wouldn’t be a prototype simply because you forgot several of the links.

Prototypes of Other Flavours

This article won’t go into the finer details but you also have a technique called rapid prototyping which I will cover later and iterative prototyping which might involve extending your functionality in the current high fidelity prototype to include the forum or a gallery. Things grow iteratively towards completion.

The Beauty of Prototypes

The good part about prototypes is you can make them in a vast number of flavours from throwaway paper ones (low fidelity horizontal) to those made in varying types of software and beyond to the fully working sub-part of the website you are developing. Prototypes give you the ability to take your work at its current standing to your client with confidence they can see what you are providing, they allow you to work through ideas, development strategies and a whole range of otherwise more expensive landmines.

The Pitfalls of Prototypes

The negative side is there too. Say you take your paper low fidelity prototype to your client and the whole board looks at you like you might just be a TOTAL idiot. For christ sake have you spent 2 weeks in your office being paid and then just scribble crap on a napkin before you left for the meeting? Are you George Costanza by any chance? They don’t necessarily get that you may have been working like a madman for them – its the only artefact you brought to the meeting. Similarly you could bring them a high fidelity prototype of their new shopping cart and they think you’re nearly finished and expect to stop paying you at the end of the fortnight! To the manager who doesn’t know squat about tech you just shot yourself in the foot both ways with those prototypes. He now thinks you’re nearly finished!

The Solution is in its Context

My advice to you is to use the prototype that is most relevant to the context of your project. Don’t give low fidelity napkin drawings the week before launch or you’ll cause heartburn. Similarly don’t provide high fidelity prototypes early or you may have a hell of a time trying to keep your project financed by the board. Prototypes are a great umbrella of techniques which every designer should be working with in some fashion so don’t be scared off by the perils of using them. Every good tool can be used or abused.

I’d like to thank Matt for pointing out the link between wireframes and prototypes which spurred me into prematurely writing this article on a Saturday night, too. I probably would have covered several more variants and split this into three posts but the time seemed ripe to do the writing.

This entry was posted on Saturday, August 11th, 2007 at 12:58 pm and is filed under design, usability. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.