How Should the Ideal Landing Page Look – Hero Section

An ideal website should always be tailored to the target audience the business aims to reach. These could be customers, potential employees, future partners, or other stakeholders. The first step is to clearly define the purpose of the website. For example: a customer wants to easily access their online account – in this case, the focus is on technical functionality and user-friendliness.

Additional Info: Websites with this functionality must often ensure compliance with data protection regulations, such as the GDPR. The focus here is more on functionality and security rather than design.

However, many websites serve a different purpose: customer acquisition. In this article, we will focus on this type of website.

How to Effectively Attract Customers Through a Website

In this article, we will not focus on optimizing the design to keep visitors on the website longer (e.g., through visual hierarchy or appealing design). These aspects have already been covered in detail in a separate blog post (Die Facetten des Webdesigns – Grundlagen einfach erklärt). Nonetheless, it is worth mentioning that visual hierarchy, a well-structured information architecture, and an appealing design all contribute to increasing the likelihood that a website visitor will become a paying customer.

Here, we will focus on the journey from the visitor’s first interaction to the click on the purchase button.

What Should Be Avoided?

Before outlining the ideal steps, we want to address a common mistake: the excessive use of call-to-action (CTA) buttons. Recently, we reviewed a professionally created website that had 11 identical CTAs on a short homepage. This approach comes across as pushy and desperate. Moreover, it detracts from the uniqueness of the website. Uniqueness is one of the four key success factors we have identified for a website. Therefore, avoid using too many CTAs to direct visitors to a product.

Additional Info: Studies show that too many CTAs can overwhelm users, leading to what is known as the "Paradox of Choice" effect. Visitors may become indecisive and leave the site without taking action.

The Hero Section – The First Impression Matters

In the hero section, the visitor should immediately know where they are and what the page offers them. A clear, concise message is essential here. The first impression is critical to prevent visitors from bouncing off the site. Unique or standout elements in the hero section can help capture the visitor’s attention.

The message should be delivered using a clear visual hierarchy. It should be evident which element should catch the eye first (e.g., a large image or a compelling headline) and which information comes next (Discover here how visual hierarchy improves your design). Don’t use too many words – communication should be clear, simple, and direct.

Should a CTA Be Integrated into the Hero Section?

Opinions differ on this. A CTA in the hero section can improve usability, as users immediately know what action to take. It increases the CTA’s visibility and can lead to faster conversion. However, in most hero sections, the visitor may not have enough information yet to make a decision. A CTA placed too early can feel pushy, especially if the visitor hasn’t fully understood the product.

Additional Info: Whether a CTA should be placed in the hero section depends on the type of website and its target audience. On SaaS websites, where visitors are often already informed, an early CTA can be effective as it quickly guides them to the desired action. For products or services that require more explanation, it’s usually better to place the CTA further down the page, allowing the visitor to gather enough information before making a decision.

The Logic Behind Scrolling

When the visitor has to scroll down to learn more about the company, a logical flow is established: First, a general introduction (hero section), followed by more detailed information, and finally a CTA. This creates a logical communication structure and gradually leads the visitor to the purchase decision.

What Happens After Clicking the CTA?

After clicking the CTA, the visitor is taken to a subpage, which can either be part of the company’s website or hosted on a platform like Stripe. It’s crucial that this page provides a detailed description of the product. All potential questions that the visitor might have should be addressed here. A clear description of the product’s benefits, such as what problems it solves or what advantages it offers, is key.

Additional Info: Sales communication should highlight both the emotional and rational benefits of the product. For example: "This coaching service helps you gain more confidence" (emotional benefit), and "More confidence leads to better promotion opportunities" (rational benefit).

Conclusion:

An ideal landing page should be clear, logical, and non-intrusive. Too many CTAs can confuse visitors and diminish the uniqueness of the page. Especially in the hero section, it’s crucial to convey a clear message and ensure the design is visually appealing. A CTA should only be placed once the visitor has received enough information to make an informed decision. Guiding the visitor logically from the company’s introduction to the CTA increases the likelihood that they will become a customer.

Additional Conclusion: The entire purchasing process should be as simple as possible, without unnecessary hurdles. Every additional click or step increases the chance that the visitor will abandon the process.