Web Design : Smooth Landings

Double your sign-up conversion rates with better page layout

Everyone wants to find the silver bullet.

I am often asked what should be on the perfect registration or sign-up landing page. Of course, the answer is always the same: "It depends." So you should test different approaches on your specific audience. No single prescription will fit all circumstances.

However, there are a number of best practices that apply to sign-up pages:

• Clear page headline—Each page on a Web site (and each stand-alone landing page) must be about something. It must have a clear purpose, and the purpose must be spelled out in a headline that spans the top of the page.

• Well-defined "action block"—There should be a single place for the visitor to interact with your page, and that place should be visually called out with a subtle background color. This action block should draw the eye toward the desired activity on the page. The rest of the page should be plain and visually restrained.

• Subheadline in your action block—The purpose of the action block must be clearly stated. What are you asking the visitor to do in the action block? What specifically is going to happen within it?

• Clear call to action—Within your action block, you must have a single, clear call to action. The call to action must describe what happens next and what the visitor can expect when he is done interacting with the action block. It should not be general or generic like the "Continue" or "Submit" text that is commonly used on Web sites. The wording of the call to action must be from the visitor's viewpoint, not your company's. To put yourself in the visitor's shoes, try using button text that completes the following sentence: "I want to …"

• Well-designed forms—For most companies, very little thought is given to the details of the sign-up form. In fact, designing effective forms is a very subtle art and can have a dramatic effect on conversions. The form information should be grouped into clear, high-level sections to help the visitor understand her purpose and information flow.

Unnecessary fields should be removed from the form. For every field ask yourself, "Is this information absolutely necessary to complete the current transaction?" If you cannot answer "yes" to this question, the field should not be on the form. Don't leave a "nice to have" field on your form or collect information that can be gathered later in your interactions with visitors (perhaps even on subsequent visits).

• Page purpose tied to user intent—Your visitor did not just materialize out of thin air. He came from somewhere. This "somewhere" could have been another page on your site, a search engine result, a link in a blog post or a banner ad. Regardless of the origin, some expectation had undoubtedly been set. It is critical to match the visitor's upstream experience and intent in order to maximize the conversion rate. To do this, align your page with the messaging and promises made upstream, and create a clear information scent trail that makes the visitor feel that he is making progress toward his ultimate goal.

• Proper use of credibility and trust symbols—Unless you have a trusted, worldwide brand working behind you, you must overcome the fears and anxieties that the visitor brings with him. Before he will transact with you, he must know that you are trustworthy and credible. Several techniques can be used to do this—testimonials and other "social proof," client or partner company logos, media mentions, and trust seals, such as safe shopping indicators or guarantees that you offer. Although trust symbols are important, their role is supporting, and they should not become an unnecessary distraction that competes with the primary call to action.

Mr. Skin Case Study
Our client, Mr. Skin, recently had a fantastic outcome in a landing page test. The Web site is a comprehensive resource that reviews and catalogs all sexy and nude scenes by actresses in mainstream movies and television. The goal of the test was to increase the conversion of people who started the checkout process after visiting at least one actress page on the Web site.

Let's revisit the best practices and see how they were specifically applied to achieve this result:

• Clear page headline—The original purple title was squeezed into the right corner above the main box of the page and read, "INSTANT ACCESS! Secure & Discreet Billing." The new page title was centered in the body of the page and provided a clear purpose for the page: "Instant Access to Jessica Simpson's Sexy Movie Pics & Videos!" Note that the actress's name was dynamically inserted into the page based on the last actress page visited by the visitor.

• Well-defined action block—The original page had a white background throughout and was divided into two equal-width columns that made it difficult to identify which part of the page was the important one. The new design widens the left column and clearly creates a light-blue action block.

• Subheadline in your action block—The original design did not have a clear subheadline in the area of the form. The "Choose offer:" text is really part of the original form. The new action block has a clear "Secure Checkout" subheadline to plainly spell out its purpose.

• Clear call to action—The original page used an almost-invisible button that was difficult to see against the light gray color of the page. The "Join Now" text was from the perspective of the company and did not focus on any kind of benefit to the visitor. The new page has a bright green button that is distinct and stands out as the only button on the page. The "Get Access" text emphasizes the immediate gratification the visitor will experience after he joins.

• Well-designed forms—The original form had a confusing "Choose offer" top section with detailed and cluttered explanations for each sign-up plan option. The new form offers a more accessible "Select Plan" section with short labels for each choice and a single "Help me choose" link for more detailed explanations of each plan.

• Page purpose tied to user intent—The original form was a generic and static page that did not recognize the context from which the visitor just arrived. The new page is clearly focused on the visitor's intent. Since he just arrived from a specific actress page, the registration page is personalized for that actress in both the title and the block of images near the top of the page. This creates a strong tie to the visitor's desire to see more content about that specific person.

• Proper use of credibility and trust symbols—The original page used media mentions on the page to create trust. However, they were conspicuously displayed in a prominent place on the page in all of their full-color glory. The new version resizes all of the media mentions for comparable impact, desaturates their colors and moves them to the supporting column on the right in order to focus more on the call to action.

The new page performed 96 percent better than the original. This stunning result was probably not due to a single change, but rather to a combination of all best practices tactics resulting in a much more compelling experience for the visitor.

Tim Ash is the chief executive officer of San Diego-based landing page optimization firm SiteTuners and author of "Landing Page Optimization." Ash can be reached at (619) 223-8020.

• MORE ON
• ONLINE MARKETING