Toggle buttons should do three things — change states, show the current state, and reveal unselected options. If your toggle button doesn’t do all these things, it has poor usability.
Many single toggle buttons fail at either showing the current state or making the unselected option visible. They’re challenging to get right because users only have one button to switch states. Should a single toggle button display the state or the second option?
Many designers make the mistake of displaying the state on the toggle button. This practice is terrible because it hides the second option from users. They have no way of knowing that it’s combined with the state.
In the example above, the action to follow someone combines the state and the second option into a single toggle button. When users press “follow,” the button turns into “following,” but the unfollow option isn’t visible. The user has to press the “following” button to unfollow someone, which isn’t clear.
Sometimes users won’t see “following.” Instead, they’ll only see the “unfollow” option. Now the user isn’t sure whether they’re following this person or not. They have to assume that the unfollow state means they’re “following” that person.
In both cases, it’s clear how to follow someone but not clear how to unfollow them or if they’re following them already. This confusion occurs when you don’t display the current state and reveal the secondary option to the user.
To clear up the confusion, separate the state from the second option by displaying the toggled state in a text badge next to the profile data. Users will notice the “following” badge and know who they’re following. The follow button switches to “unfollow” when pressed, so users see the unselected option.
Toggle buttons are useful controls if you design them right. A single toggle button presents more challenges than multiple toggle buttons. If you make sure it follows these three requirements, you’ll have no trouble overcoming them.
- Change states
- Show the current state
- Reveal unselected options
Book
Affiliate
Simple but really helpful logic.. of course the unfollow state should come when the state is in the follow.
I have bookmarked this site.. expect me to come back a little bit often.. I am digging deeper into UX.. looking forward to learning from you guys.. thanks
But changing the color to Blue, indicates that action is taken and its a way of giving feedback to the user that now you are following.
I agree with Radhika. I think the Unfollow button should have a different background color.
I think the rule is simple as that: any kind of button should always display the action it will do when pressed and never the state.
Absolutely!
If you can click to perform something, then tell what this click is doing.
A single button can not give the state and the action at the same time as they are usually the exact opposite, unless the text of the button is self-explanatory.
One possible solution is to have a button showing the to possible states at the same time, like the settings in iOS:
– Mobile data: [_X]
– Telemetry: [X_]
A strong colour plus a position indicating that there are 2 positions is a clear information in the state and gives the possibility of acting on it. And the element /setting you’re toggling is clearly written beside.
What about the behaviour on Facebook?
When the “Like” button is clicked it only changes the colour, the button is always called “Like” (it doesn’t turn into “Unlike”).
The second option looks a bit cluttered, especially if you’re scrolling through a list of 100 people when you follow 50% of them. I prefer the first option if the blue-button text changed to ”Unfollow”. That way you can tell by glance who you follow and the button will still have an easy to understand action.
I fully agree with the proposed solution. The problem is that there isn’t sometimes enough space to to display both the current state and an action. Is there s space saving solution?