Forms: the Death of Scrolling Lists?


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:

Scrolling lists
             Display difference between PC and Mac of a fixed list
 Scrolling lists
Display of a “classic” open scrolling list

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.

 Scrolling lists
Two clicks are required to open a scrolling list containing few items

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:

 Scrolling lists
For very long lists like nationality, picker based selection is tedious

Native OS pickers can also cut off certain entries that are too long which don’t really mean anything for the user:

 Scrolling lists
If the labels are too long, they are cut off by the native OS’s picker …

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:

 Scrolling lists
No need for a scrolling list for a choice between fewer than 5 items

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.):

 Scrolling lists
Display of the list on desktop

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.

 Scrolling lists
Display of the list on Mobile

What’s next?

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!”