Usability for Web and Mobile Interfaces

In this post I cover an introduction to what usability is, how to make usable software and how you can check to make sure you app is usable!

This post is based on a presentation that I have been giving at Southampton University and Imperial College for the past 7 years or so. The presentation has evolved significantly over time and has become focused on mobile interfaces in particular, but the principles discussed apply to usability on any software platform.

What usability isn’t

Before we cover what usability is, just a word on what it isn’t. Many people equate usability with good visual design. Although good visual design can often help with usability by making things clear and easy to understand, swishy graphics alone do not make software usable. The Toyota website shown in the screen capture below provides a good example to demonstrate that.

Screen capture of a graphical website
Pretty but not very usable

The web page is very pretty, and has a very well executed piece of artwork as the content of the page. The artwork has lots of animations with various objects moving around the world. The website also has music, a commentary, and sound effects. However, this website is not very usable. It is not at all obvious what you can interact with, and when you move over the screen very small arrows appear in some places. When you click on them it is not clear what will happen and when you do click the behaviour is inconsistent. And in many cases it is not clear how to get back to the main page.

Another problem with these kind of swishy graphics is that they often mean that the page takes a very long time to load – studies have shown that if a page takes more than 4 seconds to load then users will give up. In reality it is probably much less than this. I’m sure I’m not the only person who does this, but if a website has sound I immediately mute my machine – or click the back button. I’m rarely happy to have sound unless I have specifically asked to play something.

There are many other examples of graphic and animation heavy websites out there that show the same problems, because the focus has been on showcasing funky graphical design above the practical needs of the users.

What is usability?

Usability is about understanding user goals. If you don’t understand your user goals you can’t provide something that is useful for your users. This cartoon from xkcd demonstrates this point quite effectively.

The goals of organisations and their users do not necessarily agree with each other!
University Website

What the designers of the website thought was important and what users actually need are quite different from each other! The website should be designed to provide the information people want to find.

So what is usability? Usability is the “Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use” – users have to be able to achieve their goals in such a way that they do not take a very long period of time or very much difficulty, and that they can achieve that in the conditions that they need to. So, you need to consider how can the user easily use the product for the goals they want to achieve without being shown how?

The primary importance of usability is increased customer satisfaction. A usable product is likely to help the user to get value quickly out of a product through increased user efficiency and increased productivity. The easier something is to use the quicker the user can do something useful with it, the less training they need, and the higher the chance they will use it and buy from you again. Usability is all about customer satisfaction. Happy customers come back! Thinking about usability up front is also cost effective. It costs a lot more to solve a usability problem late in the development of a product, or once it has gone on sale, than it is to include usability during the design phase.

How do you make something usable?

You need to have a realistic understanding of your users. In some development organizations there is the belief in a so-called ‘Perfect User’. This is where the developer of a technology believes that the user has the same experience and knowledge as they do. Not only do they have the same skills as the developer, but also they have a clairvoyant understanding of how this technology should work, and therefore how to use it. Do not make assumptions about what your users know! Most of the time the users will have considerably less knowledge than you do, and may attempt to use your software in ways you never dreamed of!

Users have different knowledge, backgrounds, and goals. You have to understand the real users, what they are trying to achieve, what their capabilities and experiences are, and the environment they are working in. You can’t cover every possibility, but you need to think about who the target audience for your product might be, what skills they realistically have and the environments that they will be using your application in. For example, if you have created a product that works well in a quiet office but will most likely be used by people in a loud and outdoors environment, you are unlikely to have created a usable product for your audience.

Accessibility and Universal Usability

Many users may have special needs. When we talk about accessibility we tend to think about people with disabilities such as visual and hearing impairments or mobility problems, but there are other conditions and situations we can consider. For example, there are disabilities that are common within the population such as colour blindness, cognitive problems such as poor memory and dyslexia, and temporary disabilities such as a broken arm or forgetting glasses. Other situational disabilities that people tend to forget about are issues around language, the working environment, and technical skill. A person with English as a second language may find it more difficult to work with your software. Working in a very loud environment will make it difficult to use software that relies upon sound to communicate, but the same is also true of people working in a quiet environment where they must have the sound turned off. All of us when we use software for the first time can be at a disadvantage because we don’t yet know how to work with it. About 1 billion people worldwide have a permanent disability, but we can all benefit from software that has been designed with universal usability in mind.

A list of servers with colours to indicate status, how this appears to someone with colour blindness, and the same list with the addition of symbols to overcome the problem.
Not relying on colour alone

The images above show an example of software where the status of servers is displayed using colour as the only method of communicating the information. If you are red/green colour blind then you cannot distinguish between running and not running servers as shown by the centre image. The addition of a simple tick and cross symbol solves this problem as shown in the image on the right. For users without colourblindness there are two ways of seeing the server status, and for users who are colourblind the symbol provides effective communication.

Simulations of how a colourful website looks to a 20 year and a 55 year with loss of colour vision
Eyesight deteriorates with age

The two pictures above show the impact that aging has on the ability to view Web content. On the left you are seeing what a person with 20/20 vision sees. The colors are crisp and clear and the wording is easy to distinguish. On the right is an example of what a 50 year old who has lost 20% of his vision sees. The older person in the example is not blind, but has lost some ability to distinguish color and contrast, making it harder to read a Web page.

Screen captures from a shopping list application showing confusing use of colour
Confusing use of colour

The images above show examples of how colour can be used inappropriately to communicate information. Even for someone without any colour-blindness of visual impairment, some of these are confusing! Another common problem with colour is choosing colours with too little contrast making it difficult to distinguish between elements or read text. This would be very difficult for someone with a visual impairment to use.

Screen capture of an app showing poor contrast between the background  and text and other symbols on the screen.
Poor contrast

The music application shown below has a number of problems that would make it difficult for many people to use. Firstly, the interface is very cluttered and it is difficult to distinguish the various buttons. This makes it difficult to use and confusing for someone with a cognitive impairment – having lots of clear space and large buttons and content can help these users. For users with limited mobility in their hands this app would be difficult to use because the controls are very small and close together, making it difficult to accurately select them.

A screen capture of a music application for a phone with a very cluttered interface and numerous small controls.
Cluttered, confusing, and small controls

Understanding users

Because you can’t talk to every customer, there are various techniques that are used in the design process to help understand users better. For any given product there is likely to be one or more user roles that will use that product. Each user role will have particular tasks they perform or goals that they want to achieve. You can also design scenarios or use cases that describe what a particular role or specific user might be trying to achieve and how they will use your web site or mobile app to do it.

Making software usable for mobile devices

Mobile devices are overtaking PCs as the main way to connect to the internet, and users in developing countries are more likely to have access to a mobile than to a desktop computer. Designing for mobile has a number of challenges and the way that mobiles are used is quite different from computers. There are many different devices that have different input methods and different sized screens. Small screen size means the space has to be used more effectively. Users tend to use mobiles for a short period of time and whilst they are on the move, so won’t take the time to learn or want to use a complicated interface.

An image of the device showing the Windows tiles interface
Microsoft Surface device

The first rule of designing for mobile is to “design for mobile”. The image above is of the original Microsoft Surface, quite a small tablet device, showing the “Live tiles” that are designed to work well on a small device. The tiles are easy to select and intuitive to use.

An image of the device showing a normal desktop version of Word
Surface with the desktop version of Word

This picture above is the same device showing Microsoft Word on the screen. Microsoft Word here has an interface designed for the desktop. It is virtually unusable on the device! The same principle applies to web pages – make sure you create a mobile version as well as PC if you expect people to use it on a device (which they will!)

An iPad showing help for multiple different touch controls.
Too many touch controls!

The controls on mobile devices are very different to the traditional mouse and keyboard. Touch controls can be very effective, but be careful to keep the controls simple and intuitive. The image above shows the help for an application that uses a large number of different touch controls. If you need this many different controls then you probably need to rethink your interface! This complexity confuses and frustrates users.

A screen capture of a dialog allowing users to select from a list of over one hundred attributes.
Too many choices

Keep it simple! This is relevant advice for usability for software, web, and mobile. Don’t think that more options and features is better – it isn’t. Giving users too much choice can create stress and confusion. In the example above the users have the option to choose from 134 different options, but in reality they would only regular use a small number of these. The developer has exposed all possible options, even those that make no sense for the user “just in case”. Give the user only what they need and what they are most likely to use. If you must have “just in case” options then put them in an advanced tab or selection.

Screen capture of an iPad application showing large numbers of controls and nested buttons.
Too many options!
A screen capture of the application showing the PDF viewing screen with lots of unnecessary  buttons.
Too many options!

Here is another example of overcomplicating an application at the expense of usability. The images above are of an iPad app that is for viewing PDFs. It should be something very simple, but as the app has been developed more and more options have been added making the interface more and more confusing. It is very difficult to understand what the different sections and buttons are for, and most users won’t use them anyway. In the second image there are buttons everywhere, and it is not clear why you would ever need any of them. The app also has some dodgy touch controls, where touching with 1, 2, and 3 fingers all do something different causing unexpected things to happen for the user.

Captures of various screens of a barcode scanning app showing a cluttered interface with unclear icons.
An overcomplicated app

 

Captures of various screens of a different barcode scanning app showing clear icons and instructions and no clutter.
An uncomplicated app

Give easy access to the most used features. In images above there are examples of two apps that do the same task – both allow you to scan a barcode to look up prices for the product so you can choose the best place to buy it. The top app has a cluttered interface that is focused on displaying special offers and has unintelligible icons. It is also not clear how to get started scanning an object. The bottom app however has a much less cluttered interface, and makes it clear how to scan an item – in other words to do what you actually got the app to do. The icons are clear and have explanatory text. The scanning page has simple instructions and the results page is simple and uncluttered. Much more usable!

UntitledUntitled

Using familiar concepts help a user to understand the software better and how to use it. For example office software often uses concepts such as filing cabinets full of records for databases, and the trash bin for deleting files. Here it is obvious what tapping on the drum kit will do, and that you can turn the page of a book. Making up new terms and using abstract references can make software more complex and difficult to understand. Some of the icons are more obvious to understand than others. The cameras and calendars are clear, although the Android calendar on the far right isn’t obvious. The floppy disk is familiar as a “Save” icon, even though many people have never seen a floppy disk, demonstrating that consistency with what people know is better than inventing new icons unnecessarily.

Untitled

The image above is an example of a difficult to understand icon. We can expect alien fungus on Monday? This icon represents hail – but lots of people have to look it up!

Untitled

Choices should be visible to users rather than hidden and use controls that make sense. Label buttons in a meaningful way that makes it clear what they are choosing. If the user has an either or choice then switches can be useful. When choices are immediately visible, users learn and complete work tasks efficiently. Also provide a way for the user to get out of a situation, for example a cancel option so they can change their mind. A user should be able to make mistakes without fearing causing permanent damage, such as permanently changed settings, or data loss.

Untitled

Make it clear what the user is doing and don’t be ambiguous in your messages and labelling. In the above examples Delete and Cancel should be the options presented in the left dialog box, and Cancel and Continue should be the options in the right dialog box. As they are they are confusing and the user could potentially lose data because they are unsure what action they are taking.

Provide help to the users where they need it. For example when the user is configuring something, for example a new camera, a small ‘get started’ type of booklet or card can help. On a software interface, providing sensible labels, and a sentence explaining an interface element can make it more intuitive to use, without the user having to resort to reading the documentation to know what to do next.

Feedback is very important to a user, particular in software or a web site. For example, if a user clicks on a button and there will be a wait, use a message, an egg timer or progress bar to indicate something is happening. Otherwise the user might repeatedly click on a button and cause unexpected results, or give up waiting altogether. Provide meaningful information in responses, for example if an error occurs display an error message explaining what went wrong, any consequences, and what they need to do next or to fix the problem.

Various screen captures of inappropriate messages.
How not to provide feedback!

The messages above are examples of how not to provide feedback. On the left we have exposed an internal error to the user. What do we expect them to do with an invalid JSON string? We need to think about what caused the error and provide a message to the user that is meaningful, for example, perhaps they lost their network connection, we could warn them about that instead. In the middle –an empty message is extremely unhelpful! Error: the operation completely successfully! – this leaves the user confused, did it really work? And finally, it shouldn’t need to be said, but putting offensive comments in your code could get you in trouble – see bottom right!

How do you check your software is usable?

As mentioned at the beginning of the post, usability really should be something that you consider right at the beginning of your development. Design your interface on paper or in a design tool first and get others to evaluate your designs. In this way you can spot problems or areas of confusion quickly, but you haven’t wasted any effort on coding the interface. You can quickly and easily make changes to the design and show them to the user for feedback or run through them with another user. This technique can also be useful in highlighting improvements to the flow of interactions between your application and your user.

Photographs of a human factors laboratory showing screens for monitoring the user's activity, microphones and cameras on the ceiling of the lab, and a two way mirror between the observation room and the lab.
Human Factors lab

The best way to check your usability is to get others to try and use your product without your help. Above is an example of a formal “human factors” lab where users perform product testing whilst being videoed from various angles and recorded. You don’t need anything this complicated though to do user testing. Just find a quiet room where you can watch a user use the product and observe what they do. Set them a task you want them to complete and resist the temptation to tell them what to do if they get stuck. Ask them to talk through what they are doing and what they expect to happen, and note where they seem to struggle, get lost, or make mistakes. 5 people is a good number for user testing, you should see the same kinds of problems with that number and some individual preferences.

In Summary

Usability is important and it is good for making users want to use your product and to come back and use your products again in the future. Users have different goals and different needs, so you need to think about who your audience is and what they want to do be able to do. Designing with disabilities in mind makes your products better for everyone. Keep it simple, uncluttered, and make it clear what the user needs to do and what the result was. Putting your designs on paper helps you to make better designs and gives you the chance to get valuable feedback early in your project. Get others to help you with your design and testing, and listen to their ideas and concerns!

Advertisements

3 thoughts on “Usability for Web and Mobile Interfaces

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s