Brief Summary
This video discusses how to improve landing page hero sections to boost conversion rates. The video covers key elements like typeframing, the eye gaze principle, and CTA color matching. It also highlights common mistakes in modern web design, such as using AI-generated images and showcasing apps in the hero section.
- Key Takeaways:
- Focus on the hero section as it's crucial for convincing visitors to click the CTA.
- Use typeframing to create a strong copy foundation before adding visuals.
- Employ the eye gaze principle to guide visitors' attention towards the CTA.
- Utilize CTA color matching to create a cohesive and consistent design.
- Avoid using app images in the hero section as they don't effectively communicate the value proposition.
Dropping Conversion Rates
The video starts by highlighting the issue of modern web designs negatively impacting conversion rates. The speaker analyzed over 500 hours of hotjar recordings and hundreds of designs, concluding that many designs are losing their way. The video aims to provide guidance on boosting landing page hero section conversions using typeframing and other methods. It also addresses red flags in modern design, such as the overuse of AI and the detrimental effect of app designs in the hero section.
High Converting Hero Section
The hero section is the most important part of a website as it needs to convince visitors to click the CTA. The speaker emphasizes that the hero section should be 90% effective in persuading visitors, while the remaining 10% can be addressed through clearing doubts sections or other supporting content. A weak hero section can lead to lost clients, highlighting its crucial role in conversion.
Clearing Doubts Web Design
Clearing doubts sections can be used to provide social proof, examples of use, or other relevant information to address potential concerns. These sections complement the hero section, working together to secure a confirmed sale. The video emphasizes the importance of a strong hero section as the foundation for a successful conversion funnel.
Types of Hero Sections
The video outlines three main types of hero sections:
- Centered Content: This type features centered content at the top with an overlapping visual that incorporates the content.
- Right-Side Key Visual: This type places the main key visual on the right side of the hero section.
- Key Visual Below: This type positions the main key visual clearly below the content elements.
The speaker acknowledges the common misconception that the third type is simply a large app image placed below the copy, which is often ineffective.
Best Practices for Hero Sections
When designing a hero section, it's essential to divide it into two main sections: the key visual section and the text content section. The text content can be further divided into a kicker, the main headline, a description, and CTA buttons. The kicker serves as social proof, grounding the main headline and making it more persuasive. The headline should concisely communicate the problem being solved and why visitors should care. The description provides additional details about the solution.
Landing Page Buttons Guide
The video recommends using a single CTA button for most landing pages. However, for products with higher stakes, a secondary button can be added to provide additional information, such as case studies or a demo. The primary button focuses on usefulness proof, while the secondary button aims to reduce friction by offering a less committing option.
Typeframing
Typeframing is a technique that involves starting with the copy and perfecting it before adding visuals. This approach ensures that the copy is strong and well-structured, providing a solid foundation for the design. The speaker emphasizes that typeframing is more effective than low-fidelity wireframes for large marketing teams, as it allows them to visualize the copy and understand the hierarchy more easily.
Problems with Modern Web Design
The video criticizes the trend of using AI-generated images in web design. The speaker argues that these images often lack relevance to the product and are used solely for aesthetic purposes. This approach prioritizes visual appeal over effective communication, resulting in non-converting websites.
Landing Page Key Visual Guide
The video emphasizes the importance of using key visuals that resonate with the target audience. The speaker suggests using images of people to create an emotional connection and encourage identification. The choice of person should be carefully considered to match the target audience.
The Eye Gaze Principle
The eye gaze principle is a primal instinct that compels us to follow the gaze of others. When using images of people in hero sections, it's crucial to consider the direction of their gaze. If the person is looking directly at the viewer, attention will be drawn to their eyes. However, if the person is looking towards the CTA, it naturally guides the viewer's attention towards the copy and the call to action.
Mobile Hero Sections
On mobile devices, the eye gaze principle can be further enhanced by using an image of a person looking up from below at the CTA. This creates a direct visual connection between the person and the call to action, encouraging the viewer to engage with the copy.
Hero Section Guide
The video highlights the importance of using an optical guide to further direct the viewer's attention towards the CTA. This can be achieved by creating a natural diagonal line with the text, guiding the eye down towards the copy.
CTA Color Matching
CTA color matching is a technique that involves recoloring a piece of clothing in the hero section image to a color similar to the main CTA. This creates a cohesive and consistent design, visually connecting the image to the call to action. The speaker emphasizes the importance of maintaining a consistent color palette throughout the design, avoiding random color choices.
All Steps Combined
The video summarizes the key elements of a high-converting hero section:
- Emotional Connection: The visual should create an emotional connection with the viewer.
- Eye Gaze Principle: The person in the image should be looking towards the CTA.
- Optical Guide: The text should create a natural diagonal line guiding the eye towards the copy.
- CTA Color Matching: A piece of clothing should be recolored to match the CTA color.
- Clear Copy: The copy should be clear and concise, starting with a social proof kicker and a strong headline.
- Problem Definition: The headline should clearly state the problem being solved, and the description should provide further details.
- Usefulness Proof: The CTA button should provide evidence of the product's usefulness, such as case studies or a demo.
- Friction Reduction: A secondary button can be used to offer a less committing option, reducing friction for the user.
Why Apps in the Hero Section are a Bad Idea
The video argues that using app images in the hero section is often a bad idea for conversions. Most visitors are unfamiliar with the app and don't care about its appearance. They are primarily interested in how the app solves their problems. Instead of showcasing the app itself, the video recommends focusing on showing a person using the app to solve a specific problem.
Further Improve Your Websites
The video concludes by encouraging viewers to learn more about web design through landing page challenges and web design courses offered by the speaker. The speaker emphasizes the importance of staying informed about design trends and continuously improving website design skills.
