2

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.

mockup

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).

mockup

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).

  • Why not size to screen space available. If my list only has 20 and there space available I want to see them all. – paparazzo Jan 16 '15 at 16:32
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.

enter image description here

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.

  • 1
    This is great, it is indeed painful to use dropdowns on mobiles and I always find it a challenge to implement it across systems (iOS/Android) and usually find adding an extra screen with a list that goes back once you choose an option a nice solution which might be translated to desktop as a modal box as you suggested. – Taly Emmanuela Jan 16 '15 at 13:27
  • 1
    I feel the pain for the 'S' key since I'm from Spain, and that's in the middle of the list (and worse yet, some times it's translated, so it's "España", and you never know how it will appear at first glance) – Jcl Jan 16 '15 at 16:13
  • 1
    @Jcl You have it even worse than we Swedes. You have E, F, S and Tnto search from. That's really bad... – Benny Skogberg Jan 16 '15 at 16:41
1

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

Image from Google:

enter image description here

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.

  • Putting control into the users hands is a nice idea in principle, but 95% of users don't actually change their settings so I'd have to get the default right first time anyway. – JonW Jan 16 '15 at 16:07
  • @JonW you could do the opposite, make the default so bad that users have to change it and learn how to do it :-) jokes aside: one could use a flyout window that points them on how they can change it the first time(s) a dropdown is shown. I have found this to be really useful based on experience (distracting for power users though, so it depends on the target audience I guess) – Jcl Jan 16 '15 at 16:10
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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