Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
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 '12 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 '12 at 18:15
add comment

3 Answers

up vote 8 down vote accepted

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.

share|improve this answer
    
Yeah, after thinking about it, this seems to be the best approach. –  Brandorf May 9 '12 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 '12 at 19:18
    
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 '12 at 20:39
    
...so toggles would be fine except that they don't have a neutral initial state. –  peteorpeter May 10 '12 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 '12 at 18:32
show 1 more comment

Perhaps something with two controls would work?

enter image description here

share|improve this answer
    
Well, this is pretty much exactly as it currently behaves, but with the stock radio buttons. –  Brandorf May 9 '12 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 '12 at 16:44
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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