Usability

Usability goes hand in hand with accessibility. If your site is not usable then it isn't accessible.

Usability is about how you perform actions and how intuitive or obvious are the paths people need to take to perform tasks through your site.

A great example would be how does your customer move through the site from first arriving at your homepage to giving you their credit card details for the mass of products they just purchased.

A real world example from a recent project:

James Company Karaoke

The problem was how to move from the user first loading the site to them being able to see the track and disk numbers of a song they wanted to sing so they could browse the catalogue or even use it to write out a song selection slip to hand to the KJ at an event!

The first things to think about were where to put the links to follow and how deep the person should be made to go.

There is a method / rule for websites when it comes to things like usability which is called the "3 click rule". Basically this means that from the front page of a website, a user should be able to access all information within a site using a maximum of just three actions.

The solution for where to place the links was obvious. At the top of the navigation list as this was likely to be the main reason for using the site. The 3 click rule I wanted to implement was likewise fairly simple.

  1. Follow the link to access the song list
  2. Follow the link from the song list to the track

That made it only 2 actions so even better. But that doesn't take into account if the track is on the 70th listing page!

With some 13000 tracks the site was originally populated with, obviously we could not display every track on one listing page that scrolled for ever down the page.

The solution was to put in a search feature. First action to access the search, entering the search criteria being the second action. Finally selecting the track you wanted from the search results being the third.

That worked fine. But it wasn't good enough. Usable yes, could it be improved on? definitely!

Going back to the drawing board, we looked at the results pages first of all. There were all these numerous tracks that you could choose from that also had artist details. Obvious next move, also make the artist text in the track listing an option to get a list of tracks by that particular artist.

Things were looking up, now two different ways of finding the track information as well as the ability to use the artist details page for something else if we decided to at some later point.

Looking at the track listing page again. We already know what the track information is for each entry in the list and what the artist information is. So when the track detail page is displayed it tells us how many times that track has been requested and how many times it has been sung. By using a little bit of javascript, we were able to make a box appear when the users mouse was hovering over the link for computer users with those statistics for the track. Likewise, a hover information box could be made to appear with the artist statistics.

Going back to the start page, we were able to add in another link for looking at all the artists in the catalogue. As well as arranging the track list alphabetically by track or artist name.

Later on while we were working on the community side of the site, we decided to allow site members to tag tracks with their own genres. So viewing by genre also got added as a menu option.

The usability of the site improved many times through the design/development cycle and although we could add even more features, the information is amazingly simple and blindingly obvious to get at.

For those of you who have actually been reading, you will notice I mentioned that computer users were able to hover their mouse over a link to activate some javascript to display some information. For those of you who have been paying attention you may think that actually detracts from the accessibility comments made earlier.

The truth is, you are correct. Using javascript is a bad way of showing information, unless that same information is also shown through another method. It doesn't break accessibility by allowing computer users and not phone users to access something that is accessible to phone users in a different way.

The same information is available for all users, whether they be using a computer or a phone, whether they are completely able or if they have a special need. The javascript and hover 'added' something it didn't disable anything by not having it.

So there we have it, usability is important for the ease of getting at information. Not making things overly complicated and not forcing customers to jump through hoops just to perform even long winded and complicated actions.

It also goes alongside accessibility because the easier something is to use then that has a knock on effect of increasing the accessibility of getting at the information or performing the task your customer comes to your site for in the first place.