Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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: enter image description here

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

mockup

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.

share|improve this question
    
FYI, if you're not using "Chosen" as a combo-box, you might just look at their standard controls. The GUI on that has been really satisfying for our designers and developers. It's on github. –  tajmo May 11 '12 at 14:54
add comment

7 Answers

up vote 1 down vote accepted

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.

enter image description here

enter image description here

share|improve this answer
add comment

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.

share|improve this answer
add comment

There is not formula for that, however:

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
Be careful with leaving answers on this site stating 'I prefer' because it comes across as you leaving your subjective opinion. ux.stackexchange isn't for individual preferences, but for expert opinions based in genuine research and experience. If you state that you personally prefer something then those are not appropriate answers. However if you expand on this by stating 'in my experience users prefer that...' these are more appropriate answers. –  JonW May 11 '12 at 10:43
    
Thanks Jon! Will keep this in mind. It was really helpful since I am new to Stackexchange –  ajayashish May 14 '12 at 4:15
add comment

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.

share|improve this answer
    
BTW Current solution in most sites on the web for selecting country is to split it to two step at least. Maybe having two combos: one for continents and one for countries is right solution? –  kbec May 12 '12 at 0:17
    
I don't know that I've ever seen that approach; most everytime I need to select "New Zealand" from a list, it's from a single enormously tall combobox. –  Bevan May 12 '12 at 3:23
    
@Bevan: Visit hp us home and try to change country/language. You can see this approach. Of course it's using no combos, but idea is the same. –  kbec May 12 '12 at 12:03
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.