Traffic lights in user experience

[unable to retrieve full-text content]

Humans are simple creatures. We understand instructions very well and know how to follow them through.

In one of my previous posts, I explained how offering users too many choices most often overwhelm and confuse them terribly. It is simpler for users to be told exactly what needs to be done, and how to go through with it. Steve Krug’s book ‘Don’t make me think’ talks about how software should seamlessly allow users to accomplish the task on hand intuitively.

So, what can we designers do to create instantly intuitive experiences?
Create traffic lights in your designs!

Traffic lights in UX

Let me break it down further. There are 3 instances where pro-active information makes the user’s experience better –

1. The red light

While signing up for a software that offers a free trial before it becomes paid, there are a lot of times where users are asked to fill out their credit card information before they get access to the trial period. This is an instant breach of trust. It also creates a dark pattern.
(Ref: See ‘Forced continuity’ and ‘Hidden costs’ on the article here)

At any point in the flow, if the user cannot proceed, they should be informed about it at the very beginning.

Clear and upfront password requirements
Clear and upfront password requirements — Credit

This holds true for any situation that might create a halt or even a pause in the user’s flow. Adding a ‘What-to-expect’ is always a good idea at the very beginning of any long user journey. It prepares the users beforehand so that they aren’t greeted with anything out of the ordinary.

Another tip would be to notify the user in case their journey is interrupted. It is essential to convey to the user what went wrong during their journey, and how it can be rectified. The user is allowed to make mistakes at any given point. As designers, we’re responsible to account for such situations and create our fail-safes.

2. The green light

When going through a flow, there are certain checkpoints or requirements that need to be met before the user can proceed.

The most basic example of this is mandatory fields in a form. You will come across several forms where mandatory fields are marked with tiny red asterisks. Only after filling out all those fields is the user allowed to proceeds. Some forms keep the CTA active at all times. So, if the user clicks on the active CTA without filling out all fields, the response they receive is in the form of an error message, creating an instantly negative experience.

‘Send’ button being active creates more scope for error
‘Send’ button being active creates more scope for error — Credit

As designers, it is our job to create positive experiences at all times. The same way we create red lights to inform the users about not being able to move ahead, we need to create green lights that notify the user when they can proceed with their journey.

This can be done in several ways.
One small example is simply disabling the CTA until the needed information has been filled out. Another example would be progress indicators. Progress indicators not only showcase the steps that have been completed in the past, they show the steps ahead and how to reach them.

Notice how the ‘Continue’ button gets enabled only after all the MANDATORY fields get filled out
Notice how the ‘Continue’ button gets enabled only after all the MANDATORY fields get filled out — Credit

3. The Yellow light –

A yellow light in design can be interpreted in two ways — the first way is to serve as a warning that might indicate a break in the flow, and the second way is to be used as an indicator to nudge the user to proceed.

For example, very recently when I was about to hit my Google Drive limit, I received a prompt that said that my memory was 85% full, and I should consider purchasing some space.

Correctly timed prompt
Correctly timed prompt

This is what good experience looks like! Instead of blocking me from uploading my documents when the storage was full, I was informed well in advance so that I could take the needed action.

Informing the user that they might hit a dead-end or hurdle soon always accounts for good experience, because it prepares the users and allows them to plan their journey better.

Another way to create yellow lights is in the form of instructions. Instructions added to a user flow account for better usability. As mentioned in the previous example, providing a set of clear and comprehensible directions to users allows them to follow them through without needing to rack their brains.

So, how do we use this mechanism?

When creating your user journey, markdown avenues where you think the users could do with a signal, be it red, yellow or green. This makes it easier for us to create relevant designs when the wire-framing/UI phase begins.

At every point in the journey we should think to ourselves, “Is there an avenue to provide more clarity here?”. If the answer is yes, pick a signal and design away.

The UX Collective donates US$1 for each article published in our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.

Traffic lights in user experience was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leave a comment

Your email address will not be published.