During the developer event the new call to action buttons were displayed. These use a 100% opacity of the background colour of the task. In addition to that, I would like an option to use 50% of the opacity of the colour as a secondary call to action button.
In addition, it would be nice to be able to override the color of the action buttons when desired.
Awesome to see the direct response and you taking action Ken!
Our new button color options follow this idea of Zander Whitehurst, to offer the user a clear hierarchy what needs to have focus.
To reiterate the button options:
- Visual hierarchy: Call to Action (100%) / Default / Disabled / Overflow (/Hidden)
- Display type: Icon + Text / Text / Icon / Overflow
My point of view: to reduce complexity, when offering buttons, only let one stand out (per action bar). If you need more colors/shades in the amount of buttons you are showing to your user, chances are you are already showing too many options in the first place. The primary Call to Action (100% opacity) is to deliberately draw the attention (so use it sparingly!) to guide the user. Extra levels in that hierarchy introduces functions a user has to recall, what we need to prevent.
What extra Use Case would be solved with showing another shade to the user?
I mean the 3 options (terms are probably not accurate to your example image):
- Checkout;
- Continue shopping;
- Cancel
You don’t want customers to Cancel, so no focus on that. Depending on the company, they wish to absolutely have the customer pick one of the the other 2 options, just which would be priority depends on them. So 100% en 50% being used for the Checkout and Continue shopping.
If this was not what you intended, I misunderstood the order of the images and the left on was your advised solution and it not being the “before” state. (One button being black and the others white).
I've extended the image used in my presentation. I emphasized the looking order and in the extra image (on the right) the buttons stay visually the same except for the highlighted one:

An extra visual hierarchy will not offer any extra advantages, other than distraction (which we should prevent)
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.