0

So, 2 design options for how to style the toggle button for Y/N answers. There could be anywhere from 4-12 questions on a single page. Which one is better and why?

(I have a few thoughts on this already but want to see what others have to say as well)

Option #1

Option #1

Option #2

Option #2

Improve this question
7
  • 2
    I don't particularly like either. For the example question, I'd just make a check box with the 'question' as a statement next to it [ ] Location is the same as Mailing Location for no, [@] Location is the same as Mailing Location for yes
    – Jeff Zeitlin
    Commented Aug 5, 2022 at 16:56
  • 2
    why not use a regular toggle instead of buttons? they look quite confusing to me. This being said, if you have 4 to 12 questions, then I'd use just inline radio inputs
    – Devin
    Commented Aug 8, 2022 at 17:31
  • Use separate buttons to avoid the confusion of a toggle. But your use of the toggle should be clear enough, especially with the check-mark and the plain text identification for each option spelled out.
    – Steve
    Commented Aug 8, 2022 at 18:36
  • 1
    Nothing wrong with a toggle button. The second seems more obvious as to which is selected. In fact, the first one, I can't tell which one is selected.
    – slugolicious
    Commented Aug 9, 2022 at 4:27
  • 2
    In option 2, what is the icon used if No is selected? Is it a tick or a cross?
    – Michael Lai ♦
    Commented Aug 10, 2022 at 0:49

1 Answer 1

Reset to default
0

Both options still have many open questions on accessibility, but I would go with option #2.

Because your question seems to focus only on the visual aspects of the UI, I’m not going into details about exposed roles and states.

Behaviour

Accessibility role and visual presentation are an affordance, they communicate expected behaviour: These buttons do not take any actions, they set a state, an answer. This is the behaviour of radio buttons.

Buttons glued to each other (and not in a toolbar) communicate that behaviour better than buttons apart. That behaviour is

  • The button state is changed by means of arrow keys
  • Only one of the buttons can be pressed/checked at a time and keeps that state

See Bootstrap’s Radio Button Group

Use of colour

Another aspect is that you use only colour to distinguish the button’s state in option #1, which fails accessibility criteria. The icon in #2 solves that issue, if it is shown only for the pressed or checked state.

From the WCAG, Use of Color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Also, contrast of the leading question is way better in option #2.

Improve this answer
1
  • Thanks Andy! Yeah, option 2 is based on BS Button Group and updated styling to match company design standards with the addition of the checkmark to help visually show the selected state. Option 1 is what is currently in the application that was done before I started and I don't care for it because of accessibility and they just feel/look like traditional buttons, not form selections.
    – BGraphix
    Commented Aug 11, 2022 at 13:24

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