Quick Usability Checklist

Got a moment to see if your site passes this quick usability checklist? These are some common usability mistakes we encounter on the web while reviewing sites.


Does your site check off all the items mentioned on this Usability Checklist?

After reviewing websites for a few months, I’ve begun to see general patterns emerge that make a site more or less usable. In this post, I’d like to highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts.

Not all of these items will apply to every website, these are just suggested things to look for in your own site design. Along the way I’ll share some sites that illustrate different items effectively.

1. Site ID

Make it abundantly clear to the user what site they are on.

A Sites ID is usually found at the top left of a page right next to navigation of some kind. It’s also very important that the the ID links back to the home page of the site, or at least add a “Home” link into the navigation on sub pages of a set.

2. Page Name


Pages on WordPress.com often have generously sized Page Titles that are hard to miss.

Just as with the Site ID, the Name of any page being browsed needs to be made very clear to the user. Visually, the name of a page should appear to be framing the content unique to that page, prominently placed and styled to show that it is indeed the page heading. The Page Name is often the largest text on the page which clearly emphasizes its importance.

Also important is the actual name of the page: Does it match the name a user clicked on to get to that page? If the name of a page matches the text linking to the page, a user will have no trouble identifying what page they are on.

3. Navigation by Browsing


YouTube has a clear, small primary navigation.

There are two primary ways a user can navigate a site, and it’s important to have both forms of navigation on almost every page. The first of those two ways is navigation by browsing. This type of navigation can usually be split into primary navigation, secondary navigation (and deeper levels if required),and utilities.

Primary Navigation is of course navigation to get to the main parts of the site. It is top level navigation, explains to the user what the main sections of the site are, and helps them get to those sections. Usually the Primary Navigation is a part of a sites global navigation, or navigation that remains the same on every page on the site.

Secondary Navigation divides primary navigation into subsections. Tertiary Navigation divides those subsections into even more sections, and so on. Make sure you plan out the structure of your sites navigation so that viewers will have some idea of how to get around your site.

Utilities are parts of your site that aren’t really connected to the primary sections of your site. Examples of utilities inclue: About us, Contact Us, Privacy Policy, Terms of Use, etc. Be sure to include the more important ones for your site in a place where you’re viewers will easily find them, but don’t make your navigation too crowded by including lots of utility navigation links.

4. Navigation by Search


Ask is a search engine, and they’ve got the search part figured out.

The second form of navigation pretty much every site should have is navigation by searching. Some users prefer browsing, some prefer searching, so it’s usually wise to include both.

Users have become used to a search convention that really shouldn’t be strayed from if possible. As Steve Krug puts it:

It’s a simple formula: a box, a button, and the word “Search.” Don’t make it hard for them—stick to the formula.

Chapter 6, Don’t Make Me Think

5. Current Location


When browsing different sections of Apple.com, the primary navigation for that section gets highlighted.

A nice page title isn’t quite enough to tell a viewer where they are on a website. Sure, it’s tells them the name of that page and perhaps a bit about what they can expect to find on that particular page, but what does it tell them about where they are in relation to everything else?

Imagine you’re at an airport you’ve never been to before: Even though you might sort of know what you’re looking for, you have no idea how to get there. You probably don’t really know how big the place is, and even if you do, you’re not going to get to where you need to be without knowing where you are. This is why there are signs all over large airports that clearly mark your location as well as locations of all the other important places.

In many ways a website is like a large airport. The viewer doesn’t really know how big the site is, and without some sort of grounding a user will have a tough time placing themself on the map. Some sites highlight the section of a site a user is on to explain to them where they are, while other sites may use breadcrumb navigations or other means to show the viewer where they are on the site. Perhaps one is more useful than the other in certain situations, but the point is a site should somehow always show the user where they are in relation to everything else.

6. Tagline / Site Description


SourceForge.net has Open Source Software. The Tagline explains this well.

Taglines are a great way to explain the purpose of a site to a user quickly. It’s just a small, well crafted blurb that’s shown right next to the Site ID, usually no more than a few words. Taglines are not mottos which describe motivation or intention, but instead descriptions that convey the point of something.

7. Clear Visual Page Hierarchy

Content on a page isn’t something to be taken lightly. I often fall back to Newspapers as a classic example of how a content hierarchy should appear online. Well constructed pages use clear headings to organize content, and subheadings to make that content easier to parse. The visual appearance of content may not be as important as the content itself, but without some sort of hierarchy a user can get lost inside of a page.

About the Author

David Leggett

David Leggett is a designer, developer, and builder of things. He currently resides as Director of Marketing and Design at Python Safety.

Related Articles

46 Comments

  • David Reply

    Shall we also add that making your links clickable. In other words make sure that links appear to be links and standout from standard text.

  • Taylor Regan Reply

    Great post.

    It’s all about conveying to the user: this is who we are, this is where you are, this is what you can find here, this is how you can find it and this is what makes us awesome.

  • Jorge Reply

    Thanks for the list, very usable =D

  • Farid Hadi Reply

    A lot of people miss out on point 6 for some reason.
    It’s so simple and works wonders.

    Thanks for a nice post.

  • Anthony James Bruno Reply

    I think another to add applies to larger sites.

    Not only do you need to let the user know where they are, but also, how they got there.

  • Janko Reply

    Excellent reminder and none of these points should be omitted

  • Sketchplanet Owner Reply

    I think this can be applied to all sites. A tagline is useful but sometimes, some sites can’t be described with a 5 word sentance though. However, this can be replaced with a clear introduction of what the site is about on the homepage.

  • Destry Wion Reply

    @Anthony James Bruno:

    “…how they got there.”

    I think that’s a misdirected way of thinking about it (no pun intended, or offense), and thus not very useful. It’s also going to imply something different depending on if source is an external location, or within another location of the current site.

    In the latter case, such things as consistent design, orientation cues, etc help to solve that problem, but those are techniques described in a different context, namely navigation (i.e., color-coded, breadcrumb…)

    If an external source, then it’s not the current site’s responsibility to communicate to a user where they were before (a burden on the site owner and useless info for the user anyway). If a user doesn’t know how they arrived somewhere, it’s the fault of where they came from (though user’s knowledge/experience of the web is a factor too).

    Help users know where they are GOING (and don’t force them), and they are not left wondering where they are.

  • michelle carvill Reply

    Hi there
    Liked the post – I’ve just re-read Steve Krug’s Don’t Make me Think (something I should do more regularly – how we can forget simple basics!) and much of what you say here is verified in that resource. What I find interesting about usability and the testing I’ve done – is that even when reviewinig savvy sites where all the ‘rules’ mentioned in your post apply, the home page is often left wondering alone. In my perspective – and going back to your newspaper analogy – the home page is the ‘front page’ – it’s got to sell what the entire site is about, push key marketing messages to the surface – encouraging and ‘pulling’ the user to engage. And so, for this reason, it can break some of the ‘rules’. The home page has a whole different agenda, and understanding how users interact with the home page is key to the how, what and where information is presented.

  • myows Reply

    check – check – check – check… , should be ready to launch soon !

    thanks for the list !

  • Erik Pettersson Reply

    Just as David describes: The links shuld be easy to find in text and look “clickable”. And do not underline anything that’s not a link!

  • David Leggett Reply

    @Destry Wion: Great points Destry :) I think Anthony might be onto something as well though. It may not be an essential feature, but in some rare cases, mentioning where a user came from (externally) can be a friendly way of grounding that visitor.

    For Example: If a user visits a UX Booth Article from Twitter, they’re welcomed with a message that says “Hello fellow Twitter user!” and suggests some actions we’d like our visitors to take.

    Again, it’s not essential by any means, but it might not be useless either.

    @michelle carvill: Krug is the man :) You’re so right about the home page. It’s really a different beast, and the most important page of any website.

    Glad so many of you are enjoying this post :)

  • Jonas Reply

    I would not call this a usability checklist, but an ultra basic best-practice checklist. However, nice list to help people becoming more aware of usability standards.

  • Sander de Jong Reply

    I would recommend to read “Don’t make me think” by “Steve Krug”.. It handles all of the above examples and more. It’s like the bible of usability and very easy to read….

  • Eric Reply

    While it is basic, I would still qualify it as a usability checklist.

  • Nathaniel Reply

    @Jonas: I agree with you mate,
    it’s a good high level guide. I hope that users don’t feel that by checking these things through that their site is completely usable though.

    To make a good usable site, there are a lot more criteria which need to be adhered to than just the above, although it is a good starting point.

  • Nokadota Reply

    Hehe, nice. My blog pretty much matches all these. My design portfolio however, doesn’t.

  • Design Jar Reply

    I think we cover pretty much all the above aspects, maybe could do with adding the current page navigation so that the customer can see where they are.

  • jae Reply

    Hi, David, I wanna translate this post to chinese and need your authorization. This will be my pleasure.

    If OK, pls come to my blog and tell me or send me a mail. Thanks.

  • JuanOrtiz Reply

    it’s always important to check the basics… thanks!

  • Stefano Reply

    Great list, although it seems more related to visual design and clarity than actual usability

  • Fernando Reply

    Thanks for sharing this useful info.
    Would you check my website to share some opinions about its usability quality?

    Thanks

  • Angus Reply

    Point 4 – fail. Why should every site have a search dialog? Are people that stupid or lazy that they can’t navigate the site? What about simple sites? Why would a band or graphic designer need a search function on their page?

    Datacentric web sites, yes. The rest, er, pointless.

  • Jon Bergan Reply

    Great Post Dave. Keep up the awesome work. :)

    Rgds,
    JB

  • Manal Assaad Reply

    I’ve been going all over the net reading articles about building a killer website/blog, and coming across a lot of useful info.
    However, most of the stuff I found required CSS knowledge (which I don’t have) or assumed the fact you’re building your website from ground zero then publishing it using a web host.
    Well, that case doesn’t apply to me as I chose to start my website building online on Yolasite from a ready template then customized from there on.
    My point is: do you or anyone else here know where I can find useful links on editing the preset template I chose on Yolasite? Like how can I add subpages in the main pages I already have? etc.
    All in all, this is still a good list!

    Thank you.

  • Elijah Reply

    Very Thanks ! great post i am UI Designer.. Good collection once again i thank to u..

  • Rairul Reply

    Thanks for the article…It is really useful..

  • bishnoi Reply

    It was really nice “to check before” and “to check after” launch of a site. I really appreciate the meaning of tag line as I though before (and a lot of people still thinks) it as punch line in an Adv. Thanks mate.

  • Renda Reply

    I like the layout just wondering if to many social buttons will kill the site?

  • John Cairns Reply

    I feel like this list is a little short. I am currently doing research for our own internal quality testing checklist. So far I am up to approximately 120 points.

    I did miss the “know where you are” one in my list tho ;)

    • David Leggett Reply

      120! Nice! You should consider sharing here on the Booth sometime if that’s something that you’d be interested in. We could use a more thorough list.

  • Mary Reply

    Thanks David Leggett for the share

Leave a Comment on This Article