Dicas de design acima da dobra: como causar uma ótima primeira impressão em seus visitantes

This post is also available in:

When you type “above the fold” into Google, you get headlines like “Is it a myth?” and “Is it still relevant?” It’s a fair question, given the staggering amount of content that gets consumed on media that, well, doesn’t fold.

Nowadays, the fold line is more commonly referred to as the scroll line. It means that the need for scrolling begins where the fold line ends. “Above the fold” refers to everything visible on the screen before you begin scrolling.

One of the most well-known studies regarding the fold line comes from the Nielsen Norman Group. In 2010, they conducted research and did it again in 2018. The results were very intriguing, and the researchers pointed out the following: 

“In our most recent study, users spent about 57% of their page-viewing time above the fold. 74% of the viewing time was spent in the first two screenfuls, up to 2160px.”

The interesting part is that in 2010, users spent an average of 80% of their time above the fold. While 57% is much lower in comparison, it’s still a significant amount. Even if scrolling has become second nature to people, the content they see above the fold still determines whether they will scroll further. So, to answer all of those Google questions: yes, above the fold still matters. 

Source: https://www.nngroup.com/articles/scrolling-and-attention/

How Can Scroll and Above-the-Fold Design Work Together?

Cxpartners conducted user testing with an eye tracker. The eye tracker is used to see what the user sees, and the data is then used to create a heatmap that represents what the entire group of users sees. One of the most interesting heatmaps they created was for the website design of Bristol Airport. They discovered that having less content above the fold encouraged people to look below the fold.

In other words, carefully planned above-the-fold content intrigued readers to scroll and seek more information. We see now that the space above the fold is commonly used not to convert a customer but rather to persuade them to continue looking. 

“Users scroll when there is reason to. When users fail to see the information of value, they stop scrolling.” – Amy Schade, Director of User Experience, Nielsen Norman Group.

Source: https://www.cxpartners.co.uk/our-thinking/the_myth_of_the_page_fold_evidence_from_user_testing/

What You Need to Know About Above-the-Fold Design

The first question is, where is the fold line when there are so many devices with varying screen sizes? For web pages, most UX designers use 1000×600 pixels. However, because we now have tablets and smartphones, it’s best to say that the average fold is at 800 pixels.

That is the place to put the most important information. If you do it correctly and engage visitors with the first thing they see, they will undoubtedly scroll down and stay on your website longer. Then, you can spend more time engaging users in your product and potentially converting them.

People are accustomed to scrolling, particularly on mobile devices, and according to this study, 50% begin to scroll within 10 seconds and 90% within 14 seconds. This is significant because you only have 10 seconds to make an impression. It may appear to be a very short time, but if you did your job well, you would have their attention in a matter of seconds.

You probably already know this, but we’ll go over it again because it’s important. Above-the-fold content serves to paint a picture of your brand and what visitors can expect from your site and convince them to explore further. So, keep the picture simple, engaging, and instantly recognizable. 

In the rest of this article, we’ll go over the elements you should include in your segment above the fold and some examples to get your creative juices flowing.

Unique Selling Proposition (USP)

The most important aspect of above-the-fold content is your unique selling proposition or USP. It’s the one thing that distinguishes (as the name implies) your company from your competitors. Aside from that, it serves as your website’s headline.

So, don’t rush it. Take your time and think about it. The whole point is to make it memorable and appealing. Also, you want it to address your target audience directly and what brought them to your site in the first place. Being unique doesn’t mean much if your customers can’t connect with you.

You can find a great example of this on Bosch’s website. “High-tech #LikeABosch.” That’s the end of it. They don’t require anything else. Sure, they have a nice image of a woman acting like a “Bosch”, which is a nice touch. 

They took this and turned it into not only their slogan but also a social media hashtag. Not to mention the song from the commercial that starts playing in your head as you read it.

Source: https://www.bosch.com/

Communicate Value Instantly

If you are not a well-known brand like Bosch, you’ll need more than just a headline. This is where the text beneath the headline comes in. You can do this in a few ways, including writing about your product, but the best approach is to consider your customers. Answer the question, “How will you make their lives better or easier?” 

They need to know the answer to that question right away. It’s more important to them and their attention than how your product works or how much effort you’ve put into making it perfect. And it is for this reason, these responses have been placed above the fold. However, keep in mind that you should avoid long sentences. Make them brief, easy to read, and to the point.

Mannequin Mall is a great example of a company doing this well.  Following the heading “Mannequins for Sale,” they have four sentences that explain to the customer how they will assist them. Let’s examine them:

• “World’s Largest Selection of Mannequins Online” gives the impression that they know what they’re doing and that there’s no need to look any further. They already have everything you want or need. 

• You know it’s simple to get what you want when it’s “Shipped Straight To Your Door.” Your package will be delivered to your door in just a few clicks. You don’t even have to get out of your chair. 

• The phrase “The Fashion Industry’s Preferred Mannequin & Dress Form Retailer” lends credibility to them. To be preferred in the industry, you know they must be trustworthy and provide excellent service. 

• And last but not least, “10,000+ Orders Shipped In The United States.” To have so many clients, they must be very good at what they do. And if all of those people are using their product, why shouldn’t I?

Source: https://mannequinmall.com/

Put a Fine Point on Your Credibility

If you can demonstrate your credibility, you’ll definitely want to use the opportunity in the space above the fold. Customers like to read other people’s reviews and see their star ratings. Even if there are some negative reviews and your average star rating is not 5, it makes them feel more comfortable doing business with you. We all know you can’t please everyone, and a few dissatisfied customers won’t hurt you in the long run. According to Northwestern Study:

“A 5-star rating wasn’t the most trusted by consumers to purchase a product. Consumers displayed more trust and were more likely to purchase a product when its rating was between 4.2 to 4.5 stars.”

In addition to reviews, you can include testimonials or numbers such as a large number of satisfied customers, years of experience in the field, and so on. Depending on your business, you can also include your score from review sites such as Capterra or Yelp.

Gili Sports shows us a great example of applying this above the fold tactic. They put their 5-star rating and 1000+ certified reviews right above the product name, making it one of the first visual elements that the shopper’s eyes will fall on. Customer satisfaction will remain in the backs of their minds for the remainder of their time on this page.

New customers are comforted to know that more than 1000 people just like them have left a review, and if they have so much feedback, they must have a lot of customers because not everyone wants to leave a review. Besides, if they aren’t afraid to be so open about their feedback, they must be pretty good at what they do – and they can prove it.

Source: https://www.gilisports.com/products/106-air-inflatable-stand-up-paddle-board

Showcase Your Products

Let’s move on to the image you can use above the fold. It should be eye-catching but not overpowering. It would be preferable if you balanced your image so that it did not take away all of the attention from your headline and text below. 

• If you have a product, it’s best to include a picture of it. Make it high-resolution so that customers can see your product in all of its glory. Also, take a picture in a real-life scenario so they can better imagine it in their own lives.

• If you’re selling a service, use an image of a real person, such as one of your employees or even yourself. When a client visits your website and sees a standard stock photo they’ve probably seen on other sites, you’re missing the opportunity to differentiate your brand.

In fact, it doesn’t even have to be an image. Many businesses now use animated gifs or videos, but the same rules apply: whatever format you use, it must be customized to your company’s needs. If you use a video, especially if it’s on a loop, make sure the sound is automatically silenced. Nobody likes opening a website and hearing sounds they didn’t expect to hear. In this case, you can use subtitles so that even if there is no sound, visitors can see what you are saying.

For a good example of this, take a look at US Fireplace Store. They decided to showcase only the image of their product, with no sales copy. You can see the full glory of their product because there is nothing to divert your attention. Because their product is prestigious, they don’t need to persuade you that they are the best. This may appear to be a risk, but it’s actually a wise decision when you think about it. Here’s why.

Source: https://usfireplacestore.com/

Remember how we said you should consider what your customers want to hear? In this case, it’s all about what they want to see. Assume you’ve decided to purchase a fireplace and you’re looking for something that will complement the aesthetics of your home. The first thing you’ll want to know is how their fireplace looks, and everything else will come later. 

So, if you sell decorative items where aesthetics are important, consider this concept. It definitely serves US Fireplace Store well. 

Flaunt Your Availability

The ease with which a client can reach you is a big factor in deciding whether to go with you or your competitor. And don’t forget that they want to be able to conduct business with a real person rather than a virtual entity. 

People are sceptical because there are so many scams out there, and being transparent with your contact information will prove some reassurance. Besides, they don’t want to dig deep through your website for your contact information.

So, go ahead and put your real-life contact information above the fold. You can include your physical address if you have one, email address, and phone number. Also, if you have a live chat, make sure it’s visible above the fold. It will make a significant difference.

Take a look at how Mixam displays the brand’s email address and phone number. It immediately creates the impression of availability and excellent customer service in clients’ minds. 

Source: https://mixam.com/booklets

Compelling CTAs

Finally, let’s talk about the CTA (Call to Action) buttons. When considering the calls to action on your site, keep in mind that they should be meaningful and that they can have a major impact on your business. A great CTA stands out and plays an important role in the conversion process. When it comes to CTA text, you can be creative and go beyond the “See demo” types. Look for tips and tricks on how to perfect your CTA button.

For a great example, check out how Ultimate Meal Plans features two CTAs above the fold: 

• The first one says “Try Free For 14 Days,” and it takes the customer to a signup page where they can learn more about the offer. The text itself contains the word “Free,” which customers love to hear, as well as “14 Days,” which is a generous trial period for meal service. The color draws attention, and the text presents a good deal. 

• If customers want to make a definite purchase right away, the second CTA says “Get started,” which takes them directly to the regular signup page. It shortens their purchase process and makes it easier and faster.

Source: https://ultimatemealplans.com/

In Closing

The above-the-fold design remains important as it takes on a new form and function. Instead of putting everything there, the space above the fold is now minimalistic and only contains the most important information and a few elements. Its new role is to entice people to want more information, scroll down, and stay longer on your website. So, take your time designing it, and your efforts will certainly pay off.

Author Bio

Travis Jamison is an entrepreneur and investor. After selling a couple of businesses, he shifted his focus toward investing. However, disappointed by the lack of options for entrepreneurial-type investments – like buying websites & investing in small, bootstrapped businesses, he started Investing.io to provide a home for other entrepreneurs turned investors.