Presentation given by Oli Gardner, co-founder of Unbounce, as part of Full Stack Marketing at the Turing Festival, 21 August 2015.

1. Background image source: http://think0.deviantart.com/art/Scotland-Grungy-Flag-10919314
The
Four Corners
of Conversion
interaction
Psychology
designcopy
by @Oligardner

2. Edinburgh walking tours
Edinburgh Walking Tours
www.viator.com/edinburgh
24/7 Live Support · Verified Reviews &
Photos · Low Price Guarantee

7. Western F#cking Europe

8. Western F#cking Europe

11. interaction
Psychology
designcopy 1

12. THE COPYWRITERR
e
n
t
o
n

13. COPY

14. THECOPYELEMENTS
PRIMARY HEADLINE CLOSERS PRIVACY STATEMENTS
NAVIGATION PRIMARY SUBHEAD ERROR MESSAGES
IMAGE ANNOTATIONS FORM FIELD LABELS SECTION
SUBHEADS FEATURES BENEFITS VIDEO ANNOTATIONS
TESTIMONIALS CALLS TO ACTION FOOTER TAGLINES
SUCCESS MESSAGES

15. INFORMATION HIERARCHY
Photo: http://animal-kid.com/silverback-gorilla-muscles.html
copy informs design
not the other way round

17. Wasting Time With CRO?
Run smarter tests, get results faster, and find bigger wins with Qualaroo.

18. Definitely not your Everyday Product Demo
See How HubSpot Can Help You Grow Traffic, Leads and Sales

19. What do people think you do
when they arrive on your page?
Find out with a 5-second test

21. What does the product do?
0% got it right

22. Definitely not your Everyday Product Demo
See How We Can Help You Grow Traffic, Leads and Sales
See How We Can Help You Grow Traffic, Leads and Sales
Definitely not your Everyday Product Demo
flip the headline
and subhead

23. What does the product do?
60% got it right

24. flip your headline
P
R
O
T
I
P
Reverse the order of
your headline and
subhead to uncover
extra clarity.
@oligardner #fullstack15

26. Scuse me while I kiss this guy
- Jimi Hendrix

27. There’s a bathroom on the right
- CCR

28. Sparing his wife from his warm sausage tea
- Queen

29. Hold me closer Tony Danza
- Elton John

30. Hold me close and tie me down sir
- Elton John

31. It doesn't make a difference
if we're naked or not
- Bon Jovi

32. How do I get you a loan
- Heart

33. It’s a death row hard-on two minutes too late
- Alanis Morissette

34. COME ON OLI
DON’T LEAVE US HANGING!

35. - Alanis Morissette
It’s like ray-ee-aiiiiiiiiiiin

36. “They mis-
underestimated
me.”

37. VOICE OF CUSTOMER
P
R
O
T
I
P
To overcome clarity
problems. Ask your
customers to write
your headline for you.
@oligardner #fullstack15

38. THE most persuasive word
in the english language?

40. 11
16.97%
Average Conversion Rate by Occurrences of the Word “Because”
0
10.86%
1
7.31%
4
4.4%
8
11.41%
Conversion
Rate
Data pulled form Unbounce database - low sample size used for humour only

41. interaction
Psychology
designcopy
2

42. THE DESIGNERS
P
U
D

43. DESIGN

44. PROXIMITY
DISTRACTION
DISTRACTION
DISTRACTION
DISTRACTION
DISTRACTION
DISTRACTION
ANOMALY
AFFORDANCE
ALIGNMENT CoNsIsTeNcY
CONTINUATION……
CONTRAST
DIRECTION >>
DOMINANCE
ENCAPSULATION
HIGHLIGHTING
INTERRUPTION
MOTION
NESTING
NESTING
NESTING
NESTING
NESTING
NESTING
PERSPECTIVE
REPETITION
REPETITION
REPETITION
SIZE
VISUALHIERARCHY
W H I T E S P A C E
OVERLAPPING
SYMMETRY SYMMETRY
GROUPINGGROUPING
GROUPINGGROUPING
GROUPINGGROUPING
GROUPINGGROUPING
23 PRINCIPLES OF
ATTENTION-DRIVEN DESIGN

45. DISTRACTION
ATTENTION-DRIVEN DESIGN PRINCIPLE#1

48. ATTENTION
RATIO 82:1

49. ATTENTION
RATIO 82:1
the ratio of the number of
things you can do on a page
to the number of things you
should be doing

50. best 24hr plumbers in Edinburgh
Plumber Edinburgh
www.patrickmunroedinburgh.co.uk/
0131 610 0113
From Repairs To Installations, Call
Us For A Competitive Quote Today.

53. What service does this company offer?
30% got it right

56. What service does this company offer?
40% got it right

60. What service does this company offer?
80% got it right

61. why does that page work better?

63. the nsamcwadlp
principle
P
R
O
T
I
P
Never. Start. A.
Marketing. Campaign.
Without. A. Dedicated.
Landing. Page.
@oligardner #fullstack15

64. 1
13.94%
2
12.11%
3
10.56%
4
9.09%
5
9.42%
6
8.79%
7
8.27%
8
9.76%
9
7.56%
10
5.59%
Conversion Rate vs. Number of Links on the Page
CONVERSION
RATE
Data pulled from Unbounce landing page database - Pages with forms on them - excluding links for terms & conditions and privacy policy
# OF
LINKS

65. distraction is the
enemy of conversion
P
R
O
T
I
P
As Attention Ratio goes
down (closer to 1:1)
conversion rates go up.
@oligardner #fullstack15

66. ANOMALY
ATTENTION-DRIVEN DESIGN PRINCIPLE#13

67. ALL I HAD TO SAY WAS
THE WORD “SHIT”

72. PROXIMITY
ATTENTION-DRIVEN DESIGN PRINCIPLE#4
ELEMENTS IN CLOSE PROXIMITY TO ONE ANOTHER
ARE PERCEIVED TO HAVE A RELATIONSHIP

75. -14% people starting the course
*TEST RESULTS FROM THE UNBOUNCE APP

77. ALWAYS TEST CLOSERS
A winning smile, amirite?

78. ALWAYS TEST CLOSERS
my face lost by -14%

79. protect your cTaP
R
O
T
I
P
Anything placed in close
proximity to your call to
action can be a threat to
your conversion rates –
and must be tested.
@oligardner #fullstack15

80. interaction
Psychology
designcopy
3

81. INTERACTION

82. PAGEINTERACTIONS
VIDEO POPUP SURVEYS CAROUSELS
BUTTONS STICKY NAVIGATIONEXIT
POPUPS NAVIGATION HELLOBAR
ENTRY POPUPS CONFIRMATION
PAGES FORM FIELDS MULTI-STEP
FORMS BREADCRUMBS SCROLL
CONTROL KEYBOARD SHORTCUTS
SOCIAL SHARING SLIDESHOWS
INTERACTIVEELEMENTS POINTSOFFRICTION
VIDEO AUTOPLAY CAROUSEL
AUTOPLAY AFFORDANCE ANCHOR
NAVIGATION JUMPS OK/CANCEL EXIT
BLOCKING FORM FIELDS REQUIRED
FIELDS CAPTCHAS NON-APPLICABLE
OPTIONS CAROUSEL NAVIGATION
UNDERLINED TEXT

83. mr INTERACTionB
E
G
B
I
E

84. - Oli gardner
Q
U
O
T
E
“Heat maps were created
for the sole purpose of
illuminating the horrible
bullshit we expect our
visitors to interact with.”
@oligardner #fullstack15

85. INTERACTION TRENDS THAT SHOULD BE KILLED WITH FIRE*
*and/or tested

86. 1. SCROLL “ASSIST”

87. 2. CAROUSELS

88. Source: http://erikrunyon.com/2013/01/carousel-stats/

89. Does Siemens have any special deals on washing machines?
Source: http://www.nngroup.com/articles/auto-forwarding/

90. trend carefullyP
R
O
T
I
P
Theme designers are
breaking the internet. Don’t
implement new interaction
models without watching
how it impacts your visitors.
@oligardner #fullstack15

91. INTERACTIONS
SHOULD BE DELIGHTFUL

92. is this delightful?

94. interaction
Psychology
designcopy 4

95. THE PSYCHOLOGISTS
I
C
K
B
O
Y

96. PSYCHOLOGY

97. INFLUENCE
Reciprocity
Commitment
Social Proof
Liking
Authority
Scarcity
PERSUASION
Urgency
Framing
Anchoring
Exclusivity
Priming
Primacy
Recency
FOMO
MANIPULATION
Pos/Neg Reinforcement
Deception
Bait and Switch
Denial
Entrapment
Exaggeration
Lying
Good Cop/Bad Cop
Trojan Horse

100. 2 Interruption
1 Priming
3 Modal popup
6 Good cop/bad cop
5 Negativity bias
4 Urgency
COPY DESIGN
INTERACTION PSYCHOLOGY

101. can popups be delightful?

103. The Four Corners Applied to VIDEO

104. Would you watch this video?

105. How about now?
Unbounce co-founder passes out critiquing landing pages!
0:08 seconds >>

106. Only 10-20% of people
will actually watch
your video
VideoTruths1

107. Video Copy
Captions
Play instructions
COPY

108. caption your visuals
P
R
O
T
I
P
Captions under images/videos are
read on average 300%* more than
the body copy itself. Treat them
like headlines and make them so
compelling you’d want to read the
rest of the page.
@oligardner #fullstack15
*http://bit.ly/1KjOCmG

109. Your landing page copy should
communicate your offer without
the video being played
VideoTruths2

110. Video Design
Position on page
Video size
Poster frame
Play button
DESIGN

111. Data from Wistia

112. The fold still matters when it
comes to video engagement
VideoTruths3

113. Data from Wistia

114. Size matters. Approximately
540px by 400px is a good size.
VideoTruths4

115. Video Interaction
Autoplay
Call to action position (time)
INTERACTION

116. VideoTruths
Turn autoplay on when linking
from a video thumbnail.
5

117. Form CTA Conversion Rate by % Through Video
Data from Wistia

118. VideoTruths
Place lead gen forms 14% of
the way into your video for
optimal conversions
6

119. INTERACTION
Video Psychology
How much do you believe
the person you’re listening to?
PSYCHOLOGY

120. Academics
& Experts
67%
Who should you trust to be in your video?
Government
37%
CEOs
43%
Our Tribes
62%
Technical
Experts
66%
TRUST
Stats taken from Captivology - Ben Parr

121. Proximity2
3 Direction
4 Encapsulation
1 Caption
8 Length of video
6 Contrast
7 Rollover state
5 Context of use
COPY DESIGN
INTERACTION PSYCHOLOGY

122. The Four Corners Applied to FORMS

123. how many form fields should I use

124. 1
20.97%
2
18.84%
3
10.45%
4
7.20%
5
7.93%
6
7.41%
7
7.86%
8
10.21%
9
10.52%
10
13.11%
Conversion Rate vs. Number of Form Fields
CONVERSION
RATE
Data pulled from Unbounce landing page database
# OF
FORM
FIELDS

125. add some fieldsP
R
O
T
I
P
If you’re going to use 4 form
fields, you may as well try
using 7. The person dealing
with your leads will thank
you.
@oligardner #fullstack15

126. so, can friction be a good thing?

134. DESIGN FOR IDEAL
P
R
O
T
I
P
Don’t design to acquire
customers. Design to
acquire your ideal
customers.
@oligardner #fullstack15

135. how can we apply this to marketing?

136. Form Copy
Form headline
Form field labels
Privacy statements
Call to action
COPY

137. form field labels

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

139. ***********************************

140. PASSWORDS MUST CONTAIN
AT LEAST SIX CHARACTERS

141. MICKEYMINNIEGOOFYPLUTOSNOWWHITEMOWGLIDUMBO

143. Email Address
START THE COURSE NOW
Your Best Email Address
START THE COURSE NOW
Business Email Address
START THE COURSE NOW
41%
47%
65% +59%
+15%

144. call to action copy

145. Get Your Free Ebook

146. Get My Free Ebook

147. Your
8.4%
Conversion Rate of CTAs Containing the Word…
Free
8.45%
My
11.48%
Get
8.6%
Click
12.82%
CONVERSION
RATE
Data pulled from Unbounce landing page database
+37% +49%

148. Form Design
Containers
Form fields
Label alignment
Button design
Page position
DESIGN

149. 0%
6.64%
10%
9.04
20%
11.23%
30%
14.9%
40%
17.87%
50%
13.23%
60%
9.7%
70%
11.25
80%
5.55%
90%
8.78%
Conversion Rate vs. % Form Distance From Top of Page
CONVERSION
RATE
Data pulled from Unbounce landing page database
%
DOWN
THE PAGE

151. Form Interaction
Captchas
Inline field labels
Error/success messages
INTERACTION

152. captchas

153. Forbidden?

156. Security Check
Enter both words below, separated by a space.
Can’t read the words below? Try different words or an audio captcha.
Submit Cancel
Sick of these? Verify your account.
Text in the box:
What’s this?
Submit
Submit
Captchas are bad because
they put your brand experience in the
hands of a 3rd party

158. 6
It took me 85 seconds to enter that correctly.
2Y8

159. 8%
OF MEN ARE
COLOUR BLIND

160. can a captcha be delightful?

163. inline field labels

165. Click Me Now
Inline field labels
are bad
because…
__ short-term memory
__ tabbing hides next label
__ multi-tasking distractions
__ hard to double check before submit
__ don’t get me started on mobile

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

168. INTERACTION
Form Psychology
Trust & security
Cognitive strain
PSYCHOLOGY

170. COGNITIVESTRAIN
PSYCHOLOGY INFLUENCINGFACTOR#11

172. no applicable options

174. STOP words

178. IF
they’re about to buy
P
R
O
T
I
P
Get out of their way and
don’t interrupt their
momentum with negative
language.
@oligardner #fullstack15

179. TRUST&SECURITY
PSYCHOLOGY INFLUENCINGFACTOR#6

180. trust seal lost by -12%

181. creating an optimal form

182. FORM-FIRST DESIGN
P
R
O
T
I
P
Improve clarity and reduce
cognitive strain by designing
your form as if it’s the only
thing on the page.
@oligardner #fullstack15

183. Only 3 consultations remaining this month
Benefits2
3 Label copy for ideal customer
4 Descriptive CTA
1 Form headline
7 Proximity
9 Top-aligned label alignment
6 Contrast
5 Encapsulation
10 Scarcity
Click to Get My CRO Consultation
Get a Free CRO Consultation
Get a free 3hr consultation with a
conversion specialist worth $1500.
Business Email Address
Your Marketing budget
Full Name
We will email you back within 24 hours
11 Expectations set
COPY DESIGN
INTERACTION PSYCHOLOGY
8 No captcha

184. what if
we combined
all the things?

185. This is the Headline

186. This is the Headline
This is the subhead full of clarity

187. This is the Headline
This is the subhead full of clarity

188. This is the Headline
This is the subhead full of clarity

189. This is the Headline
This is the subhead full of clarity
540px

190. This is the Headline
This is the subhead full of clarity
540px
400px

191. This is the Headline
This is the subhead full of clarity
540px
400px
This is a caption that people will read

192. This is the Headline
This is the subhead full of clarity
540px
400px
CTA
14%
This is a caption that people will read

193. This is the Headline
This is the subhead full of clarity
540px
400px
THE FOLD
CTA
14%
This is a caption that people will read

194. This is the Headline
This is the subhead full of clarity
540px
400px
SUBMIT
CTA
14%
THE FOLD
This is a caption that people will read

195. This is the Headline
This is the subhead full of clarity
540px
400px
SUBMIT
CTA
14%
THE FOLD
This is a caption that people will read

196. This is the Headline
This is the subhead full of clarity
540px
400px
CLICK TO GET MY EBOOK
CTA
14%
THE FOLD
This is a caption that people will read

197. This is the Headline
This is the subhead full of clarity
540px
400px
CTA
14%
THE FOLD
This is a caption that people will read

198. This is the Headline
This is the subhead full of clarity
540px
400px
CTA
14%
THE FOLD
BECAUSE
BECAUSE
BECAUSE
BECAUSE
BECAUSE
BECAUSE BECAUSE
BECAUSE
BECAUSE
BECAUSE
BECAUSE
This is a caption that people will read

199. Download a PDF
of the four corners map
bitly.com/4cornersmap

200. Near, far, wherever you are
I believe that the hot dogs go on- Celine Dion. At a BBQ.

201. See you at the after party. @oligardner