Don’t combine page scrolling and pull-down menus

This is going to sound pretty obvious to most UI designers out here, but pull-down menus and page scrolling offer two confusingly different outcomes to the same “downward movement” interaction. I have observed that mixing them creates significant usability problems and should therefore be avoided.

To scroll down a page, you can:

• use the browser’s scroller on the right of the window
• press the space key
• roll your mouse’s scrollwheel
• press the down or page-down keys on your keyboard

However, the last two interaction methods are also available on scroll-down menus. When using one of those two methods and the page or a fixed element has focus, it’s the page that will scroll. But if a pull-down menu has focus, then it is the menu’s selected option that will change, while the page won’t budge.

Imagine the situation of a form that features a pull-down menu, but is longer than one screen and requires scrolling to access the submit button. The user begins with setting the value of the pull-down menu, then wants to submit the form. For that, he tries to scroll with his scrollwheel, while the pull-down menu has focus. Chances are, the user will think “nothing happened”, click again on the page to give it focus (a reflex behavior I’ve observed in many users of varying skill) or reach for the window’s scrollers instead, scroll again, and submit the form with a value modified without his knowledge.

An interesting point: using the window’s scrollers will not make the pull-down lose focus. So the element with focus can very well move out of the page area that’s visible on the screen. Use the scrollers, then the keyboard, and you’ve changed something without a single pixel moving on the screen!!

Pretty bad, already, but it can get worse. It’s considered bas usability to link pull-down menus with interaction (I seem to remember that this sensible rule comes from the Mac Usability Guidelines). Nonetheless, you sometimes will do so: for example to change a subscription form when the user selects another country, in order to dodge an equally-bad initial “which country are you from?” question, irrelevant for 95% of the users.

In that case, while the user is expecting to continue interacting with the page, it is actually changing under him, a most annoying behavior that will dramatically undermine the users’ trust in your system.

My solutions: 1/ avoid mixing page scrolling and pull-down menus, 2/ avoid binding behaviors to pull-down menus, 3/ avoid pull-down menus altogether, if possible.

About point 3, it’s to be noted that pull-down menus with very few elements can be advantageously replaced with radio buttons or links.