What colour combination would work best for these three buttons:

enter image description here

Should all of them remain the same colour?

These are my options:

enter image description here

Image of the whole page

enter image description here

  • The primary vs. default and default vs. success seems distracting. Apr 24, 2015 at 19:58
  • Looking at the larger page, I'd ask what the 'clear' button is meant to do. Is it really a necessary option?
    – DA01
    Apr 27, 2015 at 15:11

4 Answers 4


The Go button should be bigger and have the highest contrast of all since it's the primary one.

The Clear button is okay because it's a secondary action and it should be neutral.

For me the Switch button has too much presence both in size and constrast. I'd position it between the Origin-Destination dropdowns, where it make more sense "by itself".

Here two similar solutions that for me are much cleaner and offer better usability for this specific purpose (I'd personally choose the first):

enter image description here

Removing the clutter :

If the Clear button will clear only those two fields (from/to) it doesn't seem to be necessary because anyway users will have to click on each dropdown and make the selection and this doesn't change if you add a Clear button.
If this is the case I'll recommend to remove it, so you get a cleaner interface and prevent users to perform an action which doesn't add any value for them (and moreover unintentionally remove what they've selected).

enter image description here

  • The ↔︎ arrows were my first thought too. See how translate.google.com does it: a ↔︎ button with a tooltip. Apr 25, 2015 at 7:13
  • If clear is truly secondary, I agree. If, on the other hand, it's destructive (removing work entered) then I'd argue it really should be handled differently.
    – DA01
    Apr 26, 2015 at 1:54
  • @DA01 Could you explain further more your last comment? What option would be better if it's destructive and why? I'm really interested in your POV. Apr 27, 2015 at 13:22
  • @rewobs I usually recommend not having destructive options at all, though they still exist in a lot of systems. As it's destructive, it shouldn't look like a button, IMHO, as buttons can become habitually clicked. People often fill out a form and then hit the most 'obvious' button at the bottom assuming it's SUBMIT. So, at least in form design, I usually recommend that the only button is submit. If there are other tasks, make them visually different and subdued compared to the primary button.
    – DA01
    Apr 27, 2015 at 15:10
  • 1
    @DA01 I got your point, thanks for the clarification. Additionally I've read your comment in the question, asking if the clear button is really necessary and I think it's not, because anyway the user will replace the value by re-selecting from the dropdowns, so adding a clear button will add an unnecessary action "in the middle". Apr 27, 2015 at 20:10

One solution is to visually separate your button by priority.

You'd typically have primary button(s), secondary button(s) and sometimes tertiary button(s) and/or non-preferred action buttons.

For Primary and Secondary, I usually suggest your preferred branding color (purely subjective) in two levels of contrast. High contrast for primary, slightly less contrast for secondary.

Tertiary buttons I usually try to avoid and instead go with a completely different visual, such as a link.

So, given your example, and interpreting the context as bet I can, I'd suggest something like this:

enter image description here

That's just a really quick example and you'd need to confirm the contrast meets accessibility guidelines and doesn't look disabled (which mine kinda does, so it needs tweaking), but hopefully it gets the point across.

UPDATE: I just noticed as I was posting this that this is the pattern StackExchange uses when creating a new post. The SAVE button is primary, the CANCEL is tertiary and shown as a link rather than a button.


High-contrasting (e.g. black-white) colors are always best, which kind of eliminates the orange option. And then, adding a bit of marketing to the mix, what is the color-scheme used for the rest of your page in terms of buttons, application? But if I had to choose: Go: green; Switch...: marine blue; Clear: black-white. Bear in mind color is also related to preference.

(Off-topic: you could eliminate the long label for switching by an icon-labeled button between the two fields)

  • 1
    Welcome to UX.stackexchange. What evidence do you have that high contrast is always the best?
    – Mayo
    Apr 24, 2015 at 14:13
  • 1
    Well, it might not be the best solution to any context, but high-contrasting improves readbility since it distinguishes the text from the background. Otherwise it becomes a blur. Consider color blindness (most common: green-red): red text on a green background or vice versa is how you detect this form of color blindness.
    – Simon-Klaas
    Apr 24, 2015 at 14:26
  • 1
    Here is an article that lists different arguments for colors: usertesting.com/blog/2014/12/02/color-ux-conversion-rates
    – Simon-Klaas
    Apr 24, 2015 at 14:57
  • There is a point where the contrast is not great enough and legibility decreases. I suppose I was focusing excessively on the black and white example in the first sentence. There comes a point where legibility is "reached" and then "more" doesn't increase user performance. Again. Welcome to UX
    – Mayo
    Apr 24, 2015 at 15:04

I would say change the contrast of a similar shade of color to show emphasis. Why? (1 in 12 men are color blind and 1 in 200 women are also color blind

You also want to guide users towards the intended path through the system so I would make the Go button darker. They could scan all the buttons and process them or they could have something like a darker color or larger size attract them to the intended or 80% most common choice that way they look there first and say yes that's it saving them time.

This article says the one should make the most important button look like that

See their example below

enter image description here

Doesnt look as good as the image below (In my opinion)

enter image description here

That article also mentions To put buttons in a sensible order. So in my opinion i would put the go button on the right because English speaking users left to right (so they naturally look to the right for ending signs). I would put it on the left for arabic users. Thats how I would arrange it for an English market.

enter image description here

A last topic in that article is Make it harder to find destructive buttons In your scenario I would switch your order that way if your clicking on go and you accidentally miss to the left you would possibly change the shipping location rather than destroying the action. Also you could confirm the destructive task if you feel its necessary (ie are you sure?).

  • "because English speaking users read right to left" - huh? Are we talking about the same English? Apr 24, 2015 at 19:41
  • edited ... whoops
    – Bob Sinclar
    Apr 24, 2015 at 19:43

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.