Landing Page Layout Principles

  |  October 4, 2011   |  Comments

7 ways to make or break your landing page.

People talk about web "design" all the time, but the truth is that the organizational layout of a page may be more important than design when it comes to creating a high-converting landing page. A good landing page must be well organized and hang together as a single unit. Ultimately, all of the elements on a page must be constructed around the visitor's task and conversion action.

Emphasize Importance But Beware of Banner Blindness

It may seem obvious but it's worth mentioning because so many websites do this wrong: give the proper visual prominence to important elements. But be careful not to take this to the extreme. In other words, bigger is not always better. While your most important message should be the most visually prominent, graphical elements that are too large and obvious can be ignored by visitors, especially when surrounded by too much white space. This well-documented phenomenon is called "banner blindness." Too much visual distinction can cause the item to be perceived as an ad and ignored.

Use a Consistent Graphic Style

Use high quality production graphics and images. Don't mix different visual styles, such as combining photos and clip-art. Ensure that all of the image file sizes are small enough to load quickly. The only exception to this is the product "click to enlarge" close-up. These images should be as large as possible while still fitting on a reasonably sized monitor.

Avoid Stop Signs

Be wary of introducing any kind of horizontal rules or separator into your design. Rules, or even abrupt changes in background color, serve to stop the eye from going further. In effect they say, "this is the end of something" and discourage further exploration. This is also true of too much white space because it reduces scannability.

Keep Critical Elements Above the Fold

Never make the user scroll to find critical information like transactional buttons or important navigational links. Even if they are appropriate near the bottom of the page, include another copy somewhere above the fold.

Avoid Animation

Animation is almost universally annoying and should be generally avoided. If animation is required to illustrate a concept, the user should be given the affirmative option of watching it, and should not have it forced upon them. Similarly, Flash technology should be used only if it significantly improves the user experience.

Connect With Color

Color has a strong emotional impact on people and can dramatically alter moods and attitudes. This is also true on the Web. So you should use color sparingly and conservatively. This applies not only to individual colors, but also to palettes of complementary colors chosen for the landing page's visual theme. Make sure that your colors look unified, professional, and appropriate for your target audiences.

Don't use inverse color schemes with dark backgrounds and light text colors. Stick to common color conventions. Use white, or very light, colors for text background areas (wild background patterns make it harder to read.) Use colored text sparingly, and whatever color is used to indicate hyperlinks should not be used on any non-linking text.

Choose Images That Support the Visitor's Task

Images on a landing page area a powerful two-edged sword. They can support your key messages and desired actions, or they can be a major distraction, interrupting your visitor's thought process. The best images will support your visitor's task in one or more of these ways:

• Relate to the content on the page
• Show product views or details
• Show friendly, real people (not models)
• Have clear composition and tight cropping

In contrast, these characteristics will almost certainly ensure that your images will be ignored (at best) or a distraction (at worst).

• Fake, staged, contrived, or slick images
• Stock photos or graphics that are unrelated to the content on the page
• Bright, flashy images that look like advertisements

Remember that your visitors will look at images of other people - they can't help it. This can be useful in two tactical situations. First, important text or calls to action can be displayed as a caption immediately below the graphic, giving the message more exposure. Second, showing only the top of a picture above the fold can encourage visitors to scroll further down the page.

Tim is off today. This column was originally published on Aug. 1, 2011 on ClickZ.

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

Tim Ash

Tim Ash is CEO of SiteTuners.com, a landing page optimization firm that offers conversion consulting, full-service guaranteed-improvement tests, and software tools to improve conversion rates. SiteTuners' AttentionWizard.com visual attention prediction tool can be used on a landing page screenshot or mock-up to quickly identify major conversion issues. He has worked with Google, Facebook, American Express, CBS, Sony Music, Universal Studios, Verizon Wireless, Texas Instruments, and Coach.

Tim is a highly-regarded presenter at SES, eMetrics, PPC Summit, Affiliate Summit, PubCon, Affiliate Conference, and LeadsCon. He is the chairperson of ConversionConference.com, the first conference focused on improving online conversions. A columnist for several publications including ClickZ, he's host of the weekly Landing Page Optimization show and podcast on WebmasterRadio.fm. His columns can be found in the Search Engine Watch archive.

He received his B.S. and M.S. during his Ph.D. studies at UC San Diego. Tim is the author of the bestselling book, "Landing Page Optimization."

Connect with Tim on Google+.

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...