50% opacity 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? 

​@Bart Metselaar Wasn’t your example, during your presentation at the Developer event, of the checkout window not exactly that use case?

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).

​@Mark_Plaggenborg the subject of that slide was how you could use highlighting one of the options to draw the users’ attention and to use it in context to guide the eyes through other buttons. The slide was not meant to focus on the visual styling of the buttons. 

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)

​@Bart Metselaar Understood. Thanks for the clarification.

​@Kevin Rosink to my opinion, this is a different subject where I am afraid it will be overlooked amidst the discussion. That is not fair to your idea and I want to prevent your idea not be taken seriously. Can you please raise this as a separate idea? Be sure to include your use case and why you need that different color. Help us realize what you try to achieve and empathize with your users. 

Hi ​@Bart Metselaar ,

At the moment, I don’t have a concrete use case. You already mentioned the different button types in your initial response (Call to Action (100%), Default, Disabled, Overflow/Hidden), which I feel already covers the concept of primary and secondary buttons (and others) to some extent.

I can imagine that over time, as we start using these buttons more, the need for additional differentiation might come up again. One example I can think of is during a process on the shop floor, where the primary button could simply be “Next Step”, but during one of these processsteps, there may be multiple other actions that can be taken—some optional and others required- which task colour differentiation could highlight.

However, for now, this is just an idea and not a concrete use case.

Thanks for your additions ​@kenterweeme. Let's first get the 100% opacity (CTA) version in our product. 
I can also imagine your example, but don't forget about options like the location of a button or order of buttons, which does a lot more for UX than colors!