When your brand isn’t broken: elegant error handling for sites with red logos
The most evocative, emotional, and intense hue on the spectrum is also the hottest in temperature. It stands out brighter than other colors on an interface making it an attractive option for both logos and error messages. Working with AAA, Macys, Toshiba, Twilio, and Indiana University helped me see how users can create a negative association between the brand and making mistakes when both components are red.
I don’t have an easy solution for you. But after dealing with this problem over and over again, I hope this post will help you think more carefully about color, messaging, and placement in a way that fits your brand.
Remove the need for error messaging
My favorite solution to an interface problem is to remove the interface.
- Scanability: The easier it is to use your product and quickly scan form fields, the less mistakes your users might make. And thus, the less error messages they’ll see.
- Inline validation: In your form fields, give users inline client-side feedback. Anticipate errors that you know will appear after they hit the big ‘ol submit button. e.g. check for completeness of email addresses, password lengths, etc
- Reliable Backend: Help your developers understand the most critical or painful parts in the workflow to make those parts exceptionally fast and reliable.
Handle your messaging with care
When you can’t use the loudest color on the spectrum, when, where, and how users see your error messages becomes even more important.
- Color: Yellows, oranges, and pinkish colors work well for the field, border or text colors.
- Messaging: Be explicit about what happened with the system and what your user needs do to move forward.
- Placement: Show messaging near the text field or component that needs fixing. Be sure the messages are visible, especially if the page reloads.
- Icons: Including an icon can help draw attention to your messaging that could get lost otherwise. Think about multiple signals from an #a11y perspective.
- Animation: A very subtle animation that changes the interface or introduces your message can help users see something that may otherwise be missable.
This is a hard problem to solve
I logged into 25 sites with famously red logos using a fake email address. The best solutions thought carefully about color, messaging, and placement:
Quora
- Color: I found Quora’s color solution intriguing. They used no special colors here. In this specific case, a neutral text color works since there is so much color competition otherwise the page.
- Messaging: The language here is brief and clearly explains the problem.
- Placement: Before this screen each field has labels. They disappear after the user clicks the login button causing the layout to shift. In this moment the user is looking at the login button which makes it quite easy to see the error messaging.
Muji
- Color: I find the soft pink quite pleasing. It does seem to compliment rather than compete with the deep maroon brand color. In this view however, the red asterisk make it seem like the email address and password are wrong, rather than required fields.
- Messaging: The language here works as its brief, friendly, and even anticipates a question about leading and trailing spaces.
- Placement: The dashed border arrow icon create new elements on the page that help the user know where to draw their attention.
- Color: This is another good example of using a soft red or pink for messaging. The red is arguably different enough than the brand and fits nicely with the other colors on screen.
- Messaging: The language here is brief but doesn’t easily explain that the problem signing in is related to the user name or password.
- Placement: It’s nice to see the messaging so close to the submit button and the form fields. All the components centered on the page except the user name and password makes the scanning flow awkward. However, it’s nice to see the error message so close to the sign in button and form fields where the user is likely already looking.
Airbnb
- Color: Though Airbnb’s logo isn’t red, their prominent pinkish brand color made them worth reviewing. The yellow color works with their palate while still communicating there’s a problem that needs fixing.
- Messaging: The copy here clearly helps the user understand how to solve the problem
- Placement: The OAuth buttons are in direct competition with the Login button creating an awkward hierarchy. This is another example of how using a neutral color for messaging that works well because the placement is handled well.
Macy’s
- Color: The soft pink color commands attention well while distant enough from the strong red brand color. However the alert is in competition with the sign in button.
- Messaging: The message clearly explains the problem and suggests a solution. The writing could be friendlier to read. Increasing the letter-spacing and line-height would make it easier to skim as well.
- Placement: It’s helpful to have the message above both fields but the hierarchy is awkward below the Sign In label.
Uniqlo
- Color: The yellow color fits nicely into Uniqlo’s bold, blocky color palate and clearly commands attention on the screen.
- Messaging: The capitalized, reversed text is difficult to skim. It also requires editing to be friendlier and shorter. It’s not necessary to say “email address and password” twice.
- Placement: The message should be closer to the login components. It would be possible to do this if the copy was shorter.
Designing a good login experience and handling error messages is already hard. Next time you’re working with a red logo, think extra carefully about color, messaging, and placement of your error messaging.
