Colour me silly
Prologue
Designer: “Umm…guys? The default colour should be blue and then change to yellow! I specifically highlighted that in the JIRA ticket.”?
Engineer: “Not feasible. So we swapped it.”
Designer: “Argh! You don’t understand! The user will be super confused!!!”?
Engineer: “Nah! We’ll put it in the instructions.”?
***
* Ding-dong *?
Another day, another Amazon delivery. ?
Ever since we welcomed our baby boy a few months back, the delivery guys have had their work cut out for them. Feeding bottle cleaners, organic detergents, assorted roll-ons, a plethora of containers, and a whole lot more. All utilitarian and no fun.?
“Ooh! What’s it this time?! A Batman plush toy? A Darth Vader romper?” I asked the missus.?
She saw right through my sarcasm and dryly commented - “Diapers. Just in time."?
The little one was fresh out of the bathtub, bundled in a towel, and waiting to be clothed.?
“Different brand?” I queried.?
“Oh yes. This is that magic diaper I told you about. It has a wetness indicator strip that changes colour after he pees.” she gestured excitedly, as she swiftly slipped one on him.?
“Whoa! That’s so cool. I can’t wait to see– HEY! It’s working. The strip is showing yellow! It’s time to change it.”?
“Ah no. When it detects wetness, the strip turns blue.”?the missus proclaimed without batting an eyelid.
“Haha! I think you’re mistaken. Yellow naturally means he’s peed.”?
“Read the instructions on the pack! The colour strip is yellow by default. It changes to blue when wet.”?
“Seriously?! I mean what the heck was the product designer thinking?! Water is blue and pee is yellow. How did the product manager even approve this horrible mix-up?”?
“Ahem. Water is colourless.”?
“Bah!”?
The fuss probably made the little one anxious and as if to settle the matter he got into the act.?
“Look! It’s turning blue now.” she said pointing to the strip.?
“Argh! This is so unnatural and unintuitive. I’m going to write to the diaper company, be right back.”?
“Hey! Are you avoiding diaper duty again? Come back here.”?
Breaking bad
I didn't write to the diaper company, so I wrote this post instead. If you’re about to become a dad, I’ve done my bit to warn you about the dubious diaper.?
As someone who interchangeably wears the hat of a?product manager & UX designer myself, this colourful episode intrigued me and so I got digging. While the exact details are unclear because apparently, it is proprietary, the basic premise is that a pH-sensitive strip is embedded in the diaper that changes colour when wet. Presumably, the chemical constraints determine the colours that are at play. Chemistry thwarts usability!?
While we’re talking about colours and usability, here are some best practices to prevent your app's UX from breaking bad.
Reds & Greens?
Red and green colours have a subliminal psychological association - negative/positive, fail/pass, danger/safety. So, you would be better off not using them for your buttons or labels, to avoid unnecessary confusion. If your product’s brand colours happen to be those, you can always use accents! ?
But there are ways to effectively put these colours to good use.
领英推荐
Exhibit A: Living dangerously?
If the user is performing a potentially destructive action like deleting a saved setup or a user account, then make sure you ask for confirmation with a preferably red colour action button. This will make it more prominent and noticeable, so that even if they had accidentally done so, it gives them a breather to rethink their action.?
This example has a clearly noticeable confirmation button in red, a cancel button to go back, as well as a warning message that tells the user that this cannot be undone.?
Exhibit B: Less is more?
While it is easy to go overboard and use reds and greens sloppily, you must learn to apply some nuance and intent. Pick your colours judiciously and don’t overwhelm the user with too much. When the primary intent is well-defined, the sole colour to use will become apparent.?
In this example, the designer could have easily used red and green buttons side by side. But the intent here is to nudge the user to take a positive (and ethically acceptable) action, and so merely using a green for the preferred action and a colourless button for the other gets the job done splendidly.?
Exhibit C: A spot of colour?
You could also use colour to add visual relief to text-heavy content and use it to draw attention to key information.?
In this example, for the casual skimmer, text-only content might easily get overlooked. However, the UX on the right has adequate colour cues that provide visual relief and improve noticeability.?
Accessibility now!?
Remember that red-green colour combinations can also be problematic for people with colour vision deficiencies. Limit your UX colour palette to a minimum and introduce additional colours only if necessary. With usability being a given, accessibility is starting to take center stage and now is the time to make sure your apps clean up their act.?
Exhibit A: Red Dead Redemption?
Users who don’t see red will, well, see red, when they realize your silly form is not allowing them to submit because you chose to merely set the field outline to red. Instead, use visual or textual cues so that users don't need to rely only on colour to notice. ?
This example not only has a visual alert symbol but also a clear validation message that tells the user exactly what seems wrong.?
Exhibit B: Doubling down ?
Recently I chanced upon this subtle UX change in Google Drive. While initially, it seemed redundant to have 2 indicators for a selected state, it became apparent that they were being mindful of accessibility.?
Without the tick mark to reinforce what the selected option is, the subtle blue accent for the selected toggle would have perhaps not been too discernible for certain users.?
Exhibit C: Contrast?killer
Whether you’re designing PowerPoint decks or apps, make sure to pay close attention to colour contrast. We’ve all been victims of the dreaded black text placed over dark blue boxes.?
This example clearly shows how readability is a lot easier when the contrast between the background colour and text is high.?
Remember any colorful fiascos in apps or products you've used? Let me know in the comments.
Epilogue
Looking back at the diaper incident I realize that perhaps my knee-jerk reaction was because I was too fixated on the colour association. In hindsight, blue on a white diaper is more noticeable than yellow so perhaps that was a deliberate choice or maybe it was a happy accident! I'm sure they also talked to users to get early feedback.
My wife has now switched to a different diaper brand. This new one has no fancy colour strips. Instead, the missus does a heaviness spot check to see if it’s filled with pee. It does however have no flaps like regular diapers and instead is fashioned after pants as you pull them up into place. But get this - instead of pulling them down after use, you have to tear them apart at their sides to take them off!
“Whatcha gonna do brother, when diapermania runs wild on you!!!”