UX monologue: Styling selected item
So, here is the problem:

Which item is selected? First one, right? Since we expect the selected item to be more prominent after countless hours of using all kinds of GUI.
Alright, let’s remove this ambiguity by adding more items:

Wait a second, it was the second item all along. Here selected style is visually less heavier. Let’s define heavy style as having more elements and/or using more contrasting colors. Choosing selected style can be considered a stylistic choice, but in my opinion heavier style is more likely to be associated with a selected option.
Now let’s improve our example. Remember, second option is selected.

How about some other variations of heavier style:


Let’s test our styles with the original example (two items, second selected):



If you ask me, these aren’t as misleading as the first example.
Lesson of the story:
Selected style should be visually heavier, more prominent compared to the non-selected one. Use such techniques as applying more contrasting colors, adding visual elements, increasing relative size. So, to put it simply:
To highlight something — add. Don’t subtract.
Most of the interfaces you use follow this:



Some don’t:

Male is the selected option on this one. But it doesn’t look so, as it goes against the common standard.
