Wireframes and Meaning: A Brief Introduction to Visual Fidelity
They say that every profession has a hot-button topic - the kind of question you can raise at a party and everyone will have a strong opinion about. No matter what, the conversation will be lively. For those of us who work in Experience Design, that topic is wireframes; more specifically, the kind of wireframes. As designers, we use wireframes as the backbone of our endeavors. In their simplest form, they are diagrams that explain how applications, websites, webpages will “work.” The form that these wireframes take is where things can get murky, and where the aforementioned lively conversation starts.
To give us a starting place, any time you see a static image that represents an application or a webpage, you’re probably looking at some form of a wireframe. Traditional wireframes are usually very pared-down visual diagrams that are meant primarily to convey certain specific ideas, such as:
What content is contained within this instance (page / overlay) of the application
What calls-to-action occur here
What would be an intended flow for usage
There are sometimes some other features that could be represented in wireframes, such as navigational options, hints at visual design, actual content. These traditional wireframe forms usually have a similar look to them: black and white, simplified graphics, non-specific content (usually using dummy text such as lorem ipsum Latin text, or some other approximation of Indo-European word lengths.) They would also be accompanied by written descriptions of how each piece was supposed to behave.
As our technology has advanced, the options for making impressive-looking wireframes has grown exponentially. And with that has brought about some changes not only in wireframes, but in the “fidelity.” You’ll hear the word fidelity mentioned often in these lively discussions about wireframes because it can have many implications to those who look at the final products. For example, you’ll often see wireframes that are mixed or hybrid forms, looking like a cross between a black and white sketch and a finished visual design. This has happened (particularly in the past 5-7 years) because of the plethora of design programs available that allow for easy sharing of visual assets. Also fashions change, and there is a higher emphasis placed now on “demo-ing” an application in a live setting rather than providing detailed written notes next to diagrams.
This all sounds wonderful, but already we’ve crossed a boundary by venturing out of the strict realm of traditional black and white wireframes. Someone outside of our profession might ask, “Well, what’s the point of black and white wireframes in the first place?” The answer is simple: The removal of visual bias. In some related research that I did a few years ago about the implications of color, it was found that very young children (under the age of 1,) are naturally drawn to “shiny things,” literally, objects that reflect light. Similar objects presented to children of the same color value and shape but with flat (non-reflective) color were reached for consistently less often than their shiny counterparts. So innately, we as humans like bling. It carries through as we get older, so when we as designers are trying to answer questions about functionality, behavioral progress, language usage, navigation, things such as color, shapes, and content can be distractions from what the actual user experience is.
Black and white page design (left) from Golf Digest by Yanwen Hu, next to final full color visual design (right). As you can see, the first diagram focuses on placement and functionality, and takes emphasis away from visual weight or impact of the full visual design on the right.
This is not to say that higher fidelity wireframes don’t have their place in design - they do indeed. But they may be used for different purposes. For instance, when assessing the look and feel of an application, we need to see precisely what those colors, forms, animations, illustrations will be. Sometimes, when research is testing the functionality of a product, it’s more helpful to have a fully designed product (with the bling on top) as well. And when it comes to making presentations to decision makers in executive level positions, they will often have a bias toward seeing what the final product will most likely resemble. Making that visual leap is asking a lot for folks who need to make market decisions.
But getting back to research for a moment - many researchers also agree that putting very high-fidelity designs in front of users has real dangers when we are trying to get data about how our products actually fulfill their needs. For example, test subjects understand that they are looking at works in progress when they are testing something. If they are led astray by a certain visual treatment that prematurely biases them in one direction or another, their thoughts about how to rearrange their calendar of assignments may already be tainted because of the fact that they don’t particularly like the color blue. The truth is that we, as designers or researchers, don’t know how people will react to certain visual designs, but we do generally know that they understand the nature of black and white diagrams as “functional drafts” and therefore can remove some of that visual bias by sticking to lower fidelity wireframes for testing.
There is still great healthy debate about the issue of fidelity, and I’d love to hear some differing opinions about how higher fidelity wireframes are actually better for our internal partners or for test subjects. When you move beyond wireframes into final visual designs, prototypes, test builds, and eventually a production build, you’ll see that each level of increased fidelity and interactivity plays a specific role in the life of the development of a product. Our technologies today are advancing so rapidly that it’s often easy for people to make full color working prototypes in the space of a day. However, these are usually made by very small companies or by independent contractors making a “proof” of an idea. It serves its purpose. Pearson’s Experience Design uses many different approaches to the idea of wireframes, usually based on the audience that will most view it, but it remains a topic for lively discussion because everyone has an opinion about it.