The 16 Website Design Best Practices For Conversions in 2018

Design

Last Updated on February 19, 2019

Neil Patel co-founded Crazy Egg in 2005. 300,000 websites use Crazy Egg to understand what’s working on their website (with features like Heatmaps, Scrollmaps, Referral Maps, and User Recordings), fix what isn’t (with a WYSIWYG Editor), and test new ideas (with a robust A/B Testing tool).

First impressions matter more than you might think. When a visitor accesses your website for the first time, regardless of the page, he or she makes a split-second judgment about the design.

In fact, three-quarters of consumers say they base their impression of a company’s credibility on its web design.

Furthermore, 94 percent of first impressions are based exclusively on design. Before your visitor reads a single word of copy, he or she already has an impression of your company.

That’s why it’s essential to follow website design best practices that directly impact conversions. You don’t just want your website to look beautiful. You want it to function as a conversion machine.

The 16 Website Design Best Practices For Conversions in 2018

To help boost your conversion rates, I’ve compiled my 16 website design best practices based on working with hundreds of companies. Believe it or not, even a simple change can impact conversion rates.

1. Use consistent branding throughout the site

Marketers often misunderstand how branding works. More specifically, they’re not aware of how website branding influences conversions.

Apple is a company that has mastered the fine art of branding. It’s not just about the distinctive Apple logo; every element of Apple’s website conveys its brand values: sleek design, useful tools, and elegance.

You’ll notice several key branding decisions on the homepage alone:

Distinctive logo that’s visible but not overwhelming and placed in a traditional spot
A brief headline and subhead that convey the brand goals
A sleek product photo

These are all qualities that we associate with the Apple brand.

In a recent article, marketing agency Marion distills branding beautifully: “Developing a brand is storytelling. Is your website telling the right story, or are you unwittingly reinforcing the wrong feelings about your company?”

Before you embark upon a web design project, decide what story you want to tell. Base it on your brand values, beliefs, and target audience.

2. Leave plenty of white space between elements

White space — also called negative space — gives website elements room to “breathe” visually. If you group items too close together, you risk overwhelming visitors and convincing them to click away.

You can see extreme examples of cluttered web design all over the Internet.

However, some mistakes prove far more subtle.

When you’re designing your website, use margins and padding to increase space between images, copy, and other elements.

Check out this example from a section of the Crazy Egg website.

I’ve indicated white space with green lines.

There’s plenty of space between the confetti map and the copy to its right. There’s also a decent line height in the headline, and a slightly reduced line height for the body copy. Then there’s some extra space between the body copy and the call to action (CTA).

3. Reduce the number of choices you offer your visitors

Hick’s Law states that, as you increase the number of options you offer someone, the decision time increases as well. It’s often referred to as “analysis paralysis.”

UX expert Paul Boag says, “When faced with overwhelming choice[s], often the most effective way of encouraging users to make a decision is to suggest a course of action.” That’s why we put so much emphasis on CTAs during conversion rate optimization (CRO).

Instead of presenting your visitors with 20 products on the homepage, suggest just one. You saw that Apple follows that approach in the screenshot above, even though it makes many more products than the iPhone.

4. Apply the rule of thirds

The rule of thirds has long applied to fine art and photography, but it also applies to web design. When designing your site, use an overlay with two horizontal lines and two vertical lines evenly spaced.

The green dots are points at which the eye naturally drifts when looking at a scene, whether it’s a landscape photograph or a web page.

Knowing this, you can put your CTAs and other important elements on those dots. Just make sure the rest of your web design flows naturally around those elements.

This compositional approach can work for any type of website.

In the example above, our attention is drawn to the tagline, logo, and menu. An improvement might be to move the CTA “Make an Appointment” to the top right intersection and adjust the photograph accordingly. That way, the eye sees the CTA immediately.

5. Compress images as much as possible

According to MachMetrics, a site speed monitoring service, the ideal website load time is just 3 seconds. However, based on industry averages, most websites load much slower than that.

The United States averages are roughly comparable to site speeds in other countries, though it’s lagging behind in certain industries.

Unfortunately, attention spans don’t allow for long load times. If you want to boost conversions, you must find ways to reduce page load times so your page speed improves.

Compressing images is one of the best methods I’ve found. Not only should you upload images that are no larger than what the screen size demands, but you should also compress them after uploading.

Several WordPress plugins exist for this purpose, including Smush. It’s a lightweight, handy tool for getting your pages to load faster, especially if you use lots of images.

6. Add breadcrumbs

Think of your website as a map with lots of disparate destinations. Your visitors can land on any destination based on how they arrived, but they also want to know where they are.

Breadcrumbs are like those signs at the mall that say “You Are Here.” They tell you where your current page falls in the site’s navigation.

We use breadcrumbs on this website.

If visitors want to click back to a previous page, they can do so.

Breadcrumbs become even more important on e-commerce websites. If you have dozens or even hundreds of nested categories, you don’t want your visitors to get lost. When they can’t find what they want, they’ll search for it elsewhere.

7. Use color and contrast to your advantage

Contrast helps certain website elements stand out from the rest. If you want your users to convert on an offer, make sure you’re using greater contrast on those specific areas.

If you visit Neil Patel Digital, for instance, the home page uses contrast via my signature bright orange color so people look where I want them to.

I’ve numbered each of the areas that will stand out thanks to color and contrast.

The logo for Neil Patel Digital
The benefit of working with us.
The proof that we know what we’re doing
The CTA

You can see a similar example on the exit popup for Legion Athletics.

The goal is for visitors to click on one of the two orange CTAs. There’s also a link to “RETURN TO SITE,” but it’s rendered in much lower contrast. This subtle trick can help boost conversions.

8. Animate top bars and popups

This one’s tricky, so I want to be clear: Animated top bars and popups can either help or hinder your conversions.

Here’s why:

If your animation annoys your visitors, they’ll click away without bothering to look around your site. You have to be subtle.

Done correctly, however, slight animations can draw attention to your CTAs and boost conversions.

If you use Hello Bar, you know there’s an option for animating your CTA.

You get the choice to animate entry and exit for a more attention-grabbing CTA.

9. Group similar elements

Similarity falls under the Gestalt principle, often referred to as the Law of Similarity. When we view a scene, such as a website, we automatically group similar objects in our minds.

According to the Interaction Design Foundation, “Similarity can be achieved using basic elements such as shapes, colors, and size.”

How does this knowledge help you boost conversions?

Try experimenting with color, shape, and size on your most important pages to make associations. For instance, you could group a CTA and a testimonial next to one another on a landing page.

Even though the testimonial and the CTA have nothing to do with one another, the eye perceives them as two parts of a whole thanks to their similar shapes and colors. After reading the testimonial, the user might be more willing to click the CTA.

10. Incorporate human faces

Writing for Thrive Global, veteran web designer Marc Mazure says, “A human face elicits emotional responses, triggering an individual to feel something, be it empathy, happiness, excitement and the like.”

We’re programmed to read human faces, whether we see someone in person or view a photograph on a website. Expressions can influence how we feel about something.

You can use photographs of people to tell people where to look. If you have a photo of someone looking at your headline or CTA, for instance, your website visitors will feel compelled to look, too.

You’ll notice that the example above uses other elements of website design best practices, such as implementing color and contrast to draw your eye.

11. Use familiarity to your advantage

Consumers have become conditioned to expect certain things when they arrive on a website. For instance, if they’re shopping for a product and they visit an e-commerce store, they’re conditioned to look for the “Add to Cart” or “Buy Now” CTA.

Amazon uses the “Add to Cart” CTA on nearly every product page. Why? Because it’s familiar.

When a consumer sees that button, he or she knows exactly what to do.

It’s great to experiment with different CTAs, but don’t stray so far from the norm that your website visitors can’t understand what you’re telling them to do.

12. Learn the path of least resistance

I mentioned above that you don’t want to give your prospects too many options. However, you can boost conversion rates using alternative website design best practices that capitalize on the desire to get something for free or at a discount.

In a recent article for Crazy Egg, Juliana Casale interviewed Sam Clarke, the director of growth marketing at Placester, about conversion rate optimization. When asked about a CRO experiment of which he was particularly proud, he singled out a “buy now” test.

“All we did was add a buy now button next to our request a demo button in our header navigation bar. And then we built a simple buy now form that alerted the sales team when someone wanted to buy our product right away.”

According to Clarke, conversions on the free demo increased dramatically. By adding a “buy now” button, the demo became far more attractive because it was free.

If you present your prospect with the path of least resistance, your conversion rate can skyrocket.

13. Watch how visitors navigate your website

Have you ever wanted to look over your website visitors’ shoulders so you can see exactly how they interact with your site? I don’t recommend breaking and entering, but there’s another way.

Using Crazy Egg recordings, you can view mouse movements as your visitors navigate your website. You’ll see how they scroll, when they interact with CTAs and other elements, and when they click away.

Using this data, you can optimize every page for conversions. Rearranging your website design based on how real people use the site can make a vast improvement in generating leads and sales.

See a real recording in action

14. Create distinct landing pages for SEO and paid ads

Website design best practices vary depending on how you’re using a specific page. I recently wrote an article on my personal blog about marketing mistakes I’ve made over the years.

Specifically, I called out the importance of targeting your landing pages for organic search or paid ads — not both.

I compared two insurance company landing pages, one of which I found via search ads, and the other through organic search.

The first one is very simple and plain. It’s designed to move people through the conversion funnel.

There’s almost no text. Compare that landing page to this one:

There’s a huge difference, right? That’s because the first page was designed for paid search and the other for organic ranking (SEO).

If you’re paying for Google ads or social ads, you don’t need to implement SEO. People will see your page based on how you bid for clicks.

However, if you want to rank well, you need long-form content — like the second example above. Using more words will help Google figure out what you’re saying and how users will benefit from it.

The first example will convert better than the second. That’s just the truth. But you can still use Crazy Egg heatmaps and scroll maps to figure out where people interact on long-form pages, then insert CTAs accordingly.

That allows you to maximize website design for conversions no matter how you’re generating traffic.

15. Remove sliders and carousels

At one time, website design best practices celebrated the use of sliders and carousels. Now, however, they’re considered a source of friction.

Web design expert Tim Sash of SiteTuners, in an article for Clickz.com, says it pretty well: “Rotating banners are absolutely evil and should be removed immediately.”

According to Sash, all carousels and sliders do is bloat your web pages, waste your visitors’ time, and push down the navigation and other relevant content. If you’re using rotating banners, consider eliminating them to boost conversions.

16. Collect specific data from your website visitors

Learning website design best practices can absolutely help you boost conversions. However, you also have to give your audience what they want.

Best practices offer a starting point from which to begin. After you’ve designed a website that doesn’t break too many rules, start testing.

Begin with heat maps. They show eye-tracking information so you can better understand how your visitors consume your content.

Scroll maps also prove useful if you don’t want to waste valuable space. When visitors tend to stop scrolling on the page, plunk down a CTA and make sure all essential information is above that point.

You can also generate confetti reports to better understand your audience.

Once you’ve collected sufficient data, start A/B testing. Test one element at a time so you know exactly what’s influencing disparities between conversion rates.

Conclusion

Website design isn’t my bread and butter, but it’s something I’ve learned over the years as a result of my consultations with major companies and my observations of testing and learning.

Best practices are a good place to start. Then you need to test everything on your website so you know what works for your specific audience.

When you use actual user behavior to validate your gut instincts about what looks attractive, you can boost conversions exponentially.

The 16 website design best practices I shared above can help you generate more leads and sales. Many are based on human psychology, so you can trust them to work in your favor.

Learn how to use Crazy Egg tools