Content filters allow users to find what they want without going through an entire archive. But many make the mistake of hiding the options in a dropdown menu. This mistake causes user frustration, but you can easily prevent it.
Instead of using a dropdown menu, use segmented buttons (aka toggle buttons). Dropdown menus are useful for saving space when you have options that aren’t relevant to the user’s task. But when users are sorting, every option is needed for finding content. In the context of sorting, it doesn’t help to save space at the expense of losing visibility.
Segmented buttons allow users to see every sorting option available. It’s clear what the selected option is and what other options they can select. This visibility enables them to sort content faster and easier.
It only takes one click to select an option in segmented buttons. It takes two clicks and a scroll to choose an option from a dropdown. Users have to click to open the menu, scroll to the option, and then click to select.
The more options, the more horizontal space segmented buttons take up. But don’t let the number of choices discourage you. You can still fit many of them within the limited space. The example shows an eight option segment, while another shows a five option one.
When the content filter is hard to find, users will resort to using the pagination to search through the archives. But paginations don’t order content by the criteria that users want. The content filter should always catch user attention so that they’re not forced to use the pagination.
Which user interface control you use can affect user experience. Dropdown menus save space but give users lower visibility. Segmented buttons give users higher visibility but limits space for options. In a given context, ask yourself what matters more to users, space or visibility?