Two-state toggle buttons (e.g., On/Off, Yes/No, etc) are very common on web sites and in mobile apps. Both the Android and iOS toolkits have standard (different) versions. In the old days, we used two radio buttons for this. In doing some usability testing of pages that contained toggle buttons (using a standard we had adopted), we noticed that some users hesitated when determining what the current state of the toggle was, or in deciding how to change it to the other state. So we did a “Design Challenge” within our UX department. We asked people to come up with the best designs they could for displaying two-state toggle buttons. We received a bunch of submissions but then narrowed the field down to 15 different designs. Note that one of our requirements was that the design had to allow for the possibility of a “null” or default case where neither of the two options is selected.
We conducted an online study with 371 participants using UserZoom. Each participant saw all 15 designs. The first part of the study was a series of “first-click” tasks. Participants were shown each of the toggle designs where neither option was selected and they were directed which one to select. They were also shown each design where one option was selected and they were told to switch it to the other state. These first-click tasks were shown in a random order for each participant. Speed and accuracy of performing these tasks were automatically recorded. In the second part of the study, participants were shown each of the toggle designs (in both the default state and with one option selected) for 3 seconds each and then asked to indicate what its state was in a multiple-choice answer. Finally, at the end, each participant was shown all 15 designs and asked to select the one they thought was the most effective.
Multiple designs performed well, but two were preferred. Designs that work well have more than one indication of the “selected” state (e.g., color and a check mark). Traditional radio buttons performed well and should be coded so the label is also selectable, making it a larger target.