Five Critical (and Overlooked) Design Elements

  |  May 27, 2005   |  Comments

Practical (and often-forgotten) elements of landing- and buying page design.

Ask any Web designer about the most important aspects of Web page design. You're likely to hear the same three things over and over: usability, intuitiveness, and color. All are critical.

But when designing landing pages or buying/shopping process pages, these elements alone just aren't enough.

Designers are also likely to talk about how a site or design "feels." Often, a site can feel right, but perform badly. Designers are right; a site should feel right. But it should also convert.

How do you accomplish both? What does "feel right" mean in the real world? Is design totally subjective?

Following are some practical and commonly overlooked elements of landing- and buying-page design to help answer some the above questions and help you think about design elements more objectively.

Prioritization

Determine the relative importance of all elements that will comprise a Web page. Not all elements are of equal importance. To be most effective, the layout must take this into account. Important elements may require specific placement on a page so that they may be more visually available to visitors.

  • For every page, you must answer the question: What action do we want the visitor to take on this page? List these in order of priority.

  • By first considering the design mock-up in grayscale, you can determine what elements stand out without color getting in the way.

  • Use brighter/bolder colors on elements such as buttons and header banners that reinforce the action you want a visitor to take on that page.

  • Button size, position, and shape can also influence the visitor's perception of important an element is.

Visit Buy.com and place any item in your cart. What action do you think Buy.com would rather you take? "Update Quantities" or "Checkout"? The design of this page shifts perceived priority to "Update Quantities" over "Checkout."

Position

Position refers to the relational properties of elements on Web page. No element exists in isolation; all are affected by the surrounding elements. A large, dark element, for example, may functionally obscure the presence of an adjacent small, light element.

Evaluate the positional relationships including size, shape, color and proximity of all the elements. Ensure each is visually "available" to the visitor.

Now, go back to the Buy.com checkout page. Observe how the position of "Update Quantities" in the center of the page obscures the checkout button

Contrast

Contrast is the difference between the light and dark areas of the page design, the juxtaposition of black and white representing the strongest contrast. Contrast dramatically affects readability and a visitor's ability to spot elements critical to the persuasive process. Contrast is an important design consideration when people with impaired vision require assistive technologies to render Web pages readable.

When considering design contrast:

  • Look at all design mock-ups in grayscale first. Colors evoke emotion. Introducing them first distracts you from the ability to see potential contrast problems in a design.

  • Avoid too many dark colors. Before and After.

  • Avoid too many light colors. We were just involved in a site design where the white background behind both the left navigation and the active window rendered the site too bright and difficult to read. Simply changing the background shade behind the left navigation column made both elements pop out.

Expectations

This is the design's ability to employ basic conventions online users have come to associate with e-business. Sure, conventions can seem limiting and uncreative. But an online business must provide both a design and a layout that helps the visitor accomplish her task efficiently and without frustration.

  • All text hyperlinks should be underlined.

  • View Shopping Cart/Checkout links should be near the upper right corner.

  • Contact info should reside in the footer navigation.

Perception

  • Of speed. That should be the visitor's impression of how quickly the site and each subsequent page appear onscreen. While a site can load with an absolute speed, it's possible to give the impression it's loading faster by prioritizing critical information and loading it first. Ideally, the visitor will engage with that information while secondary information is still loading. Actual speed and the perception of speed are often inversely related. The real influences are the users' experiences and their ability to complete the tasks they came to accomplish.

  • Of time spent on task. This is the visitor's impression of the length of the persuasive process from beginning to end. Structural designs that use five pages when three would suffice needlessly waste visitors' time. At a smaller level, forms that "look" long -- even though they may not request more information -- are often perceived as requiring more time to complete. In general, the longer the visitor perceives it will take her to accomplish her task, the more frustrated and disinterested she becomes. Just check out the first checkout page on Hammocks.com.

Striking A Balance

Designing landing pages and other buying process pages is a more objective process than many people think. It's not about the prettiest design, or the one that "feels right." Design is a tool that helps the visitor achieve their goals, and you achieve yours.

Most discussions about design are subjective (I don't like that color; that shape; that picture here, etc.). Many such discussions can be avoided by first by prioritizing, or assigning a value, to the actions you want the visitor to take on a page-by-page basis.

ClickZ Live San Francisco This Year's Premier Digital Marketing Event is #CZLSF
ClickZ Live San Francisco (Aug 11-14) brings together the industry's leading practitioners and marketing strategists to deliver 4 days of educational sessions and training workshops. From Data-Driven Marketing to Social, Mobile, Display, Search and Email, this year's comprehensive agenda will help you maximize your marketing efforts and ROI. Register today!

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

BigDoor: The Marketers Guide to Customer Loyalty

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.

Marin Software: The Multiplier Effect of Integrating Search & Social Advertising

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.

WEBINARS

    Information currently unavailable

Jobs

    • Interactive Product Manager
      Interactive Product Manager (Western Governors University) - Salt Lake CityWestern Governors University, one of the 20 largest universities...
    • SEO Senior Analyst
      SEO Senior Analyst (University of Phoenix (Apollo Education Group)) - San FranciscoSEO Senior Analyst   Position Summary...
    • SEM & Biddable Media Manager
      SEM & Biddable Media Manager (Kepler Group LLC) - New YorkAs an Optimization & Innovation Manager at Kepler Group, you will be on the bleeding...