Brendan Bax

Dashboard Alert Update

  • Save

I wanted to highlight a design change I made to an app at work - the previous design was implemented by a different team, in taking over the project we were asked to add some new functionality.

The ask is simple - show some sort of priority on the alert, the business logic provided "high, medium, and low". The team suggested changing the color of the alert based on the priority.

I pushed back on this for a few reasons. First, color alone should never be used as a means of communicating to a user. Colorblindness or color deficiency is a broad-spread issue and will mean large portions of your user base won't see the colors... thus rendering the design useless.

Secondly, the current red and white failed WCAG accessibility standards for color contrast. Using other colors like yellow or blue would only exacerbate this issue.

So I suggested making some small changes (in the larger context, a lot about the "alerts" in general needs to be addressed). I suggested using a white background and adding a colored badge with text. I also suggested moving the time to the top as alerts are sorted by time.

These small changes resulted in a design that was more pleasing to the eye and easy to scan. In the app you would see upwards of 5-10 alerts on a page in a single column. It created a large red blood streak that dominated the landscape. The new design is lighter, yet still communicates importance.

keyboard shortcuts: L or F like