Test your ideas early and often with wireframes

If you notice in the title of this article there is a “what” and a “how”. What you should do during the design process is to test ideas early and often. A suggestion on how you can do it is by using wireframes. I will explain why and how in this article.

You often hear the term “design thinking” used nowadays when referring to developing products or services. An aspect of design thinking is to go broad with ideas, test them, narrow them, go broad again when necessary, test, and narrow. As a rule of thumb you should always avoid doing just one idea. Sometimes it’s tempting, but most often it’s a recipe for failure. Force yourself to stretch and develop multiple ideas. And here’s the thing - they should not be pretty. I have done many studies where I simply tested paper prototypes. They are great because they are FAST, but they do require you being in the room with the test participant, which is not always practical. Which brings us to wireframes.

What exactly is a wireframe? Well, it borrows the terminology (and essence) from sculpture. Before you start laying on clay, you build a supporting frame from wire to give it shape and stability; something for the clay to adhere to. Let's first take a quick detour and talk about the distinction between wireframe sketches (by which I mean hand-drawn) and 'electronic' wireframes which are built using a dedicated tool. Both are similar in the following way: they are meant to get ideas “out there” quickly, without much labor, with the intent of getting early feedback and narrowing the focus of the design. Sketches should be super-fast, and always done with a broad-tip marker like a sharpie so as to force yourself not to get too detailed. Wireframes designed with tools on the other hand, while also done quickly, should have a level of “fidelity” (detail) above a sketch. Keep in mind that the greater the fidelity the greater the chance that test participants will view it as a final design and may be less forthcoming with feedback. They will think you have invested a lot of time and will feel more self conscious with their comments as they may not want to hurt your feelings. For this reason I very much prefer tool-designed wireframes. 

A tool-designed wireframe is made up of grey boxes which block out areas of content. They are meant to be done quickly and discarded as necessary. They typically look something like this:




There is “visual design” insofar as layout decisions are being made, but there is no visual design in the sense of it being colorful and pretty. I do all my wireframe work in Axure, but you can use PowerPoint, Visio, inVision - there are many options all with varying levels of capability. Use what you are comfortable with. The point is that at this stage the iterations should be fast. If you wanted to usability test the homepage above, just imagine how many variations you could do in an hour - at least 4 (one every 15 minutes). You haven’t invested much time and at the end of your study you will probably be able to whittle them down to 1 or 2. And if you are pushing yourself with your design thinking, you might then make multiple variations of each of those and test them. 

Wireframes can be static or interactive. Almost all the wireframes I create are interactive. Maybe not initially, but pretty quickly I start adding basic click functionality. I do this because the web (or software) is an interactive medium and I want to portray that in my grey box wireframe. I will get better data as a result. For example, if one of my usability tasks is “how would you find information on webinars?” and I’m using an online tool like Passbrains, I need to see where the participant would click and I want to know if the page they click into meets their expectations. 

Another tip is to be sure to preface your study with a note about the prototype. You want to let your participants know that this is early stage and not prettied up so they don’t focus on the fact that there are no colors or pictures of kittens. The wording I use (feel free to copy) is:

NOTE: The prototype you will be using is early stage and does not have any color or much visual design. The important thing is to critique it in terms of how well it meets your needs and expectations. 

If you start simple and develop many ideas with grey box wireframes, test those with your target audience and iterate as necessary, you will greatly enhance your probability of success.





About the author:

Warren Croce
Principal UX Designer at Gazelle
Principal at Warren Croce Design
Boston, Massachusetts, USA

Warren gets great satisfaction from knowing that he can help people through design. He believes customer empathy and a desire to simplify are two of the most important traits that a designer must possess. Warren received his BFA in Communication Design from Pratt Institute in 1990 and has been designing professionally ever since. He spent over twelve years at Intuit, most recently as Principal Designer and Team Manager for a team of eleven designers, usability engineers, and writers. Warren joined Gazelle in 2014, where he is responsible for the user experience of both the Trade-In and Direct Store sites. Previously, he worked as an independent consultant for two years. Warren has recently begun offering free, in-person, UX-design mentoring to small groups. He is also a fine artist with a studio in Boston.

Write new comment

Comments (0)

No comments found!