![]() So yes, red probably makes a good primary button colour. The 'stop and think' step, paired with a positive assessment of the situation can be a more progressive step than a subconscious ambivalence. All the time, your subconscious is trying to process all the information you see, only deferring to the conscious when an automatic (instinctive or gut) reaction can't be made. This surfacing of a situation to the conscious is an effective 'stop and think' step, the outcome of which is 'it's ok to proceed'. The conscious analysis of a red submit button says "that's fine, it's just a submit button, it's not dangerous" or "it's ok, that's clearly just the brand colour". Obviously we can't ignore the red=danger aspect, but people don't go round thinking 'I'm not clicking on that because it's RED and dangerous'.īut what red might do is appeal to the subconscious to defer to the conscious mind in order to asses the situation for actual danger before continuing. Higher contrast ratios make for a more legible text, and therefore make it stand out more. There is the contrast ratio to consider - white text on a red background has a higher contrast ratio than white text on a green button. There could be a whole bunch of reasons, some centered around subconscious human behaviour, and some related to an actual physical difference.Ī straight A/B test between red and green buttons with a white label does not reduce simply down to 'colour of the button'. All we know really is that red was more effective because more people clicked on it. But you have to ask why the A/B test swung that way. Neutralize your Cancel button, so users have an easier time exiting your confirmation screens.There are A/B tests that tell us red is more effective than green. It causes users to perceive it as a call to action instead of a fallback to safety. But for those that activate it by mistake or change their mind about taking action, the Cancel button is their safety.Ī colored Cancel button sends out the wrong signals. When most users activate a confirmation screen, they’re ready to take action. This tool tells you if your gray passes the accessibility standards for text color. ![]() To ensure your button is legible, check the color contrast with a WCAG 2.0 contrast ratio tool such as Color Review. Otherwise, the button isn’t legible and may look like it’s in a disabled state. When using gray on a button, it’s essential to make the gray dark enough. But when the Cancel button is a neutral color, it makes the button choices more intuitive. When all buttons have a color, the escape isn’t clear. The more buttons there are on a screen, the more necessary an exit is. If the button has a dismissive behavior, treat it as a Cancel button because it serves the same function. For example, a Cancel button could have the label, “Not Now,” “No Thanks,” “Maybe Later,” or “Skip” depending on the context. Not all Cancel buttons have a “Cancel” label, but they function the same as one. Users who are prepared to take action also won’t get distracted by the neutral button. A neutral colored Cancel button makes it faster for them to decide by not competing. The competition causes users to ponder each action longer. When each button on a screen has a color, they’re competing for attention. It’s critical for users who need to escape a confirmation screen to notice this. When users see that the Cancel button has no color, they’ll recognize it as the fallback to safety easier. The Cancel button should have a neutral color to signify the neutral, non-committal button. Instead, you need to let them know that the button won’t make any changes and is an escape from action. You shouldn’t emphasize it with color, or you’ll give users that impression. A Cancel button is not a call to action because no changes to the system occur after users press it. A Neutral Color for a Neutral ButtonĪ colored button signals a call to action. In other words, your Cancel button should never have a color. The Cancel button should signify a fallback to safety, not a call to action. But when it looks like a call to action button, it’s hard to recognize. This dismissive button is a safeguard to prevent unwanted changes to the system. It dismisses the user’s current screen and brings them back to their previous screen.
0 Comments
Leave a Reply. |