The Ultimate Website Usability Checklist to Help You Create a Rockstar Online Presence!

Why You Need a Website Usability Checklist

Have you ever arrived on a business website without exactly knowing why you are there, or what to do next? Have you ever not found key information on a website? Or simply given up exploring it because the site navigation was so clunky? All of these are examples of lacking website functionality. Since that is a huge turnoff for your website visitors, I want to share a website usability checklist with you.

Simply put, website usability is the key to website success. The more user-friendly the website is, the more time visitors will spend on your website. And time-on-site is a direct relation to how well your website attracts and engages your visitors.

Website visitors will judge the quality of a business or brand based on the user-friendliness of their website. Maybe that’s not the best way, but especially for e-commerce retailers it is the only way consumers have to get to know you. Therefore, your business has to make a great first impression on your website visitors. Only then will you increase engagement and conversions.

Use the following website usability checklist to check if your business website is actually meeting your user expectations, and how to fix any shortcomings.

The Ultimate Website Usability Checklist

To make this easier on you I organized this website usability checklist by category. But I did not sort it by importance, so don’t think you can skip the bottom part. Just saying…

Accessibility

You can have the most awesome website ever, but it will not do you much good if nobody can access your content! That includes everything from how long it takes your page to load to how you deal with visually impaired visitors. If you really want to provide a great user experience for all your visitors, you need to focus on the following:

✓ Mobile-First

I seem to have mentioned this before a few (hundred) times, but just in case you missed it I will say it again. In 2019 your website visitors are mobile, which means your website needs to be mobile-first as well! If you do not have a mobile-first website none of the rest of this website usability checklist will be all that important.

Ensuring your mobile website is easily accessible can be made easier with easy to implement pre-made grid frameworks. But mistakes can happen, especially when integrating videos, pictures and interactive elements. It can take a little time to tweak everything, so it gives the best possible mobile user experience.

Tip:

If you don’t have all the mobile device sizes and screens available there are some tools you can use instead:

• XRespond
• BrowserStack
• TestObject
• Quirktools Screenfly

✓ Optimize for Mobile Devices

Simply having a mobile-friendly website doesn’t mean you are actually meeting the user expectations of your website audience. All too often I still find myself landing on websites that have not been optimized for mobile users.

In 2019 that is definitely not a good thing! According to a recent study by Statista, 52% of your website traffic comes from mobile devices. And that is not all. According to these statistics compiled by 99Firms, smartphones will make up 34% of all US e-commerce sales in 2019. Some areas of the world have already surpassed that figure; roughly 75% of e-commerce sales in China originate from mobile devices.

The first thing you need to do it make sure that your website or e-commerce store is optimized for mobile devices. And that process must focus on website usability for mobile users. On a desktop computer, it’s easy for visitors to click nearly anywhere on the screen. But not on mobile devices. According to A List Apart, 75% of mobile users click using their thumbs, and 49% click using only one hand!

It’s uncomfortable for mobile users to try and reach the corners, and they might even click on something else by mistake. If they navigate to the wrong page, they will be frustrated, since it adds extra steps to their process.

Tip:

Make sure to carefully evaluate the mobile user experience of your website on a variety of devices and screen sizes. Here are a few website usability testing tools that can help you find and eliminate any shortcomings.

✓ Page Load Time

Modern, and especially mobile web site visitors are extremely impatient. And Google goes as far as recommending page load speeds of one second or less! That will be hard to achieve for many websites, especially e-commerce stores. But I do recommend you aim for a page load speed of between 2-3 seconds if you want to provide a positive user experience.

Tip:

You should check your page speed often as it can be an indication of other website concerns. Here are a few tools I recommend for this:

• Google Pagespeed Insights
• pingdom.com
• GTMetrix

✓ Clear Contrast

When visitors arrive on your website, they want to immediately learn more about you, your awesome business, service or product. Therefore, make it as easy as possible to actually you’re your content! There needs to be clear contrast between the design background and your text content, otherwise important information will get lost.

Tip:

With hero images, intro screens and full-page sliders, text content may not be completely legible due to the underlying image content. Carefully evaluate both the background image, and the text position, for best results.

✓ Font Size

Next on my website usability checklist is a pet peeve of mine! If you want me to consume your content, please don’t make me squint to do so! And I am not alone here. Studies have shown that small font sizes are a major irritation for the majority of website visitors.

Therefore, it is very important that website text is easy to read in terms of both font size and spacing.

Tip:

Body copy should be at least 14px, personally, I recommend 16px. You can learn more about website font sizes here.

✓ JavaScript

Yup, cool effects can be a great thing for your website. And there are new applications and effects for JavaScript coming out seemingly every day. Of course, it helps if your visitors get to see them. Keep in mind that cool effects have a not-so-cool side effect. They can greatly increase the time and resources it takes to actually load your website.

Especially for users with older or weaker computers and smartphones, memory-intensive effects often provide a terrible user-experience. Common results range from slowdowns and some missing content to malfunctioning websites that are not loading at all. Keep that in mind as you decide on how many slick effects you want to add.

Tip:

Try not to use excessive Parallax Scrolling and CSS Animations via JavaScript, and reduce the total number of required JavaScript libraries to 3-5.

✓ Well Organized

Don’t make your website visitors look around for key info. They are not going to do it, no matter how much you hope they would! Instead, organize your website into a grid, and then use this grid-based system throughout. All headlines and text content, as well as images, support info, contact forms, headers and footers, should follow this grid. This will give the impression of a well- organized website, increasing visitor trust and confidence.

Identity

You know why brands like Apple, Nike, Coca Cola and Amazon are so recognizable? It is because they all follow a clear brand or identity strategy. So, if you want to become a recognizable brand you should probably do the same, right? Next, on my website usability checklist are a few identity and brand management guidelines that will help you improve usability and user guidance.

✓ Logo

Let’s start with the most important part of your website branding, your company or brand logo. Almost all website visitors will look for a recognizable brand logo, most often in the top left corner of each page. This will immediately tell them if they arrived on the right site. A pretty cool side-effect is that it will also give them an increased sense of trust and transparency. Sweet!

Tip:

Make sure your logo is of sufficient size to be crisp and clearly visible. I recommend a minimum size of around 100px. Keep in mind that hi-res retina devices will require 2 to 3 times that. A nice touch is a Favicon, basically a small icon of your logo.

✓ Tagline

No, you don’t absolutely need a tagline. I know quite a few businesses without one. But if you do have a tagline don’t hide it! Make sure it stands out from the rest of your content instead. This will help you summarize the content of your site, helping your visitors to anticipate the content. The better website visitors understand the context, the sooner they will take action.

✓ Homepage

Funny how this aspect frequently gets overlooked! Which is why I wanted to make sure to include it in my website usability checklist! When visitors first arrive on your homepage they most likely are beginning their journey of conversion. That means they want to find out a bit more about you and your business.

The most effective thing you can put on your homepage is something like this:

• How do you solve your clients’ problems? Most likely your website visitors are facing an obstacle. What can you do to help them overcome that?
• How you benefit your clients? Do you make them younger? Prettier? Richer? Better in bed? Make sure that part is clear right away!

Tip:

Your website visitors should be able to get this information in 5 seconds or less. Other content types, such as slideshows or animations, should load as interactive elements within 5 seconds.

✓ Company Info

Most likely your small to mid-sized business is not yet known to everyone. So why not tell your website visitors a bit about yourself? Especially smaller and lesser-known companies are often judged on the basis of their Contact or About Us pages. Make sure these pages are easy to find, ideally as a link in the main navigation, and as complete as possible.

✓ Contact Info

Has this ever happened to you? You are ready to exercise the company credit card and purchase something from that great website; if only you could find a way to contact them? And visiting a website is not always for commercial reasons. Existing or future customers may want to contact a company for any number of reasons.

Part of any website usability checklist needs to include this question: can phone numbers, email address or other contact information be accessed quickly on your business website? If not, you will want to fix that right away!

Tip:

Many of your website visitors are coming from mobile devices. Make it even easier for them to contact you by providing a clickable phone number that will automatically dial your business.

Navigation

One of the first things you have to do is to attract visitors to your site. But once they are there you will want to engage them enough to explore other parts of your website. This means that in addition to providing a great user-experience you also need to provide a clear and effective way to navigate your website. Which makes it the next part of my website usability checklist.

The better visitors can navigate your site, the more time they will spend on consuming your content. Only once visitors understand your content will they end up following your CTA.

✓ Main Menu

It is absolutely essential that your website navigation menu is easy to understand, and consistent throughout your site. It is less important what type of navigation menu you use. Most websites simply have the menu at the top. More modern sites frequently display the three bars of the Hamburger menu. Other sites opt for a full-screen or overlay menu. Pick the one you like, and use it consistently!

Tip:

For both mobile and desktop, the hamburger menu button is now a recognized symbol, and can therefore definitely be used. This will also free up some additional space on your page otherwise required for your menu.

✓ Navigation Labels

This is where you can be either cute, or effective, but never both! The main purpose of your website is to guide potential consumers through the process. You can greatly simplify that step by having clear and concise navigation labels. If visitors don’t understand where a menu link may lead them, they are not going to bother clicking on it. And that could effectively hide your valuable content from them!

Tip:

It is essential that each menu item clearly describe where the link leads to. For example, for a nail polish website, the menu item “Colors” is much more effective than “Poppers”.

✓ Menu Items

If you follow my blog posts, or those of our highly caffeinated team, you may have heard us refer to the attention span of humans before. In particular, the fact that humans now lag behind the average goldfish in that regard. Regardless, we humans are just not good at staying focused. What was I talking about? Just kidding, but …

Keep in mind that human short-term memory can only remember 5 things without much effort. If you give people more choices than that they will most likely not take action at all.

Tip:

If you want visitors to quickly learn what your website has to offer, avoid using more than 7 menu items in your top-level navigation. The ideal number is between 5 and 7. In expanded dropdown menus, you can use more as users have a stronger focus and read more slowly.

✓ Logo Link

I mentioned the importance of a clear and visible logo earlier. Here is another reason for having one, most website visitors are used to clicking on the brand logo to return to the homepage of that site. Be sure to meet their user-expectations.

Tip:

Having a logo link to your homepage means you no longer need one in your top-level navigation menu. That can free up valuable space for another menu link.

✓ Consistent Links

I just mentioned the importance of consistent menu labels. Let me expand my website usability checklist a bit and include the need for some more consistency. Most modern websites use a combination of text links, buttons and images as links. That’s perfectly fine.

But it is critical to always use the same option for the same function so that users don’t get confused. If all else fails I recommend you keep it simple. As far as I know, nobody ever misunderstood a simple blue text link.

Content

Whew! OK, almost done with my website usability checklist! The last remaining topic is one of the most important, your website content. Up to now we pretty much focused on how to attract people to your site and get them oriented. Let me wrap up by focusing on the most important aspect of your business website, your content.

In most cases, your website content is more important than actual web design and layout. Whichever content best addresses consumers’ problems will get the most attention. Here are a few tips to help you organize and optimize your content accordingly.

✓ Establish Credibility

The first thing your website content has to do is to establish credibility. So, let me start the content section of our website usability checklist with that. Simply put, no matter why visitors are on your website, they are not going to stick around if your site or e-commerce store appears untrustworthy.

What do you think a visitor’s perception of your website would be if your homepage does not include information about your services or products, your contact info, or a bit about who you are? I can guarantee you it will be negative. Take a look at what it will take to create an effective home page introduction that will make visitors stay on your website.

Therefore, your website credibility needs to be established right away. Otherwise, visitors will not feel safe while they are navigating and consuming your content. At a minimum, I recommend you are transparent about your content, services, products, prices, and contact information. Don’t make website visitors search your entire site to find this information.

Once you have established a level of credibility and trust on your website your visitors will be more at ease. They will no longer worry about getting scammed or clicking on a spammy link. This will increase the chances of them engaging with your content, which in turn will increase your conversions.

✓ Headings

Imagine your website tells a story. Headings are simply the title and subtitle of that story. The more effective your headings, the more likely your audience will actually read your story. The famous marketer David Ogilvy recommended devoting 80% of your effort to your headlines!

✓ Consistent Color Scheme

Your website colors play an important part in user experience and satisfaction. You can have an awesome website with brilliant info; if you have a neon green and hot pink color scheme I doubt many visitors will stick around long enough to notice. Ouch, my eyes, my eyes!

Tip:

For the best possible user-experience select colors that match the nature or type of your industry. Take a look at how color psychology can affect user behavior and apply that to your website. The more harmonious the colors coordinate with each other, the more advantageous.

✓ Typography

I mentioned organizing your website in a grid system earlier in this website usability checklist. But it is equally important for you to organize your text content, and it all starts with typography. A website should convey the organization, and that means using well-balanced web fonts.

That does not mean you should go overboard here! I strongly recommend that you limit yourself to not more than two font families; you can always use variants for different effects. It is also important you follow the proper hierarchy for your H1 through H6 headings.

Tip:

To find the right pairings for Google fonts, you can use this Fontpair tool.

✓ Minimal Pop-Ups

I’ll be straight with you; I am not a big fan of pop-ups of any kind. Yes, I understand why marketers like them, but those people have weird tastes anyway. And I am softening my stance a little when it comes to exit-intent pop-ups; stay tuned for an upcoming blog post.

But for today I want to focus on pop-up use on your website. Pop-ups or fade-ins that cover the entire screen annoy most visitors, especially on mobile devices. And Google has issued a stern warning about Interstitial Pop-Ups. Therefore, you should completely avoid, or at least greatly limit the use of pop-ups on your business website.

Tip:

If absolutely necessary, popups should only be used where they will not interfere with expected user behavior. For example, it is essential to avoid pop-ups in your e-commerce checkout process.

✓ Content Structure

Sorry to bring up that poor goldfish again, but the shortened human attention span will require a few changes to your content structure. Modern and especially mobile consumers don’t read content on your website. Instead they skim over content and stop to read more when content seems interesting enough. It is therefore important to break your content down into individual paragraphs. Remember, you are not writing a book here.

Tip:

A common rule from journalists is: “One paragraph per thought.” A simple rule from our UX designers is “More than 5 lines of text without a break is too long.”

✓ Paragraph Headings

One important aspect of your content structure are your paragraph headings. Look at them like short advertising blurbs for the content ahead. If visitors like the looks of that they are more likely to actually read that paragraph. Otherwise they are likely to look elsewhere.

Tip:

An effective paragraph heading should briefly summarize the content and arouse curiosity. You can use the heading to personalize the message to your users, and present reasons for purchasing from your business.

✓ CTA (Call to Action)

The very last item on my website usability checklist is one of the most important parts of your business website, the Call-to-Action. Surprisingly many websites don’t have one at all, or it gets lost in the background noise. Neither is overly effective for meeting your business objectives.

One common mistake is to place your call-to-action too early in your consumers’ journey of conversion. That will most likely not lead to the results you envision. Potential consumers will want to find out more about you and your business and products or services before they will heed your CTA.

Therefore, it is a better idea to place CTAs directing visitors to other parts of your website throughout your content. That way you are aligning yourself with their journey of conversion. Clear calls to action or other links should also be placed near or at the bottom of all pages. as this is the only way for users to stay on the site.

Final Thoughts on Website Usability

The goal of every website should be to get visitors to take a certain action: The Call to Action. What exactly that is, depends in a large part on the nature of your business, industry, product or service. This website usability checklist will provide you with the insights you need to get your visitors to take action as well.

Exceptional website usability and the implementation of these website usability tips are the basis for increasing your conversion rate. If your website visitors find your site easy to navigate and use, and if your content meets their expectations, they are more likely to spend more time on your website consuming your content. Which is exactly what you want.

Not Sure How to Make This Website Usability Checklist Work for You?

Our innovative mobile-first web design team can help you develop just about any type of website. We are experts at carefully crafting custom mobile-friendly websites to meet (almost) any budget. From designing new WordPress websites, redesigning or updating an existing website, building responsive e-Commerce websites to creating a multilingual online presence for your business we work directly with the client to prepare them for the ever more demanding mobile consumer. Why not get started by requesting your FREE web design estimate?

And if you are still not sure how you can improve your website or your website usability, don’t worry! Simply reach out and contact us. Our expert team will listen to you, answer your questions, and determine the best way to implement all the items from our website usability checklist on your website or e-commerce store. That is one of our specialties, after all!

Are You Satisfied with Your Website Usability?

Did you use this website usability checklist on your website? Did you discover any usability shortcomings? Or are you experiencing other website usability issues or shortcomings? Please feel free to let us know so our audience can benefit as well and grab our feed so you don’t miss our next post! And feel free to share our post with your audience.

Thank you! We appreciate your help to end bad business websites, one pixel at a time!

By Gregor Schmidt
Co-Founder / CXO
@gregorspeaks