Although some argue the value of wireframing, most designers consider them a useful tool. But are you getting the full value from them?
I know not everybody agrees, but I find creating wireframes an invaluable part of my process. As I explain in my post the 7 wonders of wireframes, they can dramatically improve a project. You can debate about how refined wireframes should be, but I think they have an important place in our toolkit.
Nevertheless, the designer will lose a lot of the benefits if he or she produce wireframes in isolation. It's when you use them as a collaborative tool that they reach their full potential. They are a tool for sharing ideas and starting a discussion.
Who should be involved in wireframing?
As a minimum, wireframing needs to be carried out by the entire project team. That should include roles such as:
- UX specialist.
- Project Manager.
The last one is of particular importance. Many don't think of the client as a member of the project team, but you should see them in that way. Their involvement in wireframe creation is invaluable.
We also shouldn't stop with the project team. We should be bringing in a selection of stakeholders and even on occasions users to contribute. Only then do you begin to see the real benefits of wireframing.
Why you should be wireframing with others
Including the project team in wireframing is fairly obvious. After all, if the developer is involved in the wireframing process, technical issues will be spotted early and problems avoided further down the line. Equally having copywriters, designers, project managers and all the other team members mean that everybody is 'singing off the same hymn sheet' and each can bring their expertise to bear.
Including the client also makes a lot of sense. The client has a unique understanding of their sector, business and audience which other team members often cannot match. By including them in the creation of wireframing, we can make use of that knowledge.
Including the client also gives us a chance to educate and engage them in the process. If the client is involved in wireframing, they will be better informed about the design and feel they have contributed to its creation. That means they are much less likely to reject it.
You can also say the same for other stakeholders. Each has a unique contribution to make, but more importantly, by bringing them into the process, they feel listened to and engaged. They go away with a sense of ownership about the direction the design is taking and so will be more likely to support it later.
In short, by wireframing as a group, everybody goes away feeling consulted and confident in the direction you are taking together. Everybody has a clear picture of where the site is going.
That said, you cannot hope to wireframe everything in detail with so many people involved. That is why how you run a collaborative wireframing session is so important.
How to run a collaborative wireframing session
So how does this all work in practice? First, you need to be realistic. Running a full day workshop dedicated to wireframing will leave you exhausted, and your participants brain-dead. In my experience, three hours is more than enough in one sitting.
The advantage of keeping a session relatively short is you can keep the momentum going. The idea here isn't to hammer down every detail but rather to create a consensus that you can refine outside of the meeting.
You can maintain momentum by running several short exercises. Each exercise should build on the one before taking us closer to something tangible.
Remember, the aim of the session is to:
- Establish any issues with the direction you intend to take.
- Make people feel included and engaged with the process.
- Educate the client and other stakeholders.
- Ensure everybody has the same vision.
It helps to go into the workshop with a list of the main pages you wish to wireframe. That frequently includes more complex pages such as the homepage, landing pages, etc. Prioritise the list and then if you don't get to all of the pages you have at least tackled the important ones.
With that list in hand, here are a few exercises I cycle through for each page that I need to address.
1. Start by opening the floodgates!
I begin by opening the gates and getting people to suggest every element that could or should appear on a page. The idea is that you just get everything out there, without worrying about how relevant or otherwise the idea is.
If it is a small group, then we do this all together with people shouting out ideas and me writing them on a whiteboard. If you find your group is too large for that, try splitting it down into smaller groups. It can sometimes be interesting to divide people into disciplines (e.g. put all the sales and marketing people together). That can highlight some of the profound differences in how people see the role of the website.
Whatever the case, this exercise should end with a giant list of every screen element somebody might want to include, from the logo to a news area and everything in-between.
Now comes the point where they have to start prioritising. There are two activities which help with that. You can do either or both. These are the book jacket and user attention exercise.
2. The book jacket exercise
It's amazing how unwilling many stakeholders are to prioritise their content when it comes to the web. The ability to create endlessly scrolling pages seems to encourage them to weight everything equally.
One way around this problem is not to talk about websites but start with something that has physical constraints; something like a book cover.
Ask your group (or smaller groups if there are a lot of people) to use the list of elements to design a book jacket. They have to consider what goes on the front, back, spine and inside flap of the book jacket.
The exercise of deciding what to include and what to leave out, along with where to position different elements will help them prioritise. They will naturally put the most important thing on the front and least important information on the inside flap.
The book jacket exercise is a great starting point, but sooner or later we need to turn our attention to the visual hierarchy of the actual web page. That is where the user attention exercise can help.
3. User attention exercise
The user attention exercise is a simple one. You explain to your audience that users have limited attention. You, therefore, assign the page we are wireframing 17 points of user attention (this number can be higher if required). Each element the group adds to the page costs one point. If they want the user to pay more attention to a particular item, then they need to give it more user attention points.
The group's natural inclination will be to cram as many items on the page as possible, spending one or two points on each piece of content. The result is a horribly busy design. So, when they do this I tend to ask them which website is more useful in their opinion; Yahoo! or Google. People always pick the latter.
I then show them the two sites side by side and point out that Google has spent the vast majority of its user attention points on the search box. That typically helps people to start focusing on where they spend their points.
By the end of the exercise, you will have a clear indication of where the priority of any page should lie. However, that doesn't mean you shouldn't explore other approaches. For this, we use the six up exercise.
4. Six up exercise
This exercise encourages experimentation. It is an exercise people do individually, although it also works in small groups.
You take a sheet of paper and fold it in half vertically and thirds horizontally so creating six boxes.
Each person (or group) now has to create six versions of the page in question. Each little sketch will be simple but will explore different ways you could design the page.
Participants will quite easily do one or two versions but will begin to struggle after that. Coming up with six proposals will be an effort, and they may need some advice (e.g. try producing versions of the page aimed at different audiences or with emphasis on various value propositions).
The exercise has one of two outcomes. Sometimes it uncovers an alternative approach that you might have otherwise missed. If that does not happen, it demonstrates that the obvious approach is the only option, even if it is not perfect.
In a lot of cases, the above exercises are all you will get through. However, with more important pages (such as the homepage) it may be worth refining a little further.
5. Refine and discuss
It is entirely possible to go away with all of the data collected from the exercises above and complete the wireframes yourself. However, sometimes it is a good idea to get a more concrete agreement in the room.
You may want to sketch out an approach for some pages based on all of the feedback provided and discuss it with the group. You often find that with all of the previous exercises still fresh in their minds, they are quite happy to agree with your approach because they now understand why you are taking it. That is the heart of collaborative wireframing – it prevents endless iteration.
Avoiding endless iteration
Working on wireframes (or worse still, design comps) in isolation and then seeking approval leads to endless back and forth, tweaking and amendments. You have to arrange conference calls, email conversations are stilted, and misunderstandings are common.
By getting everybody in a room working on the wireframes together, you can cut through all of that. No, you won't be able to go into massive detail. But, you will be able to define a general direction that will save a lot of time in the long run. Most importantly, the client will go away much better informed about the direction you eventually take with the design.