Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Accessibility ›› UX traffic light colours

UX traffic light colours

by Kalte Dunkelheit
5 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

LeadBannerTrafficColors

UI has to make a huge visual difference between warning, an alert and a success.

How many times do you close a pop-up without knowing what are you clicking and then you see you did something you don’t want to for clicking or tapping faster? There is a kind of user that never reads and others that of course reads it all. We need to be prepared to this both users so this could help them to detect if is something that has to pay attention.

The first thing that every human being who walks through the street surrounding by traffic is this basic colour theory: Red is bad (you cannot pass), Orange is close to bad (you must stop and not run!) and Green is the best because is not warning and we can walk through our destiny.

The same basic theory is for any digital product, and yes, I truly know that it isn’t easy for us as designers to make the colour match with the brand colour or is not the best for our minimalistic brand (we can see how we can improve this).

So let’s see a good practice of these colours.

With these colours, your user will notice a visual disturb on the colours. We have a problem the users accept all the messages without reading it. So we need to key points to let them visuality knew that the message, pop-up or modal it’s not of the same of the before.

First step: Use this traffic light colours.

RED:

Since red is the colour of blood, it has historically been associated with sacrifice, danger and courage. Modern surveys in Europe and the United States show red is also the colour most commonly associated with heat, activity, passion, sexuality, anger, love and joy. In China, India and many other Asian countries, it is the colour of symbolizing happiness and good fortune

This colour has to be for warning the user that they will delete everything, burn the server down or the upload doesn’t work at they expected. So use it carefully.

 
Wrong

You can use an orange colour close to red.

GREEN:

In surveys made in American, European, and Islamic countries, green is the colour most commonly associated with nature, life, health, youth, spring, hope, and envy. In the European Union and the United States, green is also sometimes associated with toxicity and poor health, but in China and most of Asia, its associations are very positive, as the symbol of fertility and happiness. Because of its association with nature, it is the colour of the environmental movement.

Green Is the colour of hope. This is the best colour you can show in your design. The colour of the good look. Is the success of everyone wants to see? Yes, it is! Green is the colour to tell the user everything is ok and all going to be alright (but without being in lockdown)

Yass

Green could be replaced by blue, although this colour should be used more as informative colour.

ORANGE/YELLOW:

In Europe and America, surveys show that orange is the colour most associated with amusement, the unconventional, extroverts, warmth, fire, energy, activity, danger, taste and aroma, the autumn and Allhallowtide seasons, as well as having long been the national colour of the Netherlands. In Asia, it is an important symbolic colour of Buddhism and Hinduism.

Well, this is the beauty cousin of the Red. It is a warning but not is a red flag. is only informing non-critical errors, just a something went wrong.

yellow

Second step: Use the power of UX writing.

Words are something that we cannot live without and also we cannot delegate to anyone. For me, it is one of the fundamental aspects of design and something that designers and companies leave behind.

We talked about the importance of a copy in another post (I know, I could be a bit persistent). But there are two things that are relegated to the latest in software or digital product production. These two things are design and even behind of it, is the microcopy that is leaving behind and in many cases leaving it to the hands of the developer. So is normal to find some messages that freaking you out, doubting in when the option you should choose. I give you an example from Youtube.

Writing

Yeah! We made it! We create a Youtube channel but only in Spanish for now.

Do you want to cancel your subscription? If you go fast, you will surely cancel (the second) and you will stay following us even if you don’t want to. Thanks, Youtube!

Third step: Use illustrations

Illustrations are the best way to communicate any message, but in product is a plus. The illustrations humanize, empathize, express emotions and add personalization to your product that makes it looks high quality.

If you can animate it! There is nothing that could stop you!

animation

Illustration from Open Peeps by Pablo Stanley.

Pro-tip: Work on phases

Okay, now that we have everything clear. If the project does not have that budget, you can plan it in stages.

Although I would prioritize colours in UI and UX writing at the same time to have it in the first version.

The illustrations could be two phases more: first static and then we can animate it. To make this easier, use libraries, but my recommendation is that have to hire a professional illustrator to work it on vectors to use them in SVG format to minimize the weight, and also you can animate them in the future.

The steps to make this traffic light super effective are:

The first thing is knowing the cultural context and get to know your user in order to empathize with that person and create a good experience.

Use colours for different states to improve the user experience and notify the user if something is good or bad with a simple visual code.

Adding a good copy will make the user smile or empathize with the company at a difficult time and be happy when something is going well.

Have a good variety of illustrations with your own style (or use a library customized with your colours). An image is worth more than a thousand words, but if you do it all the things I mentioned, the user is going to read your information and the will remember. A clear example of this is Mailchimp high five.

mail chimp

High five with your client! and make all your messages an experience worthy of mention to another colleague.

post authorKalte Dunkelheit

Kalte Dunkelheit,

I’m working on digital products for more than 6 years, and I believe that the best thing to scale a product is having a great team, documentation, reviewing the business goals in each release and have a process. I believe in UX as a method to make our product pop!

Tweet
Share
Post
Share
Email
Print

Related Articles

How health-centered design can save lives across the world.

Article by Michalina Bidzinska
Hey Siri: call an ambulance
  • The article delves into the limitations of current voice assistants, emphasizing Siri’s language constraints in emergencies.
  • The author advocates for a paradigm shift towards health-centered design, urging designers to prioritize features that can save lives, particularly for the increasing number of seniors living alone.

Share:Hey Siri: call an ambulance
8 min read

Generating AI images in multiple languages leads to different results.

Article by Yennie Jun
Lost in DALL-E 3 Translation
  • The article critically examines OpenAI’s DALL-E 3, the latest in AI image generation.
  • The author sheds light on the model’s prompt transformations, revealing language-specific variations, and biases, and a nuanced exploration of how this technology navigates issues of diversity and transparency.

Share:Lost in DALL-E 3 Translation
11 min read

Why does everything look the same?

Article by Michael F. Buckley
Media Overload is Causing Design “Generification”
  • The article explores the impact of streaming media on contemporary design, arguing that the proliferation of personalized content has eroded a shared cultural experience, contributing to a perceived decline in design originality and character.
Share:Media Overload is Causing Design “Generification”
4 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and