User experience and color perception

There are many psychological moments in color, and although I do not pretend to be an expert in this field, from time to time I come across something that seems somewhat paradoxical.



I believe that there is some influence of culture on the choice and use of color, and when working on the design of sites it is necessary to take into account this influence, but it is also clear that there are some ideas that do not depend on a particular culture.

')

Today I want to consider the choice of color, which, I suppose, we all associate with a specific reaction - for example, the color of success, the color of failure, and what choice of colors do you expect to see when filling in the registration fields when you do everything right or wrong. What color comes to your mind when you think about “success”? What color comes to your mind when you think about some kind of wrong action?



In order to investigate this issue, I created a very quick and simple test. You can go here ( note in English ) in order to pass this test and form your own opinion on this issue.



When you pass the above test ( note in English ), please leave your comment at the end of this post and share your thoughts on a bunch of color and design. And then we will look at the results of the comparison of several popular sites, and the rules that they follow, and learn something from the test that you just passed.

Translation sponsor: Aiken Studio

Why colors?

We have to admit that we never thought about them until the moment we received a message about successful implementation from the GetClicky site (a service that we like very much). It said that we had successfully completed adding our Feedburner address to our account, a message that was typed in the color that we lovingly call “red error warning” :







And you know, we really thought at first that we were written about an error that we made somewhere during this operation (our fault - we did not read the entire message), so we returned and repeated everything all over again, only then realizing that we were informed about the successful completion of the operation. By writing this “error warning red” color.



We had to stop and analyze this moment. Why do we associate red with failure? Maybe it’s just because our brain is so strangely arranged, or is there something like a generally accepted rule that we all learned to follow?



We decided to look at the registration form fields at several popular sites and to find (if they exist) generally accepted rules that they follow. The sites that we have chosen for analysis have become Gmail , Twitter and Facebook - all extremely popular, which (at least should) very seriously delve into the design of your site, its usability.

Sites as examples

Gmail

Example : The username you selected for your Gmail account is not available.

They used red text to show you that the username you chose is not available, which we think is a reasonable solution. They want to draw your attention to the fact that the username is already taken, and to inform you that you need to choose another option.







Example : User-selected name for Gmail account available

In this case, they used blue text . We are not sure that we understand the reason for their choice, although perhaps the results of our research will shed light on this question. Everything goes as it should, so they just want you to move on.







Example : A weak password for your Gmail account.

And again they used red text to draw your attention to the level of your password resistance to cracking. Obviously, they want more secure passwords to be used and try to convince you to change the password you chose.







Example : Gmail password is strong.

For this case, they chose green text in order to show that the password is strong, in contrast to blue text, which marked the availability of your chosen username. Perhaps they use green text for the behavior they want to encourage?

Twitter

Example : Twitter Name / Login / Password.

As you can see, Twitter uses several different colors to indicate different things. They chose green text to show in the first field that everything is in order, red text to show that the selected username is already taken, and gray text to show that the password we have chosen is too simple (we typed 123456) - by the way, an interesting measure aimed at improving the level of security. For now, green looks like the color of a successful action.







Example : Twitter passwords.

It is very interesting to see how Twitter uses a whole range of colors to transmit various information about a password, starting with red and ending with green, in order to show the different levels of security of your passwords. Indeed, a very simple and visual way to convey your message.

Facebook

Let us say the following: we were actually surprised at how senseless the Facebook registration process looks like - you do not indicate any errors that you could have made until you click on the Sign Up button, and even after that it looks like the system indicates only one error at a time. Okay, what they have there with color:







Example : Sign up for Facebook.

As you can see, Facebook uses red text to warn us that we need to enter our date of birth before registering. Well, this is obvious and clearly highlighted. Strange is the fact that the system indicates only one error at a time, and does not give text-hints on the requirements for filling in each specific field, for example, that the password must be longer than 6 characters, that only one capital letter is allowed in the name - yes, our registration was stopped for it. But at least they are persistent in their use of red for similar messages.

Getclicky case

So back to the Getclicky example - the text is red in color for confirmation. We left a message to Twitter for the Getclicky website team and what response we received from them:







An interesting point, they use red text because it attracts the attention of users better, regardless of the message they are trying to convey. If you wander through their site, you will find this trend:















Of course, when it comes to comparisons with competitors, they use green for a positive / confirmation message:







What is it? Red text for unsaved changes, which turns into green text after the changes have been saved:











An interesting point, they added a bit of variety here, but in general it feels like they like to use red to convey their messages. However, it would not hurt them to be somewhat more permanent in this matter. Let's look at how this relates to our results.

Results:

We bring to your attention the results (obtained at the time of writing this article) of our quick test (you can pass it here if you suddenly missed it):



As you can see, people most associate green with success, 76% of respondents chose this color as meaning success. No one chose red for this:







A huge part of the respondents (88%) chose red as the color of failure - glad to hear that not only we:







Interesting results of the following item: 71% of respondents chose red as the color that stands out most (of course, from a limited group to choose), and 18% chose green. What do you think, should we use red in the future to convey all our messages to users?







In this assignment, 59% chose purple, and 35% chose blue. We are not sure that we know a site that would have used such a purple color somewhere, but there are several sites that use such a shade of blue, and Twitter and Tweet buttons come to mind first. Do you think these results suggest how people interact with buttons on websites?







88% chose green for the message “you completed this operation successfully”, it looks like most people associate green with success or confirmation:







Red is still the leader in terms of results - 94% of respondents chose red for warning messages:

What does all this mean?

As it turned out, not only we alone associate red with failure, but green with success. We have two hands in favor of innovations in website design, but there are moments and places where you need to follow generally accepted rules, and this moment is one of them.



And although the results we received show that from the little choice that we had, the red color stands out the most, it does not mean that we have to write all our messages in red. The results show that using red text as a positive confirmation is illogical and can confuse your users.



We think Twitter is the best example of what we’re exploring here — they use color choices extremely efficiently to convey a wide range of different messages, and although this can only save our time very little or help avoid a feeling of dissatisfaction, yet this choice helps create people even more positive attitude to this service.



The red text is not enough for us to stop using Getclicky (we like it so much that we recommend it to all of our friends), but small changes like this could lead to a more positive perception of this service by users. It turns out that the site does not even adhere to 100% of its choice of colors for text messages, which makes everything even more confusing, and constancy, along with following certain generally accepted rules, is the key point.

What can you learn from this article?

Generally accepted rules usually do not exist without a reason, and it definitely looks like people are very accustomed to the meaning of colors on websites, and although some colors may stand out more than others, this does not mean that if you use green for some or text, then people will not pay attention to it.



Constancy is also a key component. If you are going to use it somewhere in one place of your site, you probably should do the same for the whole site. If you have everything organized in one way in one part, and in a completely different way in another, you will simply confuse and disappoint your users. Stick to persistence.



And the key point: checking for ease of use is the best and most reliable way to find out what your users want, after all, because everyone interacts with the site in their own way. Visitors to this site differ from each other in the same way as the techniques that we think should be followed. Explore your site and your visitors to know what works best for you.



As we said before: “Build it and they will come. Build it well, and they will come back, ” and, after all, isn't that what we all want?