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 Toronto On the heels of a fantastic event in New York City, ClickZ Live is taking the fun and learning to Toronto, June 23-25. With over 15 years' experience delivering industry-leading events, ClickZ Live offers an action-packed, educationally-focused agenda covering all aspects of digital marketing. Register today!

ClickZ Live San Francisco Want to learn more? Join us at ClickZ Live San Francisco, Aug 10-12!
Educating marketers for over 15 years, ClickZ Live brings together industry thought leaders from the largest brands and agencies to deliver the most advanced, educational digital marketing agenda. Register today and save $500!

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

Featured White Papers

Gartner Magic Quadrant for Digital Commerce

Gartner Magic Quadrant for Digital Commerce
This Magic Quadrant examines leading digital commerce platforms that enable organizations to build digital commerce sites. These commerce platforms facilitate purchasing transactions over the Web, and support the creation and continuing development of an online relationship with a consumer.

Paid Search in the Mobile Era

Paid Search in the Mobile Era
Google reports that paid search ads are currently driving 40+ million calls per month. Cost per click is increasing, paid search budgets are growing, and mobile continues to dominate. It's time to revamp old search strategies, reimagine stale best practices, and add new layers data to your analytics.

WEBINARS

Resources

Jobs

    • GREAT Campaign Project Coordinator
      GREAT Campaign Project Coordinator (British Consulate-General, New York) - New YorkThe GREAT Britain Campaign is seeking an energetic and creative...
    • Paid Search Senior Account Manager
      Paid Search Senior Account Manager (Hanapin Marketing) - BloomingtonHanapin Marketing is hiring a strategic Paid Search Senior Account Manager...
    • Paid Search Account Manager
      Paid Search Account Manager (Hanapin Marketing) - BloomingtonHanapin Marketing is hiring an experienced Paid Search Account Manager to...