Traditional Radio Buttons vs Bootstrap Styled Primary-Secondary Toggle Buttons



  • For a responsive web form I am considering two options for radio buttons with three or fewer selections.

    I personally like the bootstrap css style format because it seems easier for the user on mobile and appears like a more modern UX design. I've seen many websites in my industry moving to these type of bootstrap button selections on web forms:

    enter image description here

    My designer said it is not the best UX practice to use the above type of buttons. It was indicated that I should use the traditional radio buttons like below (either vertical or horizontal). I feel these are harder for the user, especially on a smaller mobile screen.

    enter image description here

    Is one method better than the other?



  • Is one method better than the other?

    As with most things in UX design, we need to be able to set some objectives to measure both options against each other.

    Responsiveness: The traditional radio button would scale better with additional options or longer texts. It also doesn't require additional engineering work to control the display. enter image description here

    However, the modern option would require special treatment once the number of options becomes more or the text within the options become longer. enter image description here

    Accessibility: Radio buttons are generally more accessible since they have been around longer and https://a11y-101.com/development/radio-buttons , I cannot say the same for the modern alternative option you have proposed.

    Readability: It's generally harder to scan things horizontally, especially when you have more than 2 options. It's not impossible but the vertical listing is the most expected by users.

    Usability: From your example, it's hard to know what the clicked state for the modern selection would look like. But https://getbootstrap.com/docs/5.0/forms/checks-radios/ , and this is what you will get if you have just 2 options. With this, it's really unclear what option is the chosen one in the modern selection controls. enter image description here

    But you can merge the best of both worlds. By combining the aesthetic appeal of the modern version, with the enduring usability of the traditional approach. enter image description here




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2