3 important conversion elements that you need to put above the fold

You ever walk into a room and are not exactly sure what is going on? Is this room part of a store or does someone actually live here? There are no signs, seemingly merchandise is everywhere, and you are not sure exactly what is it going on. In that situation, you feel confused and your first thought is to get out of that room. That feeling where you want to flee in the physical world  is the same feeling that your website visitors get in the digital world if you do not immediately tell them:

  • What is the purpose of your website
  • What they are expected to do on your website

Visitors do not spend  time scrolling to understand your site, statistically speaking scrolling is a mental investment they do not make. In fact Jakob Nielson (a useability expert) estimates that visitors spend 80% of their time looking at the information in the area that they do not have to scroll – also known as above the fold.  Above the fold is the area of your website that a user sees before they have to scroll down. Here is a diagram of above and below the fold:

above-the-fold-scaled

The term above the fold comes from the golden era of newspaper sales. People saw the area above the physically folded paper when they walked by the newspaper racks and decided if they wanted to buy a newspaper or not. If the above the fold news was interesting they would buy the paper, if the above the fold news was not interesting they would not buy the paper and do something else like listen to a Walkman.

Note: For those under 25, a newspaper is something that people used to read to get the news before twitter was invented.  A Walkman was a way to listen to music.

In the modern era of web design, the “above the fold” area is your first impression to get visitors interested and if you do not immediately grab their attention they leave and do not come back. Now that you understand how important the space above the fold is, let’s look at the three elements that you need to have above the fold to increase online sales.

1. Put Your Value Proposition Above the Fold

above-the-fold

The first thing you immediately want to tell your website visitors is why they should invest their time and their money with you. What is the value that your service or product adds to their lives and their business? A good working definition of value proposition comes from Peep Laaja of ConversionXL  who states that value proposition is, “a promise of value to be delivered”. The value proposition is the most important element to place above the fold because it is the most effective marketing message that you have. If you take nothing else away from this article remember this – on your webpages put how you deliver value to your customers above the fold so that they can immediately find it. Value proposition is an in-depth topic and can take weeks or months to come up with the best value proposition for your business so I have listed some resources to help you find further information.

Here are two resources that help improve your value proposition:

  1. ConversionXL – This article helps break down value proposition step-by-step.
  2. Forbes – This article is a 4 step process for how to build your value proposition

Here is an example of a website with a great value proposition above the fold:

Wordstream views

Wordstream does a great job of placing their value proposition above the fold – “40 hours of PPC analysis  in 60 seconds or less”. Anyone who does PPC analysis knows that 40 hours of it is mentally taxing. The value they offer is that their product can significantly cut down the time necessary for analysis.

2. Put Your Call to Action Button Above the Fold

funny-cell-phone-300x300

 

A call to action is the button your site uses to entice visitors to complete a business action on your website. Business actions range depending on your industry and type of site – they may be a button at the bottom of a lead generation form and they also could be an “add to cart button. You need to immediately and explicitly tell visitors what you want them to do and make it as easy as possible for them to find your button.  If they have to scroll, they may not find the button and then it is essentially pointless that they were even on your site.

Here are two resources that can help improve your call to action buttons:

  1. HubSpot – HubSpot generally has great blogs and this one is no exception. Pay special attention to the #2 point
  2. UnBounce –  This article is very focused on conversion centered design and how the buttons can impact conversions (the business action you want your customer to take)

Here is an example of a website with a great call to action above the fold:

above-the-fold

Priceline does a great job placing their call to action button above the fold. Additionally, they did a great job with describing what happens when you click on the button. You are not “submitting”, you are searching for a hotel. However, if I  ran their page I would A/B test getting rid of the secondary call to actions as I  they may be distracting to the visitor and may cause them to leave the page. Generally I recommend one CTA per landing page.

3. Put A Hero Shot Above the Fold

The best definition of I have come across of a hero shot is “the visual representation of your offer and can help people to gain a better understanding of what it is or what it looks like. ” (from UnBounce).  Pictures attract the eye and sometimes the best way to get the point across is to show the product or service, rather than just describe it. I find hero shots to be one of the most difficult aspects when clients are looking for conversion rate optimization. It is easy when the service has a visual aspect like when I was working with a cookie company, but it is significantly more difficult when I work with companies such as life insurance. Some general tips are:

  • Try to avoid using stock photos
  • Show your product in action
  • Make the image as clear and professional as your budget allows

Here are two resources to help improve your hero images:

  • InstaPage – 3 good bullet points to help improve your hero image
  • GetElastic – This is a simple list article but is worth it alone to see about avoiding the Powerpoint look

Here is an example of a hero shot above the fold:

Square_-_Accept_credit_card_payments_with_your_iPhone__Android_or_iPad3-1024x1024

Now that you know what you need to put above the fold, why don’t you learn how to optimize your landing pages.

Let’s talk on your schedule Call me back