The goal of improving your website’s user experience is to make life easier for visitors to your site. It’s focused on their needs and concerns and involves taking a proactive approach to anticipate their experience.
But improving your site’s user experience packs serious benefits for your business, too. Some of those benefits include:
Lower bounce rates. Bounce rate shows the percentage of visitors who visit a page and then leave the website rather than viewing another page. If your website has a high percentage, it means that people are likely either frustrated with your site or that they aren’t finding what they’re looking for there. A low percentage is a good thing and is often only possible when the page is easy to access and easy to use. Bounce rate is a great number to look at if your website isn’t generating the kind of leads you’re looking for. It can show you exactly which pages are driving users away as well as which pages are more successful in encouraging users to stay on your site longer.
Higher conversion rates. Conversion and bounce rates go hand in hand. When talking about your website, it’s important to note that conversion doesn’t have to mean that a lead suddenly bought your product or signed up for your service (and converted to a customer). It can simply mean that they clicked on a call to action to another page of your site or that they filled out a form to get more information about your business. Every business wants a website with high conversion rates. It means that users to your site are interested, and those small conversion steps they take on your site can lead to them become a paying customer.
We’re going to use these three key factors throughout this article to highlight how each step can benefit both your users and your business. You’ll quickly see that focusing on your website’s user experience is an extremely powerful way to have happier customers, bring in more sales, and build a strong base of loyal customers.
When you’re focusing on big picture elements like look and feel and page layout, it’s extremely easy to forget about calls to action. However, calls to action are such a crucial element of your website design that they deserve their own special attention.
Every single page on your website should have at least one clear, compelling call to action. What is a call to action? A link, form, or button that helps users take the next step. It can be as simple as linking to your services page from your homepage and as complex as offering an online scheduling tool that allows users to secure an appointment.
So, an easy step for you is to look at each page on your website and consider what you want the customer to do next. For some pages, like your homepage, there are likely many calls to action you want to include. Others, like your contact page, may be a little less obvious.
There’s also a very good chance that many of your pages will have the same call to action. Most commonly, businesses want to send users to their contact page. If this describes you, you’ll likely have a call to action that leads to your contact page from nearly every page on your website. Think about this critically, though, as some pages are more suited to certain calls to action and shouldn’t be treated with a blanket approach.
Here are a ton of ideas for calls to action you may want to include on your website:
Ultimately, there should be no page on your website where a user would think, “I want to learn more about this business, but I don’t know how.” Users are impatient and they won’t spend more than a few seconds looking for that next step. Make it easy for them by anticipating how they may want to learn more about your business based on the content they’re currently viewing.
While some of these calls to action require a decent amount of design and development, fancy design isn’t what makes a call to action compelling. If you have access to edit the content on your site and a bit of time to think strategically about the pipeline you’re sending your users through, you have everything you need to simply add text with a link that encourages users to take the next step.
This is something that designers spend a considerable amount of time thinking about when designing your website. While they’re creating a layout that’s attractive, they’re also considering how they can make life as easy as possible for the user with their typography, layout, and color choices.
If you aren’t working with a designer but you’re seeing that a lot of pages on your site have high bounce rates, take some time to evaluate the fonts and colors you’re using on your site. It’s an easy fix to make — but an overlooked element that will immediately send users away from your site if not addressed.
For colors, you want to aim for a good contrast. There’s a reason that most word processors have a white background and black text — it’s simple, clean, and always easy to read. Most websites aren’t just black and white, so you have to look at the colors you’re using and make sure that there’s a healthy contrast between the backgrounds and the font colors of your site.
There’s a ton of color theory that can go into this, but we can break it down quite simply: if you have a darker background, opt for lighter text. If you have a lighter background, opt for darker text. Beyond that, try getting some feedback from friends, family, and business associates. Certain color combinations (like yellow and purple) have a high contrast, but they don’t translate to easy readability. Getting a few extra pairs of eyes will help you ensure that your background and font colors work well together.
Next, you want to choose a font that’s highly legible. It’s easy to gravitate toward the more unique fonts out there. Or, as every site seems to be transitioning to the thinner, more modern fonts, it’s easy to choose a font that’s too thin. What’s most important is not to choose a font that’s the most fun or unique — it’s that the user can actually read it without squinting or zooming in.
Again, you can’t go wrong by getting opinions from other people. What may be easy for you to read may be difficult for others. But if five people give you the okay on your font size, style, and color, you’re probably in the clear. Meanwhile, if two or three people come back saying they had difficulty reading the text, you can bet that 40-60% of your website users will think the same thing.
A broken link is a link that doesn’t lead the user to its intended destination. When we take on new web design clients, one of the first things we do while determining their site structure is run their site through an SEO tool. This tool analyzes how many broken links the site has. Spoiler alert: many of our clients come to us with at least one broken link.
Broken links are incredibly frustrating for customers because what would have been a nice conversion becomes a wasted opportunity. Just as they were interested enough to learn more, your site greeted them with a 404 error. Unless you optimize that 404 page to help the user get to their intended destination, you can guarantee that they will almost always leave your site.
Unfortunately, it’s really easy for broken links to sneak into your site. Even entering the link text with one small typo can generate a broken link. Or if you move or delete a page down the line but don’t remove links to that page, you’re left with tons of broken links all around your site.
To fix this, use a tool like Screaming Frog. Their free version allows you to crawl 500 pages, which should be plenty for your website. Once you download the tool to your computer, all you have to do is enter the URL to your homepage. You’ll see a ton of overwhelming options, but all you have to do is click on the Filter dropdown and select “HTML.” The tool will crawl (much like Google crawls) your site, find every page indexed, and display them in a spreadsheet-like format.
It will provide tons of information about each page (like word count, title tag, and meta information), but you can hone in on the status code and status sections. Any page with a status code of 200 and a status of “OK” is good to go. A 404 status code and a status of “Not Found” means you have a broken page. Rather than going through your whole site and finding links to these broken pages, you can simply set up a redirect for that page. So, for example, if one of your blog posts was removed a long time ago and is now generating a broken page, you can set up a redirect link to your blog overview page.
Another step worth considering is setting up a 404 page. It doesn’t have to be fancy or overly complicated, but setting up a 404 page that includes your site navigation and provides some links the user may be trying to get to is a good way to help subside their frustration.
We’re getting into more technical territory here, but setting up a redirect or updating the layout of your 404 page is something you may be able to do yourself depending on how your website was created. Check with your support section or contact your developer to see how you can do this. If you don’t have access to setting up redirects, you can manually go through your website and update any of your broken links.
It may also be worth it to hire a freelance developer for a few hours of their time to knock out these tasks for you. A developer should be able to fix these errors for you in just a few short hours, especially if your site is relatively small.
If a page has a high bounce rate, there’s a very good chance that this page doesn’t load quickly enough. How fast is fast enough? Most experts agree that it’s best if a page loads within two seconds. After a 3-second loading time, 40% of users will back out of the site. That means, if your bounce rate is at a staggering 90%, it could be as low as 50-60% (a much more reasonable range) just because it takes too long to load.
But what exactly is slowing down your website? There are many possibilities. If you worked with an inexperienced designer or developer to create your site, they may not have taken the time to properly compress files and clean up any errors in their code. If you used a free website tool, all those fancy themes and extra plugins could be teeming with elements that dramatically slow down your website.
Some common culprits of a slow page load include:
Curious to see just how fast your site is? There are plenty of free tools out there that will help you do just that. You can input your website’s URL into Pingdom or Hubspot’s Website Grader. If your site takes longer than 2-3 seconds to load, there’s a good chance that your bounce rates are suffering because of it.
If enabling HTTP compression or dealing with external scripts sounds like work that’s more technical than you’re comfortable with, the good news is that there are a few steps you can take on your own to speed up your site.
One of the key things you can do is to make sure the images on your website are optimized for the web. In fact, one study found that 90% of slow websites have unoptimized images. So, what can you do?
Ideally, your images should be as small as they can be (far smaller than 1 MB) while still maintaining their quality. Here are a few ways you can make that happen:
Check the file size of the images across your website. If you have them saved on your computer, you should be able to see their size just by looking them up in your finder tool.
For any image that’s above 150 KB, go through the following steps to get it as web-friendly as possible.
For image files ending in .png, check if you can turn them into .jpg or .jpeg format. Each file type is better for a particular kind of image, but in general, logos/illustrations are best in .png format and photographs are best in .jpg format. If you have a ton of PNG files for photographs on your website, converting them to a JPG will dramatically speed up your site. To do this, you can use a tool like PNG to JPG or, if you have the source file, you can export as a JPG straight from your photo editing tool.
For image files that you keep as PNGs, run the image through a tool like ImageOptim (on Mac) or Trimage (on Windows and Linux). These tools compress your image without decreasing the quality — for the most part. You’ll still want to use your best judgment to catch images that lose their quality after too much compression.
If any of the tools above give you troubles, you can head to this blog post for links to 18 image compression tools. After you take the small amount of time to convert PNGs to JPGs and compress the images on your site, your site speed can improve by several seconds. We recommend aiming for an image file size lower than 150 KB (or lower than 120 KB if you can). If you have any images >200 KB, it’s definitely worth the effort to compress them for the web.
While you may be able to compress the images on your site by yourself, dealing with the more technical and code-related issues may be beyond what you’re comfortable doing. Still, you can spot potential trouble areas by taking a look around your CMS or website platform.
Do you have plugins installed on your website? Or are there any parts of your theme that don’t quite make sense to you? These may be the culprits of slower page speeds. A simple Google search like “[name of plugin] slow page speeds” can lead you to forums and articles outlining why that particular plugin may be slowing down your site. If you find anything like this, it may be worth it to look into other plugins. Or, if there are certain scripts, plugins, or pieces of code that you think are causing your site to slow down, you can identify them and hire a freelance developer for their expert opinion and recommendations for alternatives.
In an ideal world, you’d have a responsive website, which means it would be able to scale up or down to fit any screen size (whether that be a desktop, tablet, or smartphone). But responsive design isn’t something you can have with just an easy click.
Still, the fastest way to send mobile and tablet users away from your site is to ignore how your website functions on mobile and tablet devices. For example, if a mobile user has to zoom in to view your site on their device, or if your buttons are too small for them to easily click, many mobile users will simply back out of your site.
You can see how your website functions across devices by using a tool like MobileTest.me, which even allows you to pick a particular device and preview your website on it. You can also use Google’s Mobile-Friendly Test, which has the added benefit of letting you know if Google officially marks your site as “mobile-friendly” or not. Not only will they show you a preview of your site on a mobile device, but they’ll tell you — clear cut — if your site classifies as mobile-friendly. This tool will also tell you which specific elements of your website are not mobile-friendly so that you can improve them.
If your website isn’t mobile-friendly, all hope isn’t lost. It may take some extra time, but a quick fix is to choose a responsive theme from your CMS. It likely won’t be free, either, but it will help you retain those users coming from devices other than desktop (because it’s likely that more than half of them are!)
Another solution is to see if your CMS or website platform allows you to edit the mobile version of your website. Some website builders won’t give you the option to choose a responsive theme with the click of a button, but they will allow you to tweak elements of your site based on which device your user is using. While optimizing your site for all devices is ideal, a few steps you can take to retain your mobile and tablet users includes:
Ensure that the font size is large enough to read on a small device. This applies to buttons, too. You don’t want your user to have to zoom in, especially on buttons, since the screen likely won’t let them zoom in and click at the same time. Remember that tablet and mobile users are using their fingers instead of a mouse, so everything needs to have a bit more padding to keep things comfortable.
Stick to one main focus for each page. Screen size is extremely limited on a mobile device, and trying to clutter too many things onto the screen is a quick way to frustrate your mobile users. Focus on white space, minimalism, and one key focus for each page (and allow the user to scroll to see the rest).
If possible, include a mobile menu. On a desktop, your navigation probably stretches horizontally across the top of the screen. On a mobile menu, you want to think vertical. If a user can tap on a button that displays the menu vertically down their mobile screen, they can navigate around your site much more easily.
While these last few steps may be beyond what your CMS will allow you to do, they’re good to keep in mind even if all you can do is make changes to your desktop site. If your site isn’t already responsive, you will very likely need to make it responsive within the next year or two in order to compete in search engine rankings. In the meantime, trying to choose a mobile-friendly theme and implementing some of these mobile and tablet best practices can reduce your bounce rates and increase conversion rates for your non-desktop users.
On their own, each of these tips includes a viable solution that shouldn’t take more than a few hours of your time. Together, you’re looking at a pretty big workload. But even if you only carve out some time each week or each month to work through these steps, you will slowly but surely improve the quality of your website. In turn, your site will begin to experience lower bounce rates and higher conversion rates, and it will also improve how people perceive your business.
All online marketing starts and ends with your website. While you may be pouring a ton of energy and resources into marketing, it’s important that these elements on your website are accounted for — so that the people you attract to your website want to stay there.
And, of course, we recommend keeping track of your site’s progress. Using your back-end analytics or Google Analytics, you can check your bounce rates and see the path that many users take when they first land on your site. You can see the fruit of your labor when you watch those bounce rates go down, time on each page go up, and online leads increase.
If you want to see how the principles of user experience can make a huge impact for a small business like yours, check out our web design work for companies similar to yours. We’ve seen first-hand how putting user experience first leads to dramatically improved websites and, in turn, more successful businesses.
Ready for a slick new website, increased traffic and more converting customers? Tell us a little about your business and we’ll reach out to get your project underway.