4

Scenario

I want to make sure a user has made a selection on a switch input.

On page load it is either on (1 - in image) or off (2 - in image) depending on what state it is set to in the code.


Problems

  1. On submit the input is read as either being on or off (never unselected)
  2. Visually it is not obvious whether the current selection is made by the user or the default state on page load

Solution

To get around the two issues mentioned above, I could change the switch to a couple of radio buttons (3 - in image) That way required validation will fire and also you can visually see no selection has been made by a user.


Alternative Solution?

However, I would like to hear any ideas about solving the two problems mentioned but still retaining the switch control. Is it even possible?


enter image description here

  • Can you provide any insight into what sort of question the user is answering? A switch control is just that, a switch, and typically designates something as being 'off' or 'on.' But if your question is more of a yes/no or true/false, then a switch is likely not the most intuitive control anyway. – tonytrucco Aug 25 '15 at 13:54
4

You could try making the toggle start in the center of the switch. Then once the user starts interacting with it it toggles only to the on/off states, the centered position is just the default "unset" state.

I imagine this would be a bit confusing to users on first glance though so a radio button would probably be more intuitive for required fields.

enter image description here

(obviously you could play with the styling)

3

I encountered something very similar. Our solution was to hide the radio button options with an EDIT link and add a SAVE button for validation, then re-hide. Worked for our situation.

enter image description here

  • can you elaborate a little more please to make it clear what your solution was. im finding it hard to visualise. – Dave Haigh Aug 25 '15 at 14:07
  • @DaveHaigh The five rows of the image are the same part of the page over time, like a comic. Between the images, first the pencil was clicked, then Female was clicked, then ✓ was hovered over, then it was clicked. – Rory O'Kane Aug 26 '15 at 5:35
  • @RoryO'Kane Thanks, the image wasn't there when I commented ;) – Dave Haigh Aug 26 '15 at 7:48
  • This seems like it is solving a slightly different issue. This seems to be an issue of not always wanting to have the controls on display e.g. when listing rows of data. Because in my scenario, the edit/tick/x buttons aren't needed. I would just have the radio buttons on display (both unselected) and if a user hasn't made a selection on the submit of the form then it invalidates. I shown this in section 3 of my image in the OP – Dave Haigh Aug 26 '15 at 7:56
2

You could use an indeterminate toggle switch, see Bootstrap Switch or Flip Toggle Switch for examples on how to do this. Then you just append the event to fire validation.

As for styling, you'll notice in the examples above they use the closure principle of gestalt to communicate there's a state that needs user to complete it to avoid uncertainty. So, in your case, you'd need something like this:

enter image description here

by the above mentioned principle of closure, user will try to complete one of the actions to comply with this closure principle. This is called Multi-stability

Multi-stability is the tendency of ambiguous perceptual experiences to move unstably back and forth between alternative interpretations. Some objects can be perceived in more than one way. You can’t see both at once. Instead you bounce back and forth quickly between the two stable alternatives. One will tend to be your dominant perception and the longer you go without begin able to see the other, the harder it will be to see that other perception. From a design perspective if you want to change someone’s perception, don’t try to change it all at once. Find a way to get them to see an alternative. Then work to strengthen that alternative view, while weakening the original.

1
  1. No toggle at first; this instead: “Please provide gender.”
  2. User clicks, sees this: “[x ] Male”
  3. User makes a choice: “[ o] Female”

Like that?

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.