What's the optimal height for a dropdown/combobox?

Question

I found this question, and while listboxes are cousins of the dropdown box, I think there are unique properties of combo boxes which require a seperate question.

I am working with a javascript replacement for a combo box to allow for better skinnability. Since this is essentially a custom control, I thought I would tweak the height of the dropdown to something optimal as well.

This question on stackoverflow talks about the different rules for different browsers:

(a) the height needed to show all entries, or 
(b) the height needed to show (x) entries (with scrollbars to see remaining) 
     (20 in Firefox & Chrome, 30 in IE6,7,8, 16 for Opera 10, 14 for Opera 11, 
      22 for Safari 4, 18 for Safari 5, 11 in IE5.0,5.5) 
(c) In IE, if there are no options, a stupidly high list 
   of 11 blanks entries. 

And this can be seen in the following screenshots:

Another possibility is to set the height of the drop down to span the whole viewport (and add scrollbars as necessary):

^{download bmml source – Wireframes created with Balsamiq Mockups}

Can anyone provide research/evidence/experience as to optimal heights of comboboxes? There seems to be quite a large difference if we look at the rules provided by browser vendors.

Answer 1

Dropdown is notoriously difficult to re-create. There are many good reasons to use browser's dropdown as is, and the below screenshots demonstrate one of them: depending on positioning of the dropdown, size and position browser window, the browser can display the dropdown outside its chrome to maximize usability. You can never do this with a javascript dropdown.

There are other pitfalls as well... such as the development time needed for building keyboard support, etc. This alone is not trivial.

I've been down this road before, so I just wanted folks to be aware not-so-obvious benefits of browser dropdown.

But to answer your question, 16-18 is a good number if you're building a normal-size javascript dropdown. Any more than that, and you risk running into double-scroll or cropped menu situation, which javascript dropdowns are often ill-equipped to deal with.

Answer 2

There is no standard among browsers regarding the default size of a combo-box because there is no standard at all.

I know your question is not an alternative, but we should consider this Jackob Nilsen's quote:

(...) regular drop-down menus typically hide most of the user's options. Yes, you can scroll, but (a) it's a pain and (b) scrolling down hides the initial options. As a result, you can't visually compare all your choices; you have to rely on short-term memory. People have enough on their minds, and messing with short-term memory reduces their ability to accomplish their tasks on your site. Mega drop-downs show everything at a glance, so users can see rather than try to remember. (Source)

The link above talk about the use of a Mega Dropdown Menu rather a combo, an interesting read about how to provide better ways, since regular Combo-boxes annoy users.

The ideal size depends of how easy users can absorve everything at a glance, and as a personal oppinion, the size should be confortable as a paragraph size, from 5 to 15 lines, since we are used with this ammount of vertical scanning.

Answer 3

There is not formula for that, however:

• You should keep the height standardised among the browsers. You don't want users to have different reactions, just because they use different browsers.
• Keep it above the fold.
• Or, have you researched for alternatives like http://uxmovement.com/forms/make-country-selection-faster-with-autocomplete-textboxes/?

Answer 4

I think its a good idea to use a searchable Dropdown list in order to give flexibility to the user where he can just start typing to have his choice shortlisted or just use the regular drop down.

A simple jQuery function for ComboBox should help you active this.

That said, the drop down should not occupy more than 1/3rd space above the fold.

Answer 5

Why not leave it with default height?

1. Every particular user is used to work with combo as it usually appear on every single site. When you alter this behavior, some users won’t notice, while others may find this uncomfortable. BTW will it be suitable for displaying on mobile phones?

2. Do not place too many items in combo (personally I never place more than 100) so combo will be comfortable to scroll and search through. If you have to display a lot of items in combo, most probably there is something wrong with this control. In your case: if there are a lot of items in combo, its not a control's problem, it's a developer's problem.

In my app, I have a combo to select street of a city (while entering address) If there are less than 100 items, they appear as a combo, otherwise as a textbox with autocomplete.

Answer 6

I prefer editable dropbox when I understand the user knows the list they are selecting from. Like the example of countries, I prefer to start typing and the closest match will show in dropdown.

As for the height of dropdown, I prefer it to be 10-15 items in the list and more than that will make it difficult to scan and concentrate.

Answer 7

In this case I suggest to code own combo with sections support and split countries to continents or something. Do not use combo for large number of items, because there is no optimal height for that.