How to kickstart a usability audit

If you want an awesome 51-item-checklist to perform a User Experience audit, you’ve come to the right place.

You only have to scroll down and check it out. Even download the infographic checklist to print it and have somewhere in your office.

But before you do that, I’d urge you to read the whole text, so you can better understand what you’re doing and how to do it.

Firstly, this test is a mix of Usability and UX. Let me put one thing clear: Usability and UX aren’t the same, but Usability is included under the User Experience umbrella.

User Experience tries to analyse all the interactions the user has with a product or service (let’s say a website from now on), including things that would surprise some, such as if the very service or product really makes sense from a user/market perspective, if the aesthetic experience is satisfactory for the user or if the customer support sucks. Usability, in the other hand, is one of the many areas User Experience measures, and focuses on whether the website is easy to use or not.

That’s why a Usability test is simpler and faster to do: you focus in a very specific area that usually can be measured in terms of use of space, colour, form, text, load times, files or if a feature is present or not. In the other hand, this audit contains areas related to search, mailing and social media, or areas of the User Experience that go beyond the limits of Usability and enter into the User Experience kingdom.
Still, this journey into the User Experience auditing is very mild: just a few points, with no real user feedback, experiments or research. Just a small patch so you can have the maximum amount of information in the quickest and easiest way possible.

As if this was a pharmaceutical commercial, remember to have adult supervision (or in this case an experienced User Experience/Usability pro) and be realistic on your expectations about the outcome of this endeavour. For any badass increase in conversion, traffic or user satisfaction usually you’ll have to rely on analytics, A/B testing and user testing, but hey, see this as a way of knowing if there is any problem with the structure or the foundations of the webpage, from a UX perspective.

So here we go!

checklist

For a complete checklist-infographic, scroll to the end of the post!

Inner page elements

GENERAL STUFF

Basically all the areas that affect the overall user experience in the site, including how they browse the page, its performance, etc.

  1. Load time is as low as it can be: Be sure you check in Google PageSpeed and Pingdom Tools and don’t see any critic issues.
  2. Images are not being resized: If any of your images is displaying in a smaller size (for example, a 800×800 image being resized to 200×200) you’re uploading heavier images than you need.
  3. Images are being optimised: If they’re not optimised you can suggest using Shrink’O Matic, which is great. WP has plenty of plugins for it, I’d recommend WP Smush it and EWWW Image Optimizer.
  4. Gzip compression is activated: Make sure the Gzip compression is activated. Other things that won’t hurt are using a CDN, serving content from a cookieless host and installing the Google PageSpeed Module and MemCached in your server.
  5. The font is readable and has a high contrast compared with the background: or at least enough to read. Extra points? Check with a colorblind person.
  6. The page has a favicon icon coherent with the branding: at the very least it allows you to easily see which of your 3 zillion open tabs is the one you’re looking for.
  7. The experience is optimal in desktop and mobile devices: This doesn’t mean responsive or having the same functions. To have an optimal experience in both may mean applying changes to one of them.
  8. And from different SOs: Can you browse the web from IOS, Android and Windows?
  9. And from different browsers: And from Internet Explorer, Firefox, Safari and Chrome? You can check with tools like browserstack.

HOME AND INNER PAGES

Does the purpose of the page seem clear? Is the page easy to navigate? Does it suck?

  1. The web goal and its value proposition are clear without having to wait, click or scroll: Or what’s the same, you know what the page’s about from second 1.
  2. The page’s graphic design generates a good first impression: as subjective as it gets. Golden rule: It must be pretty messy (like 2007 design level of messiness) to criticise design in a UX or Usability audit.
  3. If the page has a lot of info, the site has a search function: What’s a lot of info? Well, Amazon is, your usual 6 page template isn’t. Anything between is up to you and your common sense.
  4. The website doesn’t link to 404 pages: Easy to check with the Check my Links addon on Chrome.
  5. There aren’t ads that can be mistakenly identified as content and viceversa: because nobody likes to misclick in an ad. And if you’re doing it on purpose, well, fuck you.
  6. The site hasn’t got irrelevant content from a user perspective: If it doesn’t add or answer a question, just remove it.
  7. The menu items have names that make clear what’s inside: Choose names that are clear and self-explaining. If you don’t know what’s inside you probably won’t click.
  8. The main website’s main sections and functions have a bigger visual importance than the rest: They’re bigger, have a different colour or a more important placement.
  9. There are no repeated links in the menu structure, and if there are, it’s for a good reason for it: You usually don’t need several ways to get to a place if the structure is in order.
  10. There is a way to return to the homepage from every page in the site: Usually your logo in the top left corner.
  11. We can see clearly where we are anywhere in the inner pages: Usually with a big header telling the name of the section.
  12. The are breadcrumbs that allow us to go back anywhere in the structure: And you’re also using schema.org markup on them for better results.
  13. The steps to convert are clear to the user from the beginning: If the user wants to buy/hire/convert, he instantly knows what’s the next step to do so.
  14. The steps to reach a conversion are as few as possible: You don’t want the user to have to click 5 times to convert when it could take 4.
  15. Once in the conversion funnel, there are no links pointing outside: So the user sticks in the funnel without getting distracted.
  16. Sliders allow the user to go forward and go back, and see in which slide they are: Or even better, you don’t have sliders at all.
  17. All the images have an alt text describing it in detail: This is important for visually impaired and blind people. But also for SEO and images that may not load.

FORMS

Given that forms are the main way your users will convert, you’ll need to optimise the hell out of them. Or at least have a few questions focused on them.

  1. The form doesn’t have unnecessary or irrelevant fields: If you don’t really need the and they lower your conversion, why putting them? No, not even optional fields.
  2. You can tell which fields are mandatory and which fields are not: An asterisk or a slight colour difference should be more than enough.
  3. If the form is sent with an incorrect field
    1. All the filled out fields remain filled out: So you don’t have to go through it all over again.
    2. The form tells us which fields haven’t been properly filled: So you don’t have to guess it by yourself.
    3. Fields are validated real time: So if you go to the next you know you did something wrong before sending the form.
  4. You don’t ask for the same field twice: Because it would be seriously derpy.
  5. If the form is divided in different steps, you can tell in which one you are and how much is left to finish it: So you always know how much it’ll take.
  6. The size of the text fields depends on the length of the answer: Pretty basic, uh? Don’t use the same text field for a phone number and an address.
  7. The fields follow a logical order and are grouped (if possible): Common sense 101 here. Name before middle name, make different field groups to differentiate personal from delivery questions.
  8. If it isn’t clear how to fill out a field, you offer help on how to fill it out or why are you asking for it: If you ask for my blood type, you tell me why. If I may find a field difficult, you give me a tip or an example.
  9. When successfully sending a form, a confirmation message pops up: So I won’t send 9,000 forms and hate you.

Outter page elements

Search

Some of these issues are in fact SEO or online marketing concerns, but they’re also important from a usability perspective. If I can’t find the brand on Google, probably it’s affect my degree of trust in it or even if I get to visit the page or not.

    The page ranks for its brand name: pretty basic

  1. The page ranks for its main products/services/categories + brand name: So the user can user google to search instead the page’s search tool.
  2. The snippet copy is written to pursue click: For beginners, the meta description tag is written to increase CTR.
  3. The snippet copy works independently as an ad: If you want to receive calls, put your phone number. If you have free delivery, put it there. You want it to work as an ad.
  4. The snippets have additional information as microformats: As ratings, pictures, breadcrumbs to mention some. Check schema.org and the Google Webmaster Tools help page about it.
  5. The SERPS show local information about the business or the business Google+ page: Specially if you are working with a local business or a big brand.

Social Media

Social Media may be the SM’s department kingdom, but it’s still related to User Experience.

  1. All the Social Networks where the business is in are linked from its page: If they’re not good enough to link to them from your page, erase them or make them good enough.
  2. All the business Social Networks link to the business main page: Where else would they link anyway?
  3. Images, colours and resources used in the Social Media page are coherent with the business page and brand identity: So the whole adds more to your brand than the sum of the parts.
  4. The copy in all social media pages is coherent with the brand: Same. Also, SEO.

Mailing

Usually mailing will be the channel that drives more conversions to your page, and also is a way of interacting with our audience we often forget about.

  1. The graphic design of web and mailing is coherent: You don’t want anyone to get suspicious with your emails.
  2. The tone of mails and web is coherent: If you’re going to Howdy people, howdy them everywhere.
  3. The user may be able to answer the email or not, in both cases it’s clearly stated in the email copy: So if you can write me but I can reply, at least I know it.
  4. If them cannot reply to the email, you provide a contact email: So the user always has a place to send their hate letters.
  5. There’s a clear option to unsubscribe from the mailing list: Because SPAM.

Additional notes

To finish this guide, it’s important to note that it’s a very basic usability benchmark for a website, and even if we can get some clues about User Experience and areas to improve in a website, you should see it as a small contribution to the whole page analysis.

When conducting an usability audit, it is important to know in which areas we should focus and pay special attention to the information architecture, the conversion process and call to actions and other critical points for the user. At last, it’s fundamental to count with a professional with experience not only in UX and usability, but in the same field as the website you’re auditing.

Even if the different tasks or points are as neutral as possible, there will always be a personal factor to interpret if either the web is visually appealing or not, and it is vital to know when it’s important mentioning it and when it isn’t. To what extent not ranking in Google for your brand term is an UX issue instead of purely a SEO one? When varying your copy through your Social Media channels is justified and when it isn’t? Unfortunately, there’s never a simple answer, it depends. Answering them not only requires a highly developed common sense, but also some previous experience and familiarity with our business, target and channels.

Still, this may be a good place to start. GL & HF.

ux-infographic