276
votes
Accepted
Should a dropdown list be closed when mouse leaves?
For consistency, the behavior should be based on the calling action; click or hover.
If you are opening the dropdown on click, let the user toggle and close it, or close the previous dropdown when ...
80
votes
Should a dropdown list be closed when mouse leaves?
The answer to this question is part of a more general UX rule: moving the mouse (without a button held down) is not input, and applications should not respond to it by taking any nontrivial action. ...
46
votes
Is there a design pattern for dropdown lists in iOS?
Even though Apple recommended (and surprisingly still recommends) pickers for dropdowns, not even they use it anymore. Spoilers:
In both these cases, the "logic" would dictate to use a dropdown + ...
43
votes
Should a dropdown list be closed when mouse leaves?
I honestly think that hover menus are bad UX entirely.
I suspect the only reason they exist in the first place is that they are easier to implement in pure CSS, so the developer can get away with ...
35
votes
Is it okay to use a dropdown chevron in a checkbox?
My initial thought is that I'd personally avoid attaching a chevron to the checkbox like you've got in your screenshot because it's an atypical design pattern and therefore pretty safe to assume that ...
28
votes
Is it okay to use a dropdown chevron in a checkbox?
There is a similar UI for managing exceptions in Visual Studio, which is fairly intuitive:
The key differences to the UI you have shown are:
Chevrons/arrows appear to the left of the top level ...
23
votes
Should a dropdown list be closed when mouse leaves?
I agree with DPS's answer, however I'd opt for explicit behaviour - thus clicking to open and clicking (or pressing Esc) to close.
Why not "on-hover"?
If the user opens the dropdown and ...
21
votes
Accepted
Should selected options be removed from single- and multi-select dropdown lists?
Good question, also props for differentiating the two different scenarios. I think that you are in luck because there is indeed just a simple correct answer:
Do not remove selected options from the ...
12
votes
Should a dropdown list be closed when mouse leaves?
...Or you can consider changing the design altogether. Personally I think it's not a good idea to hide functionality under three dots.
Show actions on hover
You can remove click/hover altogether by ...
11
votes
Should a dropdown list be closed when mouse leaves?
You might consider adding a way for the user to close the drop down. This way there is no confusion on how to close it and no annoyance of accidentally closing it by moving the mouse out of the area.
9
votes
Should a dropdown list be closed when mouse leaves?
I happen to find that behavior quite annoying, especially with nested menus, on YouTube on a HTPC. The remote mouse is easy to get off track and wham I have to start over. Anyone with less than ...
9
votes
When to start opening the select list? On mousedown? Or on click? And Why?
From an accessibility point of view, It is recommended that the event should be fired on mouse up rather than on mouse down.
This will be helpful for users with dexterity/motor disabilities, Who ...
7
votes
Accepted
Should drop down menu items repeat currency symbol?
Since I cannot see the harm in putting the currency symbol on all the values I would suggest the first option. It might help save an error if you have more than one drop-down with another currency.
...
7
votes
Amazon's Website Search Bar
When you hit the spacebar once again, Amazon treats it as an incorrect word and highlight it.
Same happens with Google - when you enter an incorrect word, it highlights it.
Entering an incorrect ...
7
votes
Is it okay to use a dropdown chevron in a checkbox?
When clicking "Backup Media Library", should it select/unselect, or expand/collapse?
It should select/unselect. This is the default behavior and makes the checkbox more accessible.
If the ...
6
votes
Should a dropdown list be closed when mouse leaves?
Apart from what DPS answered, which talks about consistency, I would suggest you go with the click instead of hover. It seems like you have a grid layout, and am sure you don't want to annoy your ...
6
votes
Accepted
What should be default value of select (drop down list)?
I wouldn't say there are guidelines as such, but most design systems provide an insight on how to use dropdowns. Here are a few examples:
Material Design: Exposed Dropdown Menu
IOS - Pickers
...
6
votes
multi selection dropdown - with or without checkbox
If your question is whether or not to use the checkbox, I think it looks better and does have a better user experience with the checkbox especially the unconscious overview it gives the user while ...
6
votes
multi selection dropdown - with or without checkbox
Checkbox is an indicator for users to quickly understand the multiple select option.
5
votes
Accepted
What is the best way to categorize or represent a list of top-level domains (TLDs)?
The best? Only testing will tell.
Going to both your examples, the second one is way better from an user point of view. See both dropdowns: one has a list of TLD and nothing else. The other, a list ...
5
votes
Accepted
add your own entry to a select list
A standard way of solving this is autocomplete. For instance, here is how it works in Jira.
User starts editing a field. There are options to accept/cancel the input:
User may click the down arrow ...
5
votes
What should be default value of select (drop down list)?
There is no "best practice" here, those two options are completely different.
Pre-selected - use if you have a reason to believe one of the options is most likely (this can be based on most popular / ...
5
votes
Amazon's Website Search Bar
It is the way the autocomplete is designed.
When the user starts typing a word the application goes through the previous/popular searches and displays the possible continuation in block letters on ...
5
votes
Accepted
How do I show the selected items in an easier manner in this dropdown
Some alternatives:
Filter Tags: No need for users to click to expand the dropdown. They can see which ones are applied and remove them if wanted.
Summary of Selected Filters: Group selected options ...
4
votes
What's an alternative pattern for a dropdown with between 150 to 215 characters per option?
Considering your design layout, I really think the best option is to use either checkboxes or radio buttons (depending on whether the user can select more than one option or not).
Below is a quick ...
4
votes
Why the magic number 5 in dropdown list?
It's because of one of the vital UX Law called as Miller's Law.
George Armitage Miller (Princeton Professor and Cognitive Psychologist) formulated a law based on his observations and findings in his ...
4
votes
Drop down behavior
I think if I was using your interface I would appreciate the drop-down staying open. Imagine this, I'm about to select some information in a drop-down, but it's some very "serious" stuff. I need to be ...
4
votes
Search multiple dropdown lists
If using multiple drop-downs isn't necessary, I would use a single text box that would ask the location. While I am entering the Texas word, it can suggest "Texas, USA". Because entering country name ...
4
votes
Can a drop-down have radio button?
Usually, dropdown is used to select one or multiple values for a given form field. Alternatively, it's also used to wrap common navigation links into a component.
The design which you intend to use ...
3
votes
Is there a design pattern for dropdown lists in iOS?
For those coming from google: Since iOS 14 there are pull-down menus in iOS. After iOS 15 they were renamed as pull-down buttons.
Here is a link to the guidelines: https://developer.apple.com/design/...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
drop-down-list × 194dropdown × 67
multi-selection × 17
usability × 16
forms × 14
lists × 14
filter × 13
search × 11
gui-design × 10
selection × 10
mobile × 9
input-fields × 9
checkboxes × 9
select × 9
website-design × 8
navigation × 7
design-patterns × 7
radio-buttons × 6
interaction-design × 5
web-app × 5
menu × 4
input × 4
consistency × 4
options × 4
buttons × 3