How can I determine the optimal number of items to show in the visible window of a list box?

Question

Is there a way of deciding how large to make a listbox, based on the items that it contains?

Take this example, listing a load of philosophers. Here there could be up to 300 items in the list. That means there could be a lot of scrolling to find the desired item, regardless of the size of the box, so potentially keeping it small would look less overwhelming on the page and might be the option to go with over a larger one.

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

However, when the contents of the list box are fewer it seems more logical to have a larger box, because you can display all the items (in this case below showing all 15 countries in South America).

^{download bmml source}

How do I decide how many items to have visible in the list box? Perhaps a formula of some sort ({Number of total items}/{something}) or just a good 'rule of thumb'?

(Note: This is just for example purposes, I know there may be better ways of displaying such information (autocomplete search etc) but for the purposes of this question I am only looking for information about list boxes such as this).

Answer 1

A List Box is in itself there to save space from a page, and to make it somewhat simple to select an item from a long list. I have found no recommendation on how many items to show at once. The only recommendation found is to not use a List Box when there are only two items (male/female) selection. The popular list box example is the country selector, where you can have as many as 200+ items in the list. Amazingly, very few country selectors use a filter box to allow for typing. That box makes the country selection faster and more accurate. Especially for us from Sweden. Scrolling is bad, but you can use the keyboard for the first letter. For Swedes it gets natural to type T rather than S since it finds the first S item and hides all other in the scroll.

The scrolling experience is exceptionally bad not only on Desktop. On mobile and tablet devices it is a cruel control. First, you may or may not access the list box with the first touch; you may need the second one just to access the control. Scrolling the List Box on mobile or tablet is very challenging, which makes it hard to use, and consequently very bad User Experience.

Therefore, my advice would be to

1. Add a filter at the top of a List Box
2. Make sure to show as many items that fits on the screen. If there would be more items than fits the screen, a modal dialog would be preferred.
3. If not all items fit the modal dialogue, implement paging in the dialogue with swipe access. That way you let your user select an item more easily than using a list box.
4. If that won’t suit your style, another option would be to use cascading dropdowns with divided content to reasonably logical entities. It takes longer time, but it is more accurate and less error prone.

However, on your last note, how many items to show? – my answer is as many as fits the screen size.

Answer 2

If you are aiming at desktop and mouse, have you thought of user resizable dropdowns?

Image from Google:

You could even remember the last size, and let users decide the best number.

Otherwise, there's no good answer to your question: it depends on the real estate of your users and how important (or distracting if there's too much) is the item information you want to show.

Answer 3

I would try to approach your question from a different angle. You should be considering what best pattern/tactic may be to solve the particular design problem. Otherwise you may be getting into the "square peg into round hole" pitfall.

You may want to start by considering the mental modal and goals of the user when they are trying to complete whatever task this product attempts to solve. This may bring up questions such as:

• Do they know what they are looking for?
• Are they browsing a list of options? If so, is only the name sufficient?
• Are there multiple items that need to be found at once?

Answers to these question may illuminate a better design pattern to use. Based on this design problem, regardless of the optimal window size for a drop-down menu, will the drop-down aid the user in finding whatever they are looking for?

As a simple example, lets take the "Country" field in a shipping form. This is pretty common design problem. There are many options available, only one applies, but the user knows the country that they need to define. There is no browsing. Hence, the best tactic for this problem is the auto-complete search. Sure, a drop-down menu typically exists in this pattern, but the point of interaction is the search.