Wire frames are one of the most recognizable deliverables in any Web development project. They’re visual, substantive, and often serve as a blueprint for the actual site. Clients love them because it’s the first tangible proof that something is actually being created.
However, wire frames can also cause lots of problems. Many clients don’t understand the true nature of wire frames and their purpose. Clients start making assumptions about what they’re seeing -- confusing visual design with functional design, questioning “Lorem Ipsum” text, and asking if all page elements are going to look like boxes. What can be done?
This is a hot topic, and I’m not going to spend lots of time trying to define what a wire frame is or isn’t. I’m just going to give you my humble take. Simply put, a wire frame is a visual representation of functionality and, to a lesser extent, a guideline for proportion and page layout. (If you want an extended analysis about wire frames, check out this article by Traci Lepore.)
When I say “a visual representation of functionality,” I’m referring to things that are better represented visually than textually. Arguably, you could dispense with a wire frame altogether if you had a text document that explained in great detail each page and page element and how it operated. It wouldn’t be a very interesting read, and it would be difficult to refer to during design and development. For example, a wire frame of a registration form is probably more efficient and effective than describing multiple fields and menus. Designers and developers know how forms work, so they require very little additional information. (Note: If you have a text document that indeed pulls this off, I’d love to see it.)
When it comes to page layout, wire frames become more controversial. Barring unique functionality, a form page wire frame represents exactly what you’ll get in the finished product. There will be some niceties added in visual design, but sometimes a field is just a field, and it pretty much has to work like it’s displayed.
Wire Frames as Blueprints
A common analogy for a wire frame is an architect’s blueprint. A wire frame is essentially a website blueprint where page elements, functionality, and proportion are combined into a single document set. Andy Rutlage suggested that wire frames are not like a blueprint. In the case of blueprints he states, “They're set, solid. Their plan will likely hold through the entire process.”
I recently did a home remodel, and went through several sets of blueprints (design iterations) before I signed off. Full color renderings of the final structure wouldn’t be possible until the blueprints were finalized. You could look at the visual design as the “rendering’ of the wire frames. Without documenting all the elements, the visual design wouldn’t be complete. Also, certain design elements don’t affect the overall structure (information architecture). Adding a shadow here or a box there is no different than changing trim color or adding a double door over a single door.
The truth is: both mediums are fairly flexible. Some seemingly large changes are actually quite doable, and changes that appear small can have far reaching effects. The key is detailed documentation but realize that changes are inevitable. It’s not a perfect analogy, but the wire frame is like a blueprint.
Wire Frames - IA, Interface Design, Interaction Design, and Usability
I think there is some confusion about what each of these concepts mean in relation to the wire framing process.
Information Architecture
I’m often called into meetings late in the development process to comment on changes to specific pages or functionality. I’m asked, “what’s the best IA practice for this particular situation?” First, I would argue that Information Architecture is a completely separate exercise from designing wire frames. Information architecture is the process of organizing content into a base framework (hierarchy or taxonomy) that supports the various audiences you want to reach. This obviously depends on the volume and complexity of content, but this step should be completed prior to designing wire frames.
Interface Design
Once you have a solid site/content outline (IA), then you can begin wire frames. Wire frames have two distinct components: interface design and interaction design. Wire frames do a good job of representing interface elements, especially with commonly used controls; e.g., drop box menus, tabs, buttons, etc. The interface is what is used to navigate the site and access content. I suppose it could be argued that page content (such as an article) is also part of the interface, since a well designed page is easier to consume than a poorly designed page.
Interaction Design
Interaction design is much more difficult to represent on a static wire frame. As the name implies, you must interact with the element for its true value to be perceived. Interaction design takes the best of an interface designer (functional) and a graphic designer (emotional) to create innovative, visually appealing, and emotionally satisfying designs. For example, a “widget” is an interactive element that has several states and may require some form of data input. A wire frame could be shown with several states to simulate how the interaction works, but it’s cumbersome and time-consuming.
A great example of outstanding interaction design is the iPhone (and iPad). Apple designed interactions that, although simple, are also intuitive and pleasing to the user. It’s not enough that you can swipe the screen from left to right, but it’s how the screen behaves during this action. Even though you can’t feel it move, it still “feels” right.
Usability
I’m not going to spend much time on this, as it’s a specialty in its own right. The usability of a design is best determined through usability testing. A wire frame can be used for basic usability testing, generally in the form of a paper prototype. Better still is prototyping software or HTML mock ups that serve as both a wire frame and prototype. Visio can be exported as a website, but it’s somewhat crude. Another product, Axure, is great for prototyping, but not quite as flexible for wire frames. Or, if you’re handy with CSS and HTML, you could actually code working prototypes as you design.
When to Wire Frame
Unless the site is very simple, I try not to wire frame until I have completed a complete content analysis. If you try to wire frame pages before identifying the content and functional requirements, you’re likely to forget something. For small sites, you can jump right into wire frames, essentially doing the information architecture at the same time you’re designing pages. Use wire frames when you want to work out specific page layout issues or presentation issues, e.g., articles, forms, list pages, etc. Use wire frames if you have clients who aren’t sure about what they want and have to submit many iterations. Wire frames also help to visualize workflow, e.g., how to get from this page to that page or how specific functionality is executed.
Advantages
The advantages of wire framing are many and obvious. Here’s a short list:
- Visualizing functionality can speed up the design process by quickly bringing understanding to a wide range of stakeholders.
- Wire frames are iterative, and issues are easy to identify and change prior to development.
- New ideas can be quickly applied as a proof of concept.
- Wire framing is less expensive than coding.
- The relationship between page elements and individual pages can be scrutinized and adjusted.
- To a lesser extent, page layout and weighting page elements can be more quickly and easily analyzed.
- Wire frames provide guidance to designers and developers for both functionality and content.
- Wire frames can be used to create paper prototypes (for usability testing).
Limitations
Wire frames communicate a lot of information, but are limited in some important ways:
- How visual contrast impacts content hierarchy
- The impact of brand-specific design features
- The impact of graphic and textural elements
- The eye/energy paths created or interrupted by color and contrast of graphic elements
- Emotional impact
Additionally, the site’s purpose can affect how wire frames might play a role. Clients respond poorly to sketches when they’re looking for the emotional quality. An article by Andy Rutledge does a good job of illustrating some wire frame limitations. In some cases if you know the basic content requirements, jumping straight into design can be both faster and more effective than adding the wire frame step.
Conclusion
Wire frames are an important step in the design process, but we don’t have to wire frame every site.
You should wire frame if you have:
- A large site, e.g., hundreds or thousands of pages
- Many different content types
- Specific functionality that needs to be documented
- To see how a page lays out prior to getting into design
- To conduct usability tests prior to development
- Many iterations of a design approach
- Clients who need to understand how pages function
You may not need to wire frame if:
- You’re following process, because that’s how you’ve always done it
- You have a relatively small site or you’re just re-skinning a site
- The user experience is more about the journey and less about finding content
- You’re looking for certain emotional responses from visitors
- The site is geared towards entertainment, e.g., movie sites
References
“Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience,” May 17, 2010, Traci Lepore
http://www.uxmatters.com/mt/archives/2010/05/sketches-and-wireframes-and-prototypes-oh-my-creating-your-own-magical-wizard-experience.php
“Dog and Pony Show Design,” June 11, 2009, Andy Rutledge
http://www.andyrutledge.com/dog-and-pony-show-design.php
“Where Wireframes Are Concerned,” December 10th 2009, By Andy Rutledge
http://uxmag.com/design/where-wireframes-are-concerned
“Walls Come Tumbling Down,” June 2009, Andy Clarke
http://www.stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
“Paper Prototyping,” January 23, 2007, Shawn Medero http://www.alistapart.com/article/paperprototyping/
“Time To Stop Showing Clients Static Design Visuals,” Andy Clarke
http://www.stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals/
