Usability and colour

As I write this blog article, spring is in full swing. I love spring because after a long period of dreary greys, nature is full of colour again. The first tender green of the leaves, the bright yellow of the daffodils, the blossoming trees and bushes. All the more astonishing is the thought that colours only exist when we perceive them. The things themselves have no colour. Colour only exists through the perception and ‘interpretation’ of light waves bouncing off of surfaces.

Colours play an important role in our lives – and designing the user experience is no difference

We’re always asked what our favourite colour is. When looking at paintings, we often discuss the colours that the artist has chosen to use, just as many conversations in the development of user interfaces quickly end up revolving around the colours used. Colours trigger feelings and emotions in us, making them a key factor when designing the user experience. Ultimately, user experience deals with the emotional component of using a user interface, and colours influence our emotions.

Usability, on the other hand, is about the extent to which a product, system or service can be used by specific users in a specific application context to achieve specific goals effectively, efficiently and to the satisfaction of the user. User experience expert Steve Krug sums up this definition when he says: ‘Don't make me think.’ We users want to be able to use an application without thinking about it. And the right choice of colour can help us in this.

Contrasts improve readability

The basic prerequisite for any usability is readability. If I can’t see anything on a screen, then I can’t use the application.

The World Wide Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG) specify certain minimum contrast values for texts and images. If these standards are adhered to, then you can be sure that an application is generally usable. You can check whether an application adheres to the guidelines using freely available tools. However, I also recommend testing the design in the planned user context and on different end devices. For example, I’m currently working on an app that will mainly be used outdoors. Regular feedback from the future user group ensures that the app is usable right from the start and that it actually supports the users in their work.

Visual hierarchy

The visual hierarchy shows the importance of different elements on a page or form. You can influence the visual hierarchy through various factors:

• Colour
• Size
• Alignment
• Repetition
• Proximity
• White space
• Texture and style

A clear visual hierarchy is only created using the right combination of factors. A large font alone is not enough to make a heading stand out if the next level is written in contrasting colour. It’s then no longer clear for the user as to what’s more important. Colourful icons, illustrations and images are also automatically given greater importance. Please bear this in mind when you design a page where a user has to perform a certain task – be it filling out a contact form, downloading a file or something similar. Things are often made unnecessarily difficult for users out of a desire to make an interface ‘pretty’.

Mental models

Mental models determine how we perceive the world. They describe the representation of an object or a process in the consciousness of a living being. Some mental models work on a global level, others only on a regional one. We see a wastepaper bin and know that wastepaper belongs in it. That’s why the wastepaper bin is also used as the recycle bin icon – the universal ‘delete’ icon. We see a bus and depending on where we’re from, we know where the driver is sitting and therefore on which side we have to get on.

Colours are assigned certain cultural meanings, too. We learn these meanings and subconsciously recall them as soon as we see an object in a certain colour: classic examples of this are red for ‘stop’ and green for ‘ok’. Deviations from these mental models can lead to errors and cause a lot of mental effort for the user. You can easily check this by marking all warning and error messages with a green icon and then observing the users.

You’ll notice choosing the wrong colour can make life easier or harder for any user.

Would you like to learn more about exciting topics from the world of adesso? Then check out our latest blog posts.