What’s up with scrolling lists?
I recently worked on a long online subscription form, and during this project I had to ask myself several questions. How could I improve this form (which was already way too long)? How could I use the right components at the right time? And how could I personalize the components so they included the visual identity of our client?
It turns out that the most complicated part of designing this form this form was to find an alternative to scrolling lists!
Scrolling Lists: A Designer’s Worst Nightmare
“Classic” scrolling lists are a bit of a nightmare for designers (they are ugly and not really customizable) and yet they are a dream for developers (they are easy to integrate and respect basic accessibility rules such as keyboard navigation, for example).
However, these scrolling lists present several problems that are not insignificant for the user. Or in any case, for me as a designer 😉
Not customizable or little opportunity for personalization
Scrolling lists are not easily customizable at the design level and their display varies (on desktop as on mobile) as a function or the browser or system used:
Inefficient for limited choices
These lists are inefficient for limited choices because they make the user click twice, first to open it and again to make her selection.
Not Adapted to Mobile
When one opens a scrolling list on an iOS mobile device, the system opens a native picker, which makes selection from a long list tedious:
Native OS pickers can also cut off certain entries that are too long which don’t really mean anything for the user:
So What Do We Do?
For all the reasons mentioned above, quite a few smart people have thought about this (since several brains are more effective than only one 😉 to find an alternative to classic scrolling lists.
Short Scrolling Lists
For lists including fewer than 5 items, it’s a relatively easy solution because it is never recommended to use a scrolling list in these cases. We thus decided to use radio buttons so that the content could be readily visible and selectable:
Long Scrolling Lists
For lists including more than 5 items, we opted for the opening of a popup on desktop, with a little animation which two of us worked on (thanks, Laurent J.):
On mobile, this popup occupies the entire screen and appears from the bottom as a modal view. This enables the user to have a selection area that is much more comfortable than a picker and to concentrate entirely on the action to be done.
The component is partially developed and almost finished (thanks again, Laurent!). It complies with several accessibility norms and is compatible with all the main browsers. We started to test it and so far we’re receiving positive feedback.
We hope to finish it quickly. Let’s make it available to those who, like us, would like to yell “death to scrolling lists!”