Once a teacher told me that the best way to understand something was to explain it to someone that has no idea about the subject.
If one can explain it, it is because one understands.

So I took it upon myself to explain the wonders of Sketching, Wireframing and Prototyping (SWP) to my fellow friends. Some of them are involved in the graphic and web design world, but they don’t use/know much about the SWP process.

The two questions that I got asked the most often were:
- Isn’t a wireframe a kind of prototype?
- Why spend time doing a high definition prototype when the alpha version can be developed?

So this took me a little off my plans and I decided to start this article answering those 2 questions, and then continue with the usual: Lots of info and resources.

Isn’t a wireframe a kind of prototype?

Short answer: NO
Not-so long answer:
Wireframes are all about placing and positioning of the elements of the solution. They don’t contain fonts or color schemes.
There is a thin line between an interactive wireframe and a prototype. Both will do well when testing how users will work with the solution, but the focus is different. An interactive wireframe will not have all the possibilities that a high definition prototype could have. The prototype is a demonstrable system.(Roger Attrill of ThinkUI, quoted by handcraft). It is not only how things look but also how they work and how the user engages with the solution.
To quote again Roger Attrill:
“Are you thinking more along the lines of ‘How does it look?‘ or ‘What information and features are presented?‘ (wireframe).
So In my opinion where it differs is the mindset with which you approach the schematics:
Or are you thinking ‘How do I interact with this?‘ or ‘How will it be used?‘ (prototype).”

Why spend time doing a high definition prototype when the beta version can be developed?
(Disclosure: This question came from a couple of friends that work as developers. They do have sketches but the go and work right away on beta versions).

Simple answer: Because it is cheap!
A little more complex answer: Because it is cheap and you can test and correct quickly and easily without loosing much time or money!
Also, prototypes that include the specifications are better to deliver to developers. Not only they will have the “how things look” but also “how things should work”. The more details the better.

Prototypes are the best way to avoid doing rework on the solution. This could be one of the most expensive problems one can encounter. Reworking on a solution once it has been deployed could be expensive and time consuming. By making one or multiple prototypes one can find what not to do. Here is a good article giving 6 reasons to prototype


The first step for a prototype is to have the idea clear. To get this one has to go through the sketching and wireframing stages.
Connecting multiple wireframes either low fidelity or high fidelity could be seen as a basic prototype.

The fellows at Userfocus have an excellent article about how to do prototypes faster. The main points are:

-Start prototyping in paper. avoid using a computer. With paper one can develop many ideas easier and faster than with a computer. (I will say this part is more related with the sketching and wireframing stages)
- Use one electronic tool, not several: Using multiple tools can create delays when trying to emulate what was done in one into another. Files will be easier to share and update. Less chaos. 
As a personal note, I like to do my sketching on paper or the iPad, then do low fidelity prototypes -almost wireframes- with Omnigraffle and then do more user friendly prototypes in HTML. Learning how to use Axure right now. I understand the reason why using only one tool, but sometimes some tools have strengths that are not find on others.
-Use a prototype that generates specifications. As mention before, the more specifications the easier will be for developers to do what the designers envision. Just showing how things look is not enough. Programs like Axure have this functionality: once the design is done, all the specifications can be annotated in the final delivery.
-Support Collaboration: Something that will allow multiple users to work on the same prototype and that can be easily shared online.

There are 2 common approaches to prototype: low fidelity vs high fidelity
A low fidelity will show the basics of the page. Imagine putting all those wireframes together, connecting them adding some interactivity. It will show how the website works and the user interaction. No fancy colours, design or fonts. No images. Really basic.
High fidelity is when the final (or close to it) design is set and it is put into the prototype. How the site works AND hot it will look. 

Prototyping and user testing

Chris Farnum from Boxes and Arrows wrote an article on what to consider when conducting a user test with prototypes. 
He mentions that one has to take into consideration 3 variables:

1- Degree of Fidelity
While some people tend to thing that the “sketchier the better” others prefer to have medium to high fidelity, resembling the final version.

For low fidelity hand drawn paper prototypes will do. Creating a complete low fidelity paper environment, using fake computers, peripherals and other objects to make the user believe in the prototype. The user will have an easier time suggesting changes (Datz-Kauffold and Henry, quote on the article)

High fidelity: a lot of the solution is already there in the prototype, but is not complete. It takes more time to develop, so it is good to plan what would be tested in advance, so the required parts of the solution are render on the prototype.

Medium fidelity: This could be wireframes that are put together and that are set up to show some sort of interaction. A middle point between the sketches and the high fidelity prototypes.

2- Interactivity
How much the prototype reacts to user input with feedback?
There are the static and automated prototypes.
The former does not provide any feedback. They are good to get the interpretation of the prototype from the user and good to validate design. The later changes with the user make interacts with it. Elements are clickable and forms can be filled out. Usually they are HTML prototypes or some other application that allows interactive elements.

A way to re create interactivity with static prototypes is to ask the user to pretend that they are working with a real solution. The user will interact with the prototype and the tester will act as the computer providing the right response to the user actions.

3- The medium
Is the prototype on paper or the computer screen?
Fidelity and interactivity are independent of the medium. Yes, high fidelity interactive prototypes will be on a computer while low fidelity could be hand drawn sketches. But, as Chris Farnum mentions, there are cases such as low fidelity powerpoint prototypes with only lines and text; static high fidelity photoshop mockups on screen or printed.

All these variables can be mixed depending on the goal of the test.

This is all for this week, but this time I would like to have some open questions for those of you working on UX design. Reply here on the comments section or by email at lucaswxyz (a) mac . com.

-What are the benefits, as a consultant, to test on prototypes?
-What are the drawbacks?
-What would you recommend to a designer during the prototype stage?
-What should a UX consultant take into consideration when testing a prototype?

Leave a Reply

Your email address will not be published. Required fields are marked *

− two = 6

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>