Monday, August 13, 2018

gui design - Should a toggle button show its current state or the state to which it will change?


I have a quick question about buttons that toggle between two states. (Think Play/Pause, or Shuffle/Regular Play.) As the title says, should the toggle show it's current state or the state to which it will transition?


I think people are used to the Play/Pause convention. But the Shuffle/Regular play might be more confusing if you show the transition state instead of current. For example, the built-in music player on the Xbox 360 does it this way: when it's in shuffle mode, it shows the icon for direct play and vice versa and it always confuses me (am I in shuffle mode or straight play).


I see it this way: Play/Pause is more like action as in begin playing or pause playing. Yes behind the scenes it is a state transition but to the user, there is an action. Whereas Shuffle/Straight Play is an option and it's best to show the current state (and possibly have only one icon and change button to show that the option is enabled/disabled). Thoughts?



Answer



In About Face 2.0 (there is a v3 but I haven't got it) Cooper and Reimann (2003, pp. 341-2) treat this subject under the heading "Flip-flop buttons: A selection idiom to avoid". I strongly suggest to consult this book as I will only present an excerpt:




Flip-flop button controls are very efficient. They save space by controlling two mutually exclusive options with a single control. The problem with flip-flop controls is that they fail to fulfill the second duty of every control - to inform the user of their current state. If the button says ON when the state is off, it is unclear what the setting is. If it is OFF when the state is off, however, where is the ON button? Don't use them. Not on buttons and no on menus!



The authors (and I think of these as an authority on the subject) presents two possible solutions: You should either spell the button's action out as a verb phrase (e.g., Switch to portrait mode, thereby sacrificing some of the saved space) or use some other technique entirely (e.g., two radio buttons).


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...