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

Posted On June 24, 2019

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 ecommerce 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 …

 

Espresso Digital Blog - Ultimate Website Usability Checklist - Accessibility

 

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 mobile device sizes and screens available there are some tools you can use instead:

 

✓ 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 ecommerce 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:

 

✓ 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.

 

Espresso Digital Blog - Ultimate Website Usability Checklist - Identity

 

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 in 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.

 

Espresso Digital Blog - Ultimate Website Usability Checklist - Navigation

 

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.

 

Espresso Digital Blog - Ultimate Website Usability Checklist - Content

 

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 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 in 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.

 

Espresso Digital Blog - Final Thoughts on Website Usability

 

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 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.

Additional Tips and Resources for Building a Business Website

If you need to get your business established and noticed online you may find these posts helpful as well:

 

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

Written by Gregor Schmidt

Gregor is Co-Founder and CXO at PixoLabo, a multilingual WordPress web design studio based in Tokyo and Sendai, Japan. With over 20 years of experience in web, UX and information design he directs the user experience and usability strategy at PixoLabo. As an experienced digital strategist, blockchain designer, and mobile-first web design advocate Gregor frequently consults and mentors startups in Asia and the US, and is an adjunct professor of design and user experience. He lives with his wife, an award winning Japanese designer and photographer, in Sendai, Japan. When he is not working he enjoys travel, gardening, and sampling new street food.

Related Posts

Don’t Ask Santa for More Holiday Shoppers! Here is How You Can Attract Them Yourself!

Don’t Ask Santa for More Holiday Shoppers! Here is How You Can Attract Them Yourself!

If you really want to take advantage of the busy holiday shopping season and end your year on a positive note you need to plan ahead! By knowing and preparing ahead of time retail marketers can set realistic expectations and budget their time and efforts accordingly. Our holiday marketing tips are a great place to start! Happy Holidays, everyone!

Finding Your Ideal Business Website Design Partner

Finding Your Ideal Business Website Design Partner

Many business owners are so focused on their inbound marketing and lead generation needs they completely overlook other considerations. If you really want measurable business results from your website you first need to find a web design partner. Here are a few things you should focus on in order to find your ideal service provider.

15 Simple Landing Page Optimization Tips to Improve Your Conversions

15 Simple Landing Page Optimization Tips to Improve Your Conversions

Landing pages are a key element of any website marketing strategy. Their main purpose is to attract and convert visitors. But that is easier said than done. To help you get started here are 15 simple tips to optimize your landing pages any business can implement to increase conversions.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Share This

Share this post with your friends!