UX monologue: Styling selected item

Rustem Kakimov
Sep 1, 2018 · 3 min read

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:

Starbucks wifi access registration form

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

Rustem Kakimov

Written by

I try to understand things.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade