Landing Pages

1
Landing Pages

• Marc Uhlig
• slideshare.net/marcuhlig/landing-pages/
• jupiter-labs.com/blog/online-marketing/monetizatio
  n-20-camp-july-12

2
Agenda

• Introduction
• Definitions
• What's not a landing page
• Got there And now?
• Landing page conversions
• Four Steps of the Conversion Process
• The Six Steps of Landing Page Design
• 5 Big Mistakes in Landing Page Design
• Examples
• Eyetracking Landing Page Study
• Conversion RatesLanding Page Tweaks
• Suggested reading material

3
Introduction Why even bother?

• Competitive advantage
• Increase ROI
• Become a rock star to your boss or clients

4
Definitions

• Above the fold
• Action/Conversion action
• Below the fold
• Clickthrough
• Conversions
• Dynamic landing pages
• Gateway page

5
Definitions

• Hero shot
• Fake hero shot
• Landing page
• Paid search
• Redirect
• Search engine optimization or SEO
• Usability

6
What's not a landing page

• Splash pages
• Bridge pages
• Jump pages
• Microsites

7
Got there And now?

• Do a bunch of reading
• Type their name and address
• Hand over a phone number
• Give an email
• Dig out a credit car
• Pay for something

8
Landing page conversions
9
Landing page conversions
10
Four Steps of the Conversion Process How a
Visitor Experiences Your Landing Page
11
Stage one 0-8 seconds

• Should I bail?
• Am I in the right place?
• Does this match what I was expecting/hoping to
  see?
• Should I bother to read the copy
• Should I click away immediately?

12
Stage two A few seconds to a couple of minutes

• Should I accept this offer?

13
Stage three

• Conversion attempt

14
Stage four

• Conversion success

15
The Six Steps of Landing Page Design - Step one

• Conversion definition
• Sale
• Lead
• Time
• Relationship
• Membership
• Viral outreach

16
The Six Steps of Landing Page Design Step two

• Selecting URLs
• company.com/sale/product
• company.com/specialoffers/product
• company.com/event/product
• company.com/category/product
• company.com/brand/product

17
The Six Steps of Landing Page Design Step three

• Demographic research
• Create profile of perfect converter
• Probably more than one
• Target converter with biggest market potential
• Copy wont work for multiple demographics

18
The Six Steps of Landing Page Design Step four

• Graphic elements, layout, and form design
• List of all necessary elements
• Determine size and placement

19
The Six Steps of Landing Page Design Step five

• Copywriting in three steps
• Headline
• Reference to referring page
• Call to action
• Test against headline
• Body copy
• subheads, bulleted lists, guarantees,
  testimonials, explanations and descriptions, etc.
• "Can this be said more concisely, yet as
  effectively?"

20
The Six Steps of Landing Page Design Step six

• Testing, measuring, and tweaking
• Conversion rate
• Customer lifetime

21
5 Big Mistakes in Landing Page Design - Mistake
one

• Hard-to-read type

22
5 Big Mistakes in Landing Page Design Mistake
two

• Navigation bar from your regular Web site

23
5 Big Mistakes in Landing Page Design Mistake
three

• Click here to start the conversion process
• Every hurdle will decrease conversion rate

24
5 Big Mistakes in Landing Page Design Mistake
four

• Scary forms

25
5 Big Mistakes in Landing Page Design Mistake
five

• Copy and graphics unrelated to the offer

26
5 Big Mistakes in Landing Page Design - Bonus
mistake

• Landing pages that don't match campaign creative

27
Old 5 Conversion Landing Page
28
Revised 15 Conversion Landing Page
29
Palo Alto Software Old New Landing Pages
30
Eyetracking Landing Page Study - How to read a
heatmap
31
Eyetracking Landing Page Study - Lesson one

• Visitors briefly scan not read pages
• The average American reads 50 words in 20
  seconds, but not in order
• Visitors' eyes are a lot like hummingbirds
  flickering through a garden

32
Eyetracking Landing Page Study - Lesson two

• The upper left corner is always looked at
• Glance at spot where logo usually is
• Slight downward drift
• Screen real estate directly below logo is high
  value property

33
Eyetracking Landing Page Study - Lesson three

• People look at people
• Eyes are drawn to human faces

34
Eyetracking Landing Page Study - Lesson four

• Keep hero shot on the left side

35
Eyetracking Landing Page Study - Lesson five

• People read captions but not all of the regular
  copy
• Duplicate your conversion offer

36
Eyetracking Landing Page Study - Lesson six

• Navigation bars waste valuable visitor attention

37
Eyetracking Landing Page Study - Lesson seven

• Hotlink wording can affect page-readership and
  conversions
• Treated less as a thing for clicking and more as
  an informational tool
• Pages without hyperlinked text get much closer
  examination
• Yes or no depends on demographics
• Gender etc.

38
Left Right Swap 1A
39
Left Right Swap 1B
40
Text Emphasis Trust Mark 2A
41
Text Emphasis Trust Mark 2B
42
Headlines Scrolling 3A
43
Headlines Scrolling 3B
44
Use of Links in Text 4A
45
Use of Links in Text 4B
46
Reading Headlines 5A
47
Reading Headlines 5B
48
Font Size 6A
49
Font Size 6B
50
Conversion RatesLanding Page Tweaks
51
Net Words Creating High-Impact Online Copy by
Nick Usborne
52
Don't Make Me Think A Common Sense Approach to
Web Usability, 2nd Editionby Steve Krug
53
MarketingSherpa's Landing Page Handbook
54
Thank you very much

• Marc Uhlig
• marc_at_jupiter-labs.com
• twitter.com/marcuhlig