13

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

migrated from ux.stackexchange.com Apr 26 '15 at 1:15

This question came from our site for user experience researchers and experts.

  • The primary vs. default and default vs. success seems distracting. – Danny Varod Apr 24 '15 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 '15 at 15:11
52

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

Just FYI: I used Font-Awesome icons, the one in the first image is (depending on your version) icon-exchange / fa-exchange and the arrows ones are icon-arrow-left/right and fa-arrow-left/right

EDIT - Removing the clutter ( based on a DA01's comment):

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. – 200_success Apr 25 '15 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 '15 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. – Alejandro Veltri Apr 27 '15 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 '15 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". – Alejandro Veltri Apr 27 '15 at 20:10
12

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.

1

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 '15 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 '15 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 '15 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 '15 at 15:04
1

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? – BlueRaja - Danny Pflughoeft Apr 24 '15 at 19:41
  • edited ... whoops – Bob Sinclar Apr 24 '15 at 19:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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