0

In a form design, wizard people can define mark fields and then state how important there are. Some fields will always be in the form (for other purposes). However, for one such field a person can state 3 "levels" of how they work:

  • Required (field is required and cannot be left empty by end-user)
  • Optional (field is optional/can be left blank)
  • Disabled (field cannot be edited by user/will always be blank).

Since each of those options is mutually exclusive using multiple checkboxes/sliders is not the correct way.

An option is to use 3 radio buttons - however, this uses a lot of "room" for such a simple definition.

Is there a better tool? Where I can easily show the ternary status and have easy feedback (also on mobile)?

1

Try a dropdown, so only one choice is visible, but explicit to the user. Offer a preview of the form before they commit actions so they can double check that the 'levels' they want are correct.

You could use a dropdown, with the default state selected. This you can get from research. A dropdown will take less room if that's a constraint you have to deal with.

On hover you can have a tooltip explaining what each of the 'levels' of engagement of a form will do.

enter image description here

  • 1
    Hmm I like "hovers" however the whole idea of saving screen estate is motivated by wishing to keep things working on mobile. – paul23 Jul 15 at 4:19
  • You could just make that a touch interaction for mobile. The thought is the the terms you're using 'optional', 'required' and 'disable' are fairly common, so the help touch would not be needed too often, but it's there without being obtrusive. – Mike M Jul 15 at 4:23
0

What is the best user interface widget for ternary data. An option is to use 3 radio buttons - however this uses a lot of "room" for such a simple definition. Is there a better tool?

See this explanation for a two position toggle, you would create a three position toggle: left is disabled, center is optional, and right is required. This would use very little vertical or horizontal space, perfect for mobile or desktop.

See this live demo using JQuery: Three States Toggle Switch With jQuery - jQuery jToggler

trinary toggle shown in each of the three positions
     Click to enlarge

  • Yet how would I communicate to the user there are 3 positions? - and what each position represents? – paul23 Jul 15 at 3:22
  • paul23, a tooltip could provide the full text of your examples in your question if the rest of your interface doesn't make it apparent what is going on. One word under the slider could be enough to indicate required/optional/disabled. It depends on how much of a surprise or how obvious the information being presented is to the intended audience. – Rob Jul 15 at 4:34

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.