February 24, 2010

Website usablity check list

Basic Overview


The list is split into 4 roughly equal sections, (I) Accessibility,
(II) Identity, (III) Navigation, and (IV) Content. I'll describe and
rationalize all of the sections and line items below, but you can also download the checklist
as a simple, 1-page PDF. I try to keep it simple with 3 basic ratings:
(1) Green Check = Good/Pass, (2) Red Check = Needs work, but no
disaster, (3) Red X = Bad/Fail. Not all points are necessarily
applicable to all sites.

Section I. Accessibility


This section contains not only traditional accessibility issues, but
anything that might keep a visitor from being able to access the
information on a website. If no one can load your site, or the type is
too small to read, all of the usability in the world won't matter.

1. Site Load-time Is Reasonable
Call
me old-school, but I still like to see sites come in under 100KB (60KB
is even better). If a site takes forever to load, most people will just
leave. Yes, many of us have broadband now, but that makes our patience
even thinner.

2. Adequate Text-to-Background Contrast
Dark-gray
on light-gray may seem stylish, but I'm not going to ruin my eyesight
to read your blog. Eyes and monitors vary wildly, so keep your core
copy contrast high. Good, old-fashioned black-on-white is still best
most of the time.

3. Font Size/Spacing Is Easy to Read
Opinions
vary on the ideal size for text, but err on the side of slightly too
big. Poor readability increases frustration, and frustration leads to
site abandonment. Also, make sure your line spacing is adequate -
white-space is a designer's best friend.

4. Flash & Add-ons Are Used Sparingly
No
matter how great your site looks, people won't wait 5 minutes for a
plug-in to load. Use new technology sparingly and only when it really
enhances your goals. Sticking to standard HTML/CSS is also a plus for
search engines.

5. Images Have Appropriate ALT Tags
Not
only do sight-impaired visitors use ALT tags, but search engines need
them to understand your images. This is especially critical when you
use images for key content, such as menu items.

6. Site Has Custom Not-found/404 Page
If
a page on your site doesn't exist, a white page with "404 Not Found" is
a good way to lose a customer. Create a custom 404 page, preferably one
that guides your visitors to content.

Section II. Identity


A key question when someone first comes to your site is "Who are you?"
It's important to answer it quickly, and make the paths to obvious
follow-up questions ("What do you do?", "Why should I trust you?",
etc.) clear.

7. Company Logo Is Prominently Placed
Put
your logo or brand where it's easy to find, and that usually means the
upper-left of the screen. People expect it, and they like it when you
make their lives easy.

8. Tagline Makes Company's Purpose Clear
Answer
"What do you do?" concisely with a descriptive tagline. Avoid marketing
jargon and boil your unique value proposition down to a few words. This
is also a plus for SEO.

9. Home-page Is Digestible In 5 Seconds
In
usability, we often talk about the 5-second rule. There's some
disagreement over just how many seconds you get, but website visitors
are a fickle bunch, and they need to get the basic gist of your
home-page in just a few moments.

10. Clear Path to Company Information
The
good old "About Us" page may seem boring, but confidence is important
on the web, and people need an easy way to learn more about you.

11. Clear Path to Contact Information
Similarly,
visitors want to know that they can get in touch with you if they need
to. It's also hard to do business if no one can contact you.
Preferably, list your contact information as text (not in an image) -
it'll get picked up by search engines, including local searches.

Section III. Navigation


Once people generally know who you are and what you do, they need clear
paths to the content that interests them. Information architecture is a
huge topic, but these points cover some of the basics.

12. Main Navigation Is Easily Identifiable
Almost
every site on the web has had a main menu since the first browsers came
on the market. Make your main navigation easy to find, read, and use.
If you have two or more navigation areas, make it clear why they're
different.

13. Navigation Labels Are Clear & Concise
Don't
say "Communicate Online With Our Team" when "Contact Us" will do just
fine. Your main navigation should be short, to the point, and easy for
mere mortals to grasp.

14. Number of Buttons/Links Is Reasonable
Psychologists
like to argue about how many pieces of information we can process, but
if you start to get past 7-or-so menu items, think hard about whether
you need them. If you've got 3 layers of flyaway Javascript menus, do
yourself a favor and start over.

15. Company Logo Is Linked to Home-page
This
may sound minor, but people expect logos to link to home-pages, and
when they don't, confusion follows. I've seen video of users clicking
on a logo over and over, with no idea what to do next.

16. Links Are Consistent & Easy to Identify
The
underlined, blue link is a staple of the web. A little artistic license
is ok, but consider at least making your links either blue or
underlined. Links should stand out, and you should use them sparingly
enough that they don't disrupt your content.

17. Site Search Is Easy to Access
If
you have a site search, make sure it's prominent. Usability guidelines
tend to prefer the upper-right corner of the page. Keep the button
simple and clear - "Search" still works best for most sites.

Section IV. Content


You've heard it before - Content is king. If you don't want the kingdom
to crumble, though, content needs to be consistent, organized, and easy
to skim through.

18. Major Headings Are Clear & Descriptive
Most
people don't read online, they skim. Use headings (major and minor) to
set content apart and keep it organized. Headings should be clear, and
for SEO benefit, using heading tags (<H1>, <H2>, etc.).

19. Critical Content Is Above The Fold
The
"fold" is that imaginary line where the bottom of your screen cuts off
a page. Content can fall below the fold, but anything critical to
understanding who you are or what you do (especially on the home-page)
should fit on that first screen. Average screen resolution these days
is about 1024x768, depending on your audience.

20. Styles & Colors Are Consistent
Make
sure people know they're still on your site by being consistent -
confuse them and you'll lose them. Layout, headings, and styles should
be consistent site-wide, and colors should usually have the same
meaning. Don't use red headers on one page, red links on another, and
red text somewhere else.

21. Emphasis (bold, etc.) Is Used Sparingly
It's
a fact of human cognition: try to draw attention to everything and
you'll effectively draw attention to nothing. We've all seen that site,
the one with a red, blinking, underlined "NEW!" next to everything.
Don't be that guy.

22. Ads & Pop-ups Are Unobtrusive
Ads
are a fact of life, but integrate them nicely into your site. Don't try
to force ads and pop-ups down peoples' throats. Also, do people a favor
and make your ads clear. If you blur the line between ads and content
too much, your content may suffer.

23. Main Copy Is Concise & Explanatory
This
isn't a lesson in copywriting, but look at your home-page - can you say
the same thing in half as many words? Try to be concrete and
descriptive and avoid jargon - nobody cares if you can "leverage your
synergies".

24. URLs Are Meaningful & User-friendly
This
is a point of some debate, but meaningful keyword-based URLs are
generally good for both visitors and search engines. You don't have to
re-engineer an entire site just to get new URLs, but do what you can to
make them descriptive and friendly.

25. HTML Page Titles Are Explanatory
More
importantly, your page titles (in the <TITLE> tag) should be
descriptive, unique, and not jammed full of keywords. Page titles are
the first thing search-engine visitors see, and if those titles don't
make sense or look spammy, they'll move on to the next result.


More: 25-point Website Usability Checklist

2 comments:

  1. This is a good consolidation of the check list for websites... Very correctly mentioned that Flash and other software that need plug ins look fancy, but kill the usability.
    - Upasana

    ReplyDelete





Follow my blog with Bloglovin
Powered by Blogger.