: Colour combination for three buttons What colour combination would work best for these three buttons: Should all of them remain the same colour? These are my options: Image of the whole page

@Correia448

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



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

Vote Up Vote Down

@Shelley591

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:



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.

Vote Up Vote Down