There’s a proliferation of bi-state toggle icons on the web right now, many of them for the express purpose of “liking” or “favoriting” things. Take, for instance, this list of spaces from Confluence.
It’s very clear which ones have been marked as favorites and those that have not. Gray means “off”, and a star that is lit up bright gold is “on”. This utilizes two basic principles:
- People understand the concept of “grayed out”. It is a common pattern for indicating that something is disabled, inactive, or turned off.
- The fact that their are multiple stars in different states gives us context. We can see that there are two states and determine which is which by comparing them.
Now let’s take a look at the icon for favoriting a Skype conversation.
It’s a star, much like the one in Confluence, but what state is it in? It’s gray, so that means it is off, right? Ah, but here’s what it looks like if you click it.
The first screenshot is actually the “on” state. You can find that out by hovering over the star until a tooltip appears, but the fact that I couldn’t tell without the tooltip indicates that the visual design of this control is lacking.
When designing a bi-state toggle icon, use inherently obvious visual cues to communicate state clearly. Provide contextual cues where possible.