Interaction Design Principles - Consistency


UX and Interaction design are, just as software development, guided by principles and best practises.

One of these principles is regarding "consistency" and as Donald Norman puts it in his book The Design of Everyday Things

One of the major ways that people learn is by discovering patterns. New situations become more manageable when existing pattern knowledge can be applied to understanding how things work. Consistency is the key to helping users recognize and apply patterns.

This is echoed by the usability expert Jakob Nielsen, in his 10 Usability Heuristics for User Interface Design, where he talks about "Consistency and standards".

Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Today I came across an example of where this was so obviously disregarded that I just had to share.

The colour Red

In this case, the thing I reacted to was the use of the colour red. As explored in the article The Meanings of Red, red is in many western cultures used to signal, warning, danger or to say - stop! This is something that we also see in computer related UIs, be it error icons in Windows or be it to indicate danger in the highly popular webframework BootStrap.

Validation error
Hence I was not surprised to see it used in a form validation error message, when I went to log into one of my web-domains.

The colour red used for form validation error

I was equally not surprised, to see red used in a warning message, when using a tool that can seriously mess up the DNS settings for your domain.

Red colour and exclamation point icon used in warning message

However, I started getting a bit surprised when the same icon and text style, which was just used as a warning, was in another section used for important information!

Red colour and exclamation point icon used for information Granted that this was in the section for canceling your account and I'm sure the hosting company, wanted to warn me not to! And the section about cancelling an add-on, could possibly be considered a warning as it talks about that this is not the way to do it. But in all honesty, these should not be warnings, this is information and should be clearly marked as such!

After seeing the information messages above, I guess I shouldn't have been surprised to also find that, the same red was also used as the colour to signal success when updating my credit card details...

Red text telling user their credit card details have been successfully updated


Now don't get me wrong, I'm not saying that red must always be connected with errors, dangers and the like. As Cameron Chapman says in his post Color Theory for Designers, Part 1: The Meaning of Color

Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background.

Red can be used to great effect in designs, setting the mood, just right, signalling importance or in a call to action.

But what I am saying is that if you're going to use a colour for errors and warnings in some places, then don't use the same colour for other things in other places, stay consistant!