How Do I Create a Higher Conversion Website Design?
A design is much more than a pretty picture.
Entrepreneurs are often preoccupied with the ads that will drive traffic to their site, which software will boost conversions, and whether or not they will be able to seal it.
Unsuccessful design may lead users to be confused or unsure of what they should do. Your site may be abandoned and sales lost.
By using the correct design you can guide your users towards the actions they want to take, like clicking on a button or joining your email list, or buying your product.
Foundr invited Unbounce co-founder Oli Garten into the studio to discuss five web design principles that convert well.
Oli spent almost a decade creating and analyzing landing pages. Watch the video and read on to learn how he creates websites to get the best results.
Oli’s “The 5-second Test” is the fastest way to find out if you are improving conversion rates or not.
This simple exercise can be done by placing a person in front of a blank computer screen, setting a timer to five seconds, and then showing your landing pages. Once the timer expires, you can remove the landing pages and ask the person questions such as “What was the message on the page?” You can ask questions like “What did the page say?” or “What should you do?” “
Oli loves this test because it lets him determine whether the content on your website is highlighted in a manner that gives visitors a sense of importance. You only have five seconds. No matter how appealing your offer is, it won’t work if you can’t make it clear and quick. The visitor will never see it.
The test is also useful for determining one of the key principles of high-converting website designs, namely the gaze direction of visitors.
Visitors will look at the direction of the page to determine where they should focus their attention. This can be a powerful factor in conversions.
Oli worked with clients in the education industry to improve their conversion rates. Originally, landing pages were designed as follows:
There are no elements that direct you to the action you should take (select a topic of interest). No elements direct you in the direction of what you should do (select an area that interests you ).
Oli tested the five-second program and verified that it was true. However, this number is only 22%. Worse still, 8% of viewers of the page knew what level the teacher was teaching.
Oli decided to use the design principle called direction to solve the problem. To make the result even more dramatic, he also added a second green line. To achieve an even greater impact, he then added a third and final green line.
The course was remembered by more than 275 percent of those who took the test.
Oli says, “This shows how crucial it is for visitors to be guided through a page. Imagine the impact of just one photo change on a website.
To increase your conversions you should consider the following design tips:
- The heat map shows the effect of eyes facing either the headline or the viewer.
- Focus the viewers’ gaze on your call to action. They will gravitate towards it.
- The size and placement of your elements can create a path that leads readers in the direction you want them to go.
- Colors and graphics can help direct the viewers’ attention. A neon green line is a good example of attracting the audience. An arrow or pointing hand can also be used.
Instant Clarity with Contrast Colors and Elements
He was completely lost by the sign that was meant to guide him.
It was difficult to read this sign because it was lacking contrast. Here is how the sign looked:
Contrast is important in design because it helps you distinguish two different elements. When there’s not much contrast, it’s hard to see how the page has been divided.
For example, hotel signs have little contrast in the numbers or text. It all looks alike.
All the elements on the sign are equally weighted, so it’s easy to mistakenly think that the rooms on the third floor are to the right. Oli discovered that 33 percent of the people who looked at the signs for only five seconds went the wrong way.
The “3rd Floor”, element needs to be separated visually by contrast. As it conveys different information, the 3rd Floor must be distinct visually from the rest.
Oli created a mock-up of another design with the white text at the top being darker. He then tested the new design.
In this headline, it is clear that “3rd Floor”, an element unique to the case at hand, should not be mistaken for any other elements.
It is necessary to distinguish between these elements because they have different meanings. “
If you’re not seeing the desired results, you may need to include contrast elements in your design. Your visitors will understand you better.
Break your page up into elements to communicate different messages. Use contrast to make them stand out.
Oli: When you understand the concept of contrast you’ll see that it doesn’t mean you have to make all buttons one color. The color of your CTA buttons doesn’t matter. Just make sure they contrast well. “
To boost conversion rates, you should ask questions that focus on contrast rather than colors.
Try them out for an immediate boost in conversion.
Turn absence into strength by making the most of groupings and whitespace
All elements of the original hotel sign are squashed together and centered. This results in a lack of clarity.
Use a lot of whitespaces, and use grouping.
Oli: “You need to bring your numbers closer to the arrows and add white space to separate them. “
Now the sign shows users where to go much better. And the results confirm that. Oli then repeated the test after adding the elements. Only 8% chose the wrong way this time.
There is 75% less confusion with
By changing the design you can encourage more people to follow your instructions.
Consider these rules for better integrating grouping and spacing into your landing page.
- Group elements together that communicate the same idea. Separate them if your elements have different meanings. Your brain can only handle so much data at once. Sending conflicting information to your viewers’ eyes will confuse them.
- Whitespace allows you to convey more information.
This page is intentionally broken to avoid any confusion.
Oli’s final design principle is interruption. Separators and breaks can be used to improve the clarity of landing pages.
The results show it.
A large group was shown this design and all of them chose to do it the correct way. Here is an example of how interruptions can work.
Oli tells us that the key is to organize everything into clear messages and make them distinct. “
Divide elements and ideas into pages using page breaks.
To identify the cause of a page’s poor conversion, you can use this design principle.
An interruption on your site can increase conversions.
- Which elements of this page are similar and which are different?
- Does the page have different sections?
- Am I trying to communicate too many concepts?
- How do I insert an interruption in the design?
Increase your conversion rate today by using these tricks!
You don’t have to be a professional designer to reap the benefits of good design principles.
Use them to improve the conversion rate on your landing pages.
Are you familiar with these principles? Which design principle has worked best for you in terms of increasing conversion rates? Could you show us a page that you think is great?
