Quick Summary: Download the 15-Point Website Usability Checklist (PDF) to find quick ways to improve your site, and read the guide below for further explanations of each point.
When you make a website easier to use, users are more likely to stay on your site, become engaged with your brand, and more likely to help you achieve your goals.
I (John Turner, Chief Usability Guy at Expert Usability) became passionate about usability when I saw how quickly and effectively it could increase profits in my job at the time, working for an ecommerce website.
Once I started usability consulting, I realized I needed a process. There are lots of specific rules for unique, isolated situations, but it's more helpful to start with a list of general things to check that can be applied to any site.
So I sat down and crafted a one-page, 15 point list of things to check on a site.
Even though I originally made the website usability checklist for internal use, after using it a few times, I realized it was so powerful and helpful that I had to share it!
You can download the one page 15-Point Website Usability Checklist (PDF) for quick reference. Listed below are my detailed explanations for these 15 common website usability issues.
The checklist is broken into three sections:
-Guided User Experience
Anyone can rate any website with the aid of this guide, from website owners to business analysts to someone looking to improve their blog.
No matter the size of your organization, the majority of your users come to your site to accomplish a handful of specific tasks. They might want to learn more about you, find out about your products or services, or contact you with a question.
Every site's success is determined by how it guides users towards their primary goals.
Can you remember how frustrating it is when a site loads slowly? Sure you can, but can you ever remember complaining that a site loaded too quickly?
Fast loading websites are what people demand, and giving them pages that load in 3 seconds or less is ideal.
Keep in mind that while your site might load quickly on your high-speed connection at work, not all visitors have that luxury.
Ever surfed the web on your mobile phone or, worse yet, at a coffee shop, one where you are sharing a slow DSL line with 15 other customers? On those types of connections, you've already finished your latte before you can see the first page of a site.
There are two ways to speed up a site:
-Pay for faster servers
-Optimize your site to load faster
The first option costs money and won't help users with slow connections.
The second option, optimizing your site to load faster, is something you can do now, cheaply and quickly.
Start by using WebPageTest (free) on your home page, or any page you want to focus on. This tool gives you an estimated load time for a page, as well as a breakdown for what elements of a page took the longest to load.
Common page speed issues to look for:
Images aren't compressed. Images on sites aren't always as compressed as they could be, and those little differences in size can add up.
Use Smush.it (free) to compress your images.
Images resized by HTML. There are two ways to resize an image for a website. The first is to change the image dimensions with a photo editing tool. The second is to alter the image dimensions via HTML.
The first option will save a website's download time. The second can dangerously extend it.
In one example, an image sitting on a page at 614 x 608 pixels was actually 3421 x 3387, but was resized by HTML to appear smaller. I took the original image, which was 4.2 MB, and resized it using an image editor. The resulting file was 44 KB. That's 100x smaller (and much faster loading) than the original. How long did that take me? 3 minutes (I timed myself). Savings for users and servers? Dramatic.
Large background images. We all fall in love with the look of our site, but sometimes designers, in an effort to add a little more "edge" and "pop," will add a giant background image to a site. A smaller, repeating image often works just as well, and will load much faster, in some cases as much as 20 times faster.
After all, you want your users to focus on your main content, not your background image, right?
Extraneous features or add-ons. These often require a lot of server resources. There might be one or two features on your site that are doubling or tripling its load time. You know those little pop-up toolbars that some sites add to the bottom of the screen? The ones that only seem to get in your way, take up valuable screen space, and you never use yet you can't close? Some of those load efficiently, others less so.
Be careful when you add something to your site that you just "have to have," and make sure it's worth the extra load time it'll add to your site.
Not enabling caching or compression. For many website's Content Management Systems (CMS), each webpage is created dynamically, meaning the page will be "rebuilt" by the CMS every time a user visits a page, even if the content hasn't changed. This can be helpful for websites with "live" updates, like social media sites or news feeds, but for content which rarely changes, it isn't necessary. And each rebuild requires server CPU resources, leading to slower sites, and often higher hosting fees.
With caching, a page is created once, then a "static" version is stored and served to users, requiring no additional rebuilds, until the caching software checks to see if content has changed.
Caching is very helpful when you have a sudden influx of traffic, say from a time oriented promotional effort, and can save your website server from crashing.
These two caching options also offer compression, which is another way to speed up your site. Compression options, such as gzip, allow you to transfer your website data in the smallest possible size to a user, whose browser can decompress the information on the fly and display it to a user without delays.
By cutting down on the amount of data needed to be transferred from your server to a user, websites can load much faster.
These are great places to start, but there's always a lot more you can do to speed up your site, especially on the technical end.
Just keep in mind, while 3 seconds or less is a good general guideline, the real answer to "how fast should my site load?" is "much faster than it does right now."
If users can't figure out what you do, or why they should stay on your site, within 5 seconds, they're going to leave.
For some reason, I've heard a lot of resistance from site owners on this, saying what they do is too complex to define quickly, or if someone can't figure out their site, then they aren't very smart.
First off, you can always simplify the summary of what you do. Always!
Even if your longer story is worth telling, save it for your About Us page, a much more suitable place for your detailed history. A quick blurb summarizing your purpose will go a long way with new visitors. Just make sure you're as clear as possible, and avoid insider terms that won't be understood by everyone.
Clarity and brevity are essential in describing what you do. If it reads like something Dilbert's boss would write, you need to reword it.
Keep in mind, people going to your site are not stupid. Well, maybe a few are.
The reality is that people are very busy, and their day-to-day lives are only getting busier. People are busy, you're busy, and if you couldn't figure out what a site does, you'd leave as well. Make the purpose and primary actions of your site as clear and obvious as possible.
Speaking of primary actions, pretty much every page on your site should have at least one Call To Action (CTA).
A primary CTA on a page should stand out from the design of your site and (ideally) be placed near the top of your page. Don't make it hard for your users to find the primary CTAs!
I can't count the number of times I've seen ecommerce sites with tiny "add to cart" buttons that were almost invisible, hidden far down the page, comprised of muted colors.
Avoid small CTA's that are hidden in the design or color scheme of the site, or tucked away in unlikely locations. When someone is ready to buy a product, sign up for a service, or get more info by filling out a form, don't make it hard for them to complete that task.
Place your site logo in the upper left corner of your website, clearly stating the name of the site.
The logo, or just a text link, doesn't have to be huge, but it has to stand out from the rest of the images and design of the site. Ad placement around or near the logo can get in the way of users, as well as designs where the logo isn't noticeable.
Also, make sure the logo links to the home page. I've seen sites with logos that don't link to the home page AND don't have a home link anywhere in the navigation. This leads users to click desperately around a site for a way back to the start, to no avail.
Save them the frustration and have the logo link home.
These three links should show up on every page of your site.
You don't have to put them above the fold (the top section of your site visible to a visitor without scrolling), but make sure these three links exist. Also, the contact page should have your contact information, not just a contact form. This is especially important on sites which require financial transactions, such as selling a product or service.
Nothing makes me put my credit cards back in my wallet faster than finding no way to get help if I have a problem.
While I think it's a good idea to have About and Contact pages, it's also common to see this information appear, in a more concise form, on every page of a site, either in a sidebar or in the footer.
Quite frankly, I think it's good to have both, making in easier to understand what your site is about and how to contact you.
If your website has more than a handful of pages, a search option is necessary.
If a user has a specific page they want to find, but didn't remember the navigational path to get there, a search field, clearly marked as such on every page, makes it much easier for a user to get to that specific content. Google Custom Search Engine (free) allows you to build a custom search for your site, and many CMS's have a built in option to add it to your site.
Make sure the search field exists on every page of your site. When users want to search, they want it accessible right away. You don't want to put a "search" link on your site, linking to a page with a search function.
My dad loved to tell me growing up that "failing to plan is planning for failure." I think he said that a lot while trying to explain sports to me. And while the sports didn't take, the quote did, and I think that kind of mindset is common in people who work with websites.
The problem is: no matter how much you plan, something will go wrong. You shouldn't plan for failure, but you should count on it happening.
The most common failure on a website: "Page not found."
When you send a visitor to a page that doesn't exist (also known as a 404 page), you can still help them out if you craft a custom 404 page featuring your site's familiar look and framework. Most default 404 pages have very little useful information, other than cryptically telling the visitor that the page doesn't exist.
If you have a custom 404 page, you can gently tell them that the page doesn't exist, and that maybe they should go back to the home page, or try searching within your site's search. Make sure that page returns a 404 HTTP status code (tech stuff, sorry folks!)
It's also a good idea to scan your site to make sure you aren't internally directing visitors to pages that don't exist.
If you want someone to subscribe to your newsletter, download your white paper, or sign up for your trial service, how much information do you really need? You might need an email address, maybe a name too. Keep it as simple as possible!
I've thought about downloading free guides in exchange for a newsletter sign up, or joining a new service via a free trial, but once I got to the form, they didn't just ask for my name and email, but my date of birth (which is relevant to age sensitive content, which this wasn't), my annual income, my title at work, the company I worked for, how many employees at my work, our work address, my work phone, our annual revenue, and a few more sensitive bits of information.
It felt more like a background check than a free offer. Can you guess what I did? (hint: I left the site)
If you ask for too much information on forms, people won't even try, which means you'll never get a chance to wow them with what you're offering.
Requiring too much information on these forms is like leaving money on the table.
Also, remember that people are busy. They often rush through forms, and sometimes they make mistakes. Don't punish people for their errors. Help them out when it happens, because mistakes are inevitable.
If a user leaves out a piece of information that is truly necessary (and it better be necessary), give them an error message that gently, maybe even humorously, informs them of the mistake and how to correct it. Don't have the form wiped clean (had this happen to me more than once), and don't leave cryptic messages like "You have failed due to syntax error." Nothing feels worse than getting yelled at by a heartless robot!
One last thing: make sure you only require an account sign-up when absolutely necessary. If it's a site that needs an account by nature of the business, like a social media site, then it's okay. Most sites don't really need it, especially sites that offer one-time transactions, such as online stores.
"But Amazon requires it, and look how successful they are!"
Here's the thing: you're not Amazon (and if you are, our rates just doubled). You're not as big as they are, and quite frankly, you probably haven't been on the web as long as they have, so you can't get away with the things they do. If your site is subscription based, an account makes sense.
If you have a site selling things, don't make users sign up. Most people are willing to give websites a credit card, but no one wants the hassle of trying to remember ANOTHER login and password, especially for a site they don't use daily.
A good friend of mine recently needed some specialty educational resources for his job, and found a site that had what he was looking for. He was ready to buy, credit card in hand, when the site informed him that it required an account before he could purchase. How long would signing up take? Maybe a minute. But it was enough to stop him cold in his tracks, and he refused to buy from that company, even though he couldn't get the materials anywhere else. It wasn't worth the hassle of another account.
Don't lose out on business by making your customers or clients jump through unnecessary hoops.
While images and video are fun, text still drives the web, and text clarity is very important to the happiness of your users and the success of your website.
Title tags, meta descriptions, headers and URLs are not only helpful for usability in general, but also for Search Engine Optimization (SEO) and Social Sharing.
Title Tags – This is the "official" title of a web page as seen by search engines and browsers. Displayed at the top of your browser window, title tags have high relevance to search engine rankings, as well as your click thru rate (CTR) for both search and social.
When a page is shared on a social site, or comes up on a search result page, the title tag is the wording used in the link to that page. Each page on your site should have a unique title tag that is descriptive of that page's content. It's not very helpful to users when every page on a site has a title tag of "home."
The general rule is to keep the title tags to around 62 characters or fewer. User's won't see anything longer than that via search engines, and they will be too long and unfocused to hold users' attention on social sites.
Meta Description – A meta description is a brief summary of the content of the page. You'll see this information below links to your content on both search and social pages.
In 150 characters or less, write something about the content of the page, as a way to entice users to click your link. Think of it as a quick blurb for your page.
Each page should have a unique one, and if the page doesn't have one, both search engines and social sites will try to "figure out" the best description, which often leads to random, irrelevant text being listed instead of a clear summary.
Headers – Often an H1 or H2 tag, these should be placed near the top of your page, labeling the content of the page clearly. While there is no length maximum, they should be treated like the title of any book, article or story.
Have the main header reflect the content of the page, and make sure it is in a large enough font to stand out. To keep things simple, many sites will name a page's header the same as they do the title tag.
URLs – A Uniform Resource Locator (URL) is the web address of each page. This one can go far with both search engines and users.
Often the default of a website's CMS will generate a very "ugly" series of characters for URLs that doesn't tell a user anything about the content of that page.
For example, the URL of this page is:
Hey, you can see right from the words in the URL what the content is about!
But the original URL was this:
What the heck does "?=641" mean?
This lets users see clearly what content will be on the page, leading to more clicks from search result pages and social sharing.
This can take a little bit of technical know-how to get it right, but it's worth it, and is now expected of professional websites.
It's easy to get caught up in the big design elements of a site, especially flashy graphics, making it just as easy to overlook the design of the most important part of a website: the text.
Easy to read text is a must for all websites. Keep these tips in mind when designing text for a site:
Text should be large enough to be read easily. You should not have to squint to read it.
Even if bigger than "squint" size, reading a lot of smallish text can strain eyes and tire users, regardless of age.
Pick fonts that are clear and legible. Often sans-serif fonts are best.
While fancy script can be okay for logos, make sure important information and navigation is in a font that is clear to all users. Non-native English readers will struggle less with clear text.
Have strong contrast between font color and background. Having a light grey font on a dark grey background is tough to read.
When in doubt, put a dark font against a light background.
Just be careful, as certain color combinations will appear to "vibrate" when combined. You might have a seasonal Christmas look for your site in December, but that doesn't mean you should have green text against a red background.
Spacing, both horizontally between letters, and vertically between lines and paragraphs, will make text easier to read.
Don't try to crunch text too closely together, and don't have text in overwhelmingly large blocks. Web users like to skim.
Your site should be a joy to read, not feel like studying for final exams.
Keep in mind that many users, regardless of age, do not have perfect vision, so have text that is easy to read, regardless of a site's demographic.
Reading online is a lot different than reading a book or newspaper. Since other sites are just a click away, you can't assume you have a user's undivided attention. Just to make it clear, people viewing your site aren't lazy or stupid, but they ARE busy.
You can't assume everyone will read every word on your site.
Design your pages so they're easy to scan for the most important information by selectively using header tags and bolding to accentuate the most important elements. This is something that should be done in the most minimum way.
If you end up trying to emphasis everything, you end up emphasizing nothing.
Having lots of empty space around your main points can help accentuate them as well. Using lists, and in some cases graphics, can also help emphasize your point.
If you highlight the most important information effectively, users will go back and read the rest of your content more thoroughly. By taking the time to make your pages easy to digest, users will take the time to read them carefully.
Proofread anything you put on your site. Poor spelling and grammar reflect badly upon you and your organization, and can often prompt people to leave your site before they become your customer.
Having a consistent, professional, easy-to-use design for your site is an important element pushing your business or organization towards success.
Keep these points in mind when looking at your site.
I'm not trying to force anyone onto the "Web 2.0" bandwagon, but having a modern looking site, well laid out and professional in appearance, can go a long way in instilling faith and trust in your organization.
Websites that both impress in terms of looks and ease of use win over fans very quickly, and take a lot of work off your hands.
While trying to define what makes for a modern website would be a post (or a few posts) in and of itself, if you want to see what NOT to do, just put any website into Geocities-izer, a site that will transform any modern site into a site from the early days of the web, complete with autoplaying MIDI music, and lots of unnecessarily animated GIFs.
While Geocities might be dead, the spirit of poorly designed, hard-to-use, and just plain ugly sites lives on.
But even if every page of your site is well designed, a website that lacks consistency can be just as jarring to a user as a poorly designed one.
I recently talked to a colleague of mine who used to work for a major university, and he told me that each department of the school was responsible for designing their section of the university's website. So the home page had one design, but if you navigated to the computer science department, you entered what felt like a completely different site. Navigate to another section, say student housing, and that had an entirely different design.
Everything changed depending on department. One department didn't think they needed to give out contact information!
Not only was this bad for users, it cost the school more money in both customer service and design costs, as a small team of designers could have come up with a standardized design for everything, instead of paying for designers for each of the schools two dozen departments.
Good navigation helps users get to where they want to go, and can even help them figure out where they should go. Navigation that isn't clear, is poorly organized, and overwhelms often gets in the way of users completing their task.
Put clear navigation near the top of the page, or have it clearly stand out in a side column. Indicate what each link is for, and make sure the links go to the appropriate pages.
A lot of problems in navigation come about when it becomes overwhelming. Sometimes this happens when navigation is filled with dozens of links, too many for the size of the site, or in dropdown after dropdown of links.
I've seen sites with as many as three nested dropdowns, where it became nearly impossible to select the final level of links.
The prime example of difficult navigation is the "spinning cloud of tags" element, most commonly found on the sidebar of blogs. They rotate based on mouse placement, and the size of the tags (the keywords associated with content) varies based on frequency of use, so if a tag is only used once, it would be so small as to be almost impossible to click.
While this navigation has an initial "wow" factor, it quickly turns into a taxing, tortuous experience.
Taking the time to make simple, clear and elegant navigation will help your users, and help you.
This is what we call "the curse of the giant monitor." I've spent my fair share of time with designers, and, wisely, they all have giant monitors. They need that extra space for all the detailed graphic work they do, so it makes sense.
But the problem begins when something looks too small on that big monitor, especially to the decision makers brought over to see the latest version. Someone says "that needs to be bigger, I can barely see it!" and "look at all this room we have, it's being wasted!"
But did they test that design on a regular size desktop machine? On a small laptop? On a netbook? On a tablet or smartphone? Those are the devices used by most people to access websites.
Unfortunately, many designers will only look at their designs on their giant monitor, and not on the devices that 99% of users will actually view their work through.
While web users are used to vertical scrolling, if your site is too wide it can be cumbersome for users to have to scroll horizontally.
And just because users are used to vertical scrolling, it doesn't mean your content should be low on the page.
Try to keep your most important information "above the fold," a term taken from newspapers, which means anything on a user's screen that doesn't require them to scroll.
The web is a distinct medium mainly because of the power of linking. The ability to transport from one section of the web to another with just a click of a mouse is a remarkable thing.
That instant ability to transfer, be it from one part of a site to another, or to a completely different website, is what makes the web so innovative and addictive.
But that same innovation is often hindered when a user can't tell what is a link and what isn't. It isn't uncommon to find sites where links are camouflaged in the rest of the site's design, making navigation almost impossible.
The normal convention is to have links be blue, and either underlined or underlined once a cursor hovers over it. If you have a non-standard look for links, give the users some sort of feedback when they hover, like changing the link color, or bolding or underlining it.
Since we are so conditioned to assume links are underlined, DO NOT underline any text that isn't a link. Even though we might be used to underlined items in formats other than the internet, if you underline on a webpage people will assume it's a link (see what I did there?).
Also, to let people know where a link takes them, make sure the anchor text (the words in the link itself) is descriptive of the content of the link. For example, a link labeled "Garden Hose" shouldn't send users to a page about lawnmowers.
If users don't trust your links, they won't trust your site.
Having descriptive anchor text will also help users who are skimming your content. Be wary of vague anchor text that doesn't tell the user what the link is for, especially "Click Here" syndrome.
"Click Here" syndrome occurs when all links have the anchor text "Click Here," and the descriptive text actually follows that. If users are scanning (they always are), they won't notice the text around the link, they'll just notice 5 "Click Here" links in a paragraph of text.
Take the time to make links distinct, and users will reward you by staying on your site longer, engaging more and ultimately helping you reach your goals.
These four types of website content, although sometimes necessary, are often poorly used on the web.
Both animation and video can sometimes help illustrate a complex point, but make sure they are not set to auto play. Auto play not only increases the load time of a page (since the video and/or audio has to load), but will interfere with users who already know what they want to do. Animation, video and audio should be used for a specific purpose, not just to add a "wow" factor to a site.
"Wow" style media only distracts, and actually hinders your ability to give your users what they want.
One site I recently visited had a looped flash animation embedded on the home page, which was 20 seconds long from start to finish (I timed it), and the content of the animation failed to highlight the unique angle of the business. The content of the animation could have been better displayed as a flat image or as text, which would have loaded faster. The animation file was so big it accounted for 25% of the load time of the page.
Pop-ups windows, and their early web cousin the splash screen, should be avoided at all costs. Pop-ups have a close association with spammy ads that you can never seem to get rid of (those annoying ones that, once you close one, two spring up in its place). Even when used for legitimate questionnaires by site owners looking to learn more from their users, pop-ups seem to elicit hate and disdain.
Every time I come across pop-ups, I feel like I'm forced to play a game of digital Whack-A-Mole against my will.
Splash screens should only be used to warn users about age restricted or inappropriate material on sites. Other than those cases, all you're doing is making people take an extra step to get to your actual site.
While ads are an important source of revenue for content driven sites, they should be done in a restrained way to prevent confusing and frustrating users. Have you ever visited a site with a download button positioned close to ads with images of download buttons? It quickly becomes a shell game of which link to click, and makes many users want to run away from such sites.
Try to incorporate ad space within your design, but have ads minimally used above the fold, and keep them separate from the main content of your pages.
If you can meet the requirements of all 15 points, you're on your way to having a usable website that will cut down on customer service, impress users, and lead to more success.
Not to mention, you're making the web a better place for everyone!
This usability checklist doesn't cover everything. I made it for our own use, as a list that would work for every site on the web, no matter what industry or purpose a site served.
We also aren't the first ones to come up with this type of checklist. Here are some of our favorites:
User Effect 25-Point Website Usability Checklist from Dr Pete, a great usability and internet marketing expert. This is another great one page checklist that should apply to almost any site on the web.
113 Design Guidelines for Homepage Usability from Jakob Nielsen, the guru of web page usability. This list pertains to homepage design, but the majority of his 113 points can be applied to entire sites, and most of these points still hold true, even though they were written in 2001.
Don't Make Me Think by Steve Krug is actually a book and not a checklist, but his great, concise writing on usability, as well as his passion and sense of humor on the subject makes it a great read for anyone looking to get started in usability.
We wanted to share our list, and explanations of each point, for one reason: so you can see the power of usability.
This checklist is our starting point when we dive into a site, and while there are hundreds of specific usability issues we find and fix everyday, these are the most general ones that can be applied to any site.
We hope this checklist helps you improve your understanding of usability and how it can benefit your own website. If you found this article or our one page checklist (PDF) to be helpful, please share this post with others.