It’s safe to say that the design of a website – how it looks and the experience of moving through it – is important. But just how important is website design to conversions? The answer: very!
If you don’t believe me, here are some statistics to prove it:
review42.com
- 48% of users believe website design is the #1 factor when judging a business’s credibility.
- 38% of visitors will stop browsing a website if the layout is unattractive.
- The average user needs only 50 milliseconds to form an opinion about a website.
- 94% of users create their first impression of a website based on web design alone.
Design mistakes can affect the number of conversions you get on your site. But that doesn’t mean you should scrap your entire site and start over again. There are plenty of things you can do to identify what mistakes could be hurting conversions so you can fix them.
In this post, we’re going to go through all the design mistakes that can affect conversions. Then at the end, we’ll review some methods you can start using right away to identify and address those problems.
So… what design mistakes are you making that are affecting your conversions?
Not using color strategically
Color should always be used in a smart way. The color you use and where you use it should draw attention or elicit emotion. A good looking website is always secondary to a useful one. If the colors you pick look nice but don’t create the effect you need to convert, you are using the wrong colors.
If you can understand the psychology of how we perceive and react to color, you can build a brand identity and website around those principles.
Colors should also be used consistently. After building a color palette, stick to that palette and do not deviate. This way you turn the colors into a language that your user subconsciously can read.
Forgetting to prioritize mobile responsiveness
If you are forgetting to design your site to be optimized for small screens, you are making a huge mistake. According to this 2021 study, 68% of companies with a mobile-first website increased their sales.
Because most website browsing these days is done on mobile devices, it’s important to prioritize that experience. But you don’t need to be a highly experienced developer to ensure that your site is mobile optimized.
Some rules of thumb for good mobile design:
- Use a theme that is fully responsive so it does most of the work for you.
- Put the most important information higher up on pages so less scrolling is needed.
- Avoid pop up messages or ads on mobile devices.
- Make sure buttons are large enough to be used on mobile screens. For the most important converting areas, use a button instead of a text link.
- Use large font sizes – at least 14px!
Failing to optimize your CTAs
CTA stands for Call to Action. This is the section of your website that directly instructs or invites the user to do something. This is like the front porch to your conversion. Think of phrases like “Download the ebook now!” or “Sign up for our email list!” These are phrases likely to show up in your CTA.
This CTA on the WordPress.org website is great. There is a clear invitation to do something in the title. A small sentence details why you may want to complete the action. The button is large, stands out against the background, and utilizes another strop verb.
Use a CTA effectively by following some basic rules:
- Use a strong verb like get started, download, buy, sign up. But don’t use verbs like click. How is the user supposed to know what happens when they do?
- Make the CTA stand out. Use color and large text to do this. Maybe even make this section full width or add a border around it.
- Don’t crowd this section. Avoid using lots of imagery!
Links and buttons don’t stand out
More often than not, someone will convert by choosing to click a specific link or button. Like we talked about in our previous section, these areas probably appear in your CTA.
Buttons and links should stand out strongly against not only the background of the page, but in contrast to other content. For example, if your text is black and your links are black it will be hard for people to see them. But if your text is black and your links are red and bold and underlined, there’s no mistaking them. Same for buttons. If your background is a light blue, and your buttons are blue, they might all meld together. Use a contrasting color if a button is on a colored background.
A good rule of thumb is to make clickable elements like links and buttons their own unique color! If a bright pink is part of your color palette, consider reserving it just for links and buttons.
And remember to always underline your links so they stand out from the rest of your text. Most people who use the internet have come to understand that links are decorated with an underline. So play into their expectations and make those links easy to find!
Using poor stock photography
Good stock imagery is relevant to the goal of the website and supports the emotional message of the rest of the content. But unfortunately, there is a ton of bad stock imagery out there.
Cheesy photos can turn off visitors because they are impersonal, bland, or just disconnected. Avoid using photos of people that are highly photoshopped, stiff, or unrealistic. People tend to like seeing faces in marketing, but that doesn’t mean your site needs to be coated in images of people beaming and staring directly into the camera.
Take this example below. The people in it look posed, the photo looks incredibly edited, and the lighting is very artificial.
As a contrast, look at the alternative below. The environment is much more realistic, the lighting is pretty but not overdone, and the people’s expressions look much more genuine.
You don’t need to hire a professional photographer to get good images for your website. Use Unsplash or Pexels to get great free options for stock photos. You’ll be able to find examples of If you want to invest some money and get better options, look at the Adobe Stock Photo library.
Real people using or interacting with your product or service will almost always be better than a stiff stock photo. Most people these days have a high quality camera in their smartphone. So consider planning a simple photo shoot for your website!
Being too wordy with text
Your brand is important and complex. There is so much to share about your goals, mission and strategies. But like we discussed at the beginning, most people want to skim a website to find what they need. Save the verbose content for blog posts!
When writing the content for other pages, be as concise as possible. Use headings, subheadings, and short paragraphs of text. If you’re using less text, this also helps your design be more mobile responsive.
If nothing else, remember that people mostly skim websites. It’s a rare occurrence that someone will come to your site and take the time to read every single page from top to bottom. Good design ensures that the steps to convert are easy to find even when skimming. If your site content is easy to skim, users can find what they are looking for much more quickly.
Take a look at the site below – where are your eyes supposed to go first? There is so much text here, it’s almost impossible for someone to find what they want quickly.
Now look at this example. See how the information is broken up with subheadings and various imagery? It’s much easier for the eye to skim over this page and find the relevant section.
Having sloppy navigation
Take a look at the current navigation bar for your website. Do you think someone could convert in 3 clicks or less? If not, you may need to move some things around!
Here are some tips for organizing your navigation menu in a smart way:
Be concise: Consider “About” instead of “Learn about our company” The navigation should be simple to skim in order to find the appropriate link.
Order links in a thoughtful way: Consider why people come to your website. If you sell boating equipment and also have a small blog to help with marketing, the links to your shop should definitely come before the blog link.
Highlight the biggest CTA: Try highlighting or outlining the link in your navigation that is most important to your website goal. For example, many nonprofits will use a big green button to make their Donate link stand out in the navigation menu.
Use existing web traffic: Look at your Google Analytics to see how people find information on your site already. Then use the navigation menu to make it easier for them. Use Behavior Flow/ User Flow to decide how to nest items. You might even notice that people are spending a lot of time on a page that is not in the navigation, and so you might want to add it.
Group sub menu items: If you need to nest pages within the navigation, consider how to create groups. Long list of sub-items can be overwhelming and hard to search. If you can group long lists of links by similarity, users can find what they need much more quickly. Check out the screenshot below to see what I mean.
Making your text too small
We have already made our text more concise, now we need to make sure it’s readable. Some web design trends call for tiny and dainty fonts. But we want your site to be legible to everyone visiting it! No one wants to have to squint or zoom in to find what they need. This will slow down your users and be one more roadblock on their way to converting.
- Body fonts should be about 14px-16px.
- Text input sizes should be slightly larger (meaning the text people will enter into form fields)
- Preview mobile designs on an actual mobile device to confirm legibility.
- For text-heavy pages, like blog posts or articles, bump body fonts up to 18px or even 20px.
- The ideal width for a block of text is 45 – 75 characters. After that, our eyes start to tire.
- Set line height to be about 150% that of the font size.
Designing for yourself, not for your target audience
This is one of the biggest mistakes I saw when designing websites for clients. We tend to feel so close to our brand that it feels like an extension of us. We want to pick colors and designs that we like; after all, you as the business owner will be looking at this site more than anyone else!
But it’s important to remember that in most cases you are not your target audience. The design of the site – fonts, colors, imagery, etc. – needs to connect to the people who you want to convert. The strongest design choices are made with them in mind.
With that being said, it’s important to do your research. Who is your target audience? What do they want to see? What do they need to understand? What do you want them to feel? What information needs to be prioritized?
Once you know all of that information, the colors and layouts and images you use must serve those needs. Your personal preference won’t play a starring role.
How to find which design mistakes are hurting conversions
So we’ve gone over all the ways that design can affect conversions. Now, let’s talk a little bit about how to learn which design choices are strongest and which are weakest. Maybe you want to experiment to see what choices will work out the best.
Luckily, there are many ways to do this.
Heat maps
A heat map shows you where people clicked or performed other actions on your website. Heat maps look sort of like weather maps, which visual indications of where most actions were taken. Use HotJar.com to start collecting heatmaps of your website.
A/B testing
A/B testing is when you have two (or more) options and direct users to each one in equal part. So if you have two options, 50% of your traffic will see one option and 50% will see the other. You can then determine which group converted more!
User testing
Finally, just ask your audience! User testing can be conducted in so many ways. There are companies you can hire for user testing. Or you can simply ask a group of existing clients, customers, or volunteers to try out the site and tell you what they think. It can be as easy as a verbal report. Or you can create a form to collect feedback.
Remember that even a site that is perfectly designed needs to always be active, fast, and secure. A slow or glitchy site will deter users no matter how much you have optimized the design.
Cloud22 Managed WordPress Hosting checks every box. We manage your updates – making sure that when your theme developer releases an update or patch, you get it right away. We back up your site, just in case you make a wrong move in your theme settings. Our servers are integrated with LiteSpeed cache and Cloudflare CDN, so the beautiful design you used your theme to build is served to visitors quickly.