Principles of Good Landing Page Design: Examples, Case Studies & Best Practices
-
1Download all Section One Slides
Brief introduction to the course and the link to access all the slides for Section 1 of this course.
-
2Welcome to this course! Let's lay the groundwork for good landing page design
What we'll cover in this lecture
- Who I am
- Why learning landing page design and conversion rate optimization is so important
- How to make the most out of this course
- An introduction to the famous 5 second test in web usability
- An introduction to the principle of clarity in web design
- Lecture exercise
-
3The Myth Of The Perfect Landing Page Conversion Rate
In this lecture we'll talk about conversion goals, and why no matter how well you design your landing pages, your conversion rate will always be below 100%. You'll also learn about which visitor segments will be most influenced by improvements by your landing page design.
-
4The 3 Main Types of Landing Pages and How To Use Them Effectively
Overview of what's covered in this lecture;
- Understanding dedicated landing pages, microsites and main site landing pages
- The defining characteristics of each type of landing page
- Understanding the concept of attention ratio
- How to determine the right type of landing page design for your campaigns
- Real life examples from around the web
- Lecture exercise
-
5Common Business Models and Understanding Your Conversion Actions
Overview of what's covered in this lecture:
- Understanding different business models on the web
- Which conversion actions are commonly associated with each business model
- Working with multiple conversion actions on a single page
- How to determine the right sort of landing page design based on your business model
- Lecture exercise
-
6The AIDA Sales Funnel and The Online Decision Making Process
Overview of what's covered in this lecture:
- Introduction to the AIDA sales funnel
- Understanding the different stages of the funnel and how they relate to learning landing page design
- How the funnel has evolved over time
- Applying the basic funnel concepts to conversion rate optimization and landing page design
- How the stages of the funnel effect conversion rate optimization
-
7The Awareness Stage of the Funnel: Where It All Begins
Overview of what's covered in this lecture:
- Commitment from a consumer and how that effects conversion rate optimization
- Why good landing page design is important in spreading awareness
- Understanding the user's mindset when they hit your landing pages early in the funnel
- How to structure your content to spread more awareness
- Understanding attention spans with regards to landing pages and web usability
- Strategies to design better landing pages to capture attention and increase engagement
-
8The Interest Stage of the Funnel: Tell Me More
Overview of what's covered in this lecture:
- What visitors are looking for during the interest stage of the funnel
- Understanding needs-based VS person-based selection in landing page design
- Introduction to the preference usability test
- Usability test results on two different landing page design variations
- How the preference test can help increase your conversion rate optimization effectiveness
- Lecture exercise
-
9The Desire Stage of the Funnel: I Want What You Sell
Overview of what's covered in this lecture:
- Designing your landing pages to increase commitment and move your visitors to act
- The importance of transactional assurances
- Landing page examples that give users a sense of trust and safety
- Competitive analysis and what you need to do on your landing pages to win the sale
- Understanding the importance of reviews and social identity
- Understanding how users research their options and how research can effect conversion rate optimization
-
10The Action Stage of the Funnel: I'm Going to Buy What You Sell
Overview of what's covered in this lecture:
- How visitors arrive at the action stage in the buying funnel
- The importance of simplicity in your landing page design during the transaction phase
- Real life examples of bad and good landing page design during the action stage
- How to design distraction fee checkout pages for ecommerce websites
- Designing landing pages that don't surprise or frustrate your visitors
-
11The Fogg Behavior Model and how it Applies to Good Landing Page Design
Overview of what's covered in this lecture:
- Introduction to B.J Fogg
- Overview of the Fogg behavior model
- Why the Fogg behavior model is so important in good landing page design
- Plotting out action line and determining where users fail or succeed at converting on our landing pages
- Motivation, simplicity and perceived difficulty in conversion rate optimization
- Increasing conversion rate by using the right motivational triggers
- How using the wrong triggers can kill your conversion rate and drive visitors away
- Lecture Exercise
-
12Making Your Landing Page Design Memorable
Overview of what's covered in this lecture:
- Understanding the limbic system and how it relates to good landing page design
- Intellectual decision VS emotional judgments
- Introduction to the different learning modalities
- Kinesthetic learning and landing page design tips
- Audio learners and landing page design tips
- Landing page design tips for visual learners
- The importance of making a good first impression when your visitor firsts lands on your website or landing page
- How emotionality can positively impact conversion rate
Principles of Persuasion in Landing Page Design
-
13Download all Section Two Slides
-
14The Primacy of Product and The Concept of Usability in Landing Page Design
Overview of what's covered in this lecture:
- Understanding the difference between consultative and commoditized business models
- The information that plays an essential role in usability
- The concepts that define usability at a broad level like delight, effectiveness, efficiency memorability, learnability and more
- Steve Krug's definition of usability
- The perceived difficulty and perceived value matrix in conversion rate optimization
- How your landing page design should always be focused on minimizing cognitive strain
-
15Eschew Obfuscation: Clarity and the Quest for Fewer Question Marks
Overview of what's covered in this lecture:
- Diving deeper into simplicity in landing page design with real life case studies
- Giving your users a sense of orientation and direction
- Answering your visitors' questions before they ask them themselves
- Making sure your visitors are always able to find what they're looking for (without even looking)
- How making users think about using your site will result in low conversion rates
- Learn landing page design with real examples of good and bad
- Lecture exercise
-
16The 5 Second Usability Test in Landing Page Design (and how you can use it now)
Overview of what's covered in this lecture:
- Understanding the 5 second usability test in greater detail
- Why it's one of my favorite tests to run
- The importance of removing subjectivity in landing page analysis
- 3 real life examples of 5 second tests (and the test results)
- The importance of testing your headers and subheaders first
- Running your own 5 second usability test – lecture exercise
-
17The Art and Science Behind Designing High-Converting Calls To Action (CTA's)
Calls to action are the most important design element on your landing pages. In this lecture you will learn:
- How to design high converting CTA's
- How to use your headline to support your conversion action
- How to write copy for your calls to action
- Using graphics and visuals to support your calls to action
- Setting post click expectations so visitors feel safe converting on your landing pages
- Removing visual distractions from around your conversion block
- How to design buttons so visitors know they're clickable right away
- Lecture Exercise: Finding ways to improve your CTA's using the principles discussed in this lectures
-
18Readability and Visual Hierarchy Landing Page Design
Readability is a well known concept in general, but it's not used enough in landing page design best practices. In this lecture you will learn:
- How we people read on the web
- How to format your text for scanning
- How your visitors perceive your website or landing page copy
- How to create effective visual hierarchies
- The best way to write paragraphs
- The importance of objectivity and removing unnecessary jargon from your copy
- How to format your heading for maximum readability
- How to create a sense of consistency with your text formatting
- Examples of distinctive style and aesthetics while still remaining readable
- Lecture Exercise: Rewriting your homepage copy using half the words you currently have
-
19Respecting Web Conventions in Landing Page Design
Conventions on the web are very important to know and respect. Conventions are formed based on years and thousands of hours of web browsing and people expect things to work in a certain way.
In this lecture you will learn:
- Why conventions are so important
- Rules for defying a convention
- Conventions in landing page design like logo, site ID and navigational structure
- Header and footer conventions
- Conventions for ads on your site, headers and other elements on your landing pages
- Research that has shown conventions to be essential to good user experience
-
20Using Videos, Graphics and Imagery to Increase Landing Page Conversion Rates
Every good landing page and website uses images, graphics, iconography and / or video to enhance the visual appeal of their landing page or to help convey their message.
In this lecture you will learn:
- The important role images play in giving your visitors a great first impression
- How to use images and graphics to tell a story
- The importance of evoking emotion with your visual components
- How to find and use high quality stock photography when you don't have custom imagery available
- When your images and graphics will hurt rather than improve your conversion rate
- Landing page design best practices for using images and graphics
- Design trends for background images
- How to use icons and thumbnails to break up copy and give your pages more flow and breathability
- Examples of good (and bad) use of graphics from around the web
- How to use videos to increase conversion rate on your landing pages
-
21Information Architecture and Accessibility - Landing Page Design Best Practices
Information architecture and accessibility are two important concepts in making your landing pages more enjoyable to use by your visitors.
In this lecture you will learn:
- How to organize your content effectively on your landing page
- Make sure the right information appears above the fold
- How to assess the ease-of-use of your navigation
- The importance of giving the user feedback on elements that should be giving feedback
- Breaking down the elements of a web page into components like Site ID, Primary Nav, Site Search, Utilities, Breadcrumbs, Page Title, Product Filters and Footer Navigation
- How to give your users a sense of orientation and direction
- Contrast with your color scheme
- Tips on choosing the right font and font size for your demographics
- Tips for formatting your text for maximum legibility
- Lecture Exercise: Steve Krugs Trunk Test
-
22Trust, Safety and Credibility (Part 1) Landing Page Design Best Practices
A users likelihood to convert on your landing page is directly related to the sense of security and trust your landing page conveys when a person first lands on your site.
In this lecture you will learn:
- Concepts of neatness, organization and high production quality in landing page design
- Real world preference tests on three different designs in the auto industry with different levels of overall production quality
- How to provide transactional assurances that will counteract the anxieties your visitors have
- How to use satisfaction guarantees and company policies to increase trust and security
- Using logos, media mentions and badges properly in your landing page designs
- Understanding social identity and customer reviews to your advantage
- Landing page design best practices in the real world
-
23Trust, Safety and Credibility (Part 2) Landing Page Design Best Practices
In this section we will continue to talk about how to use testimonials, reviews and client logos to increase a sense of trust on your landing pages. We will also take a look at a number of real-life examples of good and page landing page design from real life websites.
-
24Dedicated Landing Page Design Best Practices (Part 1)
Dedicated landing pages are used to highlight specific products or services, and they are used to accept traffic from individual ppc campaigns.
In this lecture you will learn:
- Landing page design best practices for the dedicated landing page
- The importance of a clear headline and clear call to action
- Breaking down a landing page step by step and pointing out all the areas that can be improved upon
- Real life examples from PPC landing pages across the internet
-
25Dedicated Landing Page Design Best Practices (Part 2)
In this lecture we will continue to talking about best practices for the dedicated landing page. We'll rebuild a landing page from scratch, making improvements in all the essential categories for clarity, trust and persuasion.
Designing and Building a Landing Page Step by Step in Unbounce
-
26Download all Section Three Slides
-
27Using Scarcity to Improve Conversion Rates on Your Landing Pages
Scarcity is an important psychological concept in landing page design and you can use it effectively in your landing pages to improve your conversion rate
In this lecture you will learn:
- How to create a sense of urgency with scarcity
- How to use deadlines in landing page design for seasonal products
- Examples of scarcity in web design
- How to be specific and valuable
-
28Principles of Persuasion: Reciprocal Concessions & Reciprocity in Landing Pages
The principles of reciprocity and reciprocal concessions can be found all over the web in landing page design. They are two very important concepts worth considering when writing copy for your landing pages.
In this lecture you will learn:
- How to engender a sense of gratitude and indebtedness in your website visitors
- How to apply negotiating principles and techniques in your landing page design
- Different ideas for implementing reciprocity in any business model
- Using reciprocal concessions in conjunction with other landing page persuasion concepts
-
29Principles of Persuasion: Anchoring and Cognitive Dissonance Theory
When it comes to pricing your products and services, anchoring and cognitive dissonance theory are two very powerful persuasion frameworks that can increase your conversion rates.
- Real life example of an anchoring test
- Examples of persuasion frameworks being used effectively on landing pages throughout the web
- How people rationalize their decisions based on their previous efforts
- How to win more clients by understanding cognitive dissonance theory
-
30User Scenarios and Contextual Perception in Landing Page Design
In this lecture you will learn:
- The power of empathy in landing page design
- How your visitors differ from each other and how your website visitors will typically feel about your products and services differently then how you think they do
- Understanding the importance of contextual awareness
- How to think about your website visitors in the greater picture: Where they came from, what they want and what their motivations are
- Using analytics tools to understand where your website visitors came from and what their demographics are
- Understanding the difference between organic, PPC, social and email traffic
- How to build user scenarios to get an intuitive feel for your visitors
- Building personas to understand the knowledge your visitors have and what their anxieties are
- How to build complex and complete user scenarios
- Lecture exercise
Conclusion and Closing Remarks
-
31My Favorite Landing Page Builders and Getting Started With Our Unbounce Page
-
32Getting Familiar With the Unbounce Page Builder and Adding Our Header Section
-
33Creating a Logo in Photoshop and Using the Unbounce Image Uploader Tool
-
34Working With Background Imagery in Landing Pages and Developing Our Hero Section
-
35Creating a Form, Action Block, and Finishing the Hero Section in Unbounce
-
36Discussing Landing Page Design Changes and Creating our Primary Content Section
-
37Finishing Page Content, Adding Icons, Footer and Working With Buttons Unbounce
-
38Publishing Your Unbouonce Landing Page on Your Custom Domain
-
39Adding Custom CSS in Unbounce to Create Professional Drop Shadows
-
40Making Your Landing Page Design Work Better With Custom Javascript Snippets
-
41Mobile Site Layout in Unbounce Based on Mobile Landing Page Design Guidelines
-
42Designing Your Form Confirmation Dialogue in Unbounce and Testing Your Live Form
-
43Assigning A/B Testing Variants in Unbounce and Assigning Traffic Weights
-
44Integrating Your Unbounce Form Submissions With Your Mailchimp Account