Framing the Problem

  |  November 1, 2002   |  Comments

Wireframes: why you need one, how to build one, and, once and for all, why a wireframe is not a storyboard.

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.

ClickZ Live New York Want to learn more?
Attend ClickZ Live New York March 30 - April 1. With over 15 years' experience delivering industry-leading events, ClickZ Live brings together over 60 expert speakers to offer an action-packed, educationally-focused agenda covering all aspects of digital marketing. Register today!

ABOUT THE AUTHOR

Bryan Eisenberg

Bryan Eisenberg is co-founder and chief marketing officer (CMO) of IdealSpot. He is co-author of the Wall Street Journal, Amazon, BusinessWeek, and New York Times best-selling books Call to Action, Waiting For Your Cat to Bark?, and Always Be Testing, and Buyer Legends. Bryan is a keynote speaker and has keynoted conferences globally such as Gultaggen, Shop.org, Direct Marketing Association, MarketingSherpa, Econsultancy, Webcom, the Canadian Marketing Association, and others for the past 10 years. Bryan was named a winner of the Marketing Edge's Rising Stars Awards, recognized by eConsultancy members as one of the top 10 User Experience Gurus, selected as one of the inaugural iMedia Top 25 Marketers, and has been recognized as most influential in PPC, Social Selling, OmniChannel Retail. Bryan serves as an advisory board member of several venture capital backed companies such as Sightly, UserTesting, Monetate, ChatID, Nomi, and BazaarVoice. He works with his co-author and brother Jeffrey Eisenberg. You can find them at BryanEisenberg.com.

COMMENTSCommenting policy

comments powered by Disqus

Get the ClickZ Analytics newsletter delivered to you. Subscribe today!

COMMENTS

UPCOMING EVENTS

UPCOMING TRAINING

Featured White Papers

A Buyer's Guide to Affiliate Management Software

A Buyer's Guide to Affiliate Management Software
Manage your performance marketing with the right solution. Choose a platform that will mutually empower advertisers and media partners!

Google My Business Listings Demystified

Google My Business Listings Demystified
To help brands control how they appear online, Google has developed a new offering: Google My Business Locations. This whitepaper helps marketers understand how to use this powerful new tool.

Jobs

    • Website Optimizer - SEO, CRO, Analytics
      Website Optimizer - SEO, CRO, Analytics (Marcel Digital) - ChicagoMarcel Digital, an award winning interactive marketing agency established in 2003...
    • Director of Marketing
      Director of Marketing (Patron Technology) - New YorkDirector of Marketing We are seeking a Director of Marketing to manage and build our marketing...
    • Senior Interactive Producer
      Senior Interactive Producer (Ready Set Rocket) - New YorkWhat You'll Do As a member of our team, the Senior Producer reports directly to our...