How to indicate active option

Question

I'm working on a web that there is a requirement to create a field that the user must select one option from two given.

For aesthetic reasons and consistency, we are using a couple of boxes that the user selects one option.

Even though I refer UX StackExchange a lot and admire all the wisdom, I'm doubting this design a little bit.

The entire UI has to be re-colorble (end users can change the colors of background, text, etc), so I can't use colors as a strong indicator to indicate which option is selected.

• By default, there will be no option selected.
• Default status of the option is the one in white background (in this design, but it can be different. Similar to option 2 above)
• When you hover an option, that option gets the grey color (similar to Option 1 above)
• When the user clicks an option, the black dot appears. It's currently black, but it will be the same color as the main text in the box.

Since there are only two options, it is not really possible for me to convey which color represents what.

I would be really grateful if you could shed me some lights to these questions:

• Looking at the UI in the question above, do you think it conveys that the Option 1 is currently selected?
• Any other suggestions are cordially welcome.

Answer 1

Add a tick (checkmark) to the active option. Or use a stroke around the box to indicate the active option.

To answer your question, does Option 1 seem currently selected? Not really, grey is often a disabled state. I would rather think Option 2 is currently active. The active option should draw more attention, that's why active states often have a highlight colour.

Answer 2

Android provides an example of underlining the active tab. Another option is using radio buttons as an analogy to "one of two is selected".

As Martijn already said: Checkmarks and outline strokes are a good indicator for "active" state.

Then again, if your website has a primary and a secondary color (branding & information priority), or an active and an inactive color (e.g. on buttons you already used), you can use that difference here as well.

Answer 3

Initially it's hard to tell these two items are clickable.

I would design them to look more like buttons, maybe a subtle outline or drop shadow.

If by default neither are selected, they should both be grey (maybe a lighter grey so the black text is a little stronger). When you hover they could change to a black background with white text. The selected button should then be black like the hover effect. (to display active, show a checkmark beside the text in the same color as the text).

also, it's hard to read the blue text on the purple background :)

Answer 4

Why don't you use a more classic way to show a list of choice: a so called combobox/select?

eg. with bootstrap select's style

You can also use an equivalent of a mobile segmented control but for the web.

eg. with bootstrap button group

Last, if other content depend on the choice made, you can use a tab style.

eg. with bootstrap tabs

Answer 5

If you cannot rely on color to reflect "selected" state, your other option is to rely on a visual indicator:

1. An icon on or inside of the box
2. A caret (^) on the box
3. Have selected box be slightly enlarged
4. Have selected box have additional styling (such as a shadow, etc...)

Answer 6

I'd recommend the same what others have already mentioned.

Additionally, you can consider increasing the size of the selected button to incorporate depth and selection at the same time. Reducing the size of unselected button would be just as affective.