Tag Info

Hot answers tagged

123

If I saw that in an interface - I would assume only one item can be checked, especially before any had been selected. Only the wording of the title would indicate to me that multiple selection is possible. I think this design would lead to a greater than normal number of people choosing a single item rather than a selection of items. I don't see the benefit ...


70

I believe it should as the entire region in the eyes of the user is the "selection". Now, I think you can look at this issue from another angle which is...how do we remove the perception of a space? One solution is to include a background surrounding the checkbox and label region. On hover over, the background could change color as well to further ...


52

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


46

While Microsoft and Apple aren't explicit on this issue, Java Swing Look and Feel Guidelines explicitly state that the label/value should be to the right of the control for languages read left to right. The same applies to radio buttons. The ancient OSF Motif Style also explicitly says that the label is to the right of check boxes and radio buttons ...


42

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 [] ...


36

A checkbox should look like a box and not a circle. They are not check circles, after all. Subtly rounded corners, as others have mentioned, would be okay, but user interfaces have always represented a checkbox as a square and a radio button as a circle. The designers behind your examples are likely trying to be different, favoring style over function.


33

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


31

The only case where a checkbox should be marked "required" is if it must be checked, like when agreeing to legal terms. 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 form validation ...


27

Maybe you can try a mix of usual buttons (to have a big area to click on) and the usual radio/checkbox controls. I wouldn't totally remove those controls because then you'd have to add text descriptions like "Select only one." or "Select multiple." You could also grey out the radios/checkboxes that they are just a subtle hint.


25

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


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 this...". The ...


21

A checkbox should be square. As Cooper, Reimann, and Cronin wrote in About Face 3 (emphasis mine): Traditionally, checkboxes are square. Users recognize visual objects by their shape, and the square checkbox is an important standard. There is nothing inherently good or bad about squareness; it just happens to have been the shape originally chosen ...


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


20

What I think about double-click Checkboxes: This is one of the most terrible ideas i've heard about in a while. Users expect a checkbox to be single-click. Period. There is no problem with accidently clicking checkboxes: Actions triggered by checkboxes should be instantly reversible per se. Thus, miss-clicking should be a non-issue, since a simple ...


19

Typically even a tri-state checkbox is still to be treated as a two-state check box in terms of the user's interaction. The user should not be able to switch it between all three states - only between checked and unchecked. It is only if the information that is related is not in either state that the box is 'displayed' in the tri-state. What does it even ...


18

Martin, take a look at what jQuery Mobile has done with radio buttons and checkboxes. Here is a demo page: jQuery Mobile Docs: Gallery of Form Controls They give you two viable options that I think you'll enjoy. Keep checkboxes and radio buttons looking the same but making them have a surface area that is larger and more clickable. The new Apple iOS ...


18

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.


16

I would try to group as many checkboxes as possible under a single label: download bmml source – Wireframes created with Balsamiq Mockups


15

as creator of Bootstrap, perhaps I can shed some light on this :). Prepended and appended inputs serve two purposes: Allowing for simple punctuation or units to be paired with an input. For example, if you need to indicate a field is asking for money, use the prepend with a $ sign. Other examples include @ with a username (a la Twitter.com's settings ...


15

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


14

For me there are three things I would do to simplify this design. 1) I think you should remove the Member role from the list of roles. Users cannot change this so it should not be part of the group. Instead it can be listed together with all the other selected roles else where (possibly with an descriptive title e.g. default role, or base role or some ...


14

download bmml source – Wireframes created with Balsamiq Mockups How about this? Just replace the checkboxes with radio buttons. Color channel - selecting Lossless disables the slider, and selecting Lossy enables it. Alpha channel - selecting Lossless sets the slider to 100% and selecting Lossy and setting it to 100% manually doesn't affect ...


14

Yes, there is a convention: checkboxes = option for multiple choices radio-buttons = only one single choice among the options


13

The current option of check boxes and radio button in that layout is not a good choice. It looks confusing. There are a few ways you can handle this: Split it into two questions: 1. Do you like sweeties? and if yes, then 2. What kind of sweeties do you like? If no, then move on to the next question. Turn it into a dynamic/interactive question. Do you ...


13

When looking at a large set of data and realizing that the organization is not working, you want to look at how the information as a whole can be presented differently - not just swapping out a single control for another. That's my short answer to your specific question. You do have a lot of checkboxes and they are confusing. Start by looking at a different ...


12

Yes, its a convention. If you take a look at big and heavy traffic sites like Amazon or Ebay, you will see this behaviour. You see everything of a list unless you start filtering by checking a filter option. And no filter is preselected/checked at start. Make sure not to forget a clear filters option. At some point you could filter so heavily, that no ...


12

It depends on what you want to do. :) Use checkboxes (or other toggle buttons) if you want to provide for applying several filters at once. If you want to use them for single value, then listen to @AndroidHustle regarding manipulating them, and only use them for single, independent, boolean values. download bmml source – Wireframes created ...


12

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


11

If we ignore the possibility of right to left reading order (used in some languages), I believe that the label should always be on the right-hand side of the checkbox. In Windows, it is in fact impossible to put a label to the left of a checkbox, from a technical point of view. In any Windows software development environment a checkbox's label will be on ...


11

Checkboxes vs. Select: To replicate checkbox functionality (choose 0 or x out of n), you'd need to employ a multiselect element. There's a lot of research out there indicating that most users are unaware of how to select multiple items in a multiselect element. Radio Buttons vs. Dropdown: It really depends on your scenario. Scenario 1: "Please select ...



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