7 Principles of Conversion Centered Design with Oli Gardner

1,725 views

Published on

Oli Gardner, co-founder of Unbounce, shares the secrets of landing page optimization with 7 Principles of Conversion-Centered Design. You can view this Stukent Expert Session here: http://www.stukent.com/expert-sessions/7-principles-of-conversion-centered-design/

Published in: Marketing
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,725
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
85
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

7 Principles of Conversion Centered Design with Oli Gardner

  1. 1. HOW TO CREATE HIGH-CONVERTING LANDING PAGES USING CONVERSION-CENTERED DESIGN Oli Gardner! Unbounce Co-founder! ! @OliGardner
  2. 2. Stukent Conversion Goodies get.unbounce.com/stukent-goodies
  3. 3. THE 7 PRINCIPLES OF CONVERSION-CENTERED DESIGN
  4. 4. WHAT AN AVERAGE CAMPAIGN LOOKS LIKE
  5. 5. WHAT A PERFECT CAMPAIGN LOOKS LIKE
  6. 6. WHAT YOUR CAMPAIGN CONVERSION CURVE LOOKS LIKE
  7. 7. the NSAMCWADLPprinciple
  8. 8. the NBALPWACGprinciple
  9. 9. Horror Vacui
  10. 10. #1 ATTENTIONUSING ATTENTION-DRIVEN DESIGN TO APPLY FOCUS TO YOUR CONVERSION GOAL
  11. 11. ATTENTION RATIO 163:1 Photo: Issei Kato/Reuters./ Published: 01/20/2014 12:06:38
  12. 12. Photo: Issei Kato/Reuters./ Published: 01/20/2014 12:06:38 the ratio of the number of things you can do on a page to the number of things you should be doing ATTENTION RATIO 163:1
  13. 13. ATTENTION RATIO 86:1 Photo: Issei Kato/Reuters./ Published: 01/20/2014 12:06:38
  14. 14. ATTENTION RATIO 86:1 Photo: Issei Kato/Reuters./ Published: 01/20/2014 12:06:38 in an email!
  15. 15. ATTENTION RATIO 130:1 Photo: Issei Kato/Reuters./ Published: 01/20/2014 12:06:38 including the interface
  16. 16. attention ratio 10:1 attention ratio 1:1
  17. 17. attention ratio 10:1 attention ratio 1:1 +31% lift in ebook downloads
  18. 18. DON’T MAKE ME THINK!- Steve Krug
  19. 19. AS ATTENTION RATIO GOES DOWN,! CONVERSION RATES GO UP
  20. 20. Please sir, can I have just one more link ?
  21. 21. -14% people starting the course
  22. 22. VISUAL HIERARCHY IS ONE OF THE EASIEST WAYS TO STRENGTHEN OR WEAKEN A DESIGN - Joshua Porter (@bokardo)
  23. 23. 23 principles of Attention-Driven Design
  24. 24. Proximity Elements that are closer together are perceived as being related.
  25. 25. Anomaly Difference is an indicator of importance. Not how well the square stands out, simply by being different.
  26. 26. Dominance This is visual hierarchy in its truest sense. Increasing the size of an important element lets people know they should pay more attention to it.
  27. 27. Consistency If you have certain content types spread out over different areas of your page, consistency makes order out of chaos, so people don’t need to relearn their meaning.
  28. 28. Continuation Storytelling can be a compelling way to write campaign copy. By using visual connectors you can help people move through your design in the correct order.
  29. 29. Direction Just like a film director expertly guides us through the movie experience, the principle of direction can be used to guide our wandering visitors to the conversion goal.
  30. 30. +53% lift in cellphone donations
  31. 31. Attention-Driven Design Ebook - Coming Soon Stukent Conversion Goodies get.unbounce.com/stukent-goodies
  32. 32. #2 CONTEXTDESIGNING POST-CLICK EXPERIENCES THAT SPEAK DIRECTLY TO THE DESIRES, EXPECTATIONS, AND DATA ESTABLISHED PRIOR TO THE CLICK.
  33. 33. CONTEXT SIGNALS VARY DEPENDING ON THE INBOUND CHANNEL YOU ARE USING TO DRIVE TRAFFIC POST-CLICKDEPENDS ON HOW WELL YOU DELIVER ON YOUR PRE-CLICK PROMISES
  34. 34. CONTEXT SIGNALS VARY DEPENDING ON THE INBOUND CHANNEL YOU ARE USING TO DRIVE TRAFFIC POST-CLICKDEPENDS ON HOW WELL YOU DELIVER ON YOUR PRE-CLICK PROMISES PPC ads Display ads Facebook ads Email Co-marketing
  35. 35. CONTEXT SIGNALS DEPENDING ON THE INBOUND CHANNEL YOU ARE USING TO DRIVE TRAFFIC POST-CLICK SUCCESSDEPENDS ON HOW WELL YOU DELIVER ON YOUR PRE-CLICK PROMISES
  36. 36. PPC Ads Search Intent Context Message match is key
  37. 37. next day flower delivery Next Day Flower Deliveries UK! www.iflorist.co.uk/NextDayFlowers Get 10% Off A Beautiful Range Of Flowers Arranged By Local Florists
  38. 38. ! Message Match Fail.!
  39. 39. online graduate courses Online Masters Degree www.someuniversity.com/ Get a Masters from a US University. Classes Start Soon. Apply Now!
  40. 40. Online Masters Degree ! Perfect Message Match. (After I fixed it).!
  41. 41. Display & Facebook Ads Design & message match is key
  42. 42. ! Zero Design Match. Zero Message Match.!
  43. 43. ! Perfect Design Match. Perfect Message Match.!
  44. 44. Email marketing Design and message match are key
  45. 45. ! Good Brand Match. Poor Design Match. Zero Message Match.!
  46. 46. ! Excellent Message & Design Match!
  47. 47. Co-promotion Content match is key
  48. 48. ! Content Match Fail.! WTF!
  49. 49. CONTEXT IS LIKE VELCRO THE MORE YOU HAVE, THE MORE YOU CAN HOLD ON TO
  50. 50. http://www.fanpop.com/clubs/disney-princess/images/36571769/title/walt-disney-fan-art-queen-elsa-photo
  51. 51. ***********************************
  52. 52. PASSWORDS MUST CONTAIN AT LEAST SIX CHARACTERS
  53. 53. MICKEYMINNIEGOOFYPLUTOSNOWWHITEMOWGLIDUMBO
  54. 54. #3 CLARITYCOMMUNICATING YOUR UNIQUE CAMPAIGN PROPOSITION ON A LEVEL WHERE THE QUESTION “WHAT IS THIS PAGE ABOUT?” DELIVERS
  55. 55. I asked 20 people “what is this page about?”
  56. 56. INVESTM ENTS video voiceovers content marketing software no clue
  57. 57. what do they actually do?
  58. 58. iDontKnow
  59. 59. WHAT DO YOU THINK THIS PAGE IS ABOUT? WHAT DO YOU EXPECT TO HAPPEN IF YOU CLICK ON THE CALL TO ACTION (BUTTON)? DID YOU THINK THIS PAGE LOOKED TRUSTWORTHY?
  60. 60. WHAT DO YOU THINK THIS PAGE IS ABOUT? WHAT DO YOU EXPECT TO HAPPEN IF YOU CLICK ON THE CALL TO ACTION (BUTTON)? DID YOU THINK THIS PAGE LOOKED TRUSTWORTHY?
  61. 61. WHAT DO YOU THINK THIS PAGE IS ABOUT? WHAT DO YOU EXPECT TO HAPPEN IF YOU CLICK ON THE CALL TO ACTION (BUTTON)? DID YOU THINK THIS PAGE LOOKED TRUSTWORTHY?
  62. 62. WHAT DO YOU THINK THIS PAGE IS ABOUT? WHAT DO YOU EXPECT TO HAPPEN IF YOU CLICK ON THE CALL TO ACTION (BUTTON)? DID YOU THINK THIS PAGE LOOKED TRUSTWORTHY?
  63. 63. IF 20 PEOPLE THINK YOU PROBABLY ARE
  64. 64. The Clarity Test Worksheet Stukent Conversion Goodies get.unbounce.com/stukent-goodies
  65. 65. VISUAL HIERARCHY Photo: http://animal-kid.com/silverback-gorilla-muscles.html
  66. 66. INFORMATION HIERARCHY Photo: http://animal-kid.com/silverback-gorilla-muscles.html copy informs design, not the other way round
  67. 67. Do this first Add the form after
  68. 68. Trying to be clever Clear, benefit driven
  69. 69. +30% people starting the course
  70. 70. what do your forms say about your campaign?
  71. 71. #4 CONGRUENCEALIGNING EVERY ELEMENT ON YOUR LANDING PAGE WITH – AND ONLY WITH – YOUR CAMPAIGN GOAL
  72. 72. FORM-FIRST DESIGN
  73. 73. THE ANATOMY OF A HIGH-CONVERTING FORM
  74. 74. 1 FORM HEADLINE Your form headline should introduce the “What” of your offer. What will I be getting if I interact with your form.
  75. 75. 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.
  76. 76. 3 BENEFITS BULLETS*optional 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.
  77. 77. 4 A FORM 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.
  78. 78. 5 CALL TO ACTION 4 A FORM 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.
  79. 79. 5 CALL TO ACTION 4 A FORM 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.
  80. 80. Form-First Design Balsamiq Wireframe Stukent Conversion Goodies get.unbounce.com/stukent-goodies
  81. 81. Page Element Content Score Headline Subhead Hero shot Intro Bullets Bullets Form header! Testimonial Form fields Why Privacy statement Call-to-Action TOTAL 0%
  82. 82. Page Element Content Score Headline Ocean of data instantly become security intelligence Subhead Whitepaper download: the next generation firewall is here Hero shot Photo of a man holding some paper which is obscured Intro Watchguard XTM is the next generation firewall of choice for businesses and enterprises alike providing best in class network security at affordable prices. Bullets Blazing fast throughput Bullets Advanced networking features Form header! Download your whitepaper! Complete the required fields Testimonial It’s about the product not the value in the whitepaper Form fields Country, province/state, phone number Why About the product, not the form goal which is whitepaper Privacy statement sell, nasty, spam Call-to-Action Get my offer TOTAL 0%
  83. 83. campaign goal download a white paper
  84. 84. Page Element Content Score Headline Ocean of data instantly become security intelligence Subhead Whitepaper download: the next generation firewall is here Hero shot Photo of a man holding some paper which is obscured Intro Watchguard XTM is the next generation firewall of choice for businesses and enterprises alike providing best in class network security at affordable prices. Bullets Blazing fast throughput Bullets Advanced networking features Form header! Download your whitepaper! Complete the required fields Testimonial It’s about the product not the value in the whitepaper Form fields Country, province/state, phone number Why About the product, not the form goal which is whitepaper Privacy statement sell, nasty, spam Call-to-Action Get my offer TOTAL 0%
  85. 85. Page Element Content Score Headline Ocean of data instantly become security intelligence 0 Subhead Whitepaper download: the next generation firewall is here 1 Hero shot Photo of a man holding some paper which is obscured 1 Intro Watchguard XTM is the next generation firewall of choice for businesses and enterprises alike providing best in class network security at affordable prices. 0 Bullets Blazing fast throughput 0 Bullets Advanced networking features 0 Form header! Download your whitepaper! Complete the required fields 1 Testimonial It’s about the product not the value in the whitepaper 0 Form fields Country, province/state, phone number 0 Why About the product, not the form goal which is whitepaper 0 Privacy statement sell, nasty, spam 0 Call-to-Action Get my offer 0 TOTAL 12.5%
  86. 86. The Congruence Test Worksheet Stukent Conversion Goodies get.unbounce.com/stukent-goodies
  87. 87. I DON’T BELIEVE YOU
  88. 88. #5 CREDIBILITY DEMONSTRATING AND VERIFIABLE TRUST SIGNALS
  89. 89. Art by: http://www.redbubble.com/people/asrielle
  90. 90. But i don’t have any testimonials yet!
  91. 91. 4 ways to deal with no testimonials
  92. 92. be okay with NOT having them #1
  93. 93. silence is better than bullshit
  94. 94. give your prorviceTM* to a select few, for free #2 *The short form for Product or service
  95. 95. Support the concept vs. support the prorviceTM* #3 *still The short form for Product or service
  96. 96. ask bloggers to review your prorviceTM* #4 *AND ONCE MORE - The short form for Product or service
  97. 97. nothing FEELS more TRUSTWORTHY than delight. Art by: http://www.redbubble.com/people/asrielle
  98. 98. ! If you’re genuinely lovely people will trust you. Art by: http://www.redbubble.com/people/asrielle
  99. 99. #6 CLOSINGAPPLYING POSITIVE CLICK TRIGGERS & ELIMINATING NEGATIVE IMPULSES AT THE POINT OF CONVERSION
  100. 100. SPAM LOVE Proximity Elements that are closer together are perceived as being related. CTA
  101. 101. ! Remove the anxiety of a potential auto-tweet.
  102. 102. ! Adds clarity, letting you know it won’t “mobile-ize” or break your website.
  103. 103. ! Reduces the “I can’t make that date/time” anxiety.
  104. 104. ! Explain the time involved, to reduce “effort” anxiety.
  105. 105. ALWAYS TEST CLOSERS ! A winning smile, amirite?
  106. 106. ALWAYS TEST CLOSERS my face lost by -14%
  107. 107. CLOSERS CAN MAKE YOU OR BREAK YOU
  108. 108. Call to Action Closers You Can Test* *work in progress Stukent Conversion Goodies get.unbounce.com/stukent-goodies
  109. 109. #7 CONTINUANCEAMPLIFYING CONVERSION OPPORTUNITIES USING POST-CONVERSION MARKETING & MOMENTUM LOOPS
  110. 110. TO RECAP
  111. 111. NSAMCWADLP That’s My Mother!
  112. 112. Thank You! @oligardner
  113. 113. SOME OF THE WORLD’S MOST RESPECTED COMPANIES TRUST UNBOUNCE try.unbounce.com/stukent Build, publish & A/B test landing pages without I.T. The mobile responsive landing page builder for professional marketers Get 50% off Unbounce for 3 months >>

×