Ask users forHelp users toSend users

Help users toChoose from a long list

Help users narrow down their options in a long list

When to use this pattern

Use this pattern when:

  • a user needs to choose from a list of options
  • there are so many options that you cannot show them all at the same time
  • the user may not be familiar with the options in the list

What makes a long list will depend on the service. Some services might have thousands of options, while for other services 30 options may be a long list.

When not to use this pattern

Do not use this pattern for filtering a table, as tables present multiple pieces of related information.

How it works

When designing with long lists, consider:

  • who your users are
  • how familiar the users are with the options in the list
  • whether users know what option they’re looking for, for example nationality
  • how you can help the user reduce their options
  • the risks if the user chooses the wrong option
  • how many options users can select
  • whether the list can be pre-filtered by a user's location, role or user type
  • how to order the options to help users find what they’re looking for, for example most common first or alphabetised

To improve data in long lists:

  • reduce the number of options as much as possible
  • keep the name of each option short
  • avoid multiple options starting with the same word or phrase
  • format the options in a clear and consistent way
  • use familiar language
  • add synonym matches, if research findings support this
  • use analytics to understand where lists could be improved (see this example of using analytics to improve autocompletes)

Autocomplete

Autocompletes (also called ‘typeaheads’) are text inputs that suggest options to the user as they type. Results are presented in a dropdown list which users can select from.

Autocompletes work better when the user knows exactly what option they are looking for in the list.

This component can help by:

  • speeding up user input
  • reducing the number of options displayed
  • finding a combination of letters anywhere in the option, not just the start

When using an autocomplete, consider:

  • whether your service will find a combination of letters anywhere in an option
  • the order in which you will present options
  • doing research with your users to find out whether you need to allow synonyms, for example, ‘Deutsch’ or ‘Germany’ could bring up ‘German.’
  • doing research with your users to understand if codes or numbers should be added to help identify the options in the list
  • telling the user how many matches have been found
  • what happens if there are no results found
  • how to show users that they can see the complete list, for example an arrow icon within the autocomplete
  • how users can easily clear what they have entered to see the full list again
  • a plan for how you will maintain the accuracy of the list over time
  • how the number of options displayed to the user impacts loading time

See this Department of Education design history blog on improving autocompletes.

List only autocomplete (also called ‘autosuggests’)

When letters are typed into the input field, the dropdown list displays options that start with those letters. The user selects from the list to complete the field.

Example of list only autocomplete.


Divide the list into categories

Divide the data into categories so when users select a category, they are shown only relevant options in the next field.

There are 2 ways of doing this: showing all lists when the screen loads or only revealing the next list when a choice has been made

Both lists are shown when screen loads

In this case, the options displayed in the second list are filtered depending on what is selected from the first list. If no option is chosen in the first list, the user can select from the unfiltered range of options in the second list.

Two dropdowns are shown onscreen, the first for selecting a country and the second for choosing a port.

Second list is conditionally revealed

Show the second list when a user selects an option in the first list.

In this example, the user selects a country – United Kingdom of Great Britain and Northern Ireland – from a dropdown. A second dropdown then appears below the first, showing options for different UK ports.

Example of the interaction where the second list conditionally revealed.

This approach can:

  • prevent mistakes, especially if there are legal consequences to choosing the wrong option
  • make the final list shorter
  • reduce the loading time of the screen as shorter data lists will be loaded
  • break down the decision-making process and help guide the user to the correct option

Consider:

  • what should happen if the selection in one of the previous fields is changed or removed
  • the relationship between the fields and the order if all inputs are showing when screen loads
  • using a conditionally revealed input when order of input is important, to ensure a shorter final list

Structured questions

Ask a series of questions to guide the user to the best option.

Numbered screens show how questions 1, 2 and 3 are asked consecutively. Answering the questions filters down the list to a single option or shorter list.

Example of the structured questions interaction.

Use this pattern when:

  • the user is not familiar with the options in the list
  • you need to guide the user through complex options
  • you can eliminate a lot of options quickly

However, if users are familiar with the list and know which option they need, structured questions could slow down the user.

Accessibility

When using autocompletes:

  • inform the screen reader user that the autocomplete is available
  • inform the screen reader user when the content has been expanded
  • it may be helpful to include the number of options in the first line as the user types and inform the user as the number of matches changes
  • do not use 'aria live region'
  • collapse the list and return the focus to the editable field when a selected match is confirmed
  • the option in focus in the list is set if a user presses the ‘Space’, ‘Enter’ or ‘Tab’ key
  • if a user presses ‘Esc’, the option in focus is not selected and the dropdown list is closed

See this summary about autocompletes from the Web Accessibility Initiative (W3C).

When using conditionally revealed lists, make sure the second list is next in the tabbing order.

If your service uses this pattern, let us know of any insights you have on accessibility considerations.


Research

More research is needed. If your service uses this pattern, get in touch to share your user research findings.

Help us improve this pattern

This pattern needs improving. We need evidence about:

  • how to help users choose multiple options and how you display the options chosen and allow these to be changed or deleted
  • how teams are using autosuggest in their service
  • how to make users more confident about their choice
  • the usability of autocompletes on mobile devices
  • other patterns that have been successful in services to display long lists to users
  • using the 'optgroup' element for grouping options

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.