ruk·si

UI
Dropdowns

Updated at 2014-11-26 14:24

This note is about using dropdowns and combo boxes.

Avoid dropdown. Designers use dropdown because you can hide complexity under a button. But then you are just hiding your design problems under a rug. All in all, dropdowns menus are bad, but frequently easiest solution to implement.

Use toggle buttons over combo boxes. Limit the options and make the interaction flat to increase visibility.

// bad
Dropdown with 2 elements to select sorting.

// good
Toggle button with 2 possible states.

Use auto complete inputs over combo boxes. Prefer using auto completed inputs with optional dropdown functionality if your dropdown has more than four options.

Open submenus instantly. When dropdown has a submenu on hover, the submenu should open instantly, not after a delay.

Prevent accidental abort. Moving cursor in a straight path to your wanted item shouldn't close the dropdown.

// bad path from Menu 8 to Item 3, will close the menu
+--------+
| Menu 1 |
| Menu 2 |
| Menu 4 |
| Menu 5 |
| Menu 6 |
| Menu 7 |
| Menu 8>|+--------+
+--------+| Item 1 |
          | Item 2 |
          | Item 3 |
          +--------+

// good
+--------++--------+
| Menu 1 || Item 1 |
| Menu 2 || Item 2 |
| Menu 4 || Item 3 |
| Menu 5 ||        |
| Menu 6 ||        |
| Menu 7 ||        |
| Menu 8>||        |
+--------++--------+

Sources