Filterable WSDropdown with many items lacks UX clue for number of elements

[wormangel]

Hey all,
The filterable WSDropdown is cool because by filtering the user don't have to deal with scrolling a potentially huge list of elements, but I think it's a bit confusing for the user to actually realize that the list has more elements than .

I made a quick gif of the behavior, the limit is default (10) and the list has 50 elements.

Notice in the beginning that unless the user has previous knowledge OR you tell him somewhere in your screen OR you tell him by using the placeholder text (which can lead to increase the horizontal size of the dropdown menu), the user has no way to tell that the list has 50 elements, unless he starts typing.

I'm no UX guru, I don't know exactly how to give the user a feel that there are more elements without resorting to a scroll bar (maybe som text close to the filter field? but then it would get long like "This list has more elements. Type to filter", probably not cool).

Anyway, keep up the great work!

[schluchter]

@myueksel Can you please look into this? Lucas has a great point about the usability of the Dropdown.

[fragsalat]

Any suggestion about this from @wholesale-design-system/ux ?

I would say:

1. We could make this scrollable with the default OS scrollbar
2. We could create a own scrollbar which uses javascript but looks everywhere the same
3. We could show no scollbar but let the user scroll
4. We could show a link with "show more" which shows the next x items

I totally would propose the 4th solution for the reason that it is much more performant because we only have to render 10 items instead of 5000 (for instance on sub units). So on click we would show another 10 items and the dropdown gets larger instead of a scrollbar.

[schluchter]

Thanks for the proposal, @fragsalat. I'm skeptical about the 4th solution for two reasons:

1. It is fairly unusual
2. The size of the box will grow each time I click, and at some point it becomes bigger than the screen

In order of my preferences, I would vote no. 2, then no. 1. Maybe start with 1 and see how ugly it looks?

Thanks!

[fragsalat]

@schluchter this is the worst performance wise. Just remember that we have like 7000 brands, 4500 suppliers, and some units and so on. To render all of those is not performant and no one want's to scroll those. It probably is an edge case that a user wants to see more.

To make a compromise I would suggest a combination. A link at the bottom which is about "show all" and if the user clicks it becomes scrollable. So we have a good initial performance but the user still can see all

[wormangel]

Just bear in mind that my comment was about the filterable dropdown specifically: if the list is too big, it's OK "scroll-wise" because people would probably type in the text field anyway. The point was more like: there is no indication whatsoever that there are more than 9 elements (in my example) in the list.

The "show all" idea sounds good 👍

[ghost]

Is there any way to make this menu work like an "endless scroll" to fetch more and more items as the user scrolls? And still be reasonably smooth

[AdrianDampc]

For short and medium lists: I agree with @schluchter, scrolling is the most natural and expected behavior.

For longer lists: do we really need to render everything? Can't we just render ex. 50 and then automatically render more during scrolling (like auto "show more" button)?

Another thing is the question, how many people would go through the list of thousands elements instead of typing a name? My guess is - no one (sane). IMO showing limited list (50? 100?) before you type anything should not cause any real user problem.

About scrolling we need scrolling element anyway and standard scrolls looks ugly (I have seen it!).

[ghost]

Instead of "click for more" or visible scrollbar, maybe different hint for "there's more down here" could be used, for example a double downward arrow, that also possibly moves a bit.

Something like this (sorry huge image): https://maxcdn.icons8.com/Share/icon/p1em/Arrows//double_down1600.png

[fragsalat]

@fabric-design/ux any news here? I would like to implement it right now

[wormangel]

Someone just asked here "why there is no scrollbar or something in that dropdown?" :-)
Any news?

[fragsalat]

No ux decision taken yet.
I suggested multiple possibilities.

[wormangel]

My 'everyday internet apps user' persepctive: if there are more elements, there should defnitely be a visual cue (like the arrow suggested by @jseb). But then if there's a visual cue saying that the list is longer than what I see, I do expect it to be scrollable. Regardless if the loading is on-demand (better) or loading everything when the list renders (noooo), I would try to scroll it definitely, maybe realize there are too many elements and then use the smart filter.