4

We are currently working on some email notifications. The email will notify you of something happening that requires your action. For example you are alerted that someone left a door opened when he left. You receive an email that will contain two buttons :

Close as unjustified or View alert. If the title of the notification sounds familiar to you, you select close as unjustified. If you want to view more about the alert you click View alert.

How should one color this buttons ? I cannot figure if they are both primary, or if one would be secondary or not as both of them are a bit of none.

two buttons for action

Improve this question
6
  • What is the function of 'close as unjustified'? What will happen when the user clicks on that? Will the email or the popup close?
    – Kevin M.
    Commented Jan 10, 2019 at 9:20
  • It will open a page that will display a message "Alert Closed"
    – Chris
    Commented Jan 10, 2019 at 9:23
  • Is closing those Alerts vital to the system and will closing the alert delete it from the login the system? Will the alert page show extra information for instance video recordings of the event? To me at the moment the 'close' button seems unnessesary as deleting the email might have the same effect.
    – Kevin M.
    Commented Jan 10, 2019 at 9:53
  • Solving alerts is a task for a group of employees, the alerts are not deleted but they are closed with reasons like "Close as unjustified" , "Close as justified" etc.
    – Chris
    Commented Jan 10, 2019 at 12:04
  • Ah alright, my bad. The action seems fairly important.
    – Kevin M.
    Commented Jan 10, 2019 at 12:58

4 Answers 4

Reset to default
3

In my opinion, neither of the two buttons are primary.

The "Close as unjustified" button is something like a false alarm. It is correct not to have an activating color, while the "View alert" is a call to action, since it opens a new series of operations and interaction between the user and the system.

I don't know the system and why it sends alerts, but, usually with these kind of systems, the idea is that a false positive (to view an alert that is not useful) is better than a miss (not to view an alert that could potentially be important). If this is the case, your design seems correct to me.

Improve this answer
3
  • That was my thought and proposal but ... A bit more context, the app is trying to help users by making them take actions directly from the email. The close as unjustified button will close the Alert without asking for login information to make steps easier. The business owners wants the user to not view the alert unless the alert message is not clear from the email. So they asked for the button to be orange which I tried to explain that it might increase cognitive load but their are saying that both are primary buttons in their point of view.
    – Chris
    Commented Jan 9, 2019 at 12:32
  • Ahah I understand. Unfortunately this is not a UX issue, rather a "client management" issue. They tend to pretend to be experts and say to real experts (they are paying) what to do. Stay strong, we are all in this.
    – Marco Tatta
    Commented Jan 11, 2019 at 9:30
  • Unfortunately you might be right ...
    – Chris
    Commented Jan 11, 2019 at 10:22
1

Reading your comment, I agree that an orange button will increase the cognitive load. Both buttons are call-to-action buttons and seem to be equally important.

It is a usual practice to invert colors and maintain contrast when two important buttons are placed next to each other. I'm showing an approach that may be in your interest as well as your business owners.

enter image description here

The only way to validate this is by User Testing. Also when you decide colors, it is important that the colors are in sync with the overall colors of your system/product/app/brand.

Improve this answer
1

A couple of things... Since the choices are to be presented as equal but different, they should be the same color IMHO. However, I wanted to still retain the ability to visually express that they are different in their actions. For this I added icons to each, and tried to select ones that would convey additional details about each button. I also looked at two different levels of verbosity for the button labels, long and short. Being that these are in an email, you can add context in the body of the email to further inform the user of what to expect for each action. Here is a pic.

https://i.sstatic.net/faqz0.png

enter image description here

If you want to play with this, I created a Pen...

https://codepen.io/cwcorbin/pen/aPROrV

Feel free to fork and play. Most of the Bootstrappy stuff is integrated...

Improve this answer
0

As far as I understand, both actions are equal and colour should not be leading the user to take action here. As both actions are equally important, then they should be primary colour link buttons.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.