22

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?

2
  • 1
    Think of it as a Likert scale with just three levels.
    – Crissov
    Nov 14, 2014 at 19:03
  • I want to use the btn-group above by AL.. but how can I get it to select Yes/ No, etc via Javascript? Mar 3, 2020 at 15:24

8 Answers 8

30

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

4
  • 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. Nov 14, 2014 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, 2014 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, 2014 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. Nov 15, 2014 at 13:31
7

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>
1
  • 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, 2014 at 23:48
6

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

1
  • Yes, having it initially un-selected is important, and this can be represented in a database as a Null value. Jun 15, 2021 at 22:05
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.

12
  • 9
    … who thinks of politics when using a slider?
    – bjb568
    Nov 14, 2014 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." Nov 14, 2014 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, 2014 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, 2014 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? Nov 15, 2014 at 18:13
1

Using a select element makes the screen easier to read, especially when your page contains only a few Yes, rarely No, and most of None. The real problem I am trying to solve was selecting Yes with one click and keeping the advantage of the dropdown menu.

Here is my potential solution - the icon is added to rotate the selected value of the dropdown:

Example

Please let me know if you would like me to create a jQuery plugin from my code to try this idea.

2
  • Keyboard navigation with Tab is important. I was not able yet to find a way to make my YNNA User Control navigate with Tab when no visible option has been selected (when it is still set to Null). Does yours allow keyboard navigation? Jun 15, 2021 at 22:09
  • 1
    BreakingGnus, the icon is not accessible by Tab (tabindex="-1"). The dropdown handles keyboard events on its own. Jun 18, 2021 at 19:41
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

0

For ASP.Net applications I created a "User Control" with a set of Radio Buttons for Yes, No, NA (not applicable) and Null. The Null entry is the default selection and is usually not visible. This control can be connected to a database column which allows Null and holds 'tiny' integer values of 1, 0, and -1 respectively.

I call this the YNNA control and it can be styled with CSS however you wish. I provided a way to drop off one of the options, and also a way to rename the options. It is very convenient. I have some forms with dozens of these. I also added a way to double-click one to reset the selection to Null (which is not visible) to un-choose if necessary. This takes a bit of JavaScript.

0

An update to @A.L's answer

This is the Bootstrap 5 version of using input radio buttons in a button group.

Bootstrap 5 button group

Bootstrap 5 Input Radios as buttons

jQuery is no longer a dependency. No CSS required. It's all built in with utility classes.

Filter Refunds No filter
      <input id="refund_only_refunds" name="refund_filter" class="btn-check" type="radio" value="only refunds">
      <label class="btn btn-outline-primary" for="refund_only_refunds">Only Show Refunds</label>
      
      <input id="refund_only_nonrefunds" name="refund_filter" class="btn-check" type="radio" value="only non-refunds">
      <label class="btn btn-outline-primary" for="refund_only_nonrefunds">Don't Show Refunds</label>
    </div>

  </fieldset>
  
</div>
<div class="col-12">
  
  <button type="button" id="get_value" class="btn btn-outline-primary">Get value</button>
  
  </form>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.