Contents
In General, Avoid Drop-Downs When There Are More Than 10 or Fewer Than 5 Options. Drop-downs quickly become difficult for users when they are presented with an overwhelming number of options to choose from. Take, for instance, a commonly included input in checkout forms, the “Country Selection” drop-down.
Have the select be custom styled by default, but when you click it, it opens the native dropdown menu (in place). When you select an option it displays the custom styling again with the choice shown. It’s a lot of work and easy to screw up, so beware. This tutorial deals struggles through some of that.
How are drop down menus different in different browsers?
The UI of drop-downs differs from browser to browser and OS to OS, and the drop-down will not only look different, but will also work differently. For example, on a Mac, Safari and Chrome force users to hover on an arrow to scroll up and down, whereas Firefox provides a traditional scrollbar.
What happens when you don’t use the drop down button?
If the mouse cursor is outside of the drop-down, users will most likely scroll down the page instead of the drop-down, hiding the drop-down options from the screen. In some browsers, however, the drop-down will actually scroll as long as it has focus, likely leaving users with erroneous data. 3) Inconsistent UI.
In recent years, a new drop-down navigation technique has been used; it is called the mega menu. It is basically a menu that displays all of the menu options for a particular drop-down in one large menu instead of a narrow, single level drop-down.
Drop-Down Usability: When You Should (and Shouldn’t) Use Them. Deciding when to use a drop-down — or when to use another interface type, such as a radio button interface or open text field — for a specific input can be tricky.