55
votes
Accepted
Should a country name in a country selection list be the country's local name?
It depends on the purpose of the dialog. A customer filling out his shipping information, for instance, would reasonably expect countries to be listed using the same language as the rest of the ...
51
votes
Accepted
Is there a UX pattern for "drop-down preferred but free text allowed"?
Worked on a project with this exact problem. We needed a way for the admin staff to add attribute to products. Because attributes are used for search purposes, we need to ensure if that attribute type ...
46
votes
Which way should arrows point for a dropdown button?
I would consider two things here:
Visual connection to action
Common standard implementation
To the first point - visual connection: If you see an arrow that points up, you expect something to ...
45
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 + ...
45
votes
5-6 choices: Radio button or drop down?
Guidelines
The Apple OSX Human Interface Guidelines (2012) recommend a drop down if you have more than 5 options, while the Microsoft Windows 10 User Experience Guidelines recommend a drop down if ...
42
votes
Which way should arrows point for a dropdown button?
A button should show what will happen when it is next clicked - not point to something else.
When the button above a closed menu is clicked, the content will drop down - so the should point down (to ...
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 ...
29
votes
Accepted
Dropdowns & Chevrons for Right to Left languages
What a great question. As a general rule, it's good to flip positioning of iconography for RTL languages. So your bottom option, with the chevron on the left, is correct.
If you're curious, I'm ...
28
votes
Is there a UX pattern for "drop-down preferred but free text allowed"?
The first idea failed field testing and variants failed usability testing
It sounds like we had the same idea as your option 1, and we implemented it. We were looking for a way to force users to ...
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 ...
27
votes
Which way should arrows point for a dropdown button?
Arrows pointing in our reading direction (right or down) point forwards. Buttons should indicate what happens when clicked. The arrow on a dropdown button should point right or down as it indicates ...
21
votes
Is there a UX pattern for "drop-down preferred but free text allowed"?
My answer shows simularities with others posted here but I want to emphasize how important the right communication is.
For example:
Reconsider the used language to make the intentions clear. For ...
21
votes
What's a better way to enable a feature – checkbox or dropdown?
Option B with a slight modification of the text:
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 ...
20
votes
How should a coloured dropdown be styled using Google Material?
Given your requirement:
Each status has it's own associated colour and would ideally be displayed in the list
Then we're not discussing if there should be a color or not, question is how to ...
18
votes
Accepted
Alternative to dropdown with over 6000 values
For any select list of over a couple dozen options, free-text search with autocomplete support is the only sane option.
This is a common pattern seen on real estate sites (Zillow, Redfin, etc) and ...
14
votes
Accepted
Menu with dropdown, root element clickable?
There is a background issue here which is: Should the sub-menu open on click or on hover?
If you choose to display it on click, it is clear that you can only use OptionA (ServiceA, ServiceB, ..., All ...
13
votes
What is the best way to collect a yes/no answer to a required question?
There're three cases that you have to be able to identify: yes / no / not-specified (i.e., user did not interact with this element). But if you pre-select yes or no then you won't be able to ...
13
votes
What is the difference between popover menu, drop-down menu & fly-out menu?
No, all are different.
Popover Menu:it is used when we want to collapse all secondary items or actions (Ex:Edit,Save,Refresh,Delete) to show on single click trigger (icons or buttons). regularly it's ...
12
votes
Which way should arrows point for a dropdown button?
Since you're asking about the direction of the arrow, you might like to check out the Microsoft standards for glyphs and arrows.
Scroll down from here, to the table that lists the different types of ...
12
votes
Accepted
How should a coloured dropdown be styled using Google Material?
Short answer: Use your second option, where each field has a neutral white color as the color is not classifing elements in the list.
Color should be used to give distinction with other elements from ...
12
votes
What's a better way to enable a feature – checkbox or dropdown?
There's a fair amount to unpack here.
A lot of this is dependant on context within the product, context within the page, and the core users.
If your users are in a hurry, almost always choose ...
10
votes
Accepted
Dropdowns within dropdowns
Meh
Personally, I find this menu in a menu solution irritating. It comes with some inherent missed-click risk that could lead to accidental menu abandonment. It’s something worth testing, but I'd have ...
10
votes
5-6 choices: Radio button or drop down?
According to Checkboxes vs. Radio Buttons (Nielsen, 2004):
If possible, use radio buttons rather than drop-down menus. Radio
buttons have lower cognitive load because they make all options
...
10
votes
Should a country name in a country selection list be the country's local name?
I can't find an article at present but standard convention for languages at least, is to show both the name of the language in itself and in English.
For example if you go to a website in English and ...
10
votes
Accepted
What is the opposite symbol of "empty"?
Seeing that ∅ is your choice for an empty value, for non-empty one you can just prepend it with the negation symbol: ¬∅, or !∅.
As far as UX goes, this will only be instantly clear to people who are ...
10
votes
Accepted
Dropdown with a create new button
I'd be wary of hiding the project creation functionality inside the select menu for several reasons:
Select menus don't typically contain buttons, or trigger actions just by making a selection, ...
9
votes
Accepted
Select from a dropdown (or autocomplete) or add new item in same create / edit view
Here’s a good working example of an integrated “creatable” select list with Jed Watson’s react-select component.
You can select from an existing set of options, search them with autocomplete. If you ...
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 ...
9
votes
What's a better way to enable a feature – checkbox or dropdown?
Design (B) seems superior from an ergonomics standpoint.
With design (A), if I want to enable and configure the feature, I have to interact with two widgets instead of one. Using keyboard navigation, ...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
dropdown × 388drop-down-list × 65
forms × 48
usability × 45
navigation × 45
menu × 38
gui-design × 24
selection × 24
website-design × 23
filter × 21
multi-selection × 21
radio-buttons × 20
select × 20
buttons × 18
checkboxes × 18
mobile × 14
search × 14
interaction-design × 13
tables × 13
lists × 13
input-fields × 12
autocomplete × 12
user-expectation × 11
hover × 10
design-patterns × 9