1

EDIT: I edited the question, it used to say we could have thousands of items, but realistically it's more like 20-100. The question is about if or not to display the total number of items or not, not about if the dropdown is the correct approach in this case. Thank you for your feedback!

I am having a debate with my UX designer, and I would love to hear your input. In our application, we have a dropdown select, where we can select multiple items to filter stuff in a list. The problem is, this select may have 20-100 items, maybe more. So, we have two options, pagination or infinite scrolling. We have decided infinite scrolling is the way to go.

The part where we disagree is that the designer says we shouldn't show the total number of items in the list at first sight. He says the user should scroll, and then load more items, and continue doing this until he reaches the end of the list in hope of finding the desired item. He says this is best practice. In my opinion this is not good UX as the user has no way of knowing when this list will end. I say we should show the total number of items at all times. A bonus, would be to show which "page" we are in. As in "showing 1-10 of 87". What do you think? Thank you for your reply!

Should we show the total number of items in the list or not?

2
  • Is this mobile or desktop? Can the issue be fixed with a scrollbar? Most dropdowns I notice have a scrollbar that is responsive to how many items there are, so a long list would have a smaller scrollbar than a short list.
    – Gene
    Commented Aug 21, 2023 at 21:05
  • Desktop, however, we cannot get all the items at once due to performance reasons. Hence the need for infinite scroll.
    – Deramatrex
    Commented Aug 22, 2023 at 8:06

3 Answers 3

3

Nеither. A dropdown is not an appropriate control to select among thousands of items - because it might be a long process, with people changing their mind, canceling previously added items, double checking, using different strategies to select the items, etc. They shouldn't have to do it in a tiny and "fragile" (easily closed) flyout. Open it in a modal dialog and provide additional controls for filtering, sorting and generally getting around that amount of data. And yes, in that dialog it will probably be a good idea to display the number of items.

For reference, this is the way that Facebook handles a similar use case (selecting friends to invite to a group):

enter image description here

4
  • Thanks a lot for your answer Vitaly. We currently support searching, and in most cases, the dropdown will only have 20-80 items. It is a dropdown filter, so I think the designer will not accept having a modal. However, when it comes to the main debate, would you support my idea that we need to show the total of items since the beginning, or not? Thanks again for your insights.
    – Deramatrex
    Commented Aug 21, 2023 at 13:47
  • I am not the answerer to your question but I think whether to show it or not is immaterial; my guess is users don't care as long as they can search what they're looking for and find it immediately among a list, whether it's 20 or 1,000 items. About dropdowns vs listbox: NNG article nngroup.com/articles/listbox-dropdown Commented Aug 21, 2023 at 16:58
  • Okay thank you aswell! Users don't previously know what the items in the list are. So the search is useful but not so much. That's why the question is really about showing the total number of items or not. My opinion is that it's vital to show the total number of items, because otherwise you might be scrolling the infinite scroll without knowing where the end is.
    – Deramatrex
    Commented Aug 21, 2023 at 19:55
  • 1
    @Deramatrex I still have the feeling that you're trying to solve a problem that you're not supposed to have in the first place. Given the number of items, I believe that a dropdown is the wrong control to use - and this is evidenced by the fact that you're now looking for ways to enhance it to support your needs. Dropdowns with pagination and endless scrolling don't really exist precisely because of this reason - they're not meant for such amounts of data. In any case yes, showing the number of items will help them. Commented Aug 22, 2023 at 8:49
1

One factor to consider is how the items are ordered.

If the items at the top are very good matches while the ones at the bottom are obviously poor matches, then providing the total number wouldn't be necessary (in theory it could include millions of totally useless entries).

If the order is random (or based on some factor irrelevant to the search) then the user really should be told how long the list is (since the best item could just as easily be at the bottom as at the top).

The key idea is to make it easy for the user to decide when to stop looking at the list.

2
  • I agree. The list will likely be between 20-80 items. But in rare cases it would be more. "The key idea is to make it easy for the user to decide when to stop looking at the list." is my same point of view
    – Deramatrex
    Commented Aug 21, 2023 at 14:49
  • I would agree that order is important in this scenario. If the order is easily distinguished (i.e. ABC order) or organized in order of importance, then I don't see a reason the number would help. Would knowing that there are 100 items really help when you are on item 50 of this list? I think the exact use case factors into this also. Do users take into account the full number and keep scrolling for more options, or just stop when they find what they need? As long as the order of these items is selected properly then i don't see a need for numbers, but your use case may change that.
    – Gene
    Commented Aug 22, 2023 at 16:52
0

The question hints at a more fundamental problem: too many items in your dropdown.

Are you trying to solve an XY problem, as in: you believe Y (the dropdown) is your solution, and are discussing how best to implement it (lazy load vs display all), when instead you should focus on your real problem X, namely, how do I show this many filters at once / do I even need to show this many filters.

Go "up a level" and ask:

  • do my users really need all 80 filters?
  • are they all equally important?
  • how often do they use filter number 62?
  • can I abstract some of the complexity away?

If you must show 80 filters, and it must be in a dropdown, your designer is right to try and limit showing 80 on screen at once (especially in a dropdown, which might feel flimsy to a user). Consider breaking the list up into higher-order categories, e.g.:

  • Filter Group A: [A1, A2, A3]
  • Filter Group B: [B1, B2]
  • Filter Group C: [C1, C2, C3, C4]

But: only if it makes sense. If they are very 'loose' categories, you would only be introducing an extra hurdle for the user to find what she is looking for.

In short, asking how to maladapt a dropdown implies something has gone wrong earlier up the design chain. As another contributor has suggested, go with a more robust option like a modal and consider taking a look if you can't get that list down to something more manageable.

2
  • Thanks a lot for your thorough contribution Johnny. I will pass this on. In general, this dropdown will not have that many items. So we will have 10-30 items. My concern was that if initially the user doesn't know how many items there are in total, they will have to "guess" to scroll down, and then more items will be loaded, and again and again. So the debate is really wether we show the total amount of items in the beginning or not, not really if we should use a modal or not. Let me know what you think! Have a wonderul day.
    – Deramatrex
    Commented Aug 23, 2023 at 12:04
  • You might consider "peaking" the scroll function in the dropdown then. So like on Netflix, the last image in a row is cut-off, which implies the user can scrolls horizontally. App devs use this trick quite a bit (we never have enough space) to imply there is more going on below, or to the sides. Good luck. Commented Aug 24, 2023 at 14:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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