19

I'm designing a user opinion page where the user has three choices. For instance, if the question is "Is it suitable?" the three options could be "YES", "NO", or "NoIdea".

In this case, what control should I use?

If there aren't any native controls available, are there any angular-ui or jquery-ui plugins available for the control?

  • 1
    Think of it as a Likert scale with just three levels. – Crissov Nov 14 '14 at 19:03
26

To select one option of a limited number of choices, Radio Button Inputs would be the way to go.

  • 9
    Yes, Radio Buttons are likely to be the best option here. Windows went through a phase of allowing "tri-state" Check Boxes (Yes/No/Indeterminate), but that was never a good UX. – Steve Jones Nov 14 '14 at 14:11
  • 2
    @SteveJones Many installers use those, the third state indicating at a parent level that some but not all child elements are selected. I quite like it. – OJFord Nov 15 '14 at 0:25
  • 1
    @OllieFord, You may like them, I understand them, but try explaining them to a normal user! Try also watching someone that has never come across them before. – Ian Nov 15 '14 at 13:00
  • 1
    @OllieFord Yes, I get it, but they are not a good UX, especially for a casual user who may not have seen them before. IMHO, YMMV, etc. – Steve Jones Nov 15 '14 at 13:31
5

Generally, there are just two natural ways to set up a 1-out-of-many choice in HTML: a set of radio buttons, and a select element. The latter can be used with a size attribute specifying the number of options visible in the initial size, or with size defaulted to 1. For usabaility, it is best to have all options visible initially, so that the user can just select the right one, instead of first opening a menu. This is best done with radio buttons, because that’s the usual way and users are accustomed to it, instead of the listbox created by <select size=3 ...>. But sometimes you need to save space and must use a select element with size defaulted.

Normally you should not set any of the options as initially selected, since the case where the user does not answer at all could (and maybe should) be processed as differently from a “No idea” answer. Lack of any answer could be an oversight (the user missed the question).

4

I agree with the other answers, radio buttons are the best choice for an input with 3 choices. According to GNOME developer, they are preferable for your problem because:

Radio buttons are used in groups to select from a mutually exclusive set of options.

https://developer.gnome.org/hig/stable/radio-buttons.html.en

Radio buttons or a list will often be preferable to a drop-down list, as they present all the available options at once without any further interaction.

https://developer.gnome.org/hig/stable/drop-down-lists.html.en


Unfortunately, the default style of radio buttons is boring, but the .btn-group class from Bootstrap can help you to improve the style of your radio buttons:

YES NO No Idea (or) YES NO No Idea

JSFiddle demos :

The downside is that it requires jQuery, Bootstrap CSS and JS (see the External Resources tab on these JSFiddle links for the CDN URLs).

Here is the HTML code:

<div class="btn-group" data-toggle="buttons">
    <label data-value="yes" class="control-label btn btn-default" for="button_1">
        <input id="button_1" name="opinion" required="required" value="yes" checked="checked" type="radio"/>
        YES
    </label>
    <label data-value="no" class="control-label btn btn-default" for="button_0">
        <input id="button_0" name="opinion" required="required" value="no" type="radio"/>
        NO
    </label>
    <label data-value="no_idea" class="control-label btn btn-default" for="button_void">
        <input id="button_0" name="opinion" required="required" value="no_idea" type="radio" />
        No Idea
    </label>
</div>
  • 2
    Worth noting that a commonly used name for those button groups is a segmented control. Helpful if you're Googling it! – Kit Grose Nov 17 '14 at 23:48
2

I generally favor radio buttons but -- as an option to experiment and test with -- you can use a slider. EXAMPLE:

   YES
    _
    :
    :
    ▲
NO OPINION 
    ▼
    :
    :
    _
   NO

Be careful to factor in up/down and left/right prejudices/tendencies in your testing. Up tends to be "good" and down "bad". And left-right is inextricably intertwined in politics and political philosophy.

  • 8
    … who thinks of politics when using a slider? – bjb568 Nov 14 '14 at 23:28
  • 1
    @bjb568 That's the thing - You don't have to. Many people won't be affected by this, but several users might be subconsciously swayed by their political preferences towards "the left" or "the right." – Chase Sandmann Nov 14 '14 at 23:41
  • 7
    Therefore roads are dangerous as people may be swayed toward the wrong side… Wat? I guess if you were to think like that, down is bad since being low is like being a lower class which the mere existence of promotes racism. Red is bad because it's the color of blood. Yes is bad because it can lead to regret. 13 is bad… – bjb568 Nov 14 '14 at 23:42
  • 2
    Oh, FSM… Isn't it more important that it doesn't look weird? People will be confused if they see a vertical slider since they aren't as common as horizontal sliders (which are built into HTML). – bjb568 Nov 15 '14 at 17:28
  • 2
    Is there actually evidence somewhere that people honestly link horizontal sliders with politics? Or is this just one of those "sounds plausible" suppositions that doesn't have a study behind it? – Chris Hayes Nov 15 '14 at 18:13
0

As per your use case, radio button works best in this case. You can either place all the options in one line or one below the other. Hope this solves the problem.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.