Your SlideShare is downloading. ×
0
Chuck Bankoff

Landing Page Design
Common Mistakes & Tested Techniques

www.KreativeWebworks.com | chuck@KreativeWebworks....
A Landing page is where visitors land after clicking
on an email link, a search engine result, a banner ad,
or manually ty...
Six Steps of Landing
Page Design
Step 1: Define Success

Step 2: Define Your Customer

• Transactions

• It’s NOT about YO...
Six Steps of Landing
Page Design
Step 3: Selecting Domains

Step 4: Wireframe

• Unique Landing Page URL?

• List all the ...
Six Steps of Landing
Page Design
Step 5: Copywriting

Step 6: Testing & Tweaking

Headlines: Should refer to the
place the...
Scrolling, Paging & the Fold
Put enough content above the fold (text and images)
so that the visitor can decide to stay or...
Navigation Bars
Navigation on a landing page can present a distraction
and do more harm than good
You will have plenty of ...
Design Tips for Landing Pages with links to other pages:
Eliminate any clicks to irrelevant pages or advertisers

Minimize...
Color
Color choices affect: Reading Comprehension
Copy: Dark text on a light background

Headlines: Large enough to be rea...
Before you Continue
Just wanted to let you
know that we have a
special free “No-Strings”
VIP offer for you at the
end of t...
Typeface Fonts
Rules to follow for Easy-to-Read type:
Make copy as easy to read as possible. Many visitors will bail just
...
Typeface Fonts
MORE Rules to follow for Easy-to-Read type:
Text should never run more than 52-60 characters across the
scr...
Typeface Fonts
Common online Type Design Mistakes:
Sample #1: Multi-line headline with each line centered

Multi-line text...
Typeface Fonts
Common online Type Design Mistakes:
Sample #2: 9 Point or Smaller Verdana in Gray:
The average person over ...
Typeface Fonts
Common online Type Design Mistakes:
Sample #3: Column wider than 65 characters across:

Using a liquid desi...
Typeface Fonts
Common online Type Design Mistakes:
Sample #4: White body copy on black background:

Perhaps art directors ...
Typeface Fonts
Common online Type Design Mistakes:
Sample #5: Bold for Verbal Emphasis (Not Readability):

The average per...
Typeface Fonts
Common online Type Design Mistakes:
Sample #6: Paragraphs longer than 4 ½ Lines:

He is going to speak to t...
Typeface Fonts
Common online Type Design Mistakes:
Sample #7: Pros that should be a Bullet List:
Some common mistakes that...
How many elements should be on a page?
As many as necessary… no more no less….
Logo

Forms with descriptive tags

Hero Sho...
Trust Icons
Data and Case Studies prove conclusively that trust icons do make
a difference in conversions
Multiple icons m...
NEVER start playing the video automatically when the visitor
arrives on the Landing Page!!!
Spokes persons
Abbreviated com...
Adding Phone Numbers to Landing Pages
Bigger is Better….don’t be shy
Some consumers just prefer to call
Some consumers jus...
This landing page gets and average 12-15% conversion rate
from search engine traffic, with 10% of the conversions
coming i...
Next to Headlines, button copy, color and shape as the
most important element on the page…
Test: Red vs. Gray… Round vs. R...
Shorter is better. Usually…
Be patient. Ask for only what you need… you will have more
chances to get the rest. Roughly 40...
Copy Tips…
Use half the copy that you would use in printed material
Headline should exactly match the headline that got th...
Copy Tips…
More

People read only the first few words of bullets and paragraphs
People read the tops and bottoms of lists…...
Long Copy vs. Short Copy
Long copy works well for….
Expensive Products & Services
Money related products and services
Heal...
Consider the HOT Spots

30
Social Media Icons
Telephone or Email?
Facebook or Twitter?
Everyone has their own Social Media
preferences. Give them a c...
Campaign Killers!
Too much text (some exceptions)
Error pages, broken links and anything that does not work.
Required fiel...
Success Factors…
Just a few more

Keep the critical elements above the fold
Fewer columns are better
Consider removing nav...
Endorsements
create credibility

Clear call to action

Contrasting colors
Not Visible:
• Repeated Call to action: On long ...
Video has been
know to increase
conversion up to
80%.

The “More” links
open up a
“lightbox” style
dialogue that
keeps the...
Focused on the benefits
(Sweepstakes)

Branding:
Oprah’s face is so
recognizable it is
its own brand.

36
•
•
•
•

On-line Lead Generation Strategies
Search Engine Marketing
Social Media Technologies & Management
Website Develop...
Full Service Digital Marketing Since 1999

• Website Development
• Search Marketing Strategies
• Social Media Technologies...
Upcoming SlideShare
Loading in...5
×

Landing page design - Common Mistakes & Tested Techniques

3,846

Published on

Professional Digital Marketing firms understand that It’s not about Technology; it’s about Psychology…

“Advertising is the art of getting people to buy things they don’t need with money they don’t have”.
That statement predates the Internet by a number of decades, yet it is as true today as it was back then. A bit cynical? Perhaps, but let us not forget that in the Internet world people rarely stumble across a website without actively searching for something. If you have what they are looking for, your job is to help them find it.

The problem is most websites are so ill conceived and poorly constructed that they are little more than monuments to their owners.

Let’s make something transparently clear; people do not read on the Internet… they scan! They see headlines, images and bullet points. Depending on the personality type of your visitor, you have between 2 and 8 seconds to convince them to stay on your website and delve deeper into it. They click in… take a quick peak… and click out. Those are the conditions in which business is conducted on the Internet.

Why are effective Landing Pages essential?

A Landing page is where visitors land after clicking on an email link, a search engine result, a banner ad, or manually typing in a specific advertised address. Actually making use of that tidbit of knowledge is a little more complex.

It’s easy to fall into the trap of throwing money into driving traffic and living with your conversion rate. Want more customers? Just buy more traffic. Not exactly efficient…or cost effective.It's a lot easier to increase your conversion rate from 1% to 2% than it is to double your traffic in order to double your conversions.

This presentation covers:
-The 6-steps to effective landing page design
-Scrolling, Paging and the "Fold"
-Navigation, Colors & Typeface fonts
-Response Devices, Buttons, Forms and more....

About the Author:

Chuck Bankoff is Director of Web Services for KreativeWebworks, Inc., a Digital Marketing Firm in Orange County California since 1999 that specializes in on-line lead generation through Search Engine and Social Media management.

With over 13 years of Internet Marketing experience, Chuck manages a team of creative and technical professionals to develop award winning websites and digital marketing strategies.

Chuck is also a Training Coach and Certified Mentor who trains and advises other Internet Consultants around the world on business strategies, Internet Marketing techniques and website development management. Chuck designed and taught the Landing Page design certification program for WSI.

A sought after author and speaker on the subject of Digital Marketing, Chuck has addressed audiences consisting of businesses and marketing professionals across five continents since 2004.

If you have any questions, please email: chuck@kreativewebworks.com
www.kreativewebworks.com
Special thanks to team at MarketingSherpa for providing much of the research data used in this paper.

Published in: Technology, Art & Photos
7 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,846
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
80
Comments
7
Likes
14
Embeds 0
No embeds

No notes for slide
  • Web Safe Fonts: http://www.efuse.com/Design/web_fonts_basics.html#WebSafeFonts
  • Things I’d change or testThe links at the bottom of the page (not on this screen shot) still go to external microsites.Not a huge issue, but I would have preferred the light-Box like they did with the speaker bios.The call to action would be better if it read “Get updates on future webcasts” rather than the generic “Sign Up”.
  • The privacy policy and rules links open up new windows which is a bit messy. A better solution is to use a modal lightbox like the UPS example above.
  • Transcript of "Landing page design - Common Mistakes & Tested Techniques "

    1. 1. Chuck Bankoff Landing Page Design Common Mistakes & Tested Techniques www.KreativeWebworks.com | chuck@KreativeWebworks.com | 949 ∙ 276 ∙ 6062 1
    2. 2. A Landing page is where visitors land after clicking on an email link, a search engine result, a banner ad, or manually type in a specific advertised address. Key Points: • It may be the Home page… but not necessarily • There may, or may not be navigation to other pages • There should be a specific objective with minimal distractions. 2
    3. 3. Six Steps of Landing Page Design Step 1: Define Success Step 2: Define Your Customer • Transactions • It’s NOT about YOU! • Lead Generation • Create a customer profile • Branding/Education • May have multiple profiles • Relationship Building • Prioritize customer profiles • Membership Registration • Don’t try to appeal too broadly (you will target no one) • Viral Marketing 1 2 3
    4. 4. Six Steps of Landing Page Design Step 3: Selecting Domains Step 4: Wireframe • Unique Landing Page URL? • List all the page elements • Personal URL (PURL)? • Create a layout sketch • Multiple Vanity URLs? • Wireframe before Copy • Easy to remember? • Consider size & placement • Easy to spell? • Consider the fold 3 4 4
    5. 5. Six Steps of Landing Page Design Step 5: Copywriting Step 6: Testing & Tweaking Headlines: Should refer to the place the visitor just came from Set up a schedule to examine and adjust to the metrics Call to action: Test matching this with the headline Should match your original goals: -Transactions -Lead Generation -Branding/Education -Relationship Building -Membership Registration -Viral Marketing Body copy: Only 20% of visitors will actually read this… still has to be good. 5 6 5
    6. 6. Scrolling, Paging & the Fold Put enough content above the fold (text and images) so that the visitor can decide to stay or leave Do NOT make text-copy columns too wide or fonts too small just to keep content above the fold. 10-12 point or larger fonts / no more than 50-60 characters (including spaces) across. Women ages 34-45 are more likely to scroll, read more info and click onto additional pages than men. Above-the-fold info must contain enough convincing data to will over the short attention span visitors. 6
    7. 7. Navigation Bars Navigation on a landing page can present a distraction and do more harm than good You will have plenty of opportunity to tell the your customers how wonderful you are. Would you tell an attractive stranger your life history when you are just trying to get them to agree to a first date. The objective is to not encourage the visitor to wander “off-point” 7
    8. 8. Design Tips for Landing Pages with links to other pages: Eliminate any clicks to irrelevant pages or advertisers Minimize font size of links to privacy and legal information Make the ENTIRE area around a link clickable Make the first 3 words of a link descriptive Make your Hero shot clickable and open in a separate window of information so the visitor does not loose the main landing page 8
    9. 9. Color Color choices affect: Reading Comprehension Copy: Dark text on a light background Headlines: Large enough to be readable in most colors, so largely irrelevant. Hotlinks: Blue until clicked and then turns purplish. Designer colors are OK…but test first…. Branding Colors: OK if branding is more important than copy. 9
    10. 10. Before you Continue Just wanted to let you know that we have a special free “No-Strings” VIP offer for you at the end of the presentation. OK…go ahead…..
    11. 11. Typeface Fonts Rules to follow for Easy-to-Read type: Make copy as easy to read as possible. Many visitors will bail just because the page “looks like work”. Use 10 point or larger font. Consider a larger size if you are targeting children, adults or if you have very long copy. Captions, form field names, legal and some tech-specs can be smaller. Smaller texts promotes slower reading and a drop-off in comprehension. 11
    12. 12. Typeface Fonts MORE Rules to follow for Easy-to-Read type: Text should never run more than 52-60 characters across the screen. People can’t comfortably read long wide columns. Keep columns at a fixed width (no liquid designs) Use “Web-safe fonts” to control the appearance of the page. With the possible exception of one-line headlines, all text should be flush left and NOT centered. Headlines should be significantly larger and possibly bolder. Sub-headlines should be close to body copy size and bold 12
    13. 13. Typeface Fonts Common online Type Design Mistakes: Sample #1: Multi-line headline with each line centered Multi-line text of any size is very hard to read because the human eye looks for the beginning of a line over to the left and we expect it to be in the same place ever time. If it isn't we have to adjust 13
    14. 14. Typeface Fonts Common online Type Design Mistakes: Sample #2: 9 Point or Smaller Verdana in Gray: The average person over the age of 40 will not have an easy time reading this. This is one of the most popular font/size combinations online. Higher rez monitors can make the font look even smaller. 14
    15. 15. Typeface Fonts Common online Type Design Mistakes: Sample #3: Column wider than 65 characters across: Using a liquid design instead of a static design makes it harder for you to maintain control of the appearance of your page. On higher screen resolutions the column will expand (and get shorter). Is it any wonder that newspaper and magazines use narrow columns? 15
    16. 16. Typeface Fonts Common online Type Design Mistakes: Sample #4: White body copy on black background: Perhaps art directors like white copy on black backgrounds because they never actually read the copy so they don’t expect any one else to. Sometimes it might look cool…but it still doesn’t convert well. 16
    17. 17. Typeface Fonts Common online Type Design Mistakes: Sample #5: Bold for Verbal Emphasis (Not Readability): The average person over the age of 40 will not have an easy time reading this. This is one of the most popular font/size combinations online. Higher rez monitors can make the font look even smaller. 17
    18. 18. Typeface Fonts Common online Type Design Mistakes: Sample #6: Paragraphs longer than 4 ½ Lines: He is going to speak to the Elite Coaching clients and give an introduction to the movement of spinal corrective care in the profession and CBP. This is a phenomenal opportunity to hear one of the professions foremost leaders fighting for you in the political and insurance arenas. It is because of efforts of dedicated individuals like Dr. Deed that gives us the opportunities we have in practice. Please come to the New Orleans seminar early on Friday and give Dr. Deed Harrison the respect he deserves. 18
    19. 19. Typeface Fonts Common online Type Design Mistakes: Sample #7: Pros that should be a Bullet List: Some common mistakes that designers make when writing text include Multi-line headline with each line centered, 9 Point of Smaller Verdana in Gray, Column wider than 65 characters across, White body copy on black background, Bold for Verbal Emphasis (Not Readability), and Paragraphs longer than 4 ½ Lines -ORSome common mistakes that designers make when writing text include: Multi-line headline with each line centered 9 Point of Smaller Verdana in Gray Columns wider than 65 characters across White body copy on black background Bold for Verbal Emphasis (Not Readability) Paragraphs longer than 4 ½ Lines 19
    20. 20. How many elements should be on a page? As many as necessary… no more no less…. Logo Forms with descriptive tags Hero Shot, which may be clickable Descriptive tagline Conversion button or link Security and trust icons Headline Testimonials (text, audio, video) Quick offer explanation Technical specifications Longer product or Service explanation Guarantees Links to more information Rich media Deadlines Copyright /Legal (at bottom) 20
    21. 21. Trust Icons Data and Case Studies prove conclusively that trust icons do make a difference in conversions Multiple icons may help Place icons above the fold and at critical decision points Consider using the space around your logo to identify it with a trust image and slogan 21
    22. 22. NEVER start playing the video automatically when the visitor arrives on the Landing Page!!! Spokes persons Abbreviated commercials Demonstrations & Tours Testimonials Viral videos 22
    23. 23. Adding Phone Numbers to Landing Pages Bigger is Better….don’t be shy Some consumers just prefer to call Some consumers just want to be reassured there is a real person available (even if they never call) Tip: put phone number on EVERY page, not just the Landing page or Contact page 23
    24. 24. This landing page gets and average 12-15% conversion rate from search engine traffic, with 10% of the conversions coming in on the toll-free line. Credit: MarketingSherpa Handbook 24
    25. 25. Next to Headlines, button copy, color and shape as the most important element on the page… Test: Red vs. Gray… Round vs. Rectangular Wording is important: “Buy Now” vs. “Try it Now” Different buttons work for different audiences Click to qualify – It’s Free Am I Eligible? Find Out Instantly! Don’t get cute with the labels….say what you mean 25
    26. 26. Shorter is better. Usually… Be patient. Ask for only what you need… you will have more chances to get the rest. Roughly 40% of visitors may answer a few extra questions on the “Thank You” page Exception: When you want to pre-qualify leads because there is a cost associated with the next step of the process. 26
    27. 27. Copy Tips… Use half the copy that you would use in printed material Headline should exactly match the headline that got them there Stay on point…. Headline match Body Copy Nothing more than needed…nothing less than needed Don’t waste valuable real-estate with “Welcome…” “You” and “Your” trumps “We” and “Our” 27
    28. 28. Copy Tips… More People read only the first few words of bullets and paragraphs People read the tops and bottoms of lists…not the middle Keep your first few paragraphs short and inviting Alternate long and short Paragraphs Paragraphs shouldn't be longer that 4 or 5 lines long Numerals have more impact than written numbers 28
    29. 29. Long Copy vs. Short Copy Long copy works well for…. Expensive Products & Services Money related products and services Health related products and services Older consumers Reading related products Technical products 29
    30. 30. Consider the HOT Spots 30
    31. 31. Social Media Icons Telephone or Email? Facebook or Twitter? Everyone has their own Social Media preferences. Give them a choice ONLY if you maintain it! 31
    32. 32. Campaign Killers! Too much text (some exceptions) Error pages, broken links and anything that does not work. Required fields (especially personal info & telephone numbers) Reset buttons No email privacy information next to the email form Lack of communication choices Inadequate shipping & pricing information Too many links leading to too many destinations 32
    33. 33. Success Factors… Just a few more Keep the critical elements above the fold Fewer columns are better Consider removing navigation (keep the visitor from straying) You may need more landing pages….think “template” Bigger is Better (typeface that is….) Men like short pages… women like long pages Influence the visitor with minimal distractions (lead the eye) 33
    34. 34. Endorsements create credibility Clear call to action Contrasting colors Not Visible: • Repeated Call to action: On long landing pages you have to remind visitors of what to do. • Secondary Call to Action: They’ve added a Twitter sharing button to help with viral. • Confirmation Call to Action: After form submission, the “Thank You” page presents another opportunity to spread the word via Twitter 34
    35. 35. Video has been know to increase conversion up to 80%. The “More” links open up a “lightbox” style dialogue that keeps the visitor on the page. 35
    36. 36. Focused on the benefits (Sweepstakes) Branding: Oprah’s face is so recognizable it is its own brand. 36
    37. 37. • • • • On-line Lead Generation Strategies Search Engine Marketing Social Media Technologies & Management Website Development Chuck Bankoff VIP Room Landing Page Checklist KreativeWebworks.com | chuck@KreativeWebworks.com | 949 ∙ 276 ∙ 6062 37
    38. 38. Full Service Digital Marketing Since 1999 • Website Development • Search Marketing Strategies • Social Media Technologies & Management We’re not just a bunch of pretty faces
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×