9

Imagine a form with a list of items (facilities - toilets, showers, etc.) where for each of them user can select whether the item exists (Yes), doesn't exist (No) or it's not known whether it exists (Not known). What would be the best way to present this to the user?

I'm looking for a solution that is graphically pleasing, intuitive and user friendly. My initial idea was to simulate a three-position switch with labels above to indicate the selection. I will appreciate links to existing solutions or simply verbal ideas.

Update

Based on your suggestions, I've decided for the following design. Thank you all for your answers.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this question

4 Answers 4

Reset to default
14

Without knowing the use case, this is a little difficult to answer. For instance, what is the motivation of the user filling out this form? Are they doing it because they want to, or because they have to? Is it a survey, where you just want to see what people know, or is accuracy of paramount importance?

I would not not recommend a three-position switch, as the custom GUI element is likely to confuse the user (you'd be surprised how many people are still confused about the iOS UISwitch, even after 6 years on the market). Instead, I'd look to well-designed survey forms to inspire you here: one row per item, with three mutually exclusive radio buttons per line:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You could also use a similar layout, but use three segment buttons, instead:

mockup

download bmml source

Or, if the context is one of quick action, you could present each question individually. For instance, the Gas Buddy app has recently begun asking about other features of gas stations after a user reports prices, via a single-question popup overlay (with the question followed by individual buttons for 'Yes', 'No', and 'I Don't Know'.

Improve this answer
5
  • It might be a bit confusing to have check-boxes in that table. Is there any hint to let me know I can't check also No column for the first row? Same problem with buttons.
    – Renat Gilmanov
    Aug 16, 2013 at 17:55
  • Yeah, sorry, they were meant to be radio buttons... I'll update my mockup. Segmented controls infer mutual exclusion, though.
    – Daniel Newman
    Aug 16, 2013 at 18:43
  • Yes, you are right. Thank you. BTW, it looks like my answer repeats yours a bit. Do you want me to remove it?
    – Renat Gilmanov
    Aug 16, 2013 at 20:12
  • @RenatGilmanov Nah, your alternate renderings of radio buttons are quite nice.
    – Daniel Newman
    Aug 16, 2013 at 20:30
  • I'm choosing this answer because I like the three segments button suggestion (I think I'll use the question mark symbol instead of "I don't know"). All answers were inspiring though so thank you!
    – David
    Aug 17, 2013 at 8:10
7

You need to make a clear statement saying only one state can be selected for an item. Group of radio buttons or three state switch will do the trick.

A radio button or option button is a type of graphical user interface element that allows the user to choose only one of a predefined set of options.

Something like the following:

enter image description here

Improve this answer
2
  • 1
    The only negative I can see to your first example is that it has grouped the radio buttons in columns. It sort of suggests that you select one item in each column, rather than per row.
    – Brendon
    Aug 16, 2013 at 19:48
  • Your second suggestion is something I had in mind at first. It isn't clear from my question though (my bad) that not all items will have the three-state button as an option. That is ultimately the reason why I favour the three segments button from the chosen answer.
    – David
    Aug 17, 2013 at 8:14
7

Agree with the radios-based answers above, except the controls themselves need to convey the meaning, so users don't have to keep in mind the titles of the columns. Similar to what Daniel has suggested, but maybe in a more graphic way.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
4

One possible options would be to use three lists:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Although it would be necessary to explain to the user what they had to do.

Improve this answer
2
  • This would be clumsy for a short list, but could be a big time saver if the list is very long. +1 for a good solution for that niche, if not likely for most situations.
    – Jon of All Trades
    Aug 16, 2013 at 21:55
  • So you need to click twice instead of once for every item (select+button). And if you want to change an item from Exists to something else, you need to click it in the Exists column and the buttons would shift over and change to "<<Doesn't exist" and "<Unknown"? And if you need to look up an item you need to scan all three lists? I think that this is overcomplicating a simple control...
    – Vitaly Mijiritsky
    Aug 17, 2013 at 5:57

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.