We're designing a dropdown with about 10-80 items in it. To make it easier for users to find the items, We categorize the items and enable users to search items in the dropdown. However, the number of the items can continue to grow to 100-200. We're debating if we should have a link in the dropdown as an alternative to allow users to select items in a pop-up modal. We've never seen this pattern before in other products. Thoughts? Feeback? Any examples we should take a look at? :)
Today I've got an article from the Nielsen Norman group which covers your problem: https://www.nngroup.com/articles/drop-down-menus. They recommend alternative ways of representing the options, but perhaps typing the values might be a suitable solution, too.
There are two main situations your users could find themselves in:
- There are 200+ items and they know what they're looking for.
- There are 200+ items and they don't know what they're looking for.
Your current mockup looks like it will handle case #1 well--they could use that search box to begin typing what they're looking for.
Addressing case #2, however, is where you should likely give the user a bit more room than a dropdown might provide. In that case, you could consider providing a "Browse" action (button or link) near your dropdown that would trigger the modal instead of inside the dropdown. If you go this route, I might even consider moving the category expansion functionality to the "Browse" modal... Just keep the dropdown simple for users who know what they're looking for--let the modal contain all of your browsing and searching.
Following this pattern would provide a number of benefits:
- Allows your dropdown to just be a dropdown--consistent with the mental model of a dropdown. As you mention, you've "never seen this pattern before in other products"
- Doesn't get in the way of users that know what they're looking for
- Provides users who don't know what they want with more space (with perhaps additional search tools/filters) to find what they're looking for
Firstly, I would like you to tell me in what environment your application/site gets used (shopping, multi-media, ...) - because not every design fits for every category.
But have you seen the Amazon Website? Here is a screenshot of the German Site which offers way too many Categories and Items to fit in a single menu, so they display the most used ones on a "hover dropdown" and if you click on "Show All" you get to this "mess".
I don't like the design, it seems too plain for such a big company - but it works! Users know where to go and where to find something.
But what I think is a good Idea of displaying a lot of items is their "hover dropdown" - Does this way of displaying items fit? Let me know so I can edit my answer.
To answer you question: I too, like Michael Lai, think it is not too user friendly.
The list box with categories reminds me on the Krita painting application. In the Layers dialog are many composite/blend modes (comparable to Photoshop layer modes, but many more). They are grouped in categories and topmost is a category "Favorites". Each item can be made a favorite by a single checkbox tick and thus be made easier to find. Another possibility would be two list boxes: one for the categories and a dynamically filled second for the items of the selected category. Both solutions require two clicks, but reduce the amount for searching.