65

I am not a fan of the approach you have suggested. I find that having a global toggle can be confusing. The reason for this is exactly why you are unsure and asking this question - because there are strong arguments for it functioning in different ways. I find the best approach is to just have explicit actions for selecting and unselecting all options. ...


53

I believe the usual justification is to prevent folks from copying and pasting the content so that they don't steal it. I usually roll my eyes at this because if a user really wants that text, you can get it one way or another, even with selection disabled. I came across another example: a developer wanted to disable selection because double-clicking a ...


48

As you correctly point out, this is a typical problem you encounter when you have a set of only two elements: it's never quite clear which element is selected. It seems to be difficult to highlight or otherwise emphasize the currently selected element. In my experience, stemming mostly from user research we did, what works for one user, doesn't work for ...


48

It's a myth that selectable text is "costless" As a general principle you are right that text should be selectable. That said, since you're asking about non-selectable text, here are some cases to be aware of for disabling text selection. There are visual elements containing text that users don't expect to be selectable. For example: Let's walk ...


39

How about just using a Combo Box? download bmml source – Wireframes created with Balsamiq Mockups By a user being required to just choose what country they are from, it removes the unnecessary step of a user needing to first select the region (or you can just infer the region based on the country selected if needed). Allowing a user to start typing ...


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


33

There is a reason when disabling the selection of text makes sense, and that is if selection of text could interfere with functional aspects of the UI. For example, it is frequently used on widgets that are draggable because you want to avoid that the user accidentally selects text when he intends to drag.


33

Even if the list goes too long - you can apply a scroll to the white space and keep 'None of above' always visible: Radio buttons - Thanks @user1306322


33

I would suggest creating a short list of broad "top-level categories" that every other category can be grouped into (maybe around 20 of them). For example: Technology, Art, Leisure, etc. Then (painfully) link your thousands of categories to those top-level categories. That way, when the user signs up, they can pick which of those handful of top-...


28

Keeping the checkbox disabled should be alright, if you are concerned about it you can make use of tooltips to explain the user why it is not selectable when he hovers over the field. Some thoughts about the design: The checkboxes you are using don't let the un-selectable checkbox be understood as their border coincides with the container. Make them ...


27

If there are two options, you could consider using a switch/toggle instead of an arrow as well. Took this from Dribbble:


26

This is a frame challenge. What you ask for is impossible. If you require users to select ten categories of interest before you let them access the app, most users will not proceed beyond that step. No UX polishing can fix this. The few people who get past this will have chosen ten categories quickly, without much thought. They will have missed categories ...


24

You could use a source area (list of items) and a target area (drop zone), to which the user can drag items from the list. download bmml source – Wireframes created with Balsamiq Mockups The drop zone should clearly state how many items are need to be placed there. I suggest to use a text message that emphasizes the remaining count of items, i.e. the ...


22

By definition, a filter is a tool that help users narrow down to a subset of results that is most interesting to them. Consequently, when a filter is active, the results displayed should be less than the total number of original results. For this reason, I find option B not intuitive enough. If I'm not mistaken, option B treats the icons using an additive ...


22

two rows of radio buttons as e.g. on the wikipedia http://en.wikipedia.org/w/index.php?title=Wikipedia&action=history


21

Keyboard The Shift modifier is used for keyboard selection as well, and not just for single selection. No matter where you are, no matter how long the list, [Shift] + [END] selects everything from your current item focus to the end of the list, [Shift] + [PgDwn] one page (however that is defined). This also combines with the word jump of Ctrl where ...


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

This sounds like a job for a type-ahead -- the user starts typing a category of interest, and the system returns valid responses that can then be selected. Bonus points if you account for fuzzy spelling or can link the user to synonyms.


19

Gmail does something that works pretty well, and has been around for a while. Firstly, when you search for a particular string (in this case 'ebay' which gave me loads of results to work with) and then choose to select everything on the page (from the checkbox in the top-left) then it produces a message saying: All 20 conversations on this page are ...


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

The drop down has a disadvantage compared with the radio-buttons and the slider-toggle. The user has to click on it to see the possible options. On mobile (if this is the case) drop downs are not easy to use. I agree with Owen Hughes about the toggle. In this case, I would go with the radio buttons. But there is an alternative: You could use a segmented ...


17

You give the entire list on the left side. Once the first item is selected show the selected item in right top window. Once the second item is selected show you can show the comparison between the two. Edited Components List (Collection of Nodes) Box A (For Node A) Box B (For Node B) On Mouse Over on any node show the option to select A or B (No ...


16

The answer is a big 'Yes'. If the user is selecting all the checkboxes individually and once all the items have checked the select all checkbox should also be checked. So, if the user at any point of time wants to uncheck all (s)he can directly uncheck the select all checkbox. It also tells the user that all the checkboxes were checked and no more ...


15

Not a complete answer, but some thoughts about why drag-and-select is not so good. Dragging with a pressed mouse button is physically hard to do. You have to keep a constant pressure on the mouse button, and if it becomes too light, your work is undone. Too much pressure and the mouse can't glide well, and the cheap ones feel like they will fall apart in ...


14

Disabling selectable text is horrible UX for non-native speakers of the language the text is written in, who may rely on copy-and-paste to automated translation software or website to make sense of the text. This is becoming less of an issue with ubiquitous smartphones with high-quality cameras and OCR translation apps, but I believe it's still relevant.


13

It depends on the context and how much options the user have, let's assume that the user will select the brand of the car he has and there are many options, but the user does not own a car, so if the user has to click on the dropdown will be an unnecessary action since he does not own a car . So I think of something like this: download bmml source – ...


12

for tabular data you can also provide an arrow with the check box, where you can provide options to select visible items, all items and deselect items. default action should be select page.


12

If you can dynamically add question fields, then another solution is to break it into stages: 1) Ask the null state question first with radio buttons. 2) If the option(s) which requires multiple selections is selected, direct the user to the next question. Examples: A. Do you have any pre-existing conditions? 🔘 Yes 🔘 No Only appears if "Yes" ...


11

Personally, I prefer to have it toggled on/off too, depending on the children state. At least with the design above, it makes sense to also change the 'parent' state, because should the user want to toggle everything on/off, they don't have to manually toggle the children state (which n actions), they can just change the parent state (just 1 action).


10

Making the user unable to uncheck that last check box might be unnecessary since the last box that's checked might be the one the user don't want to be checked. This might be a better solution:


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