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

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 Aug 5 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
    Aug 8 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
    Aug 8 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. Aug 9 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
    Aug 10 at 0:49

1 Answer 1

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.

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
    Aug 11 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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