How to Create Conversion-focused Web Design

Websites are meant to convert the maximum number of visitors to leads and customers.

However, learning how to improve website conversion rates takes a lot of time, effort, and experimentation.

Hundreds of variables influence website conversion rates and the only way to know is to test your website design and layout and find what works for you.

The good news is that you can increase website conversions by following the tips conversion rate optimization experts have tried and tested themselves. Research has found that taking a structured approach towards conversion optimization makes your website twice as likely to increase sales significantly.

Even making a single change has helped businesses increase conversion rates from 25-591% across different case studies. This means investing in web design can reap long-standing benefits for companies across various industries.

I've compiled 6 tips for creating a conversion-focused web design. 

Follow Hick’s Law and Minimize Distractions

Hick’s Law is a popular theory in many areas, but many experts have found it extremely useful in web design. According to the law, the time it takes for a person to choose something is directly proportional to the number of available choices. 

Therefore, as you increase the number of choices in web design, the longer people will take to make a decision.

Seems simple enough, right?

But, how does this impact your website’s conversion rate?

Well, increasing the number of choices for website visitors can hurt your conversion rate.

In one study, psychologists Mark Lepper and Sheena Lyengar found that displaying only six varieties of jam attracted more interest compared to having a table displaying 24 varieties of jam. What’s more, people who viewed the larger display were only 1/10th as likely to buy the jams compared to viewers who saw the smaller display table.

Hick’s law also comes in action in web design and can help website owners enhance page conversion significantly. You should remember that by presenting several options, you can make the visitor indecisive and thus, decrease their likelihood of buying either of the options.

Boost Conversions by Limiting Decisions

One of the easiest ways web designers can limit options for users is by cutting the number of choices in the website navigation bar. Giving visitors too many links to choose from, can make them lose interest in them altogether.

Aside from that, Hick’s Law can help web designers make many important changes within their website. For instance, you can limit options by providing a list of headlines in your content, so the reader can start with relevant content right away. 

Likewise, you can decide to limit navigation bars or scroll down features so they can focus on things shown ‘above the fold.’ Some website owners have also found improvement in conversion rates after putting lead magnet download links, social media sharing options, and review sections in different parts of the website. 

Moreover, once a customer chooses to buy a product websites stop showing cues for product descriptions, reviews, or details about other products. These are only a fraction of places where Hick’s law can improve web design for better conversion, but there are a ton of other places where you can use it.

Optimizing Typefaces

Typefaces are a frequent point of contention between many web designers. To find out which typeface has the most impact on web page performance, Michael Bernard of Usability News carried out research to compare 8 typefaces used mostly online. 

The selected few typefaces were Century Schoolbook, Georgia, Times New Roman, Comic Sans, Tahoma, Verdana, Courier New, and Arial. He used 60 participants to analyze and compare the typefaces at 10, 12, and 14 point sizes. 

In his study, Michael found that typefaces like Comic Sans, Arial, and Verdana, were preferred most at 14, 12, and 10 point sizes, respectively.

However, Texts such as Arial and Times New Roman were read the fastest although larger typefaces are more readable. Still, those differences were not statistically significant.

Comparatively, Courier and Arial were the most legible typefaces, whereas scripts such as Comic Sans was considered the most illegible one. Lastly, the study found that Tahoma was the most legible at 10 point size, where Courier and Arial were the most legible at 12 and 14 point size respectively.

To create conversion-focused websites, it’s important to use website fonts that are the most readable. You have 0-8 seconds to compel your audience to stay on your website. While creating an exciting headline and offering an enticing value proposition is necessary, it’s also important to use the right fonts.

Unless your headline and content are presented in a readable font, visitors won’t get your message correctly. This is why most people settle the Serif vs. Sans Serifdebate by saying sans serif is better because it is comparatively easy to read in a smaller format. That said, you can use Serif typeface for headings.

Here are some other tips for optimizing page fonts for better conversions:

• Don’t let expressiveness affect the usefulness of the content
• The typeface you choose needs to complement the text, instead of overwhelming it. 
• While choosing two typefaces, you should remember the rule of correspondence and contrast. This means that those fonts don’t only need to be different, but also similar enough that the difference doesn’t become too contrasting. (i.e., compare Helvetica and Arial)
• Variety may be good in most cases, but for fonts, you should keep things simple.
• Choose the typeface based on your niche and audience. Assess whether it should be informal or formal. Is the font size perfect? It’s important to do market research about the target audience. You may be selling a product to a target audience who are more likely to be visually impaired, so choosing a simple large-size typeface is necessary.
• Not every word has to be capitalized, especially if it’s being used in a sentence. 90% of your content should be in lowercase, so capitalizing just the first letter is fine. 
• In terms of length, you should adjust the content according to the screen. If the lines are too short, readers have to shift their eyes constantly. Likewise, if the text is too long it becomes difficult for readers to spot the next line.
• Ensure that you have optimized letter spacing for the right density. Visitors can’t read if the text looks cramped and crowded.

Choosing Colors

In many cases, color is an under-rated aspect of web design. However, it plays a crucial in improving the usability of the web design usable and conveying the overall mood of the website, as well as the meaning of the brand. Tom Kenny, a veteran designer, notes, “Different color combinations can evoke different emotions and reactions.”

Therefore, you should always choose a color scheme and combination that evokes the emotion you want your brand to be associated with.

If you are not sure about a color scheme, you can always curate a Pinterest board with images that reflect your brand’s vision. After that, you can upload some of those images to Adobe’s Color Wheel with the help of the camera icon.

As the image uploads, the tool will create the ideal color scheme for you using the colors used in the image. To tweak individual colors a little, you can move the selections around and experiment for yourself. Using the right color scheme is also essential for making your message more impactful and grabbing the attention of your audience.

Contrasting Ideas

Although color schemes are important, using enticing color schemes without keeping contrast in mind can make or break your conversions. It’s important to use contrasting tones to keep headlines, text, and CTA buttons readable and noticeable.

This means that your font and button colors must contrast their background (e.g. black text on white background). Likewise, the design elements (e.g. CTA, subscribe buttons) on the web page should be highlighted and designed in a color that stands out from the rest of the website.

To help you understand this, let’s look at an example. See which elements of the site below draw your attention.

Of course, the pretty illustration in the lower-right section of the screen is eye-catching, but the two orange calls to action buttons stand out from the rest of the page. This is because these buttons starkly contrast to the light color scheme of the page.

Use the F-Layout

Researchers have discovered that website visitors usually read the content on the screen in an “F” pattern when browsing the web. You can understand how this goes with the help of the heatmap that tracks where the user’s eyes typically land on a webpage.

In terms of a wireframe, this pattern looks like the following image:

It starts from left to right at the top of the screen and then continually goes downwards from there. People tend to read the content downwards as the scan for more content on the page. In most cases, the image at the bottom -right gets the least visibility.

So how does this affect your conversion? Well, you can consider this behavior and place the most important objects & CTA along the F-shape lines. At the same time, you can place the least important aspects of your design to the least visible areas.

If you look at Hubspot’s image again, you’ll notice that they placed most of their content along F-shaped lines, including the all-important CTAs. At the same time, they placed their chat options in the area with lower visibility. Visitors who see the chat option would have been at the website for more than a few seconds and may interact with the chat to ask questions.

You too, can place your main call to action towards the top-most left-hand side since visitors see that area first. If you want users to stick around the page and read your latest blog posts, you always place their headlines at the bottom of the left-hand side.

Likewise, you can enlist less important information (such as sponsored ads) at the sidebar, on the right side of the webpage. Here you can also place your cookie policy or any other design aspects with less value.

Leveraging Gestalt Psychology

The Gestalt psychologist, Kurt Koffka famously said, “The whole is other than the sum of the parts.” This statement became the basis of the Gestalt design principles, something used by designers worldwide. The theory says that humans perceive unified designs differently than individual components of that design.

The first part of the Gestalt design principle is the law of similarity. It is because human brains are designed to group similar objects, so it understands the context clearly. This mechanism enables us to organize noisy elements and make sense of things as a whole.

In terms of web design principles, you can use this to group similar things such as images, conversion buttons, and testimonial boxes. For instance, you can create an amazing testimonial page and use it to boost conversions on your opt-in form. To do this, you could place the grouped testimonials directly below the form. Even if the testimonial don directly relates to the lead magnet, visitors will be able to associate both these elements because of their proximity.

The law of similarity applies to optimize user experience. If you group all the main elements of your signup form such as the headline, description, as well as opt-in buttons, and isolate them from other elements of your page, these elements will stand out more the rest of the page. As a result, users process the information in less time and more efficiently. As most visitors have a short attention span, doing so can help boost conversions.

Final Words

Creating a conversion-focused web design should be the highlight of your website’s best practices checklist. Following these tips can help you improve your website’s conversion rates and grow your business online. 

Next Steps...

1 See which tools I use & recommend to clients:

2 Get My FREE Funnel

3 Book your FREE 30 Min strategy call: ​