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 ...
38
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 ...
32
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-...
24
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 ...
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.
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, ...
15
While there are a few different ways to do what your asking; I prefer the "free tag" input method (not sure if there is a better name for this component). Basically users are allowed to enter in terms/tags/values into an makeshift input. Suggested/autocompleted terms terms/tags appear to the user as they type. As terms are completed/selected they appear in ...
14
Yes, there is a convention:
checkboxes = option for multiple choices
radio-buttons = only one single choice among the options
14
I am as surprised as you that users have difficulties to add a folder with this standard dialog window. But users are surprising, that is why we like them
I don't think there is a perfect solution but maybe what you need is a combination of complementary solutions
First you should keep this "folder selection" system because it is
the more standard for ...
14
One idea: draggable multiple range sliders
Instead of 13 checkboxes you could use one slider, on which the user can select multiple ranges and single values.
See an example of such a slider here: http://blog.153.io/Elessar/.
Your slider would then go from 6 to 18 and instead of having time labels you could show the selected age. When moving the spans you ...
13
Take a look at the bigger picture. What is the user going to do next? Probably not undo - possible but not probable?
If the likely next step is to move another item from the left list to the right then you should leave focus on the next item in the source list, so that the user can move multiple items easily be sequential pressing of the arrow button. So to ...
13
Go with check boxes for multi-select inputs.
It is a norm in implementation since the first GUIs and it a standard practice in UX too. Nielsen's article confirming the use of check boxes: http://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
Checkboxes are used when there are lists of options and the user may select any number of choices, including ...
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
Could you combine all 3 in a singe field with the label "Phone Number, Email or Name". Other than that I can only suggest using text to describe what the user should do - "Please fill in ONE of the following:" for example.
download bmml source – Wireframes created with Balsamiq Mockups
12
As long as it truly is within a single year, a range slider seems appropriate here.
via Kevin Anderson on Dribbble
EDIT:
The date range picker on the google finance site solves the problem with my previous answer. This example doesn't "snap" to month increments, but a different implementation certainly could.
12
If you are asking for data that usually follows a particular format, then ask for it in that format. Visually people are used to months shown in a calendar, so show it in a calendar, and let them select the months that they want.
Visually it is very easy for someone to see whether they have the months that they want like that. Here is a quick example of ...
12
I have nothing but anecdotal evidence, but I know exactly what the issue is.
Average people don't know where their files are.
I'm going to broadly group everyone into two categories.
Power users
These people understand where there files are, can think through nested folders and easily browse what they want from the dialog you've presented. Their concerns ...
11
If a range of months could span across the year end, perhaps a circular dial makes more sense.
Since you have limited vertical space it would have to be a dropdown though.
Something like this perhaps:
11
Your "All" option needs to be first, not last. Otherwise a user who needs all airlines might go through the list and tick all of them before he gets to the end of the list and sees that he could've accomplished it with a single click.
In terms of text, either "All airlines" or "Any airline" is good (assuming that it's the same in your app).
Icon ...
11
Maybe something like this could work:
Since you have such a small number of options just make them large, press-able buttons which display a checkmark once you tap them.
This list obviously scrolls off the screen but I think you get the idea.
download bmml source – Wireframes created with Balsamiq Mockups
11
Apple likes switches
Sliding switches were a nifty looking control way back when. They were one way for iOS to announce
"Hey, look! I like gestures. You should swipe stuff."
In a short list where you might want to flip your wifi or Bluetooth off to save some battery, it works okay. When you have a list of selectable items, iOS asks you to think of ...
11
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" ...
10
I would have a fist checkbox called something more descriptive like "All permissions" or "Admin". I would then make the other checkboxes visible (or active) based on whether that checkbox was selected.
This should be fairly easy to implement, and should be visually clear and fast to scan.
Example mockup:
9
The Chosen javascript plugin may be exactly what you're after. It compiles all previous selections in a nice stack while letting you continue to make selections.
9
In my personal view dropdowns are outdated and quite frankly rather annoying to interact with.
They are
fiddly when opening/closing,
most often they don't provide much help when scanning items,
when combined it is cumbersome to go back a level (e.g. you need to open the Main Heading dropdown again) and
when holding many items, a lot of scrolling back and ...
9
Whatever design you choose, think about placing some container which displays the current selected items, so that way users won't have to remember what they've selected previously by themselves, avoiding the need for scrolling back to double-check every selection. This way also the most relevant data for the action is showed separately from everything so it ...
9
Short answer: do not select any radio button. Leave them all unselected.
However:
This is a misuse of radio button control where (by convention) there always should be one (and only one) selected item.
Unselecting all items is not noisy (IMO) and recall same pattern used in other controls (for example combo boxes) where no selection means multiple ...
9
What names are there?
Microsoft calls this a List Builder. As does the 2006 book 'Designing Interfaces' by O'Reilly.
Google calls this in Material Design UI a "transfer list" (or "shuttle").
OpenFaces (an AJAX based component library) calls this TwoListSelection.
Virtuosoft has a couple variations on what they call Dual Listbox. Codeplex also has a ...
9
Try combining the section header title and master checkbox above the list.
I'm not sure what the rest of your ui looks like, but oftentimes a selectable list has the 'select all' up along the table header, or section header.
This way you can eliminate the 'all' option (which isn't an item in itself), and see the general state of selection right next to the ...
8
download bmml source – Wireframes created with Balsamiq Mockups
If you can have one and only one identification method, then let them select which they want to use via a group of 3 radio buttons and once they select one make the label and input for that identification method visible or have them disabled until selected via a radio button.
The ...
Only top voted, non community-wiki answers of a minimum length are eligible
