'What' Must Come Before 'How'

  |  July 9, 2001   |  Comments

Wireframing is all about the "what" -- the execution and process of the site. It has nothing to do with the "how" -- including the innovations of technology and design. It will keep your site focused on what it needs to do to maximize conversion rates.

In a recent article, "Behind the Scenes: The Making of a Web Site," I discussed the importance of storyboarding your Web site. Storyboarding is the process of creating drafts of your Web pages and laying them out in logical sequence to create a map of your finished Web site. That map then serves to guide your designers, copywriters, and programmers.

In that article, I promised you that I would also write about "wireframing," which is actually the parent process to storyboarding. Unfortunately, many people (including lots of developers) confuse storyboarding with wireframing, or they believe that because they are storyboarding they have already done a wireframe. Nothing could be further from the truth!

Wireframing involves making a skeleton of your Web site that focuses only on what you want the site to do in response to each user click, not on how that gets done:

  • Wireframing is strictly about the client's concept of what the site needs to do. It has nothing to do with the developer's, programmer's, or designer's concepts of how to get it done.

  • A wireframe essentially is an enhanced flow chart without graphical images that demonstrates every click-through possibility on your site. Wireframing is about defining the entry points to, and exit points from, each page. It answers questions such as "What actions can be taken here?" and "What is the user's state of experience as she enters this page and when she leaves it?" It focuses on the click-through sequence and user-experience flow of the site.

  • A proper wireframe explicitly does not have any design, copywriting, programming, or other components; those, at this first stage, serve only to distract you from clarifying -- exhaustively -- exactly what your site must do, and also must not do, at every point in your visitor's click-through journey.
Although wireframing may have started as a software development tool, it has a much broader application. It allows us at Future Now to work with a client to define the motivation behind every page and the function of each page, and it allows us to determine whether a page really needs to be there. (Sometimes removing one page from a site can lead to a significant increase in sales.) Wireframing also allows us to define what actions can be taken from that page (so, among other things, we avoid paralysis of analysis) and to make sure that each page has a clear call to action that motivates the visitor to go forward. Also, as we link every wireframed page, we can check to be sure it fits within the five-step sales process.

One of the most important benefits of wireframing is that it happens on the fly as we work with a client in the early discovery stage of the project (sometimes even during the first meeting). Wireframing helps you to conceptualize what your site needs to do and how the customer experience should be built. With the HTML wireframe approach, you are actually interacting with a functioning model of your Web site almost from the beginning and long before a single question of design or copy or even color gets addressed. You can click on links and see where they go. You can begin to "feel" what it will be like to use your site rather than just see it. Ultimately, it is all about the words of wisdom from Nordstrom's CEO, Dan Nordstrom, "You don't get paid for innovation... You get paid for execution."

Wireframing is all about the execution and process of the site and has nothing to do with innovations of technology or design: Will you keep your site focused on what it needs to do to maximize your conversions, or will you let bleeding-edge technology and design drain your cash flow and actually cost you customers?

Once the client approves the wireframe, we get to work on the copywriting. This is one of the most important aspects in persuasion -- be sure you have text that sells. Once the content for each page is developed, we begin getting the designers involved to create a graphical user interface (GUI) that works with the content, mood, and feel of the design.

So how can you begin taking advantage of wireframing? Beyond applying the principles above, you should read the wireframing article by Future Now's CTO, John Quarto-vonTivadar. If you are interested in more information about wireframing, email us.

ClickZ Live Chicago 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, Oct 3 to take advantage of Early Bird Rates!

ABOUT THE AUTHOR

Bryan Eisenberg

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.

COMMENTSCommenting policy

comments powered by Disqus

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

COMMENTS

UPCOMING EVENTS

Featured White Papers

IBM: Social Analytics - The Science Behind Social Media Marketing

IBM Social Analytics: The Science Behind Social Media Marketing
80% of internet users say they prefer to connect with brands via Facebook. 65% of social media users say they use it to learn more about brands, products and services. Learn about how to find more about customers' attitudes, preferences and buying habits from what they say on social media channels.

An Introduction to Marketing Attribution: Selecting the Right Model for Search, Display & Social Advertising

An Introduction to Marketing Attribution: Selecting the Right Model for Search, Display & Social Advertising
If you're considering implementing a marketing attribution model to measure and optimize your programs, this paper is a great introduction. It also includes real-life tips from marketers who have successfully implemented attribution in their organizations.

Jobs

    • Internet Marketing Campaign Manager
      Internet Marketing Campaign Manager (Straight North, LLC) - Downers GroveWe are looking for a talented Internet Marketing Campaign Manager...
    • Internet Marketing Specialist
      Internet Marketing Specialist (InteractRV) - DallasInternet Marketing Specialist InteractRV - Anywhere Telecommute, USA SEM | SEO | Content Creator...
    • Tier 1 Support Specialist
      Tier 1 Support Specialist (Agora Inc.) - BaltimoreThis position requires a highly motivated and multifaceted individual to contribute to and be...