Button color is irrelevant. Button contrast is what matters.
What is Conversion Centered Design (CCD)?
CCD is a discipline targeted at designing experiences that achieve a single business goal. It guides the visitor toward completing one specific action, using persuasive design and psychological triggers as devices to increase conversions.
Landing pages are so effective because they only present one action for a visitor to complete. They remove unnecessary distractions and focus visitors on a single, targeted conversion goal. This intense focus is why landing pages sit at the heart of the concepts of Conversion Centered Design.
4 Principles of Design
The 4 primary design principles that we’re going to apply to your landing page are:
- Encapsulation
- Color and Contrast
- Directional Cues
- White Space
I’ll demonstrate these principles through the use of design concepts, real-world experiments and how to apply them practically within a landing page.
The presentation below illustrates the meaning of each of the 7 principles of Conversion Centered Design:
Design principle 1 – encapsulation
This is a classic technique used to hijack your visitors eyes and create a tunnel vision effect. You can think of it like creating a window on your landing page where your CTA is the view.
Here a circular arch creates a frame for the feature in the distance, preventing your eye from wandering elsewhere in the photo.
Conceptual example
Landing page example
Use strong dynamic shapes to constrain your points of interest.
Design principle 2 – contrast and color
One of the best ways to make important elements stand out on your page is to use contrast. If you’ve been in a marketing role for a while, you’ll have likely heard the ongoing argument over button color. Is red better than green? Should I use a blue button? The answer requires some brutal honesty.
For the most part, button color is completely irrelevant.
What really matters is whether or not it stands out compared to it’s surrounding elements. An easy way to look at it is to look for a dominant color (or hue) on your page. Let’s say the page is primarily green. In this instance, choosing a red or orange button is probably a smart idea.
The photo below demonstrates how much a contrasting color can stand out. To apply this to a landing page, you’d have a primarily green hued page design, with a contrasting orange button.
Conceptual example
Landing page example
This landing page makes good use of contrast to give the top third of the page the most dominance. It makes you more inclined to spend the majority of your time digesting the content within the blue area, which contains most of what you need to know to make a conversion decision.
Use a single color hue (with a variety of tones) for your entire landing page, except for the CTA. Make your CTA jump off the page.
Design principle 3 – directional cues
Directional cues are visual indicators that point to the focal area of your landing pages. They help to guide your visitors towards your conversion goal, making the purpose of your page obvious as soon as they arrive. Arrows, pathways and lines of sight are all types of directional cues.
Arrows
As directional cues, arrows are about as subtle as a punch in the face, which is why they work so well. With so little time on your page, visually guiding the user to the checkout is a smart move.
Arrows let you say, “Ignore everything else and pay attention to this please.”
Conceptual Example
Landing Page Example
Line of sight – The suggestive power of the eye
As humans, we’re all programmed to understand the purpose and use of eyes. And we tend to follow the gaze of others out of curiosity. In an eye tracking heat map study, a baby was used to see what effect it would have on visitor attention. The first example shows how much attention is driven toward the baby’s face.
In the second example, the power of suggestion is in full effect, as the baby still gets lots of attention, but the area he is looking at receives a lot more than the first example.
Landing Page Example
The landing page below illustrates the use of line of sight. The couple looking to the left direct your eyes to the form on the left which is the desired interaction point of the page.
Call attention to the most important page elements by using strategically placed and angled arrows. Tie a sequence of arrows together to define a path for the visitor to follow, ending at your CTA.
Design principle 4 – white space
White space (or blank space), is an area of emptiness surrounding an area of importance. The reason we say blank space is that the color of the space isn’t important.
The purpose is to use simple spatial positioning to allow your call to action (CTA) to stand out from it’s surroundings and give your eye only one thing to focus on.
To quote Peep Laja from ConversionXL.com:
White space helps you emphasize what matters
The more space that is left unused, the more attention is driven to stuff that’s on the page.
In the example below, the muted tones of the meadow drive your eye to the antelope positioned in the corner.
Landing pages illustrating white space
In our first example it’s virtually impossible to infer the conversion goal of the page. Your eyes are forced to jump all over, and you can assume the next destination for your visitors’ eyes will be the back button.
In the next example your eyes are afforded the freedom to move around the different page elements with ease.
(Landing page source – Unbounce template)
Give your page elements breathing room to produce a calming effect and allow your CTA to stand out from the rest of your design.
How to use these design principles to build an effective lead generation form
You’re probably wondering how to apply these concepts to a landing page. To illustrate how they work, let’s walk through the evolution of a lead gen form using encapsulation, color contrast and directional cues to transform a bland hidden form into a more effective designed form.
Notice how the form stands out more in the version on the right, due to an encapsulation container. This is most often done simply by placing the form in a containing box to provide a contrasting background.
Now the form is really starting to pop. Notice how there are two primary areas of the form that are brought forward by the use of color and contrast: the form header and the CTA.
Using the same contrasting color for both provides a sense of correlation. The header should contain pertinent information describing what you are getting by submitting the form and the benefit of doing so. For example: “Download our free ebook to master the art of conversion.”
Using the same color as the CTA will naturally allow your eye to follow the trail down to the CTA after reading the contents of the header.
Notice the use of two arrows in the example above. These arrows add extra visual persuasion to the form; the first arrow moves your attention from the introductory copy to the form header (which should contain the description of the purpose of your form). A second arrow is used in the form header to point down to the CTA.
From: http://thelandingpagecourse.com/landing-page-design-principles-for-conversion/
Landing Page Design Principles
没有评论:
发表评论