Navigation Design: Whether the selected state should be highlighted or gray tone

A basic task point in navigation design is to accurately indicate the current selection, and improper design can easily cause user confusion. In particular, when there are only two list items, the design should be carefully designed to convey the current selection accurately to the user. Write a note about this problem that you have encountered in your recent project.

There are two types of mental models in which users can determine the selected state:

One is led type , such as traffic lights, elevator operation Panel, a variety of dashboard, etc., the indicator light on the show selected-that is, highlighting;

The other is a button , the button is stuck to indicate the selection-that is, gray off. Clearly tell the user that this is in use, not point.

=========================== Case Split Line ============================

The above two are from Taobao and have Ah, are selected state highlighted. (Reasonable led experience)

The above two designs, from Google and itunes respectively, are selected to be grayed out. Believe that whether two list items or three list items, you can clearly know which is the selected item. (Reasonable button-style experience)

Above the figure from Ali International Station, icon + link form, the selected status icon Gray off. Icons and links can convey the selected state, when the user's cognitive inconsistency between the two, should believe the icon or believe the link? ( led type is mixed with the button type , and the indicator type is reversed)

The image above is from the Alibaba wholesale, the selected status icon is grayed out. The exact opposite is true for a design that has the same exact meaning. (Can be seen as the indicator type reverse, can also be seen as a button but not designed as a button)

======================== Summary Split Line ============================

Synthesis of the above cases, resulting in user confusion of the design, either the indicator is used in reverse, or the button is not designed as a button, or the two mixed use but not uniform.

Summarize:
1, the selected state highlighted, representing the majority of users of the cognitive habits.
2, use the icon to indicate the selected state, you should let the selected state of the icon highlighted. If you want to let the selected state of the icon Gray, the icon should be designed as a button texture, visually clearly showing the state of the trap and float.
3, the use of links and non-link can also accurately indicate the selected state. Icons + links are carefully used in the form.