Why People Are Leaving Your Website in the First 5 Seconds (and how to fix it)

That big picture or banner at the top of your homepage — what web designers call a "hero banner" — is one of the most important pieces of your entire website.

Most people tend to skim a website and decide within the first 3-5 seconds if they want to continue scrolling or not. So, that means your hero banner — which is the very first thing that people see — has one job: to instantly communicate who you are, what you do, and why someone should care.

The #1 mistake that most hero banners make

The most common mistake that we tend to see on a website is placing text on a busy photo background without any contrast layer. The problem is that when your Header, Sub-heading, and Call-to-Action (CTA) buttons compete with a busy background, visitors can't easily read them (or even see them) and are much more likely to leave your website altogether.

The second most common mistake is unclear messaging.

It can be easy to become tunnel-visioned into your own business. And when that happens, you also tend to write using language that's filled with industry jargon.

And while a header written with industry jargon is technically correct, it doesn't always connect with a general visitor who is still trying to figure out who you are or what you do.

These two common mistakes are almost always what separates a hero banner that actually converts between one that doesn't.

So now let's talk about how to fix that.

Designing your website's hero banner

Part 1: Designing the visual layout

Here's what to keep in mind when designing your hero banner:

1. Always use an overlay on busy photo backgrounds.
   

If your hero banner uses an image in the background then also add a subtle dark, light, or blurred overlay between the image and the text (copy). Even a semi-transparent dark layer at 30-50% opacity significantly improves readability (and therefore, accessibility) without obscuring the photo.

2. Add a visual hierarchy.

Your banner should guide a visitors eye from left to right and in a specific order:

• Main header: the core value statement, the biggest & boldest

• Sub-heading: the supporting sentence to add more context (if necessary); placed directly below the main header

• Call-to-Action (CTA) button(s): outcome driven; high-contrast; placed directly below the sub-heading

3. Make sure your CTA buttons are impossible to miss.

CTA buttons that blend into the background are conversions that are never going to happen.

Your CTA buttons should:

• use a high-contrast color that stands out from both the background and the surrounding text

• be outcome-driven (more on this below)

• be placed immediately below the sub-heading

For websites with more than one goal (for example: donors and volunteers), it's perfectly fine to have both a primary, and a secondary CTA button. Just make sure one is visually dominant (see image below).

4. Don't neglect mobile.

Over half of website traffic is from a phone. A hero banner that looks good on desktop has to also look good on mobile as well (don't neglect it). Make sure the text is legible (not too small), the buttons are easy to click on (not too close together), and the most important part of the photo isn't cropped out.

Always, always, always preview your website on mobile screen before publishing.

Part 2: Writing your headline and sub-headline

1. The main headline.

This is where most organizations tend to lose people.

And it's not because the work isn't meaningful or even that the sentence itself is incorrect. It's more so because the language tends to be industry-jargon heavy — and it typically doesn't land with a general audience.

For example, instead of: "A youth and women-led organization dedicated to empowering communities through integrated approaches to sexual and reproductive health, gender equality, and climate justice."

We might try: "We're a women-led team in Tanzania showing girls that their health, their rights, and the environment are all connected. We help empower young women with resources to stay safe and lead their communities in the fight against climate change."

Let's look at another example.

Instead of: "Promoting gender equality through mentorship advocacy..."

We might try: "Empowering the next generation of young women through local mentorship. We've helped [X number] young girls stay in school this year."

Again, it's not as if the first sentence is incorrect. It is technically correct. But when we rewrite the first sentence — we translate it so that it meets visitors where they are and invites them in to continue scrolling/engaging.

2. Use specifics whenever possible.

Vague language is forgettable. For instance, "making a difference," or "creating change," or "building a better tomorrow." It's vague, not tangible, and no one is going to remember it.

However, specific language builds trust. For example:

• "We've helped [X number] young girls stay in school this year" is far more compelling than "supporting girls' education."

• "Serving 4,200 families across 3 counties" hits harder than "serving our community."

These are real, tangible numbers that people can actually wrap their head around. So, if you have a real number — use it!!

3. Your sub-heading should do one thing.

The sub-headline is not a second chance to restate the headline. Instead, it is used to include additional context to the main headline if necessary. This can include things like who you serve, where you operate, how you're different, or what someone can expect if they engage.

This also means that the sub-heading is not always required. You do not have to have one if you don't want it — again, it is there to include additional context only if necessary.

Part 3: Choosing your CTA button copy

First, understand that buttons are essential elements; especially when prompting a call-to-action (CTA) and showing a visitor where to go next in the journey.

And in general, as website visitors and online users, our eyes have become accustomed to naturally search for buttons when we're browsing through a website. This is why buttons are much more effective than clickable text or text that is linked and says: "Click here" (for example).

Next, understand that the actual words on your CTA buttons matter way more than people realize.

For instance, generic copy like "Learn More" or "Click Here" gives visitors no real reason to take action. Whereas, outcome-driven copy tells people exactly what happens next when they click.

So, you want to match the copy on your CTA buttons to the goal(s) of your website. This might include things like:

• "Support Our Work" or "Fund a Scholarship" (donation-focused)

• "Book a Free Consultation" (service-focused)

• "Volunteer Today" or "Get Involved" (community-focused)

Here are some things to keep in mind:

Apply contrast: to enhance button visibility, consider using contrasting website color schemes. For instance, opt for a light color for the button text, a dark color for the button itself and a contrasting color for the surrounding area (or section of the page).

Optimize the button size (especially on mobile): buttons that are too small can be hard to tap on, while overly large buttons might take up too much space on a small screen. The point is — you basically have to be like Goldilocks here and keep your buttons at a reasonable size or "just right" to ensure they stay legible (and accessible) for mobile users.

Part 4: Putting it all together

Let's take a look at a real before and after.

In the Before version, the text is placed directly on a busy background image with very little contrast — making the headline and sub-heading incredibly difficult to read. And the red "Get Involved Today" CTA button is almost completely invisible. Because it's a red button sitting on top of a red poster board in the photo, it essentially disappears.

Before:

Now look at the After versions. We put together two different redesigns of the same website to show you that there's more than one way to solve the problem.

In both versions, you'll notice a few things: the copy has been rewritten to feel more natural and accessible to the average visitor. It has less 'industry jargon' and more 'laymen's terms.' The banner has also been redesigned to create stronger contrast, so the text is actually legible.

And in the second version, we took it a step further by pulling the copy onto its own dedicated strip(s) entirely, separate from the background image (which also has its own section) — which makes everything super clean, clear, and easy to read when skimming.

After:

Overall, as you can now visually see — these are small tweaks that can make a big difference. And that's really what good web design comes down to 😉

Part 5: A quick checklist before you click publish

Use this checklist below before your hero banner goes live:

✔️ Can you read the headline clearly against the background?

✔️ Can you read the sub-heading against the background?

✔️ Is there a dark/blurred/tinted overlay on any photo backgrounds?

✔️ Does the headline communicate what you do and for whom (without jargon)?

✔️ Does the sub-headline add useful context (and not just repeat the headline)?

✔️ Is the CTA button high-contrast and immediately visible?

✔️ Is the CTA copy outcome-driven?

✔️ Does the banner look good/legible on mobile?

If you can check off every box, then there's a good chance that your hero banner is in good shape!

written by:

Adriana Leos

Chief Creative Officer

vznayres