235

Depends on whether the question is mandatory. You need radio buttons if you want to be sure that a user answered the question, as with an empty checkbox you'll never know whether a user just forgot this question.


98

My first idea was the same as in Izhaki's answer, but later I thought of this, that seems to fulfill your goal and to reduce (at least a bit) the need of user interaction without drawbacks. (EDIT: thanks to @dennislees for improving the color design for constrast. If it goes well with the rest of your UI, IMO this will improve the consistency of this ...


81

There is no single proper answer but the control depends on the context. Checkbox is suitable to minimize clutter but its use is limited for cases where described choice has also clear opposite meaning (without need of mentioning it) : [X] include subdirectories Radio buttons are suitable when making something more explicit or if choices need separate ...


53

Use either Responsive Disclosure or Responsive Enabling depending upon the standards in the format you're working in. Responsive Disclosure would mean first showing a radio button like this... download bmml source – Wireframes created with Balsamiq Mockups ...and then revealing the additional option in the whitespace if the user selects no, like ...


52

You don't need to make different appearances for these components. Your case is similar to well-known toggles in a toolbar of text processors like Word. These font settings toggles act like checkboxes: And these Word’s alignment controls act like radio buttons: Note, they look identically and it doesn't produce any confusion or difficulties because in our ...


50

There should never be just one radio button, as it breaks the user's expectations on how they work. Radio buttons are meant to allow selection of one and only one item from a set of several radio buttons. If you really want to use radio buttons, you could either go with this approach: () I like the following sweeties: [] chocolate [] lollipops [] ...


50

This has been discussed in much depth in many other related questions (see right pane on this page). So I'll make it brief. Toggle switches are anti-usability Despite their relative popularity (eg, Apple use them as a standard interface control) toggle switches have an inherent state-action ambiguity; that is, it is unclear whether the label ('on' for ...


50

That depends on the context. A checkbox that makes the user accept terms of agreement for example should be unchecked since its a critical decision which needs the users interaction to be legally okay. On non-critical checkboxes you can pre-select them according to what most users want/need. If 80% of your users hit the checkbox you can pre-select that ...


45

One way of making a selection task less tedious is by increasing the selection target size to the full image + text size (e.g., as in the attached mockup). This decreases the effort that goes into individual selection and can provide an appealing and easy to see overview on which books are selected. Additionally, you can distributed the 100 books over ...


42

Wrap the label around the checkbox. This makes it much easier to click the button. If the label is separate from the control, then there is often a non-clickable gap between them. <input id="click-me" name="click-me" type="checkbox"/> <label for="click-me"> Click me </label> download bmml source – Wireframes created with ...


39

The normal way to solve this problem is to use validation (or errors as you put it). I would not advise mixing control types within a single field as it's overly complex and confusing to a user who knows what a checkbox and radiobutton are. From a Usability perspective you should aim to tell the user what the state of the system is. So if zero selected ...


35

Yes - underhanded, but this is not a problem reserved for the web - it's long been an issue for print too. A couple of years ago, the EU banned pre-ticked boxes on shopping websites in order to prevent such issues as unintentional purchase of insurance or optional extras when purchasing plane tickets, for example. The legislation does appear to revolve ...


34

The only case where a checkbox should be marked "required" is if it must be checked, like when agreeing to legal terms. Good example: For any other case, how do you determine whether the user has completed that checkbox field? It might be properly filled out by staying un-checked. Except for the specific case of agreeing to terms, it's important that your ...


33

Show the true state of your application In your scenario it sounds like Scenario A - Example A is the way to go because it clearly indicates to the user which features are Active and allows them to turn off features that they aren't using. Instead of asking Which of these features do you have? simply show them what is active and allow them to turn some off.....


33

It depends. How often do your users see this form / section / settings? Frequently used, long session applications give users a chance to remember how controls work, especially frequently used ones. Part of this has to do with Application Posture. A sovereign application is a program that monopolizes the user's attention for long periods of time. Google ...


29

Answer: No. Checkboxes vs. Radio Buttons - Nielsen Norman 2004 Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list. Checkboxes are used when there ...


26

Why not merge the done and next buttons? This layout still allows a user to continue without being finished with the page, but requires less clicks.


25

Pre selection of checkboxes Successful pre-selections can make interface more efficient and pleasurable to use. Sane default selections can reduce the amount of actions a user needs to perform. Whether or not a checkbox should be preselected should be based on the domain context and business rules. Business rules will dictate whether something should be ...


24

I'd prefer the option you called "positive statement". The reason isn't only consistency. The other reasons are: Positive statement style is a great way to introduce the functionality of the application. So config dialog could partially play the role of software help and documentation. It tells to a user like: "I can do this, and this, and ...


23

I haven’t seen user testing data on this, but there’s an existing pattern that appears to work very well. In the course of on-boarding a new user profile, Netflix allows the user to select movies that he wants to watch or likes: Notice the top row. The left item is selected, the middle item is in the hover state, and the right item is unselected. Also note ...


23

You should definitely let users know if it's mandatory before letting them click a button and get frustrated because they couldn't proceed. Things you could do: Change the headline from "Please agree to the following:" to something like "To continue it is necessary to agree to the following:" which if course is longer and you don't have a guarantee that ...


22

I would use the checkbox, because: it is visually concise (vs. radioboxes taking more screen space) it is the bare minimum necessary to get the job done it is a classic UI widget and people are familiar with it (though this applies to radio boxes too) a paper version of the form can look the same (though some paper surveys use radioboxes) Radioboxes would ...


21

I'd suggest putting a button that they have to press to complete the selection, and using that button's label text and active/disabled state to transmit the information you want to pass to the user. Something like this: download bmml source – Wireframes created with Balsamiq Mockups The idea is that the combination of the selected options and the ...


21

Don't make checkboxes behave like radio buttons and don't make radio buttons behave like checkboxes. It is perfectly acceptable for the radio group to have no default selection in some situations. For example, Microsoft's guidelines for radio buttons give the following examples: Don't have a default selection if: There is no acceptable default ...


20

Rewobs' answer is good, but it involves two levels of complexity: first clicking one of two ratio buttons, then selecting the checkboxes. The user experience of that design can be improved by simply having a visually separated None of the above box at the bottom. Someone suggested clearing the users' choices, but that is bad because accidentally checking ...


19

download bmml source – Wireframes created with Balsamiq Mockups You can go to a two Combo interface. The first one with all the choices, and the second one with all the choices and an empty field.


18

In the original GUI guidelines from the Lisa/Macintosh, Xerox Star, and Microsoft Windows, check boxes are, as the name implies, something you can mark (with a check-mark) if you wish to select or mark it - or clear if you wish to deselect it. Each checkbox choice is independent of each other, in terms of their activation. Radio buttons, on the other hand, ...


18

A tenet of good user experience in software is system feedback. In this instance, the system should confirm it will no longer show you notifications... which is a good place to offer an undo option, as well as tell them where they can change their preferences. For example:


17

A toggle button usually makes the most sense when you have a number of buttons to choose between. Something like a set of radio buttons in interaction. Otherwise, one toggle button on its own isn't clear in terms of either interaction or affordance, and the other options are better choices.


Only top voted, non community-wiki answers of a minimum length are eligible