UX 101: The Wireframe

If you develop web sites you're probably pretty familiar with the wireframe, and if you're a user experience designer you're probably rolling your eyes at yet another post about what a wireframe is and what it's good for.  If, on the other hand, you're not involved in the mucky details of site design and development, wireframes may seem a little mysterious.  If that's you, you're not alone.  The fact is wireframes are commonly misunderstood by stakeholders, especially when they're new to the web.  I regularly have to explain to clients what a wireframe is, how we use wireframes, and sometimes, why they should pay attention to them.  If you're new to wireframes, I'm here to get you up to speed on what a wireframe is and how to read one.  If you already know all about them, maybe you can use this post to educate your stakeholders.

What's a Wireframe?

A staple of user experience work, a wireframe is a skeleton of a page.  It shows the priority and the organization of things on the screen and how users will get to other parts of the site.  Wireframes range in fidelity from quick sketches on a whiteboard to detailed computer renderings.  While wireframes will vary in their level of detail, they generally reflect the designer's ideas about the placement of elements on the page, the labeling of elements, site navigation, and how the user will interact with the site.??

A Wireframe:

Typically, UX designers ignore questions of style and "look" when creating wireframes.  A wireframe will give you sense of elements' placement on the page and relative to each other and which items will get stronger visual treatment, but it won't speak to color, graphics, spacing, or typography.  UX designers typically leave those kinds of details to the visual designers so they can focus on other aspects of the page.  Visual designers can then take the wireframes and work out all of the glossy details to create a design comp.

A Design Comp:

Why Mess With Wireframes?

You may be wondering why, if wireframes don't show exactly what the site is going to look like, do we bother with them? ?

It's a good question.

Wireframes are so valuable precisely because wireframes ignore questions of visual style that they're so valuable. 

When we're designing a page we need to consider several things:

1. How the page fits in with the site as a whole.
2. What content (text, images, video, etc.), links, and interactions we need to meet both user and business goals.
3. How all of these elements (content, links, and widgets) are going to relate to one another.
4. What it's going to look like.

Wireframes carefully consider the first three points above without worrying about the fourth.  It's in the wireframes that we start to nail down details about context, content, and interaction.  With these decisions made visual designers can get to work on a style that speaks to users, reinforces ideas suggested in the wireframes, and makes the page a pleasure to look at..

In addition to helping out visual designers, wireframes also present an opportunity to check in and make sure that the site design is going in the right direction.  Because wireframes don't get into stylistic details they're easier to create and much easier to change.  Comps (what visual designers make to show you how the page will finally look) take nearly twice as long to produce as wireframes, meaning they're essentially twice as expensive.  The same ratios apply to revisions, too.  If we do the math we can see that paying attention to wireframes and revising at this stage is a good way to reduce risk and make sure design time is well spent.

What to Look For

When you're reviewing wireframes it's helpful to know what to look for.  Since I've described what a wireframe is and what they're trying to convey, you've already got a pretty good idea of how to review them, but let's go over it again.  Wireframes should tell you:

1. What content is going to be on the page
2. How the content is organized on the page
3. Which content is most important on the page
4. Where users will go from this page
5. Where this page is on the site
6. How users will move around the site

Phrased as questions, the list above is a good starting point for evaluating wireframes.  As you're looking at wireframes, ask yourself these questions and then ask yourself whether the answer the wireframe gives is the same answer you would give if someone asked you.  Some other more detailed questions can also help you review wireframes:

1. Is anything important missing from the page?
2. Is the most important content the first thing you notice?
3. Is there anything on the page that shouldn't be there?
4. Which content is related and how?
5. Can you get to all of the major sections of the site from here? Should you be able to?
6. Do all of the labels make sense?
7. Do you know what all of the elements on the page are?

Asking these questions should lead down a path to review and evaluate wireframes at the right level of design.  Being able to identify problems at this point means that you can get them resolved in the wireframing stage, and you won't be wasting time in the visual design phase resolving foundational problems.

What Kind of Feedback to Give

When you give feedback on wireframes, it's the perfect time to point out any of the issues discussed above.  You should

also include notes if:

1. Something needs to be higher on the page.
2. Something should jump out at the user more.
3. Something should be in the main content area instead of the sidebar.
4. There's too much/not enough text or images.
5. Something is missing.
6. Something is confusing.
7. You can't figure out how you would take a particular action on a page.

While the wireframes themselves do not define style, they will serve as a starting point from which visual designers can begin working.  Because of this, you should pay attention to certain visual elements as you're working on feedback for wireframes.  In many cases visual designers will take relative sizes and weight as cues for what should be more prominent on the page, so it's good for you to provide feedback on these visual cues.

In Summary

Wireframes are an important part of web page design because they document decisions about content, content organization, content priority, and navigation without concerning themselves with visual styles.  They present an opportunity to make sure the project is going in the right direction.  Giving good feedback during the wireframing stage of a project will ensure that your visual design time will be used efficiently and to its greatest advantage.