Wireframes: why you need one, how to build one, and, once and for all, why a wireframe is not a storyboard.
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:
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.
Join the Industry's Leading eCommerce & Direct Marketing Experts in Chicago
ClickZ Live Chicago (Nov 3-6) will deliver over 50 sessions across 4 days and 10 individual tracks, including Data-Driven Marketing, Social, Mobile, Display, Search and Email. Check out the full agenda and register by Friday, August 29 to take advantage of Super Saver Rates!
Bryan Eisenberg is coauthor of the Wall Street Journal, Amazon, BusinessWeek, and New York Times bestselling books "Call to Action," "Waiting For Your Cat to Bark?," and "Always Be Testing." Bryan is a professional marketing speaker and has keynoted conferences globally such as SES, Shop.org, Direct Marketing Association, MarketingSherpa, Econsultancy, Webcom, SEM Konferansen Norway, the Canadian Marketing Association, and others. In 2010, Bryan was named a winner of the Direct Marketing Educational Foundation's Rising Stars Awards, which recognizes the most talented professionals 40 years of age or younger in the field of direct/interactive marketing. He is also cofounder and chairman emeritus of the Web Analytics Association. Bryan serves as an advisory board member of SES Conference & Expo, the eMetrics Marketing Optimization Summit, and several venture capital backed companies. He works with his coauthor and brother Jeffrey Eisenberg. You can find them at BryanEisenberg.com.
The Marketer's Guide to Customer Loyalty
Customer loyalty is imperative to success, but fostering and maintaining loyalty takes a lot of work. This guide is here to help marketers build, execute, and maintain a successful loyalty initiative.
The Multiplier Effect of Integrating Search & Social Advertising
Latest research reveals 68% higher revenue per conversion for marketers who integrate their search & social advertising. In addition to the research results, this whitepaper also outlines 5 strategies and 15 tactics you can use to better integrate your search and social campaigns.
August 21, 2014
September 23, 2014