Redesigning above-the-fold content to reduce bounce rate

Jacquelyn Tandang
Jacquelyn Tandang
Apr 16, 2023

In our previous post, we improved our page loading speed with the expectation that it would reduce the bounce rate but instead, it increased.

There are other factors that would cause high bounce rates which are:
- Low-quality web page design (and)
- Mismatch between content and keywords

Today, we will work on improving our low-quality web page design to try to decrease our bounce rate. We will focus only on above-the-fold content. This is part of the webpage that is visible before the user scrolls down the page.

Once the user scrolls down the page, the session is no longer counted as a bounce. We will focus on below-the-fold content later when we start improving our engagement rate after improving the bounce rate.

Check Google Search Console insights to understand what your audience is looking for

Here are the top queries where users find our site:

Search console insights page 1 Search console insights page 2 Search console insights page 3 Search console insights page 4

Based on the above screenshots, our audience is mostly looking for the following:
- the price or rates,
- photos,
- menu (and)
- reviews

We will redesign our content to give our audience what they are looking for on page load. This will give them the impression that they found the right place to get what they need to know.

Our content pages already show the best picture we have as the first image the audience will see on the page load. We added the minimum budget needed to afford to get a decent meal for the restaurant or the minimum budget needed for a staycation.

stars and budget

If a user landed on a menu page, we added a link to the review of the actual restaurant, or the resort where the restaurant is in, as a breadcrumb on top of the page title.

breadcrumb

Breadcrumbs, also known as a ‘breadcrumb trail’ is a type of secondary navigation scheme that reveals the user’s location in a website or application. This term came from the Hansel and Gretel fairy tale in which the two little children drop breadcrumbs to form a trail back to their home[1].

A breadcrumb will also help visitors who are not yet sure which exactly they want to visit in a particular destination. Say an audience who visited Escala Tagaytay may want to know other places they can stay in Cavite.

Add a share functionality

Some audiences may visit your webpage just to be able to get the URL to be able to share it with their peers. I am guilty of this behavior so I am adding it in.

In one of our previous posts, we used a Facebook widget to be able to share our page in social media. We removed it because it adds third-party scripts in our website weighing it down.

With 80% of our users using mobile devices, we will use native social share for mobile. This gives us more options on where users can share our link without adding too much weight to our website.

For visitors that are on devices that do not support native social share, a fallback is provided to be able to share on different social media platforms by opening a new tab or by copying the link.

share feature

Change typography

Previously, we used customized fonts from Google web fonts however, it causes a layout shift when it falls back to an available system font when the web font hasn’t loaded yet.

We used the following in our css instead

  font-family: -apple-system,BlinkMacSystemFont,San Francisco,Helvetica Neue,Helvetica,Ubuntu,Roboto,Noto,Segoe UI,Arial,sans-serif;

By using a font that is already available in the system, we avoid causing a layout shift and we make the site speed faster by not having to download a web font.

We will discuss layout shifts in more detail when we start working on improving user experience.

Remove ads

For desktop devices, we had a sidebar where we placed ads, we removed this sidebar and placed it after the contents. This way, we do not give away the impression on page load that the site monetizes on advertisement until the users scroll down the page. Also, we do not need to load the maps and the ads yet until the user scrolls making our site loading speed faster.

Lastly, make sure that the changes do not negatively affect site loading speed.

Revisit the steps we did in blog#2 to make sure that the page is still loading within 3 seconds.

 

Here is our above-the-fold content before

before

Here is our above-the-fold content after our changes

after

You may visit this page to see the new design live in action.

In our next post, we will take a look at our data to see if redesigning our above-the-fold content was effective in reducing our bounce rate.

Sources:
[1] https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/