What a Winning Click-Through Landing Page Looks Like

Final month we held a contest on the weblog, difficult entrepreneurs to create a click-through touchdown web page to advertise our newest e-book, Attention-Driven Design: 23 Visual Principles for Designing More Persuasive Landing Pages.

It was an experiment to find out which design ideas and “greatest practices” make for a seductive click-through touchdown web page. However as an alternative of getting a panel of judges to wax poetic about which touchdown pages they thought have been nice, we thought we’d publish the pages and let guests determine: which of them would really get folks to click on by means of after which convert?

Earlier than we speak concerning the successful pages and what made them so darn titillating, a fast evaluation session. Let’s check out how click-through touchdown pages differ from their lead gen touchdown web page cousins — each in kind and performance.

WTF is a click-through touchdown web page?

Click on-through touchdown pages do precisely what it says on the tin. In contrast to lead gen touchdown pages, they don’t have a kind on the web page asking folks to choose in. As a substitute, they’ve a purpose of convincing guests to click on by means of to a different web page (the place the precise conversion occurs).

They’re steadily utilized in ecommerce funnels to explain a product intimately and “heat up” guests for his or her buying determination. They fight the cognitive dissonance that’s created when somebody clicks on an advert for a particular product and so they wind up on a seemingly irrelevant generic product web page.

In Consideration-Pushed Design e-book creator Oli Gardner’s phrases:

Click on-through pages are an effective way to create an interstitial expertise that confirms the intent of your advert in a easy approach, sustaining the eye of your customer, after which guides them by means of the buying determination earlier than taking them additional down the funnel.

Easy sufficient, yeah? However if you happen to’re gonna use a click-through touchdown web page to “heat up” guests and reassure them that they’ve made a “good click on,” you additionally wanna ensure you’ve optimized the heck out of it.

With out additional ado, let’s have a look at our successful click-through touchdown pages — those that result in essentially the most e-book downloads  — and see which Attention-Driven Design ideas they employed to get folks to transform.

4th place winner: Conversion Lab

Conversion Lab’s landing page does a wonderful job of teasing guests with sneak previews of the e-book above the fold:

Somewhat decrease on the web page, for prospects who need a little more information to be persuaded, they embody a SlideShare preview of the core ideas from the e-book.

Even with all the extra info, the web page is very easy on the eyes. Right here’s how Oli Gardner put it after we requested him concerning the web page:

The knowledge hierarchy is powerful with a pleasant linear top-to-bottom studying expertise and properly balanced font sizes for straightforward studying. Total, a really clear design – which I’ve come to count on from Conversion Lab.

Certainly. Congrats on putting 4th, Conversion Lab!

third place winner: Tim Ruof

What actually stands out about Tim’s page is his beneficiant use of directional cues to information your eye down the web page.

One minor quibble: Oli identified that the mannequin is trying downwards — underneath the CTA — so there’s no profit to the angle of her gaze.

Nonetheless, that is considerably counterbalanced by the arrow pointing to the decision to motion button, together with the opposite arrows on the web page. Oli elaborated:

I like how the continuation arrows are used to information you thru the studying expertise. It could not seem to be a giant deal, however this actually helps each the visible and knowledge hierarchy.

Tim additionally acquired artful along with his social proof, pulling precise quotes from Twitter as testimonials:

Oli recommended a few enhancements to check:

I’d take away the hyperlinks to the tweets although and maybe minimize and paste the precise tweet so it seems to be precisely like Twitter.

We’ll forgive Tim for upsetting the attention ratio of the web page with these exterior hyperlinks, as a result of he blew us away by creating Twitter playing cards to drive site visitors to his web page:

Discuss going the additional mile. Superior job, Tim.

2nd place winner: Winsome Writing

Winsome Writing’s landing page is shorter than a lot of the different entries we acquired, however that doesn’t imply it’s not candy. Like our earlier entry, they use screenshots and a SlideShare preview to tease guests with the juicy content material:

Curiously, they haven’t actually included any social proof, and selected to not lead with a powerful hero shot of the e-book itself. Oli recommended that this is likely to be factor to check:

This designer selected to maintain the mannequin hero shot. It’s fascinating as to what influence it could have. Because it’s an e-book obtain web page, it could possibly be posited that the mannequin might confuse issues and she or he does look kinda unhappy.

Oli additionally congratulated Winsome Writing for together with a daring CTA button which contrasts properly with the remainder of the web page.

Total, a strong effort that secured Winsome Writing second place within the contest. Pat yourselves on the again!

1st place winner: Sherif Makhlouf

Drum roll please…

…This landing page scored creator Sherif Makhlouf an all-expenses-paid journey to Vancouver for Call to Action Conference 2016!

As Oli identified, it’s fairly clear that Sherif learn the e-book — he employed a number of Consideration-Pushed Design ideas. There’s Path: the way in which the mannequin’s gaze directs your consideration to the CTA, and the Distinction of the large pink button. Lastly, the third web page part makes use of Continuation successfully, serving to to attract your eye down the web page.

However Oli additionally praised Sherif for using different basic touchdown web page greatest practices. For starters, have a look at how decked out the social proof part of the web page is:

After which there’s the counter by the CTA button, which shows what number of copies have been downloaded:

However Oli particularly appreciated the way in which Sherif employed a wholesome dose of scarcity and urgency:

The usage of “solely 27 free copies left” is a pleasant contact, not mentioning worth however insinuating that it’ll turn out to be a paid e-book quickly.

It’s price mentioning that that is in reality false shortage — the e-book will stay free without end, we swear! However that this web page is the successful web page speaks volumes concerning the psychological energy of those ways.

Earlier than you run off and make use of false shortage by yourself web page, step again and do not forget that, “With nice energy comes nice duty.” As a result of if prospects suspect that you simply’re attempting to trick them, you would lose them without end…

Create a successful touchdown web page of your personal

Due to everybody who submitted touchdown pages to our Consideration-Pushed Design contest — you guys by no means stop to amaze us.

And particular congrats to Sherif, you sneaky-but-super-smart marketer! We will’t wait to satisfy you at Call to Action Conference 2016.
Wish to create a touchdown web page that replicates the success of Sherif’s? Try Oli’s newest e-book by coming into your electronic mail beneath…