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.

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

share|improve this question

4 Answers 4

up vote 13 down vote accepted

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'.

share|improve this answer
    
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 '13 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 '13 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 '13 at 20:12
    
@RenatGilmanov Nah, your alternate renderings of radio buttons are quite nice. –  Daniel Newman Aug 16 '13 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 '13 at 8:10

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

share|improve this answer
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 '13 at 19:48
1  
Yes, true, my bad. @Brendon, thank you. –  Renat Gilmanov Aug 16 '13 at 20:08
    
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 '13 at 8:14

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

share|improve this answer

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.

share|improve this answer
    
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 '13 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 '13 at 5:57

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.