UX Principles that go into Creating Optimized Landing Pages - Instapage Guide

UX Principles that go into Creating Optimized Landing Pages

Last updated on May 18, 2017

An optimized landing page is persuasive, visually appealing, easy to navigate and interact with. You can’t simply arrange page elements randomly on a layout and expect the outcome to look good and hope to get clicks.

For instance an emotionally powerful headline won’t stand a chance at converting if your font isn’t readable, nor would personalized CTA button copy do you any good if your CTA button color gets lost in the page background.

Designing a good looking page is great, but with landing page optimization it’s not just about visuals. What you need to do is take care of the user experience – this is where user experience design comes in.

What is UX Design?

UX stands for user experience, it deals with how your visitor feels about every interaction they have with your landing page once they land on it. Peter Morville, explains the facets of User Experience with the UX Honeycomb diagram:

Ux Honeycomb Diagram Example

The landing page design you create shouldn’t only look visually appealing but visitors should have a positive experience interacting with it. Having a clickable element look unclickable just because it looks ‘good’ isn’t going to get you any conversions.

Here are some of the UX principles you need to implement on your landing page.

White Space

White space or negative space is any portion of a web page that is intentionally left unmarked or empty. It is the space between different page elements, such as lines of text, paragraphs, and images. White space shouldn’t be considered wasted space, because it is left empty because it works as an active element on your landing page and makes sure that all your landing page elements look pronounced and draw your visitors’ attention toward them.

Although it’s called white space but the space doesn’t have to be white colored, in fact it can be of any color as long as it serves its function of cutting out clutter and making your landing page elements more visible.

Sendible’s landing page uses white space that isn’t white:

Sendible Landing Page Example

There are four main types of white space:

1. Micro White Space: This is the white space between smaller page elements such as the space between words and letter or an image and its caption.
2. Macro White Space: This is the space between main elements such as the headline and copy.
3. Active White Space: This is the space that’s added to the page to make it more structured.
4. Passive White Space: This kind of white space occurs naturally and isn’t added externally, such as the space around a graphic, or space between words in a sentence.

You should have white space on your page because it:

Enhances readability: When you use white space in your copy, you essentially de-clutter the text, making sure that the visitor is able to enjoy reading your copy.

Establishes visual hierarchy: Whitespace helps you dictate how your visitors should look at your page, which element they should see first and what element order should follow from there on.

Makes your landing page look upscale: Want to add a dash of sophistication to your landing page, just add in whitespace for good measure and you’re sure to transform your page’s look. When page elements aren’t squished together, they give off a sophisticated vibe.

Contrast

We’ve all heard about the A/B test results that claim that a certain color CTA button converts better than the rest, this color could be red or blue – it really doesn’t matter. Because what matters isn’t what the individual button color was on the page, what matters is how that button color contrasted with the page background to draw more attention toward it.

So, it isn’t about color at all, it is however about contrast.

Contrast refers to the state of being strikingly different from something else, typically something is juxtaposition or close association. On your landing page contrast refers to the contrasting colors you design certain elements in, mainly the CTA button so that they stand out from the rest of the page and draw attention.

When including contrast on your landing page venture back to the color wheel.

Color Wheel Diagram

Colors that lie opposite on the color wheel are complementary, which means they contrast strongly and can be used to attract visitors’ attention toward them. So, a yellow CTA button on a blue page background will stand out and get visitors to notice.

The green and blue button contrast with the black background on the Brad’s Deals landing page:

Brad's Deals Landing Page Example

The LearnVest page takes a different approach and not only has the CTA button designed in a contrasting color but also a few words on the page to make them more prominent:

Learnvest Landing Page Example

Visual Hierarchy

It’s important that your visitors look at the page the way you designed it for them, this involves arranging your landing page elements in a way that a certain visual hierarchy is achieved that influences where visitors will look first and where they’ll proceed from there.

Visual hierarchy can be achieved with the help of:

    Scale: Use different sized elements to guide user’s attention, larger elements draw more attention compared to smaller elements.
    Color: Visitor’s will be drawn more toward bold and contrasting colors.
    Contrast: Shifts in colors can be also be used to grab attention, contrasting the color of one element against the other draws focus.
    Alignment: Columns and grids can be used to create alignment between elements and make the visitor take notice.
    Proximity: You can use proximity to separate and group certain landing page elements together and apart to help distinguish between the elements.

Eye tracking studies have helped us understand where visitors focus their gaze once they arrive on a web page and how do they then proceed to look at the rest of the page. Results taken from numerous eye-tracking studies have led to the introduction of the F and Z patterns of page hierarchy that explain how visitors look at a page so you can create a page according to their natural eye movements and place the most important elements where they need to be.

The F-Pattern

The F-pattern dictates that visitors first read the page in a horizontal movement, mostly along the upper part of the content area, they then move down the page and read across a second horizontal line and finally visitors scan the left side of the content in a vertical movement.

This is what the movement looks like:

F Pattern Movement Example

Designing your landing page element so that they fall into this particular visual order ensures that you get them to go through your page and click the CTA button. The F-pattern usually works for pages that are content heavy.

The Z-pattern

On pages that don’t have a lot content on them, the visitors eye movement resembles the pattern of the letter Z. The Z-pattern eye movement is most suited to most landing pages because the pages have one main takeaway which is the call to action button.

You can use the visual information from the Z-pattern to arrange elements in an order that appeals to the visitor.

The Exact Data landing page takes a cue from the Z-pattern and places the headline and the CTA button where the visitor is sure to take notice.

Exact data landing page z-pattern

Using these User Experience principles on your landing pages ensures that your landing page doesn’t only look pretty but also provides visitors with the best experience, where they can interact with the page in the way that you want them to.