AG-07: Select and Dropdown

Select and Dropdowns are well defined interface design patterns, however, in some situations, the adaptation for mobile is not effective and accessibility and usability is affected.

The problem

When using Select and Dropdowns, depending on the application, can be a little bit annoying. If you have to set your location, for example, and have to choose your country, a big list of countrys will be shown to the user, and you have to search for your country by scrolling down or up.

If you are using a smartphone, for example, is even harder because of the screen size limitation and your finger position, that can cover the information you need.


On the other hand, if you have to search in a small list, like the “City name” exemple above, the user will have no problem.

The recommendation

  • Dropdowns items can be affected by context. For example, in a list of drugstore, the list should be ordered by proximity to the user. In a list of airports, the same idea
    may apply. On other contexts, the list could be ordered by the most selected item or
    any other classification or rank that may be reasonable.
  • Another solution for a large number of items is to split the list into two or more selects. This approach is not the best and many times cannot be meaningful, but it’s a valid one on some cases
  • A different approach to the dropdown situation with many items is to provide filters or categories in order to reduce the number of items displayed. This approach is already used on many examples found, however, it increases the number of clicks that the user needs to perform.
  • Lastly, one more approach is a hybrid search plus select implementation where the select box is also a search input and the user may type in order to filter the items. This approach is extremely valid as searching for the item may be faster than manually searching. One downside is that on mobile devices input entry may have complications for some users, due to the small screen.

Leave a Reply

Your email address will not be published. Required fields are marked *