The Right Way to Wireframe: reflection on a hands-on workshop

Posted by on Feb 19, 2010 in User Experience | No Comments
The Right Way to Wireframe: reflection on a hands-on workshop

As with many books and classes that begin with the words “The Right Way to …”, the moral of this pre-conference workshop put on by four well-known UX thought leaders was that — you guessed it — there is no “right way” to wireframe.

But during this four-hour workshop, we as participants did witness how lots and lots of sketching, pitching and critiquing, and collaborative problem-solving can turn out several different approaches that all solved the same problem in different and creative ways.

Churning out ideas — lots of ideas

I took the workshop because I increasingly am playing the role of an IA and UX designer, and see it as an important part of the content strategy work I’m doing. But I’m first and foremost a word person, and naturally freeze up when called upon to visually organize and prioritize ideas — terrified I’m going to do it wrong and not quite confident in the process I use.

I learn by doing and seeing others do, so hands-on workshops are ideal for me, and this one was no different. The first thing we did was break into four different groups (some of which were large enough that they broke into subgroups) based on wireframing tool of preference. I use Omnigraffle for site maps and (I was embarrassed to admit, until I learned later in the session that many others were in the same boat) often turn to Adobe InDesign for wireframing simply because it’s comfortable. But I’ve been very interested in Axure for some time, and now that the software has a Mac beta version I wanted to learn more about how to use it — so I aligned myself with the Axure group. (Other participants grouped into groups using Omnigraffle, FireWorks, and Balsmiq. The point of all that was that there are many different ways to skin a cat, and they all work fine.)

We received basic requirements — personas for two different types of users, as well as basic background about the organization we were designing for, and some rough and somewhat vague must-haves, leaving things mostly open to interpretation. Then it was time to sketch.

Six to eight thumbnail sketches. Five minutes. No rules. GO. Of course I froze. I’m a verbal thinker, and would much rather have listed requirements and ideas first, before starting to draw. But the sketching was a fantastic exercise for two reasons:

  • It got us thinking in terms of blocking out areas, shapes, relationships, rather than thinking detail — because there was no time for detail. In retrospect, I think about the Graphic Design Cookbook and its basic building blocks inspiring designers to explore thousands of possibilities.
  • It got us used to the idea that sketching is the first thing UX designers do, and that they do it for a long time. They start with thumbnails and move on to more detailed sketches, but they may go through dozens, even hundreds, of pieces of paper before they are happy enough with a solution to put it into wireframing software. Thinking on paper helps designers stay loose and open to ideas, and makes evolution much more possible than it would be in the software.

When our workshop leaders showed their wireframing processes in videos at the end of the workshop, I was actually relived to see that one of them is a verbal thinker like me — he starts with writing out all his ideas and requirements in long, messy lists. But all four of them sketched and sketched for days before moving on. Sketching is essential.

Design becomes collective

Next, we engaged in a process similar to what burgeoning architects go through in architecture school: “design studio,” where everyone gets a chance to put his or her sketches up on the wall and pitch concepts. As a team we agreed on which pieces we like, and then we started sketching layouts based on the elements and concepts that worked for us.

At that point, we took our sketches to another group and presented to them, collecting their positive and critical feedback that we took back to our table to further iterate the design. Before our eyes we watched our wireframes become further refine. As somebody who tends to work alone, I always enjoy being reminded of how collaboration and feedback can continue to make a solution better and better.

We regrouped, drafted our final sketches, and then it was time to design the wireframes in Axure. While our group’s noble volunteer worked the software, the workshoppers passed out beers, which we all continued to sip as each group presented our electronic wireframes and talked through our solutions.

Having walked and talked through the process, I feel more comfortable wearing a wireframer’s shoes now. Especially inspiring were the videos documenting the unique process of each of the UXers running the workshop … confirming that there is, indeed, no single “right way” to wireframe, but that it all involves a lot of iteration, noodling, paper, sticky notes and time.

Russ Unger (@russu):

Will Evans (@semanticwill):

Todd Zaki Warfel (@zakiwarfel):
http://www.youtube.com/watch?v=gLenYBX3Iqk

Leave a Reply