SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
Chuck Bankoff

Landing Page Design
Common Mistakes & Tested Techniques

www.KreativeWebworks.com | chuck@KreativeWebworks.com | 949 ∙ 276 ∙ 6062

1
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
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
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
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
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
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
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
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
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…..
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
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
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
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
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
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
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
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
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
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
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
NEVER start playing the video automatically when the visitor
arrives on the Landing Page!!!
Spokes persons
Abbreviated commercials

Demonstrations & Tours
Testimonials
Viral videos

22
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
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
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
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
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
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
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
Consider the HOT Spots

30
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
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
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
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
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
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 Development

Chuck Bankoff

VIP Room
Landing Page Checklist
KreativeWebworks.com | chuck@KreativeWebworks.com | 949 ∙ 276 ∙ 6062

37
Full Service Digital Marketing Since 1999

• Website Development
• Search Marketing Strategies
• Social Media Technologies & Management

We’re not just a bunch of pretty faces

Mais conteúdo relacionado

Último

CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 

Último (20)

CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 

Destaque

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Destaque (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Landing page design - Common Mistakes & Tested Techniques

  • 1. Chuck Bankoff Landing Page Design Common Mistakes & Tested Techniques www.KreativeWebworks.com | chuck@KreativeWebworks.com | 949 ∙ 276 ∙ 6062 1
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Consider the HOT Spots 30
  • 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. 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. 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. 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. 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. Focused on the benefits (Sweepstakes) Branding: Oprah’s face is so recognizable it is its own brand. 36
  • 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. Full Service Digital Marketing Since 1999 • Website Development • Search Marketing Strategies • Social Media Technologies & Management We’re not just a bunch of pretty faces

Notas do Editor

  1. Web Safe Fonts: http://www.efuse.com/Design/web_fonts_basics.html#WebSafeFonts
  2. 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”.
  3. 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.