3

On my website, there's a short form where the users need to make a selection (Green or Red) and then submit their request. The currently applied method for the button state after making the selection, is shown in the attached image.

Is it clear?

If I return to it after a few minutes, is it clear what was the previous selection made?

What is a preferable way to show the not-selected option? screenshot of current style

  • Just to be clear; in your example, does the "after selection state" image show that the user selected green or red? – Andrew Martin Jun 21 '17 at 14:00
2

In your example after selecting one color there is no clear affordance which one is selected. Is it the greyed out one or the one that is still visible? But the biggest problem is that red isn't red anymore and you are relying on the user to remember what it is.

The buttons also don't communicate that just one can be selected (and mutually exclude the other), if it's even clear that they are buttons and are used for selection!

I suggest to use radio buttons:

enter image description here

Or with the original buttons still clickable but with a radio inside:

enter image description here

If you like to stick to the buttons, you could label the selected:

enter image description here enter image description here

0

I think it is good, but it could be better.

For example, can someone press submit without selecting either the green or red button? In your image it looks like it can.

  • If the user has to pick one of the two, disable the submit button until a choice has been made.
  • Change the not-selected option to the color of the disabled submit button. This will create a pattern; a default color for disabled buttons.
  • Also change the color of the selected button to make it look different from the not-selected state.

You have (at least) three states for the buttons;

  • Default
  • Selected
  • Not-selected

Make sure they have their own colours.

See image below.

enter image description here

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.