2 Analysis of current website: usability
Website usage
Website Usability Checklist and Usability Guide:.
Listed below a list of 15 common website usability issues. You can use this list to verify the usability aspect of a website
The checklist is broken into three sections:
- Guided User Experience
- Text Clarity
- Design Consistency.
The website usability checklist:
Guided User Experience
1. The website loads within 3 seconds
2. The purpose of the site and the critical actions are clear within 5 seconds
3. The site logo is easy to find and links to the home page
4. It's easy to find the About Us, Contact Us and Home links
5. The internal search function is easy to find and use (if applicable)
6. There is a custom 404 page for broken links
7. Forms and signups only require essential information and provide helpful feedback
Text Clarity
8. The title tags, meta descriptions, headers and URLs are clear and descriptive
9. The text on the page is easy to read
10. The pages are easy to scan for important information and are free of errors
Design Consistency
11. The design, layout and organization of the site are professional and consistent
12. The navigation is clear, well organized and does not overwhelm
13. Responsive webdesign is used: The content readapts correctly to small devices, even smartphones
14. Links are obvious and take you to relevant pages
15. Animation, video, pop-ups and ads are kept to a bare minimum throughout the site
Guided User Experience
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.1. The website loads within 3 seconds
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?
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 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, or Photoshop, or free tools such as GIMP or Pixlr to resize 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.
- 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. 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.
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.”
2. The purpose of the site and the critical actions are clear within 5 seconds
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!
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.
Need help figuring out if your site passes the 5 second test? Try using FiveSecondTest.
3. The site logo is easy to find and links to the home page
- 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.
4. It’s easy to find the About Us, Contact Us and Home links
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.5. The internal search function is easy to find and use (if applicable)
If your website has more than a handful of pages, a search option is necessary.
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.
6. There is a custom 404 page for broken links
“failing to plan is planning for failure.”: 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.
To scan your site for broken links, which you can then correct, use Xenu’s Link Sleuth for the PC or Integrity for the Mac, both of which are free.7. Forms and signups only require essential information and provide helpful feedback
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!
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.
Text Clarity
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.
8. The title tags, meta descriptions, headers and URLs are clear and descriptive
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.
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:https://www.expertusability.com/website-usability-checklist-and-usability-guide/
Hey, you can see right from the words in the URL what the content is about!
But the original URL was this:
https://www.expertusability.com/?p=641
What the heck does “?=641″ mean?
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.
9. The text on the page is easy to read
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.10. The pages are easy to scan for important information and are free of errors
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.
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.
Design Consistency
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.
11. The design, layout and organization of the site are professional and consistent
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.
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.
12. The navigation is clear, well organized and does not overwhelm
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.13. Responsive webdesign is used: The content readapts correctly to small devices, even smartphones
It starts with what we call “the curse of the giant monitor.” Designers forget to test on small displays such as a 10 inch netbook. 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.
But what about smartphones ? The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn't optimized for those mobile devices. Mobile devices are often constrained by display size and require a different approach to how content is laid out on screen. There is a multitude of different screen sizes across phones, “phablets”, tablets, desktops, game consoles, TVs, even wearables. Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future.
14. Links are obvious and take you to relevant pages.
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.
15. Animation, video, pop-ups and ads are kept to a bare minimum throughout the site.
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.
Final Thoughts
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.