Charity website usability checklist
This is a write up of the presentation I gave at the Enlighten Conference yesteday on usability.
I tried to make this as practical as possible so that following the session (or a read of this post) everyone would be able to perform a basic usability check of their own website. To help with this we have created a usability checklist PDF that you can download for free at the end of the post.
What is usability? (slide 4)
It is customary to start these things with a quote - this one is not from Wikipedia
“...making products and systems easier to use, and matching them more closely to user needs and requirements”
The kitchen hob in the background is a classic example of how difficult usability can be - how do you represent four circles in a square or in this case a square and one extra on the side in the linear controls? Basically you can’t - what works for you might not work for me and there is no industry standard for laying out the buttons of hobs so you have to learn which one does what.
Why is it important? (slide 5)
Usability in websites is important because it makes it easier for users to do the things we want them to do, which most often is to create revenue, to donate money.
Every £1 invested in improving your website's usability returns £10 to £100 (source: IBM)
A web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson)
Money is not the only objective though. For charities, you may need to raise awareness of your cause or a specific campaign or recruit volunteers - other goals which I will come back to later. Usability can help enormously with that.
Bear in mind that no one has ever said:
“Your website is too easy to understand”
“Your website isn’t complex enough”
Conventions (slide 6)
Some conventions do exist, some things have become so commonplace that we accept them as standards:
- The logo is top left and links back to the homepage
- The term about us means a page of organisational info
- The main navigation is in the same place on every page
- Something ﬂashing or strangely gawdy is probably an advert for fake medicines
However, nothing is really set in stone, what works in one site may not work in another. You can break the established rules but it can be a gamble, and the only way to find out if you should break conventions - if your gamble is working - is to test, test and test again. This can be REALLY expensive.
Accessibility (slide 7)
"Accessibility" is a huge part of usability but I’m not only talking about making sites accessible to impaired users, I am also talking about anything that may inhibit or delay any user from accessing information or interacting with your site. Things like:
Readability (slide 8)
For your site to be usable it needs to be readable and there are some standard things to check to make sure:
Is there sufficient contrast between text and background?
How’s the font size and line spacing?
What about the length of the lines?
Too long it will be difficult to get an idea of where the line starts and ends
Too short the eye will have to travel back too often breaking the readers rhythm
Ideal is 50 - 70 characters per line, including spaces (“Typographie”, E. Ruder)
Images (slide 9)
Have all your images got appropriate Alt tags? This is STILL probably the most overlooked aspect of web usability and accessibility and it is really good for your SEO as well.
Load time (slide 10)
People are REALLY impatient:
“Your visitors’ expectations are high. A sizeable 47% of consumers expect a page to load in 2 seconds or less, and 40% of people will abandon a page that takes more than 3 seconds to load.”
Have you got widgets, animations, massive photos or graphics or some flash content delaying your page load times? Can you do some caching to speed them up?
Dead Ends (slide 11)
You really need to avoid dead ends in your site so check your sites for broken internal links and customise your error pages.
The most frequent dead ends will result in the error pages 403 (access denied) and 404 (page not found).
The non custom 404 page is the ultimate dead end (slide 12) - we have lost all the navigation and branding and the user has to hit back or follow the tiny non branded link to the homepage. At the very least custom error pages on your site will leave the branding and main navigation intact enabling the user to navigate away to more content.
Add search to your 404 page as here on York Road Project (slide 13) - it pulls a search term from the requested path to help the user find the content they were expecting
Add login to your 403 access denied page as with PSC Support (slide 14) so the user does not have to find the login link and then return to the page they were trying to access.
Identity (slide 15)
Logo / Branding / tagline
Is this prominent on every page? It really should be - the tagline especially is something people often overlook. Many people will come to your site via the homepage first but people will also be following links from all over; from emails from twitter, facebook, articles, etc. If I come to your site and land on a blog post, ask yourself if I would immediately understand what your charity does. Do I know that you are even a charity? As a new visitor I need this information to easily process the content in the blog post and to understand it as part of your charity's message.
5 second rule
Can I digest your homepage in 5 seconds? I know you can, but can I? Can anyone?
Clear path to information
Your most important pieces of information are likely to be within the main navigation, or in a slide show, or some sort of signpost. You can’t expect a user to work to find this stuff: you have to push it on them.
Clear path to contact
Likewise with your contact information, people who want to get in contact don’t want to follow three clicks to find your location or your email address.
Navigation (slide 16)
Is the main navigation easily identifiable? You can have more than one but it is important I can tell which one is the main one.
Are the labels clear and concise? ‘About us’ is better than ‘What we do and who we work with’
Are there too many items in your navigation? Seven is about the maximum a user will tolerate due to choice paralysis (if you give someone too many choices they will choose not to choose)
Take me home: Link the logo - and have ‘Home’ in the main navigation. It is worth doing just because that is what people expect
Links - make them consistent and easy to identify. They don’t have to be blue and underlined but they should be distinct from other text elements, and if you give them a stlye give all the links that same style, everywhere
Try not to interfere with what your user wants to do - having a link open in new window means I can’t use the back button which is above all the most used navigation element
Link email addresses - email@example.com should have a mailto link in it so that when a user clicks it it opens up their mail client and starts an email. crispin [AT] my charity[dot]org won't. It acts as a barrier to actually stop someone emailing you. If you're worried, you can get some spam protection or filtering your end rather than making the user do the work.
Content (slide 17)
We all know that content is king here are some tips to make the king more user-friendly:
Headings - are they clear and descriptive?
5 second rule again - can I digest the message in 5 seconds? Imagine you have 5 seconds to convince someone to read the full post
Break content up with bullets, headings and emphasis
Use emphasis sparingly - if you try and draw attention to everything you end up drawing attention to nothing
Be consistent - styles, colours, etc. Don’t use a red h2 heading on one page and blue on another
Be concise - have you said too much? Most often you have - people don’t have time to read stuff properly - see the post from Nancy Schwartz earlier this week, which is the backdrop of this slide:
Onsite / Off site (slide 18)
These are changes that make your site content more usable even before users have actually come to your site. Make your site content more attractive and informative when it is shared on social networks or when it appears in search results.
Page titles - are really important, this is what is displayed on the SERP (Search Engine Results Page), it is often what is shown when you share something through twitter, facebook, or Google+. It wants to be descriptive and easy to read, not stuffed with keywords or have your site title in it twice.
Meta info - There are loads of meta tags you can assign to pages: author description, featured image (these go along way to improving off-site usability) and the description pulled into the SERP and the social share
URLs - readable and sensible. This is also good for your SEO
Sharing - increase sharing, make it easy, make it obvious and ask for it: "Please share". The points above will make sharing easier for users because they won’t have to edit the tweet text too much, or cycle through the thumbnail images...
UCD / UX / User Journeys (slide 19)
In talking about usability we also talk about User Experience (UX), User-Centred (or User-Centric) Design and User Journeys. Just to clarify:
The discipline - experience as an explicit design objective
The process - Research > Sketch > Prototype > Test > Repeat
The route someone is taking as they click through your site
Identify User Groups, Actions and Landing Pages (slide 20)
I will just explain a little about the process involved, from a web development point of view, then I will demonstrate a cut down version that you can do yourselves.
Firstly we need to identify all the different user groups: who they are what they want to do with the site, where they might come from and where they might land in the site. This could happen in a number of ways: talking to stakeholders, running focus groups, researching similar sites, studying analytics looking for patterns in user behaviour, run some usability studies on their current site, eye tracking, observing users interacting with the site...
Matrices and User Journeys (slide 21)
...Which then informs the next stage where we draw up user journeys and a big content / action matrix to guide us as we build the site and create a design to achieve these goals
Why is this important? (slide 22)
Build a website by finding out what users want to do and what you would like users to do, not by what information you need to convey and what you would like to get from your users. Make them happy and they will be more likely to do the things that you would like them to do.
The image of Apple's big fail - a massive teaser ad campaign that was largely irrelevent to their customers: the Beatles, now on iTunes - Who cares?
The Beatles being on iTunes is not important to me. It's important to Apple, to Steve Jobs, so maybe it's a good idea think about your website being for your users first and foremost rather than for your trustees. Make it about what is important to your users not important to the board. I'm not saying that information is not important, or shouldn't be on the website. I'm saying that it would be a good idea to make sure the presentation of this information is not too prominent that it inhibits users achieving their own goals.
Goals and conversions (slide 23/ 24)
What this all boils down to are goals and conversions and you can do a budget version of what we would do by sussing out what your goals are - make a list of them all on post it notes and arrange them in a hierachy.
...and then review this looking at your own site (see my rubbish diagram in slide 25)
Free Download (slide 26)
To help you do that we have prepared a free usability checklist of all the points I have been talking about, with space for you to add your own goals and evaluate your website against them.
If you have found this useful please take a moment to share with others - thanks!