The first few seconds after loading a website are what determines whether or not the user will stay on the website.
As a website owner, answering two simple questions can help you ensure users stay on your website and hence raise your conversions.
The main heading, "hero shot" (main image on the page), and benefit communication are a good way to make your offer relevant and arouse the user’s attention.
The main heading is probably the most misused element on a website. Exaggerated texts that have non-descriptive headings, e.g., "The impulse that moves something", regularly lead to poor conversion rates. Here, you simply need to go straight to the point. Below are my tips for better headings:
Tip: The length of the heading
Your main heading should not be more than two lines (on desktops & tablets). This ensures that user process the content as fast as possible.
Tip: Content
Too much creativity often harms your headings. Call a spade a spade rather than expecting users to correctly interpret abstract formulations. Read your headings to people who are not familiar with the subject and check if they understand what your page is about.
Tip: Word order
When flying over content (which is what almost every user does before reading an article word for word), the words placed at the beginning and end of the heading are more conspicuous. Your article will hence be deemed relevant if your first and last words perfectly describe your offer. Avoid placing pronouns and other unnecessary words in this key positions.
Figure 1: Readers pay more attention to words placed at the beginning and end of the heading.
Images draw a lot of attention and are also processed much faster than text content. It is therefore important for your hero shot to either illustrate your product perfectly and reinforce it – or arouse the emotions of your users.
Tip: Theme
The theme should perfectly complement the main heading and arouse interest in the product. Large product images are often more effective than smaller ones. Use an image that shows people using your product or one that shows more details of your product.
Be careful when showing faces: Faces attract a lot of attention and distract users from the main content.
Faces with bright smiles (teeth!) often distract users the most. Such a theme should therefore not appear on any image on your website, unless you are in the dental field.
Tip: Emotions
Showing negative emotions (e.g., using a picture of a sad child when advertising your "private lessons") generates negative emotions among your viewers. Negative emotions do not sell.
Instead, your image should relay positive emotions. Ask yourself: What kind of feeling should my offer arouse?
Figure 2: Negative emotions do not sell. Instead of illustrating the problem, show your users the target.
Tip: (No) Stock photos
Nobody believes that a supermodel wearing a headset is the one who receives calls in your company. Nobody believes that Mr. iStock Photo works in your company and at the same time also works as a doctor, mechanic, lawyer, and athlete in other companies. Similarly, nobody will believe that your team consisting of a perfect ethnic mix jubilantly sits in front of the monitor – under perfect lighting.
Stock photos are unauthentic!
If for some reason you have to fall back to stock photos, then use images that have low download numbers.
Better: Use your own photos. They must not be perfect. But should be real. This makes your offer more credible and gives your company a face.
Figure 3: If you have to use stock photos, then be as authentic as possible. What is more credible – left or right?
Once the main heading and the Hero Shot have generated the relevance and attracted the viewer to your offer, you have to convince the user to stay on your website. Why should one spend their valuable time going deeper into your website instead of simply clicking on the back button? Here, clear and comprehensible benefit communication works wonders.
Tip: Placement & design
Benefit communication should be achieved without the user having to scroll through. We have often tested this placement a lot in our conversion agency. "Above the fold" works best in most cases. (At this point, I would prefer not to go more into the details of "above the fold" since I have already done that over and over.)
Benefit communication should be conspicuous and should stand out from the rest of your content. This way, you make sure that your users are immediately drawn to the most important element. At the same time, make sure not to hamper the readability by over-designing.
In order to make your offer more comprehensible, describe the benefits with a maximum of 2 columns.
Tip: Content
Short formulations that go straight to the point work best. Try not to write more than 2 lines per benefit. This ensures that users process your content as fast as possible.
As already mentioned under headings, I strongly recommend choosing an optimized word sequence: Place important, descriptive words at the beginning and end of your headings.
Try to describe the benefits for your customers – instead of pinpointing product properties. A small clue for you: "Which advantages does a specific product property bring to my customers?"
Tip: Length
Remain relevant when stating the benefits of your offer: What has experience shown to be important to customers? What are the common questions in sales discussions? The human short-term memory is able to store about 7 aspects. Thus, you will always be on the safe side if you state a maximum of 5 benefits at the top of your homepage.
Users ask themselves three times if they should go deeper into your website if the first few seconds do not convince them that you have a serious and reliable offer. The following few little tricks can help you build trust and strengthen the appearance of your brand in seconds.
It goes without saying that a logo should appear on every website. Additionally, you should also consider a few aspects regarding the logo.
Tip: Placement & size
The logo is almost always placed in the top-left and most users also expect it to be there. Here is where the first look goes if one wants to know who is responsible for the offered product.
Exceptions are of course possible due to branding reasons, but it is best to be cautious.
The logo should not be too large; because such a large presentation of yourself only shows that you are "insecure" and blatant.
Tip: Transfer the confidence that users have in other brands to your own
You can take advantage of the space next to your logo if your own brand is not that popular. You can place media logos (TV/Print/comparison portal/…) with a linked with "Known from..." to transfer part of the users’ confidence in these popular brands to your own.
Figure 4: Transfer the confidence that users have in popular media companies to your own brand by placing their logos next to yours
Side note: If you operate a website for an unpopular brand that happens to be a subsidiary/partner of a major brand, make sure you add "A product of [major brand]" right next to the logo.
Your promise to offer support to your customers must of course not be perceived within the first 10 seconds, but it should be more present in moments when the user is uncertain. Here, it is not about the user grabbing the phone and calling your customer service right away, it is simply about conveying a sense of security.
Tip: Avoid anonymity & convey your willingness to offer support
Place a support phone number (when possible with the area code since this appears more personal than a 0800 hotline) and an email address or contact link in the header. Show your users that you are there for them whenever they need you. This is important especially if you offer expensive and/or sophisticated products.
Elements that raise your credibility are extremely important especially for unpopular brands. Whereas customer quotes and reviews are positive within the user journey, the first 10 seconds are all about content that is quick to process.
Tip: Show your size – use the "Social Proof"
"It cannot be bad if others are using it."
Test how integrating user reviews or other metrics influence your conversions. In particular, placing social proof elements in headers has proven to be successful across numerous sectors.
Examples:
Tip: Reviews & awards
Reviews and awards are often also classified under social proof elements. Nevertheless, I am going to add an extra section about these two elements since they are often not given by the customers, but rather by third-parties such as comparison portals and other control authorities. If the review is not from a major authority, e.g., "Stiftung Warentest", you should add an extra statement stating the respective authority. This makes your offer more credible.
Generally, you should place the reviews and awards moderately and clearly without forcing the user to scroll through. Concentrate more on 1 or 2 descriptive seals in order not to push the rest of your content to the background.
It doesn’t take a lot to inspire users within the first few seconds. A descriptive heading, benefit communication that goes straight to the point, and pinch of confidence is all you need to significantly reduce your bounce rates.
Do you have any other recommendations for the first 10 seconds? Just let me know in the comments.
Thanks for reading <3
Published on 08/08/2016 by Nils Kattau.
Since 2004 Nils has carried out more than 1,800 A/B tests. Today, as a leading conversion optimizer, he advises medium and large companies on boosting their sales and leads online. He shares his knowledge regularly in lectures and on smartimize.com, the first consultation tool for “do-it-yourself” conversion optimization. Find out more about his work on nilskattau.de.