Selected state of two icons--clarity

Question

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?

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!

Answer 1

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.

Answer 2

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!

Answer 3

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

Anyway;

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

Answer 4

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}