1

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.

enter image description here

Improve this question

2 Answers 2

Reset to default
9

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.

enter image description here

Improve this answer
6
  • 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
    – Bilal Khoukhi
    Dec 11, 2016 at 18:22
  • 3
    You'll have to be careful with gray buttons because they might look disabled.
    – slugolicious
    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
    – Devin
    Dec 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
    – slugolicious
    Dec 12, 2016 at 17:03
  • well, here's where testing with real users comes handy. To me, that button looks like "pressed" :D
    – Devin
    Dec 12, 2016 at 17:04
2

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.

enter image description here

Improve this answer
3
  • 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.
    – Bilal Khoukhi
    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.
    – Rien Daamen
    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.
    – Rien Daamen
    Dec 15, 2016 at 9:22

Your Answer

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

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