274

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 user clicks on another thumbnail. If you are opening the dropdown on mouse-over, close it on mouse-out.


80

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. Trivial actions include things like adding/removing underline, changing color, or performing a small, spatially isolated animation to indicate clickability. ...


42

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 something the user doesn’t necessarily want. Here are some points to consider: Most operating systems wait for a user click before activating a menu. The hover ...


35

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 + picker. Apple chose a much better solution for their own apps. Still, a whole screen to pick between "Female" or "Male" (pardon the binary example) seems ...


24

In this situation, I would not use a drop down until you need to. Using a drop down with one option will be annoying to some degree because people will click on it and expect more choices but not find any. Also, people will be trained to not click on that drop down because its 'useless'. You'll have to somehow retrain them to look for the new options if/...


23

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 makes a more generous mouse move (move away the cursor to read all the options) - the menu disappears increasing the annoyance. There is something else I'd like to mention ...


21

There is no recommended maximum number of items to put in a drop down list. No-one can say the maximum is 7 or 12 or 200 or 10,000 and definitively say that for all scenarios, that is the maximum you should use. There is a myth for drop down lists and menus that you should not use more than 7 +/- 2 because that's how your memory chunks things, but that's ...


20

Fulfilling user expectations is a fine goal, but it’ll only get you so far. Unexpected results are not themselves bad. Sometimes they are even delightful (“Surprise!”). However, unexpected things in a UI are a sign of a usability problem. To resolve conflicts between kinds of consistency, you need to analyze the situation for the impacts of violating ...


18

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 travel sites (AirBnb, Kayak, any airline, etc.) Kayak shown below. Fred Meyer (big-box retailer) has a 'Select Store' search box to solve this - requesting you ...


15

The only time you should use a dropdown where there is only one available option is: to stay consistent with pages that have many options for the same selection. For example: You are shopping for a new pair of shoes and are currently looking at a style that has sizes 5-14 available. These sizes are displayed in a dropdown. You click on a different style ...


12

...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 showing actions straight on hover. I'd argue it's better since you save the click (I'm not showing move/rename for brevity). Show actions in the main screen ...


11

The language for this default option would be entirely dependent upon the context. In general, however, the copy you do use should be unambiguous. It should clearly inform the user what the result of their non-selection will be upon the state of the system. For example, eBay allows a seller to choose whether they would like to offer shipping insurance to ...


11

iOS makes it much easier to use "Pickers". These may work depending on what you need the "Dropdown" to do. See new link https://developer.apple.com/ios/human-interface-guidelines/controls/pickers/


11

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.


10

Radio buttons actually have a very different physical analogy than the paper one you mention: That's also why they are called radio button. I don't know who invented the combo box or how he came up with the idea. I don't think that anyone here will be able to state with confidence how the inventor came up with the idea. I do think your statement that with ...


10

The overlay is faster when picking neighboring values. Selecting the next (or previous) value is useful when... Making a font size a little bigger (or smaller). "Trying out" each font in the list (one at a time) to find the "correct" one. Changing the quantity when ordering a product. Picking the correct option, after overshooting (with the mouse) and ...


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

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 perfect dexterity will find this to be annoying. Please don't make the precise path of the pointer a necessary part of the UI. Some people have mobility issues, ...


9

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 might accidentally click on the list without the intention to do so. So when the event is fired on mouse up, that will give these users a chance to cancel the ...


8

What you are describing is a Combobox and has been in use for as long as I can think about GUIs. The concept has gained new momentum in the web with the further development of dynamic elements and web apps – most notably google's search box with it's suggestions-as-you-type. Chrome's "Omnibar" is, basically, the same thing: It's a text field you can type in ...


8

A quick search found a Wikipedia page with religions ranked by number of adherents. That seems as good a list as any. Just define your cutoff number for minimum popularity and you have your list.


8

I would recommend going for Radio buttons since you just have two items to show and using radio buttons you can show the information up front Instead of having the user click on the dropdown list and then select a language. To quote what this article on dropdown lists says on when to use to dropdown lists If there’s anywhere between 7 and 15 options, a ...


8

As long as it is clear from your formatting of the links that they are links, you shouldn't have a problem with this. It is basically a drop down menu, and they are used all over the place without too much of an issue. Additionally you are using verbs in the menu items, so it is clear that selecting one of them will perform an action.


8

Dropdown lists came out of good design, just like radio buttons :). It's not about importing an analogy from the physical world, it's about providing a solution to a design problem. There was a need to let people choose out of a list of options, without having the list take up all your real estate. One solution would be to put the list inside a modal window, ...


7

I think you should check http://loopj.com/jquery-tokeninput/. If you have many checkboxes, I think it is not good to show all checkboxes. However, Tokeninput can let users to check multiple checkboxes as tagging. Therefore, you do not have to worry about how many selections in a database. Downside is that users will not know all choices they can select. You ...


7

You could just have one input field that handles city, state, or post code as is pretty common with these things.


7

Menus are a navigation element and so what make the most sense is whatever makes navigation easier for your users. Your first example is a good menu, as although you have only one item under 'Otters', it wouldn't make sense renaming 'Otters' to 'Sarah' as it would then look like 'Sarah' were a type of animal. Additionally, if you get a second otter to keep ...


7

First I would add an information text beside the + button to let the users know how to use it. What I would worry about is, when the dropdown list will hold a lot of values, it will be very laborious to find the wanted value. So many users will just add the value they're searching for without looking if this value is already there. This could generate ...


7

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. Can you think of any reason why you wouldn't?


7

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 word:


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