Framing the Problem

We last examined uncovery, the first, most critical phase of the Minerva Architectural Process (MAP). Let’s move on to phase two, wireframing.

Wireframing is a simple, nontechnical process. It takes its name from the skeletal structure that underlies any type of sculpture. A wireframe is a skeletal rendering of every click-through possibility on your site. It’s a text-only action, decision, or experience model.

Wireframing saves a lot of time and money. The entirety of a Web site and all interactions are designed and evaluated before costly graphic design or programming. You can click hyperlinks and see where they go. You’ll “feel” what it will be like to use the site. In doing so, critical feedback is generated early in the development process. Everything is easy to change in this phase. Many iterations can be done quickly. They can even be tested with end users at a very low cost.

People confuse wireframing with storyboarding. Presented with site-design storyboards or mockups, users, clients, and designers alike tend to focus on visual elements of the prototype rather than the proposed function, structure, or content of the page. Hardly surprising. A bias for tangibles over abstracts is very human. Myers-Briggs (a serious study of personality types) demonstrates over 70 percent of the English-speaking population prefers tangible, concrete concepts over abstractions. We react to what we see. Even if we know it can be changed, we can’t ignore our reaction.

Wireframing puts something in front of decision makers not to excite them visually but to elicit a reaction. A wireframe separates a site’s look and feel from its function. It presents a stripped-down, simplified version of the page, devoid of distractions. The purpose is to maintain the flow of specific logical and business functions by identifying all entry and exit points or actions users will experience on every page of a site.

The distinction between wireframe and storyboard is critical. Wireframing defines the what of the creative process. Storyboarding tackles the how. Wireframes are more structural design than visual. Visually, they are boring. Good visual designs are not. Maintaining distinct roles for phases of an undertaking is well described by Richard Saul Wurman in “Information Anxiety 2“:

There are two parts to solving any problem: What you want to accomplish, and how you want to do it. Even the most creative people attack issues by leaping over what they want to do and going on to how they will do it. There are many “hows” but only one “what”…. You must always ask the question, “What is?” before you ask the question, “How to?”

What do wireframe pages contain? Ideally, answers to the three questions every persuasive Web site addresses:

1. What personas (types of visitors) need to be persuaded?
2. What actions do they need to take?
3. What information do they require to take that action?

Marketers tend not to appreciate linear processes. But if you’ve been involved in a development project that has gone beyond the delivery date, didn’t deliver everything it was supposed to, or went over budget, you aren’t alone. When 70 percent of development projects fail and 80 percent are over budget, there’s a problem. If 70 percent of buildings were built like Web sites, most of us would live and work in tents.

Einstein defined insanity as “doing the same thing over and over again and expecting different results.” Development methodology should take into account the cognitive processes of the development team and the end users, plus focus on meeting business needs and objectives. Most principles of online persuasive architecture trace their origins to established disciplines, such as architecture. Businesses should develop a lingua franca for development so people don’t confuse major issues such as wireframing with storyboarding. So projects are done on budget, on time, and on purpose.

The next time you start a design, redesign, or any other project, don’t think about this column. Instead, bear in mind another gem from Albert Einstein: “If I were given one hour to save the planet, I would spend 59 minutes defining the problem and one minute resolving it.”

Bryan will speak at ClickZ Email Strategies in San Francisco, November 18-19.