Thoughts on having different behaviours for the same component

Question

We have a dropdown with 2000+ items (should it even be a dropdown?) with the ability to search. And it's a tree select dropdown.

The problem arises when one wants to edit i.e. a value was already selected and now one needs to change. Ideally on clicking the dropdown, it should scroll to the section with the selected value. Considering there are 2000+ items in a tree structure, we paginate the data. We have two options at this point

1. Load all the data first and scroll down to the selected section before enabling the dropdown (it's in the loading state), which would take about 15 seconds, and then scroll down to the selected section

2. Load the dropdown component quick but it doesn't open with the section showing the selected value but rather at the top of the dropdown

We've introduced a middle ground solution: We populate the search with the selected value and show the results. This way there is a higher chance that the user will see the selected value without having the wait for the component to load (case 1). It works to an extent with the hypothesis that the user would want to change the value of the dropdown only in instances that they selected the wrong value by mistake and even the first selection they made would have been via search.

With the middle ground solution, we have a new problem - we have other drop downs with much less data as well as the pre-population of search does not make sense as they want to fundamentally select a completely different option.

What's the best way forward with this? Anyone face a similar problem before?

Answer 1

With that many items! The drop-down is definitely not the correct widget to use. When you have that many records the user probably doesn't want to scroll through that lot.

Consider an alternative design to your problem. I recommend you use a search & browse pattern, which is more aligned with the goal of your user - to find and select the correct item, as quick as possible.

If that list of 2000+ contains some obvious grouping (aka facets), you could use the faceted navigation pattern - this is what Amazon uses very well. Amazon blend search and browsing and ensure the user can always get to what they want quickly.

If there are no obvious grouping in that 2000+ list, your goal is to provide a mechanism that progressively reduces this number in to something much more manageable. So you could use a shuttle control, which contain two list boxes.

• The list box on the left, lists the 2000+ items. There should a search field over this list box
• The list box on the right, lists any selected items
• Between the two list boxes are Add and remove buttons

Once the user has found an item in the left list box, they would click the Add button to move it into the list box on the right.