Toggle Buttons Should Represent Boolean Values

Can we just all agree that if you have a button that is supposed to toggle from one state to another, it should represent  the current state? For example, on Reddit there’s a button in each subreddit that will add or remove that subreddit from your front page. The problem is – if the subreddit is not currently on your front page, the button is green with a plus sign. If it is on your front page it’s red with a minus. Every time I see this button I have to stop and guess what it’s trying to tell me. The colors and symbols they use don’t represent the state of the condition, they represent the result of the action of clicking the button. 

I experience the same thing when I use my bittorrent client.  When you pause the button, it shows you the resume symbol. When you resume, it shows you the pause button. When I see this button I have to stop and figure out if it’s telling me what is currently going on or what it will do if clicked. 

 I know this sort of makes sense in a way. Most buttons do what they say on the label. If you have a submit button, you expect it to submit your form when you click it. If you have a save button, it better save stuff. 

 But toggle buttons are different. They perform actions, but they also represent state. They only work if the value they represent is truly boolean. On/Off, black/white, true/false. The only action they should perform is flipping the state – pause / unpause, add / remove.

Lance Cameron Kidwell

15 July 2010

Posted in Coding

In lieu of comments, please talk about this post with smart people at Hacker News Hacker News or, if you're the twittering sort, click this handsome button:

Prove Me Wrong: