Best practices for displaying 20+ options

Let’s say you have 20 or more options that you want to display to the user (for their selection).

Typically, you might use a dropdown (rather than a radio button) to display these.

Still, it’s a bit clunky, especially on mobile. Let’s say that 5 of the options represent 80% of the selections all users will make, with the remaining 15+ options being the other 20%.

Would it make sense to just show the first 5 options, with a “show more…” selection below the 5th option that displays the next 5, and so on?

Would this be a better user experience, and if so, how could this be implemented?

Note: Having the 6th option as “other” and triggering a blank field to be custom filled by the user is not a good solution for this particular application. I need the long tail of answers.

Any wisdom would be greatly appreciated.

1 Like

@romanmg any thoughts on this?

I found this article:

The author suggests a radio button with the top 5 answers, and a “other…” that would show a hidden dropdown with the long list of the remaining options.

The thinking is that the user experience is improved for the 90% of users who will select one of the 5 most popular options in the radio button element.

2 Likes

So I have experimented with this a bit. My current solution is to use 2 radio button elements, both sourcing the same list. They are stacked, with a checkbox element in between them with the label “show more”. When checked, it displays the hidden 2nd radio button element.

The trick is to have the data type include a field for “shortlist” yes/no.

The first (top) radio button element uses the constraint: shortlist = yes
The second radio button element uses the constraint: shortlist = no

This way you aren’t showing duplicates, and you aren’t moving the first set of options around on the user, which would happen if you used a single element, and conditional argument that removes the constraint upon checking the see more option.

image

here it is in action…
CloudApp

you could use :unique elements to not show duplicates of a list.

Update: There is a way to use a single radio button element, and still keep the short list items at the top.

The key is to have 2 “Sort by” fields.
The first is “short list?” descending = yes
Second is “animal name” descending = no

Still experimenting

CloudApp

The UX best practice when you have a large list of options is to use an auto-complete filter drop-down menu, so the user can scan the list or, if they know what they’re looking for, start typing it and select it from the list.

Yes, when they know the answer. How about when they don’t?

Example of known:
In which US State do you reside?
Alabama
Alaska
Arkansas…+47

Example of unknown:
Which of the following colors do you like best?
Red
Blue
Purple
Black
Beige…+20

You can also use a large array of either bullet lists or multi-select check boxes. When doing so the llist should be sectioned in their own container or card (visually separated from other groups of selectors and form elements). It also helps the user to scan if it’s sized larger, multi-column, and with sufficient open space to make visual scanning easier.