Keywords: SELECT,drop-down list, drop down, pull-down menus, combobox (is not a dropdown, but many misuse the term)
Problem #1 – Long dropdown lists fall outside the browser viewing area
When the user clicks to open the dropdown the value that he wants to select falls off the screen, outside the browser viewport. If the user tries to scroll, chances are that the dropdown will close again. In worst case the user won’t be able to select his value with the mouse at all.
In Firefox (3.6.8), Landsend.com product detail quantity dropdown seem to position the dropdown list above or below where the dropdown control, depending on position of the viewport.
If this is browser dependant behaviour, are there researches or sites that force this behaviour?
– Dynamically shorten height of dropdown list (drawback is that you must scroll more to find something at the end of the list)
– Dropdowns are suitable for common lists such as country, but for long lists HTML links are preferred.
– Autosuggest (e.g. Hotels.com, Google Suggest) allows user to type and select from a dynamic list, but has its own issues…
– Add a ‘show more…’ link to bottom of dropdown
Problem #2 – Dropdowns pull attention
In one eye-tracking study
, the dropdown menu grabbed the user’s eyeball attention, no matter where it was positioned. Probable cause is that the dropdown is situated among empty textfields in a form, but looks as if it is prefilled which makes the user curious.
Problem #3 – Dropdowns are often skipped
In one usability test
, a dropdown was the first element in a form. Likely this is because it looks like a textfield that is already filled, so hasty users will skip it.
– Use a label with good copy. I prefer ‘(select your country)’ over ‘ — select your country —‘
– For this label, use a grayshade that is distinctly lighter than the black text colour used for filling in textfields.
– Add a form label in front of the dropdown, just like you do for textfields. Example: ‘Country: (select your country)’
– Keep the width of the dropdown equal to the width of textfields above and below it.
– Don’t make the dropdown (or radiobutton or checkbox) the first element in a form.
Are dropdowns problematic?
In favour of dropdowns:
– US users are more used to dropdowns, because they are used to selecting their State. International sites often ask for country.
Opposed to dropdowns:
General usabililty issues of dropdown menus
– Avoid long dropdown lists.Elderly have difficulty or annoyance of using dropdowns, especially if they are long. In some cases users don’t know that you can scroll inside the menu.
– Dropdowns affect user performance and error rate. Using the mousewheel you can change the selection inside the dropdown if the mouse cursor is over the dropdown menu. The dropdown is prone to accidentally change the value. In one form usability test the most common user error was the user had selected the wrong expiry year for his creditcard.
– Dropdowns z-index obscure other elements such as custom tooltips, lightboxes, Flash applets
Alternatives to dropdown
Radiobuttons – http://stackoverflow.com/questions/3339110/autocomplete-vs-drop-down-when-to-use
http://listserv.acm.org/scripts/wa.exe?A2=ind0009D&L=CHI-WEB&P=R3784&1=CHI-WEB&9=A&J=on&d=No+Match;Match;Matches&z=4 – discussion about various issues and usability test results of dropdowns
autocomplete (e.g. Gmail To field), autosuggest (e.g. many latest browser and Google Auto-suggest)
http://www.webappers.com/2010/01/04/easy-and-slick-way-to-do-auto-complete-auto-suggest/ and http://www.webappers.com/2007/06/08/ajax-auto-suggest-auto-complete-textfield/