2

There are other similar posts, but I have not seen any that answer the specific question of text placement for toggles or radio buttons when only two options are available? I like that Option-1 allows you to label each side of the toggle, helping the user better understand the decision. I like that Option-2 is easier to scan and is more uniform / consistent. I like that Option-3 balances out what I like about Option 1 & 2. But it takes up more space and is not as clean.

This is for a fly out menu on a web based product. Which option do you think works best? enter image description here

Improve this question

3 Answers 3

Reset to default
3

Toggle switches represent an on/off state, designed around the analogy of a real world on/off toggle (e.g., a light switch). Every major vendor's style guide describes them as such, and this is the pattern users are most familiar with. [1, 2, 3]

They were not designed to toggle between two arbitrary states.

The two states should be distinct and easily knowable by the user. If "export all" is turned "off", what exactly is going to happen?

Radio buttons provide a clear breakdown of options that are more complex then "on" and "off". The selected value is clear, the opposing value(s) is clear, and the result of taking the action of selecting the other option is clear before it happens.

Option 3 wins.

Improve this answer
3
  • 1
    I'd say radio button wins. That option 3 is displaying radio buttons with a check that makes them look like checkboxes (which is confusing).
    – Alvaro
    Commented Dec 21, 2016 at 23:08
  • @Alvaro - true. The styling of the radio buttons is nonconformist and confusing. They should be updated.
    – Nicholas Pappas
    Commented Dec 21, 2016 at 23:10
  • Agree that radio buttons should not try to look like checkboxes. VERY confusing.
    – Eric Stoltz
    Commented Dec 21, 2016 at 23:48
0

From usability point of view, the third options is better.

While the toggles looks more modern and trendy, these are used to turn on/off some mode. It seems, you have two modes for each section, and only one of these should be selected.

Radio buttons:

  • Show clearly, there are several (two) options
  • Have clear indication of the selection state

So, radio buttons prevent possible user errors, which is important usability criteria.

Improve this answer
0

And option #4: Use checkboxes, and just ask for the customized option.

option 4

Is it safe to assume if I uncheck "Specific" that "All" will be Exported/Included?

Alternatively the options could read "Export All Charts", etc., whichever makes sense to the user. But I chose "Specific" in the example because "All" is generalized and it makes more sense to me that customizable options are specific.

Improve this answer
2
  • How does one turn off a radio button, or are you suggesting these are checkboxes? Either way, these hide the alternative option and make them no more usable than the OP's Option 2.
    – Nicholas Pappas
    Commented Dec 21, 2016 at 23:12
  • Right. Checkboxes.
    – bloodyKnuckles
    Commented Dec 21, 2016 at 23:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.