Usability is in the detail

The usability, and also the accessibility, of a system can be greatly improved by small changes to the detail of the user interface. I have realised this when comparing my response to very similar looking websites. In particular I use the Royal Bank of Scotland on-line personal digital banking service and some of the details of design make my experience attractive and stress free. Based on examples from this site I have tried to create some general examples of good practice.

An on-line banking system is about putting information in and getting limited amounts of information out. It requires filling out forms of varying complexity and so is a keyboard-intensive type of activity and my preference in this environment is to keep my hands on the keyboard and not to have to use the mouse. For me this improves the user experience, however for people with visual or motor impairments it may mean the difference between a site that is practical to use and one that is just too hard.

So what details make this easier for me?

Logging on

The first screen is obviously a log on screen, which requires a userid to be typed in. Where should the cursor be when I first open this page? In the entry field of course; but so many sites have the cursor in its default position at the top left of the screen and before you enter any information you either have to cursor through various menu items or use the mouse.

Having typed in the userid what do you want to do? Hit enter and go to the next screen of the logon; but many sites either force you to cursor to the ‘next’ button or click on it.

The next step of logging on is putting in some of the letters of your password. The site randomly requests, say the first, third and ninth letter of the password. This is obviously more secure than asking for the whole of the password, but it is more difficult for the user unless the page is well set out. Some sites I have seen ask all three questions together and then have one field for all of them to be entered; this can cause problems for people with dyslexia and also screen reader users. The RBS screen has each question on a separate line with an entry box for a single character. The cursor is automatically positioned at the first entry field and when an entry is made jumps to the next (with a screen reader each question is read out at the right moment).

Interestingly I have been playing with a screen reader and find that for this activity I react faster to the question being read out aloud than I do to reading the question myself.

Navigation

Navigating around a well structured website is normally easy with a mouse, you just click on the required link. Navigating without a mouse can be much more tedious as the main method is to use the tab key. The tab key takes you from one link to the next, unfortunately in nearly all sites the actually content of the page is at the end of the tab order. Some sites have added help for screen readers by having the first links hidden (so they do not appear on the screen) but they do get read aloud by the reader. These links say things such as ‘skip to menus’ or ‘skip to content’ so the blind user can skip straight to what they need to use. If you are a savvy user who can read the links in the status bar you can work out that this is happening and take advantage of the short cuts but it is a bit hit and miss. The RBS site has a better answer—if you tab to these links a pop up window tells you what it does so that it becomes easily usable by people who can see.

When entering transactions there is always more than one screen so after the first screen there is a ‘back’ button as well as a ‘next’ button. The obvious positioning is that the ‘back’ button should be on the left of the screen and the ‘next’ on the right. The problem with this is that the natural tendency is for tabbing to go left to right, so when you tab out of the last entry field you go to the ‘back’ button, which is generally not what you want. RBS have again got this right by swapping the tab order so that the ‘next’ button comes first.

Conclusion

Some people may think that this is all too detailed, but my experience suggests that small detailed changes can make a real difference to the user experience and that can make a real difference to the loyalty of the users.

I would like to thank RBS for the examples I have used.

I would be very interested to hear, from developers or users, of similar details that have been put into other user interfaces.