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.
Twitter Canada MD Kirstine Stewart to Keynote Toronto
ClickZ Live Toronto (May 14-16) is a new event addressing the rapidly changing landscape that digital marketers face. The agenda focuses on customer engagement and attaining maximum ROI through online marketing efforts across paid, owned & earned media. Register now and save!
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.
Marketing Apps for Landing Pages White Paper
Marketing apps can elevate a formulaic landing page into a highly interactive user experience. Learn how to turn your static content into exciting marketing apps.
Redefining 'Mobile-Only' Users: Millions Selectively Avoid the Desktop
A new breed of selective mobile-only consumers has emerged. What are the demos of these users and how and where can marketers reach them?
March 19, 2014