Usability shouldn’t be a drag

You’ve spent months working on your project and delivered it to the client. Initial feedback was positive, but they’ve spent a few days with it now and have asked if there is anything you can do to ‘make it more user friendly’. Ouch. It’s a bit late in the day to start any major restructuring. Surely, there must be something you can do! This article gives you 10 ways you can improve your application’s usability when you thought it was too late!

The 80/20 Rule

The 80/20 rule is well known and has wide applications - in this case you can say:

• 20% of your applications features are used 80% of the time
• 80% of errors are caused by 20% of interactions

So, the first thing you need to figure out is what are the 20% of features your users really care about or are causing problems. You can do this a number of ways: ask them (crazy idea, I know!), watch them using the product or you could add logging functionality to your application (probably the most reliable way - what users think they want and what they actually want are very different ).

Once you have arrived at these features you can focus on polishing them:

• If they are going to be used the most frequently, see how you can make them easier to access e.g. make their icons more prominent, add shortcut keys etc.
• If a user is getting stuck somewhere try and identify why; is there a clash of terminology? is the next step of the process not obvious?

By focusing your efforts on this 20% of features and issues you will greatly increase the overall perceived usability because you are focusing on the areas that matter the most.

Open Office toolbar shows frequently used commands to allow quick and easy access

Aesthetic Usability Effect

Make your application pretty. When your users ask for usability improvements, secretly they may be crying out for it to be less ugly!

This is actually a known phenomena, attractive applications and products are perceived to be better and more user friendly than ugly ones. So ask a designer for some help, spruce up the CSS and you may be amazed about how much more user friendly your application becomes - just by making it prettier!

Constraints

Use constraints to stop the user from using your application in ways that you didn’t intend and ensure only they only enter valid data. This will cut down on errors and make interactions more intuitive. There are a number of ways you can do this:

• If your database column only accepts a certain number of characters - prevent the user exceeding this limit. Stopping them make the mistake is better than throwing an error or, worse, truncating their data.
• If a field should only accept numbers, don’t let it accept letters in the first place! Don’t wait until you are validating the input to tell them they’ve got it wrong!
• When a user is entering a delineated field (e.g. a MAC address, serial number or credit card number) don’t make them guess whether they should put spaces, colons, hyphens etc. between the blocks of input - have one field for each block and display an uneditable delineation between them.
  
  

  Windows XP Product Key dialogue removes the uncertainty as to whether to enter the dashes

• You wouldn’t have a user entering 1 and 0 or True and False for Boolean values; you’d have a checkbox! So, consider using controls such as sliders or dials for entering other data so that users CAN’T enter invalid values
• If a control can’t be used at a particular time grey it out or remove it altogether. Don’t tell a user off for clicking a button when they shouldn’t!

Make it CRAP

Ok this is 4 things for the price of one… but they all fit in to one acronym so only take up one place on the list. CRAP is an acronym from the field of graphic design; it stands for Contrast, Repetition, Alignment and Proximity. I wrote an in depth article about using CRAP to improve user experience in: How to make your user interface CRAP. These principles are easy to apply and can make a big difference without a huge amount of effort.

Lighten the load

Dealing with large amounts of information increases a user’s cognitive load and makes your application harder to use. Cognitive load is the amount of mental activity used to accomplish a task and includes things such as memory, perception, thinking/understanding etc. You can take steps to reduce this load and make your application more user friendly:

• Ask for as little as possible. Long forms, asking for lots of information, are intimidating. When a user can get away with it they’ll not bother filling them in. Where the user has a means to fill in the detail later, try to ask for as little information as possible to complete the task and let them move on.
  
  

  Creating a new project in Base Camp. Just the name and who's involved. The rest can follow later.

• Where you need a lot of information that can’t be deferred for later entry, break the form up in to a number of pages and walk the user through page by page. Make sure you indicate progress so they know how far they are through the process!
• Remove unnecessary information from the display. Each piece of information on a display should add to understanding rather than clutter. If it isn’t relevant or adding value then remove it.
• If possible, explain fields near where it is entered so your user doesn’t have to think about what it means. This is even more important when you are dealing with technical terms and acronyms - it saves a user’s blushes if they haven’t heard of it before! The screen shot of Base Camp above shows a good example of this by explaining what they mean for the field “Name the Project”

Use less words

Users hardly read anything. You’d be amazed how little they read. Your application isn’t a news article - if it has lots of descriptive text it simply wont be read. In fact, the shear amount of text will scare your users and make them think your application is complicated and hard to use. Most will just click OK or Next and hope for the best. When this is the wrong thing to do they will resent you.

If you need to prompt your user; use a declarative active voice. You don’t need to be polite and it wont come across as terse. For example don’t label a field “Please type in your full name:” just say “Full Name:”. The user doesn’t need to be asked politely and telling them to type it in is unnecessary - they can’t enter it via the medium of expressive dance. Even if they could - does that label preclude them from doing so? If there is too much to read there is a risk that important information will get lost in the crowd.

Above the fold

The ‘fold’ is a term from Newspaper layout design. The fold literally being where the paper is folded in half. Information above the fold will be seen by more people as you don’t need to unfold it to see the information. This term still has relevance in interface design, but the fold now is the bottom of the visible area without scrolling.

• Consider rearranging the page so the user can see the most important data without scrolling. Does it make sense for you to eliminate scrolling all together?
• Some applications display and group all the errors at the bottom of the page. As far as the user is concerned, they clicked submit and the form was just redisplayed to them. By the time they have thought to scroll down they already have thought that it’s a problem with your product rather than their use of it. So, lay out error messages so they are displayed above the fold (ideally, near to where the error occurred, but make sure you scroll the page so they are visible).

Sorting and Grouping

The way you organise the information in your application has a big impact on its usability. Sorting applies widely - from the order your menu items are in to the facilities you provide when displaying a list.

The 5 Hat Racks theory states that there are 5 ways to organise information:

• Alphabetical: Simply in alphabetical order. This is a good approach when the information can’t be grouped in a meaningful way or a user needs to access any of the information quickly. It’s a popular choice for application menus where the user can access any item in any order
• Location: Information is grouped by by physical space. If your data relates to the real world you could use this approach in conjunction with a map to show the information in its physical context.
• Time: In time and date order. Whenever you have a date or time associated with information make sure you can sort by them so the user can view the information chronologically.
• Category: Information is grouped based on some shared attribute. This could be what they are (e.g. books, dvds etc.) what they are used for (e.g. cold remedies, hair products etc.), colour, flavour etc. Categories are good to use for menus when there are natural groups that a user would expect e.g. financial information such as budgets, orders and invoices
• Continuum: Ordered in a continuous series. This could be best to worst, highest to lowest, popular to unpopular etc. Where there’s a common measure, provide a means to sort by it

Have a look at how you have presented lists and menus, consider what the information will be used for and how your users will approach finding it. Your users may approach the information differently depending on the context of what they want to do at the time. They will appreciate the ability to change how it is organised to meet their present goal.

Forgiveness

A great way to improve the user friendliness of an application is to look for ways you can make it more forgiving. Forgiveness is the name given to a number of approaches that help users avoid errors or reduce the impact when they do occur.

• Undo: Let people change their mind if they don’t like the impact of an action. This can be hard to retrofit at a late stage in development but it is one of the best ways of making your application forgiving.
  
  

  When you delete an email in gmail it doesn't ask for confirmation; it just makes it easy to change your mind

• Confirmation: Make actions 2 step by prompting the user to confirm the action they have requested. Confirmation steps increase the friction of the interface and can be annoying if used too often. You don’t need confirmation steps if the actions are easily undo-able (for example the “Are you sure you want to delete the file” dialogue in Windows XP is unnecessary as the files can be simply removed from the trash). You don’t need to just have OK/Cancel dialogues to add a confirmation step, it could be an additional separate action in an “Arm/Fire” sense. I wrote an article about Google mail’s creative use of a confirmation step to forgive users even when they are drunk!
• Warnings: Display warnings to alert the user of implications. This is the least intrusive of the forgiveness measures, you could add information in context to explain the consequences of currently selected options.
  
  

  Feedburner uses a warning near the confirm button to alert you to the implications without interrupting your flow

• Help: Finally, you can greatly increase your application’s forgiveness by including help and instructions! This is especially important if you find you have made a major irreversible error in your design and need to explain how the application is and perhaps how it differs to how it should be! At least until you can address the problem!

The Empty State

This is something a lot of software neglects and is a really easy way to improve your application. When you are testing or demonstrating your application it is full of test data. However, when a new customer first starts using it; it’s empty! You know that collapsed area over there will hold the whatsits and the big list at the bottom will contain dooberys - but your user might not! If a user doesn’t know what something is or what it should do they are likely to get confused; you can help them out by:

• Rather than displaying nothing when there is no information - use place holders e.g. “There are no dooberys to display”
• If it’s a user’s first time, tell them about the features in the place their content would be.
  
  

  Basecamp shows the ultimate empty state. It is empty, but has lots of information so you know exactly what to do next!

• Give a user an option to pre-populate the application with example data. If the data is accurate and meaningful to the user this is a really good approach. It lets the user see each feature in action with some concrete data. However, once the user has a feel for the application, make sure there’s an easy way for them to remove all the test data - making them do it manually record by record won’t win you any friends!

Conclusion

Products tend to be better if usability is thought about all the way through development. However, there are always other pressures and knowing this doesn’t help you much when you find yourself in the above situation! Hopefully, these tips will point you in the direction of some simple tweaks and reorganisations you can make to improve your applications usability when you thought it was too late!

Have you ever found yourself in this situation - how did you improve your application’s usability?