How to reduce your website's bounce rate with the 90/10 principle

By Finn Dollimore
02/03/2022

After learning about the 90/10 principle, I never looked at a web page the same way. The aim of this article is to enhance how you think about designing and building landing pages, helping you get more signups.

The 90/10 principle applies to two major components of your landing pages:

  • Content strategy (copywriting)
  • Page design and layout

We’ll start by learning what the 90/10 principle is, how it applies to website content strategy, how it increases the conversion rate of your copywriting, and provides a better user experience for readers of your marketing copy.

Then I’ll show you how to apply the 90/10 principle when you design a landing page, explaining the best practices of landing page structure, helping you provide a better flow of information to your site visitors.

Let’s dive in!

What is the 90/10 principle?

The 90/10 principle splits your landing page into two major sections:

  • The top 10% (the hero and sub hero)
  • The bottom 90% (page body content)

The top 10%, the hero section, is where all of your prospects land, and the only part of your website that everyone is guaranteed to see. Whether the user scrolls or bounces depends on how well you match their expectations. The strategy behind your hero section should be matching the user’s expectations, and teasing the value / benefit in your offer. 

The other 90% of the page is about encouraging the prospect to progress to the next stage of your funnel, closer to becoming a paying customer. It's about leading them into a deeper conversation, then asking them to take an action at the bottom of the page. The success of your 90% depends on how well you communicate the value of the next stage of the funnel.

Boost the conversion of your marketing copy

The first 10%

According to the 90/10 principle, the top 10% of your landing page should meet your prospects expectations based on where they came from, showing the main value proposition of that page.

If your page’s traffic is coming from a facebook ad saying “Sign up and get a free ebook about how to convert more customers on your website” the hero of your landing page should exactly match the expectations of someone clicking on that ad.

A common lead generation strategy

In line with this, you’d design a hero section focusing on the same value proposition in the facebook ad (the free ebook).

Now imagine that you sent this traffic to your services page or homepage, pages that don’t contain a headline about a free ebook. In this case, the user will likely bounce from the page. Their expectation was to find the offer for a free ebook, and when they were met with something different, they left.

Consider where the user came from, and what value / offer they were looking for. Then we show them they’re in the right place to get that value. The top 10% is there to keep them on the page and scroll down.

The other 90%

If the hero section (the 10%) has been successful, the user will scroll down the page. They arrived based on the promise of value from your ad (or another page). You matched their expectation, showing them they’re in the right place.

What about the rest of your page?

Each following section the user sees, must be dedicated to motivating them to take the next step in the funnel. 

If the page is intended to attract cold leads using a facebook ad offering a free ebook, the 90% should be about moving the user from cold traffic (no ebook), into a lead (exchanges email for free ebook). This process is a whole article in itself, one which I will cover in a future post.

For now understand this:

moving a user from one funnel stage to another is all about explaining in simple terms what the user stands to gain by taking the next step. 

Simplicity is key.

All you need is a single value proposition, and one primary CTA on your page (the navbar should always have your major CTA e.g signing up to your product). Following this means prospects will be more likely to understand the value of your offer, and the action they need to take to get that offer. You’re making it really easy for them to convert. When it comes to conversion, simplicity is key.

Half of the battle when writing landing pages is getting the user to understand the value. This is done by communicating, and breaking down the value proposition, bit by bit, in simple terms. And that is what is done in the 90% of your landing page.

That’s the 90/10 rule as it applies to content strategy and marketing copy.

The 90/10 rule applied to page design

The 90/10 rule must also be considered in your page design. Why? Generally, you’ll find two main types of web browsers on your landing pages.

  • Grab and goers: those who are looking to grab the information they need and go.
  • Readers: those looking to read deep into your content.

Because most of our web browsers fit into one of these categories, we need to structure the page to ensure a good user experience for both types of site visitors. 

Both types of user will land on the hero, but it is usually the deep readers that scroll further down the page reading our long form content. Grab and goers stick higher up the page, sometimes just on the hero.

Grab and goers like white space, icons and images because it allows them to quickly gain understanding of your content. Readers love these things too, plus the larger paragraphs loaded with features and benefits.

We need to design the hero section to please the grab and goer. The further we get down the page, we can add longer form content that the reader will dig into. This is because most visitors further down your page will be readers.

Designing the hero section 

In the hero section (and sub hero), we need to use:

  • Icons
  • Images
  • Large headings
  • Bite sized text
  • Value props
Notice the bite sized information


This is where the content strategy and page design cross over: the design can’t be bogged down by long form content…. yet. It must be bite sized content, formatted for easy consumption.

Designing the 90%

Further down the page, feel free to start using longer paragraphs, complemented by pictures. You know, the classic layout you’ll see on most web pages.

Remember the 90% strategy; communicating the benefits and value in our offer. You may need longer form content to communicate this, if so, put it here further down the page. Then, we finish with the CTA section with our offer.

Summary

Do you see how splitting your landing page into 10% and 90% helps you with content strategy and page design?

In terms of content and copywriting, you match your user’s expectations and communicate the offer and value proposition early on. The rest of the page is about explaining the benefits and features in deeper terms. From a design perspective, you want to prioritise grab and goers on the hero section; bite sized content, icons and images. and add more detailed content for readers (further down the page). By providing your site visitors with this experience, you’re helping them understand the value in your offer, and increasing the chances they will finish reading you page.

Want to reach out?

Your message has been sent.
Something went wrong submitting the form.
Finn Dollimore