Make your visitors pay attention to your landing page!!!
I’m going to take a different approach to this post and use photography to illustrate some principles of design.
Understanding these fundamental concepts will help you grab your visitors attention and direct them to your intended conversion goal.
The most important element of any landing page is the conversion goal. Similarly, the most important aspect of your landing page design is to focus the visitor’s attention on that conversion area.
There are multiple ways to control the attention of your visitors; you can use bold, catchy, funny or controversial copy or beautiful typographic design, you can have a video to allow a multimedia experience, and you can use some fundamental principles of design to guide the eyes of your customers with directional cues.
In this post I’ll break this into 2 main categories:
Some of these principles can be utilized by using photography directly, and for the rest, the illustrative powers of a photograph should be all you need to understand the concept.
TIP: Click the photos for a closeup…
In this example, the muted tones of the meadow drive your eye to the Pronghorn positioned in the corner.
Whitespace (or more correctly “blank space”) is an area of more or less nothing surrounding an area of importance. The reason I say blank space is that the color of the space isn’t important.
The purpose is to use simple spacial 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.
Landing page tip: Give your CTA or lead gen form some breathing room to allow it to stand out from the rest of your design.
Color can be used to create an emotional response from your visitors. Orange for example is known to generate positive feelings and as such is a great choice for the color of your CTA. (You can also consider the positive affect of Green for go, and Blue as the classic click-me link colour).
The color here is so extreme that you can't help but pay attention to it. This example also illustrates the contrast of color compared to the muted surrounding area.
Another important consideration is the contrasting effect of color. This idea borrows from the whitespace and contrast techniques described in points #1 and #3 in that it’s a method of “isolation via difference”.
In this first example, an “in your face” approach is used – the color is so overwhelming that you can’t help but stare at it – in this case often in disbelief as it’s a remarkable example of nature.
Landing page tip: Let your primary conversion target dominate the page.
Color and contrast
Position and color contrast are used here to move your eye towards the grasshopper. The reason is that the entire shot is a single color except for the subject or interest.
Landing page tip: Use a single color (with a variety of tones) for your entire landing page – except for the CTA.
Make it jump off the page.
I dare you to click on anything but the moon.
This is a fairly simple concept that applies across the color spectrum, but is most easily viewed in monochrome.
Landing page tip: The more you can make your Call To Action stand out from it’s surroundings the easier it will be to see. If you have a lot of black/grey text on a white background, then a black or white CTA won’t provide the desired contrast and you’d be better off with a colorful element. But if you have a very clean design without much detail or copy, a big black or white button can be dramatic.
Attention is focused on the primary element rising from the lake, and a secondary feature (the bush) due to the contrast with their surroundings.
This is a more subtle example that shows how contrast can be used to highlight one or two key elements of a design.
Your eye is drawn to the Tufa formation rising from the lake, and then bounces down to the bush.
Landing page tip: Test using an impactful and contrasting photo as your hero shot, and mirror the palette choice and contrast levels on your CTA to draw a parallel and guide the visitor from the emotional element to the conversion goal.
As humans we’re all programmed to understand the purpose and use of eyes, and the meaning that comes with a stare/glance/look from the eyes of someone or something else.
Here the monkey's eyes and tilted head force you to stare at the Banana
You can't help but look down from the head of this Coyote
A subtle suggestion to follow the gaze of the Elk to the flock of birds
Imagine walking down a city street. There is a single person standing looking directly up in the air. Our innate curiosity requires that we follow their gaze to see what’s happening. Turn this into a crowd of people looking in a certain direction and we behave like sheep or lemmings, blindly (?) following the implied or perceived importance of the actions of others.
In the first example, the Capuchin is looking at the Banana as if were a hand in a game of cards. Curiosity is the motivation that forces you to follow his gaze.
With eye movement comes head movement. In this shot, you are not only curious about what could be in the grass, but you are forced to look downwards with the Coyote.
You’d want your conversion target to be where he (and everyone else) is looking.
In the 3rd example, the directional cue is much more subtle, but still very clear. Your attention is first driven to the Elk in the bottom-right corner (this would be your primary headline or Unique Selling Proposition).
You then follow his gaze to the left to see what he’s looking at – arriving at the flock of birds flying over the river – which would be your CTA.
Landing page tip: Use photography of people or animals on your landing page and have them stare directly at your CTA with either the angle of their head or their eyes (in a closeup).
There’s a reason why banner blindness has helped click through rates plummet over the last few years.
Visual surprise
People have become programmed to know where the advertising is positioned on your website, enabling them to switch off (or put on blinders like a racehorse) to concentrate on the content instead.
To prevent this you need to surprise people.
In the photo shown, the person (me) is so out of place in the photo of a desert slot canyon that it makes you question it’s purpose or reality.
Landing page tip: Go a bit punk and try something radical on your landing pages.
A slight rotation gives this button difference to catch your attention.
While you don’t necessarily need to have a naked man streaking across the page – you could try something as simple as taking your Call To Action button and rotating it by 30-45 degrees to create an unexpected design shape.
Here’s a look at a button I’ll be using on the new Unbounce website next month. I purposely gave it a twist to spice things up and draw attention to it.
The river frames the central feature and traps your eyes inside
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.
In the first example a strong dark line is created by the river which helps to hold your attention in the center of the frame.
The arch forces you to pay attention to the view inside it
In the second example, a circular arch creates a frame for the feature in the distance, preventing your eye from wandering elsewhere in the photo.
Landing page tip: Use strong dynamic shapes to constrain your points of interest.
Think of the classic James Bond intro sequence where you see him inside a circular design. (Examples here).
The previous examples were all very suggestive and implied an interaction with your visitors. If you want to get a bit more instructive and literal, you can try using more explicit directional cues to point and lead the way.
Photo credit Missy Shana - MissyShana.com
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, guiding the user to the checkout is a smart move.
Arrows let you say, “ignore everything else and pay attention to this please”.
The awesome example opposite shows 3 types of cue all at once. The arrow is a directional pointer, the man opposite is then firing you right back to the guy with the arrow using his eyes, and finally the upside-down text acts as an interruption that make you stop and stare (and most likely rotate your head to figure out what it says).
I used an arrow as a directional guide on the 101LandingPageTips.com site to move attention from the main product image and headline, down to the primary conversion area – the lead gen form.
Landing page tip: Call attention to your most important page elements by using strangely placed and angled arrows. Tie a sequence of arrows together to define a path for the visitor to follow, ending at your CTA.
The road leads your eye directly to the large rock Mesa at the top of the photo. Place your CTA here.
Pathways are representations of real-world wayfinding avenues that trigger our brain into thinking we need to follow them. This example shows a long straight road, leading your eye to the large rock formation at the top of the photo. Roads are so strongly ingrained in our psyche as the path of least resistance that we naturally gravitate towards them as a transport guide.
Landing page tip: Design converging lines to draw people to your Call To Action. Triangles are the most dynamic of all shapes, and their natural tendency to point make them a special design tool (in the same way that an arrow is a more intricately designed pathway).
Note: All photos by Oli Gardner except #7 by Missy Shana.
Please comment if you find any other photos that illustrate either these or any other design principles.
And if you have sample landing pages that show them in action please share for everyone to learn from.
Cheers.
Sign up now for free and build, publish and A/B test your marketing campaigns for a higher ROI and more creative freedom than you've ever had.
Download our free white papers and reports for some bedtime conversion optimization reading.
Download our free opinionated guide to landing page conversion.
Using Twitter to enhance, promote and measure your landing page campaigns.
