We are designing a site that has list and grid views. We are having a heated discussion about which design shows more clearly that the grid view is selected. So I turn to you:

Which version shows more clearly that the grid view is selected? enter image description here

I would tell you which one is consistent with the selected view of the entire site, but I want to make sure not to sway anyone one way or the other.

Thank you!

  • But it looks like two different selections to me. It is not clear. Which one is supposed to be the grid? Neither looks like a list to me.
    – paparazzo
    Commented Dec 8, 2014 at 20:55
  • It looks to me like version 2 is set to grid view, but I think the icons could be a bit more clear (the grid icon also looks like it could be a card view). On the other hand, in context with the actual views these icons will become much more clear. At any rate, in isolation, the colored icon looks like the active view.
    – rdellara
    Commented Dec 9, 2014 at 1:40
  • Lots of good feedback here. Thanks everyone and sorry for not clarifying that the icon on the left is list and the icon on the right is grid. The icons are very representative of how the content is displayed on the page. In my current version grey has been used consistently to signify that an icon or channel is selected, meaning that version 1 is the way I show that a grid is selected. I'm going to rethink my approach, there might be a better way to go about showing a selected state.
    – Ana
    Commented Dec 9, 2014 at 15:03
  • Is this a duplicate? Mind-boggling it doesn't have more attention. This is so frequently done wrong. I just went through a whole list of preferences re-selecting everything that was already selected, because it didn't look right and I didn't trust it.
    – OJFord
    Commented Feb 1, 2015 at 1:53

4 Answers 4


Version 2 looks to me more like a grid selection to me.

But I am not your user (most of the UX community here probably is not either). I am also well aware of select/deselect and grid/list views because I design this sort of thing all the time. Your users may not.

So let's dig deeper...

Don't mix metaphors

Showing something is selected with an active color, is fine as long as it is used consistently. All active elements need to look the same. This helps the user learn what to expect when they select. Think about a button lit up when the power is on.

Keep it clear

If you have disabled elements that are gray, be extremely careful to make them appear different enough from your ready state interactive elements.

Be consistent

Make sure the page looks like your icons. Take the time to reinforce that mapping. If there are small squares in the icon, make sure your page layout resembles small squares.

Accessibility matters

Think about color blind-ness or ways to provide additional clarity about selections such as borders, text treatment or weight.


Without seeing the rest of the UI it is hard to provide specific design recommendations.

Just make sure your UI is extremely consistent, predictable and your user will learn quicker, become more efficient, less frustrated and more likely to stay engaged.


First of all

This is in fact a switch.

In essence, the user will choose from on of two positions, changing to alter behavior of some other element - a switch.

In this case, the swtich has two "labels", manifested as icons. One of the positions will be in color (selected or unselected, is OP's question), and the other will be in grey.

Grey color in UI

Almost never denotes a good thing. It's either unavailable, not-applicable, dissuaded, or otherwise marginalized.

So, one of the labels on your switch will be marginalized. The question is which,

Why would a switch have a marginalized/prominent position?

I can think of two main reasons for a switch's position to affect the appearance of the "labels":

  1. Canonical position
    If your switch has a default/common/normal/otherwise canonical position, it would make sense to mark it when it's position on the other option. For instance,
  2. Dangerous position
    It should make sense to mark a switch more prominently when it is in a sort of a "safety off" position. For instance, some on-off switches on electrical devices have a little tab that's visible when they're on, so they won't be left on mistakenly. iPhone's ring switch has a little red tab on vibrate mode, so the user will know not to expect a ring. A missile ARM light comes to mind but it's a silly example.

Back to the question at hand

I feel your application of a switch fulfills non of these conditions. While I can sort of understand the reasoning for each of your options, each of them break a lot of human conventions. They do fulfill a role, just not the role you intend them to play.

I suggest you try a different way of differentiating between selected and un-selected. There are many, better ones.
(More saturated color, light border, drop shadow, etc.)

Sorry to answer in a destructive way :)

Good luck!


For some reason I can't add the followings as comment due to my low reputation :(


I always tend to keep the darker tones of same colour for its active state, same for hover; however it may vary from one design to another due to its overall colour scheme...

The light grey/silverish colour of that icons only states that an icon exists, obliviously you can't use white and the closest colour to white is silver/greyish colour which is what you have!

To me it makes sense to have version 2;

However there is a problem with your ordering them, if you gone have the grid view as an active one, the you would be better to keep it on the left and the list view on its right, that gives more clarity to its status and makes it much easier to for the user...

It's like tabs of which we tend to keep the first tab activated and leave it to the user to choose which tab to view once page/app loads...

Same thing over here too,

I hope it makes sense :) Thanks


This will probably make more sense when you see it with the rest of your site, but right now the gray makes me think it's disabled.

Below makes more sense to me.


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.