IOli Gardner, Co-founder of Unbounce How to Design High- Converting Lead Gen Unbounce Co-Founder Oli Gardner has seen more landing pages than anyone on the planet. He speaks internationally about Conversion Centered Design. ATTENTION RATIO ! THE RATIO OF THINGS YOU CAN DO ON A GIVEN PAGE TO THE NUMBER OF THINGS YOU SHOULD BE DOING For marketing campaigns it should be 1:1 Attention ratio 10:1 attention ratio 1:1 +31% lift in ebook downloads AS ATTENTION RATIO GOES DOWN, CONVERSION RATES GO UP FORM-FIRST DESIGN THE ANATOMY OF A HIGH-CONVERTING LEAD GEN FORM 1 FORM HEADLINE Your form headline should introduce the “What” of your offer. What will I be getting if I interact with your form. 2 1 FORM HEADLINE SUBHEAD The subhead can be used to add a clarifying description of what the offer is, this is the first part of “Why” I should care about your offer. 3 BENEFITS BULLETS The benefits extend the “Why” in an easy to read format. 2 1 FORM HEADLINE SUBHEAD 4 A FORM (DUH) 3 BENEFITS BULLETS 5 CALL TO ACTION 4 A FORM (DUH) 3 BENEFITS BULLETS THE TRUTH AND FICTION ABOUT LEAD FORM FRICTION Where does the asterisk go? But I wasn’t invited! Should I still give you my email address? How are you going to call me without a phone number field? Looks like an opt-in box. I don’t want to opt in to not being a robot. CAPTCHAs kill conversions APOLOGETIC DESIGN ! WHEN TRADITIONAL UX RULES NEED TO BE BROKEN User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit". For Good UX Dominant button should be on the right. When thinking about conversion this is a NEGATIVE CALL TO ACTION When thinking about conversion you should REMOVE IT ENTIRELY -14% people starting the course STOP WORDS & CONVERSION ANXIETY HOW TO REDUCE CONVERSION ANXIETY Remove the anxiety of a potential auto-tweet. Adds clarity, letting you know it won’t “mobile-ize” or break your website. Reduces the “I can’t make that date/time” anxiety. Explain the time involved, to reduce “effort” anxiety. The Lead Gen conversion Checklist 10 landing page rules to live or die by 1 - ONE PAGE. ONE PURPOSE. PERIOD. 2 - design your form like nobody’s watching 3 - embrace a.d.d. 4 - fill out the form in your customers’ shoes 5 - don’t be scared of extra fields 6 - don’t be a selfish marketer say no to captchas 7 - chart your stop-and-go words 8 - mine customer testimonials to reduce anxiety 9 - a/b test your label alignment

1. Oli Gardner, Co-founder of Unbounce
How to Design High-
Converting Lead Gen
Landing Pages
February 26th, 2015

2. @thuelmadsen #KISSwebinar

3. @oligardner #KISSwebinar

4. Thue Madsen - KISSmetrics - @thuelmadsen
!
Thue is the KISSmetrics Webinar Wizard and Marketing Ops
Specialist. Before joining forces with KISSmetrics, he was a Ly
driver in SF, which is also how he ended up as a KISSmetrics
marketer. Whenever Thue is not trying to automate everything
around him, you can find him fishing and hiking in the Sierras.
Oli Gardner - Unbounce - @oligardner
!
Unbounce Co-Founder Oli Gardner has seen more landing pages
than anyone on the planet. He speaks internationally about
Conversion Centered Design. Oli spends his time mulling over
ideas like legally changing his name to "Landing Page" to garner
extra SEO love from his guest post bio and was named the "The
2015 Marketer to Watch," in the under 43 category, by his mother.

5. WATCH WEBINAR RECORDING NOW

8. the
nsamcwadlpprinciple

11. ATTENTION RATIO
163:1

12. ATTENTION RATIO
!
THE RATIO OF THINGS YOU CAN DO
ON A GIVEN PAGE TO THE NUMBER OF
THINGS YOU SHOULD BE DOING
For marketing campaigns
it should be
1:1

15. LOG IN WITH GOOGLE
Start Your Free KISSmetrics Trial

19. attention ratio
10:1
attention ratio
1:1

20. attention ratio
10:1
attention ratio
1:1
+31% lift in ebook downloads

21. AS ATTENTION RATIO
GOES DOWN,!
CONVERSION RATES
GO UP

22. what does
your form say?

26. FORM-FIRST
DESIGN

29. THE ANATOMY OF A
HIGH-CONVERTING
LEAD GEN FORM

30. 1 FORM HEADLINE
Your form headline should introduce the “What” of your offer. What will I be getting if I interact with your form.

31. 2
1 FORM HEADLINE
SUBHEAD
The subhead can be used to add a clarifying description of what the offer is, this is the first part of “Why” I
should care about your offer.
Your form headline should introduce the “What” of your offer. What will I be getting if I interact with your form.

32. 3 BENEFITS BULLETS
The benefits extend the “Why” in an easy to read format.
2
1 FORM HEADLINE
SUBHEAD
The subhead can be used to add a clarifying description of what the offer is, this is the first part of “Why” I
should care about your offer.
Your form headline should introduce the “What” of your offer. What will I be getting if I interact with your form.

33. 4 A FORM (DUH)
3 BENEFITS BULLETS
The benefits extend the “Why” in an easy to read format.
2
1 FORM HEADLINE
SUBHEAD
The subhead can be used to add a clarifying description of what the offer is, this is the first part of “Why” I
should care about your offer.
Your form headline should introduce the “What” of your offer. What will I be getting if I interact with your form.
This one’s easy. Your form goes here now that it’s purpose has been introduced.

34. 5 CALL TO ACTION
4 A FORM (DUH)
3 BENEFITS BULLETS
The benefits extend the “Why” in an easy to read format.
2
1 FORM HEADLINE
SUBHEAD
The subhead can be used to add a clarifying description of what the offer is, this is the first part of “Why” I
should care about your offer.
Your form headline should introduce the “What” of your offer. What will I be getting if I interact with your form.
This one’s easy. Your form goes here now that it’s purpose has been introduced.
Your all-important call to action that describes what will happen when you click, or reinforces
what it is you’ll be getting.

35. 5 CALL TO ACTION
4 A FORM (DUH)
3 BENEFITS BULLETS
The benefits extend the “Why” in an easy to read format.
2
1 FORM HEADLINE
SUBHEAD
The subhead can be used to add a clarifying description of what the offer is, this is the first part of “Why” I
should care about your offer.
Your form headline should introduce the “What” of your offer. What will I be getting if I interact with your form.
This one’s easy. Your form goes here now that it’s purpose has been introduced.
Your all-important call to action that describes what will happen when you click, or reinforces
what it is you’ll be getting.
6 THE CLOSER
A closer is intended to add a last minute nudge to encourage a click. It can be social proof,
urgency, a trust statement, or important details such as “Free” or “No credit card required” etc.

38. +17% increase in ebook downloads

39. A
D
D
TTENTION
RIVEN
ESIGN

41. WE’RE HITTING
ABOVE THE HEAD
RIGHT?

43. Photo credit: Oli Gardner

47. +53% increase in cellphone donations

48. THE TRUTH AND FICTION
ABOUT LEAD FORM FRICTION

49. where does the asterisk go?

50. !
But I wasn’t invited!
Should I still give you my
email address?

51. !
How are you going to call
me without a phone
number field?

52. !
So I have to call you, on the
phone, to find out what
terms and conditions
I’m agreeing to?

53. http://www.fanpop.com/clubs/disney-princess/images/36571769/title/walt-disney-fan-art-queen-elsa-photo

54. ***********************************

55. PASSWORDS MUST CONTAIN
AT LEAST SIX CHARACTERS

56. MICKEYMINNIEGOOFYPLUTOSNOWWHITEMOWGLIDUMBO

57. !
Looks like an opt-in box.
I don’t want to opt in
to not being a robot.

58. CAPTCHAs
killconversions

59. !
Enter code
!
Different image?
I thought it was a code.
!
Should I cut and paste the
“code” from that?

62. 6
!
If you were counting, you’d know that it took me
85 seconds to guess that correctly.
2Y8

64. 8%
OF MEN ARE
COLOUR BLIND

65. top aligned labels
inline labels
left aligned labels right aligned labels

66. call to action
top aligned
top aligned label
another top aligned label
!
Perceived Friction
Increases form length
which can overwhelm.
!
Actual Friction
Reduces completion times
due to vertical arrangement
of label and field.

67. call to action
left aligned
left aligned label
the final left aligned label
!
Actual Friction
Slowest to complete due to amount of side-to-side reading required.

68. call to action
right aligned label
another right aligned label
a really long right aligned label that
takes up two lines
!
Actual Friction
Poor readability with left rag text. Multi-line labels exacerbate this problem.

69. call to action
inline label
inline label
inline label
!
Perceived Friction
Reduces form length.
!
Actual Friction
Easy to forget what label was
as it disappears when inside
resulting is multiple clicks
inside and outside fields.

70. can friction be a good thing?

74. APOLOGETIC DESIGN
!
WHEN TRADITIONAL UX RULES
NEED TO BE BROKEN

75. User control and freedom
Users often choose system
functions by mistake and will need
a clearly marked "emergency exit"
to leave the unwanted state
without having to go through an
extended dialogue. Support undo
and redo.
Jakob Neilsen’s 10 Usability Heuristics (http://www.nngroup.com/articles/ten-usability-heuristics/)

76. !
WWJD?

77. !
For Good UX
Dominant button should
be on the right.

78. !
For Good UX
Dominant button should
be on the right.

79. Cancel
!
For Good UX
The subordinate action
should be a link, not a button.

80. Cancel
!
For Good UX
It should be moved
far away from the CTA.

81. !
When thinking about conversion
this is a NEGATIVE CALL TO ACTION

82. !
When thinking about conversion
you should REMOVE IT ENTIRELY

86. -14% people starting the course

87. STOP WORDS &
CONVERSION ANXIETY

88. THAT’S
MICHAEL AAGAARD
DOING THE
ALS ICE BUCKET
CHALLENGE

90. SPAM

91. UNSOLICITED

92. NASTY

93. 3RD PARTY

94. SELL

98. WE WILL NEVER
SELL YOUR EMAIL ADDRESS
TO ANY 3RD PARTY
OR SEND YOU NASTY SPAM

100. !
Your sarcastic “smiley” face makes me hate you even more.
You won’t be getting my email address.

101. Get more done.
No Gimmicks, no credit card.
+25% lift in signups
by removing the word “gimmicks”

102. HOW TO REDUCE
CONVERSION ANXIETY

104. !
Remove the anxiety
of a potential auto-tweet.

105. !
Adds clarity, letting you know it won’t
“mobile-ize” or break your website.

106. !
Reduces the “I can’t make that
date/time” anxiety.

107. !
Explain the time involved, to
reduce “effort” anxiety.

108. The Lead Gen
conversion Checklist
10 landing page rules
to live or die by

109. 1ONE PAGE.
ONE PURPOSE.
PERIOD.

110. 2design your form
like nobody’s watching

112. 3
embrace a.d.d.

113. 4fill out the form
in your customers’ shoes

114. 5don’t be scared
of extra fields

115. 6don’t be a
selfish marketer
say no to captchas

116. 7chart your
stop-and-go
words

118. 8mine customer testimonials
to reduce anxiety

119. 9a/b test
your label alignment

120. 10
NSAMCWADLP

121. Questions?
Oli Gardner
Co-founder
Unbounce
@oligardner
oli@unbounce.com
Thue Madsen
Marketing Operations Specialist
KISS metrics
@thuelmadsen
tmadsen@kissmetrics.com

122. Want to build, publish & A/B test
high-converting landing pages
without I.T.?
Get 50% of Unbounce for 3 Months
try.unbounce.com/km-webinar

123. THANK YOU
Oli Gardner
Unbounce Co-founder