I am having a navbar with a search functionality that has two buttons "Search" and "Advanced". My primary color is blue #2a7ab0 I use that for buttons and some text. Text color on the blue button is white #fff. For risky actions, either a text or a button I am using red #e00000. My question is whether I should use orange #d43900 as a secondary button for "advanced". Will there be any confusion between it and the red for risky actions? I am putting in mind color blind people. I tried green, but it was either too dark and ugly or too light for the white text. I'd consider other colors other than purples and pinks.
I'd keep your primary action as is, but make your secondary action a link using the same colour as the primary button.
This way your secondary action...
- is less prominant and not so 'in your face', letting users concentrate on primary actions
- uses existing colour scheme rather than adding a new colour for no good reason
- differentiates the type of action i.e. 'perform the search' , 'take me to advanced use'
See also - Luke Wroblewski's research into Primary & Secondary Actions in Web Forms.
While the "advanced" button is not the primary, it is something I want to highlight. For now I decided to go with dark grey. #444 as I cannot have it as an underlined text with no background. Thank you Dec 11, 2016 at 18:22
3You'll have to be careful with gray buttons because they might look disabled. Dec 11, 2016 at 20:56
1@slugolicious, while you're correct, #444 is not a shade that most people will take for disabled. Other than that, I think Roger's answer is spot on. Maybe not for this particular case (we don't know WHY can't this be an underlined link), but probably correct in most other cases– DevinDec 12, 2016 at 4:57
@devin, yes i like roger's suggestion too but i think we need to be careful at what we think people might take as a disabled button. any gray shade that is different from the other buttons might be confusing. using bixal's original blue background (#2a7ab0) for several buttons and one button with #444 makes the button look disabled. see s6.postimg.org/4oj6hr5n5/buttons.jpg Dec 12, 2016 at 17:03
well, here's where testing with real users comes handy. To me, that button looks like "pressed" :D– DevinDec 12, 2016 at 17:04
Accessibility-wise orange and red are to close to distinguish. You can differentiate them by lightness contrast.
It would be better to use a clear search-field including label, hint-text within the input-field and helper text underneath.
Default icons helps users to quickly recognize the functionality. The advanced settings button is now placed next to the main search field, making it a more in-depth option.
Thanks for your answer Rien! I agree with the icons idea, however, I don't think we should have the search button inside the field and a highlighted advanced button outside, many user will make the mistake of clicking the advanced button after entering a keyword. This is my opinion and not based on any research. Dec 14, 2016 at 19:01
Bixal, you are right. I added a second example, where the buttons have the same format: icon and text. Dec 15, 2016 at 9:17
The primary (green) button is now more linked to the search input-field, while the secondary (grey) button will have it's own action. Dec 15, 2016 at 9:22