Great post about landing page optimization by Oli Gardner, Co-Founder & Director of Inbound Marketing at Unbounce.com, over at SEOMoz:
http://www.seomoz.org/blog/the-12step-landing-page-rehab-program-infographic-10488
Includes a few handy info-graphics:
Study the 12-step infographic to see where each step in the program should be applied to the conversion funnel.
Here’s a condensed list of the key points:
STEP 1 – Use a Separate Landing Page for each Inbound Traffic Source
STEP 2 – A/B Test Your Landing Pages
STEP 3 – Match Your Landing Page Message to the Upstream Ad
STEP 4 – Context of Use
STEP 5 – Use Videos to Increase Engagement & Conversions
STEP 6 – Use Directional Cues to Lead the Way
Imagine an airport without the expertly placed wayfinding signs and maps – it would be chaos. If you’ve visited the emergency room at a hospital, you might be familiar with the colored lines they paint on the floor to take you to different departments – follow the yellow brick road. These are examples of directional cues, which can be broken down into explicit and implicit (both of those were explicit).
Directional cues are used on landing pages to guide the visitor to your call to action. Here are some examples of ways to do this:
- Graphical arrows: Take a look at the header area of the lead gen form on this landing page template. When you add a lead gen form to your page, the call to action button is often pushed below the fold. Here, the arrow lets you know that the point of interaction can be found directly below that area.
- Whitespace: Don’t cramp the style of your CTA. Resist the temptation to fill in every pixel of your page, instead give your buttons plenty of room to breathe.
- Color: Classic colors for buttons include blue (link color) and orange. At the end of the day, the most important thing is that it stands out clearly from the rest of the page (e.g. don’t make your button blue if your page has a blue background).
- Contrast: This is essentially the same as the point about color (but thinking in terms of black and white or tonal range).
- Eye direction: It’s been shown that when using photos of people (or animals), that you can improve conversion by having them look at your intended call to action. It makes sense. If you see someone looking up at the sky while you’re walking down the street, the chances are you’ll follow their gaze in case you’re missing something important.
- Interruption: Surprise is an excellent way to get someone’s attention. Breaking established design boundaries gives reason to pause and observe. Boo!
- Encapsulation: Think of binoculars or the viewfinder on a camera and how they focus your vision. You can construct similar experiences using shapes and contrast. Think about archways, holes and windows for inspiration.
- Pathways: Roads or the earlier example from the hospital floor are examples of pathways. You can use background design elements (lines with arrows generally) to walk someone round your page in the order you prefer.
For a more exhaustive study of the effects of directional cues, I wrote a post that uses photography to illustrate each of the methods above: Designing for Conversion – 8 Visual Design Techniques to Focus Attention on Your Landing Pages.
STEP 7 – Find the Optimal Balance of Data vs. Conversion Rate
STEP 8 – Be Honest About Your Writing & Edit Ruthlessly
STEP 9 – Make it Easy to Share
STEP 10 – Leverage Social Proof & Trust Devices
STEP 11 – One Page, One Purpose
STEP 12 – Post-Conversion Marketing
