11

I'm working on a tablet based application where an agent would be going through and answering a series of yes/no questions. This is running on Windows 7 and naturally the standard windows controls aren't as touch friendly as they could be.

Currently the Yes/No questions are presented as a pair of radio buttons, but we're considering making these more modern / touch friendly, and we're looking at replacing them with a windows phone style toggle button.

The gotcha is that our design requirement does not permit us to have any of these yes/no answers defaulted to either option, that is the control must be in an indeterminate state on initial display (the user can't put the control in an indeterminate state themselves).

So the only design I can think of would be a toggle switch where the thumb of the switch sits right in the middle, then the user goes down the form either touching the left or right side of the control, or alternatively, flicking the thumb left or right to answer the questions. Does this seem like an intuitive way to present the control?

Improve this question
2
  • What exactly isn't touch friendly about a radio button? And what does "modern" mean? How are radio buttons not "modern"?
    – Charles Boyung
    May 9, 2012 at 17:32
  • The radio buttons, as presented are easy to miss, to the point where most of the agents resort to using a stylus.
    – Brandorf
    May 9, 2012 at 18:15

4 Answers 4

Reset to default
12

Radio buttons are actually the most accurate (requirements match standard behavior) control for this. Just make larger, custom radio buttons that are easier touch targets. Remember to allow the label to also act as a touch target for the radio button.

Toggle buttons are not the right control, because the user does not have the power to use them as intended... you cannot 'toggle' back to no answer. Do not use controls, even fashionable ones, if you must alter their normal behavior to have them perform as desired. The alterations will confuse the user.

Improve this answer
6
  • Yeah, after thinking about it, this seems to be the best approach.
    – Brandorf
    May 9, 2012 at 19:15
  • 3
    I'd agree radio buttons are probably the best match for this. I would like to point out though that I've never personally seen a standard way to toggle radio buttons back to "no answer" either. Also, a good read on the indeterminate radio button state and its difference in the HTML 4/5 specs: css-tricks.com/indeterminate-radio-buttons
    – GotDibbs
    May 9, 2012 at 19:18
  • 1
    Wait... Brandorf specifically stated that toggling back to 'No Answer' is disallowed: (the user can't put the control in an indeterminate state themselves)
    – Myrddin Emrys
    May 9, 2012 at 20:39
  • ...so toggles would be fine except that they don't have a neutral initial state.
    – peteorpeter
    May 10, 2012 at 12:30
  • Exactly. It was awkwardly worded, but my question really centered on what would the indeterminate state of a toggle look like? We've opened a dialog with legal to see if we can remove the indeterminate initial state requirement.
    – Brandorf
    May 10, 2012 at 18:32
4

If you really want a rocker switch, then you can clarify any ambiguity of the image by using a little text flair.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Regardless of the graphic you use in the middle, the text labels will reinforce your physical metaphor with a direct 'lit text' metaphor indicating which option is enabled. I chose red and green, but red/green colorblindness is not really an issue since the intent is more that the text is 'on' than which color it is.

Improve this answer
3

Perhaps something with two controls would work?

enter image description here

Improve this answer
2
  • Well, this is pretty much exactly as it currently behaves, but with the stock radio buttons.
    – Brandorf
    May 9, 2012 at 18:16
  • Does "(No is back in initial state)" mean "The No button is back in its initial state because the user has clicked Yes" or "Click No to go back to the initial state"? If it's the latter, it's non-standard because clicking No should select No. Re-clicking Yes might unselect Yes without selecting No, though.
    – Andrew Leach
    May 10, 2012 at 16:44
0

I personally wouldn't use a rocker switch. To much room for ambiguity. What is the middle state? I'd use an on off button and a toggle. Radio buttons for your example are the best way to go.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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