Why Segmented Buttons Are Better for Sorting

by on 11/25/14 at 12:42 pm

Content sorting options allow users to find what they want without going through an entire archive. But many make the mistake of putting their sorting options in a dropdown menu. Users can only see the selected option, while the rest are hidden. This causes user frustration, but you can easily prevent it.

segmented-button-sorting

Instead of using a dropdown menu, use segmented 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 sorting option is relevant 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. Users are able to sort faster and easier.

It only takes one click to select an option in segmented buttons. It takes a two clicks and a scroll to select an option in a dropdown. Users have to click to open menu, scroll to the option and then click to select.

segmented-button-visibility

The more options, the more horizontal space segmented buttons take up. But don’t let your number of options discourage you. You can still fit many options within the limited space. The example shows an 8 option segment, while another shows a 5 option one.

segmented-button-spacing

When the sort function is hard to find, users will resort to using the pagination. But paginations don’t order content by the criteria that users want. The sort function should always catch user attention so that they’re not forced to find content through 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?


OUR PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATE

Elegant Themes

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

10 Responses to “Why Segmented Buttons Are Better for Sorting”

  1. Bernhard

    Nov 25th, 2014

    To add to that, the toggle buttons only require one click compared to two clicks for drop down lists.

  2. Nestor

    Nov 26th, 2014

    I wouldn’t say dropdowns are bad and toggles are good just because they’re more visible. As with any other UI element, there’s pros and cons.

    Dropdowns are standard since the beginning of the www. People are very used to them and therefore can automatically action them. They also engage better with OS UI (ie you can use Android/iOS own UI) and their behaviour is expected.

    Toggles, on the contrary are more of a novelty. They are customised and therefore users are not 100% familiar with them. A toggle’s behaviour is harder to predict. What you win in visibility, you lose in terms of familiarity and standarisation (ie integration with OS).
    I don’t have user research to support the following statement, but from a personal point of view, the toggle/tab in metacritic doesn’t look like a UI element that will filter the same content differently… it looks like a tab that will show different content.

    I agree with you that normally toggles are a better solution and 100% visibility is preferred, but just thought the framing of your article in black and white terms was a bit extreme and wanted to challenge your point.

    Best Regards,
    Nestor

    • Miklos

      Nov 27th, 2014

      Nestor, I mostly disagree with your comments, but agree with some. In the Metacritic example the failure of the tab-like UI to filter is due to the lack of information which could have been made clearer to the user by a small label: “filter by”. The devil and usability is in the details. :)

      I agree with following UX conventions in the interest of the user, however, when only a small space is needed to make choices visible I would opt for that vs. hiding options in a drop-down. For longer lists this may not be feasible.

      I also think some people confuse “sort” and “filter”. A sort is not the same as a filter. “Sort” mean viewing the same data/content displayed on the screen, but sorted in some fashion to the user’s preference. A “filter” on the other hand is a display of “filtered” data/ content, usually reduced from the “view all”.

      I think the RottenTomatoes example with the Metacritic may even be the wrong one because one is a sort by whereas the Metacritic is a “filter by”.

      @Bernhard it’s not about the number of clicks, it’s about UX. :)

  3. eeklipzz

    Nov 26th, 2014

    I find the top example (that is to say, the one marked as “Good”) still difficult to interpret. I think for me it would need a little more adjustment in order to sufficiently communicate it’s current state setting. Right now, I wouldn’t know if the “Top Comments” is the one that is selected, or the “Newest First” is selected.

    Sorry. I’m the user in this case, and I must providing you feedback. I suppose that I’d not be the only one.

    • Wyatt

      Nov 26th, 2014

      Oh, someone beat me to it. With two options, I think it needs a marker. Especially with those colours. Even if there are more than two options, I’d use a marker just to improve acquisition.

    • Madge

      Nov 27th, 2014

      I agree with eeklipzz. The selected state isn’t always clear – especially if there are only two items in the toggle. Any suggestions on ways to make it more clear would be appreciated!

    • Courtney

      Jan 15th, 2015

      I agree with you guys – selected state is not always clear. We’ve done some informal testing of an app with this feature and some didn’t even know there was something they could change/do with it.

      I’m also looking for other suggestions as I originally went to a dropdown, but not the best experience either when only two options.

  4. Ryno

    Jan 15th, 2015

    I agree with you when you have 2 options maybe 3 but tabs are notoriously bad to convert to a useful mobile experience and additionally it relies on Javascript instead of HMTL (I don’t know if there’s a HTML control for tabs yet…)

    Also, unless you are Google, new ways of doing sorting is not recommended in my opinion – drop-down sorting is a familiar behaviour in ecommerce.

    My 2 cents…

  5. Teresa

    Feb 24th, 2015

    Drop down boxes aren’t as modern – or as “sexy” as toggles but I agree that people know intuitively how to use them and therefore don’t have to hesitate to figure it out – they just look at the titles, pick one and click. With toggles or tabs there is usually a hesitation – especially with accordions where the title is sideways.

    However, in the case where the drop down title contains different information than the categories under it (in your sorting example) toggles are best – or better yet have a different title with both choices under it. People don’t see the drop down title as a separate choice, but rather a category with all the information in the listings underneath it combined on one page.

  6. Suede

    Aug 17th, 2015

    IMO, the first example isn’t great when it comes to sorting content. When you use toggle tabs, it’s hard to tell which one is active/inactive because there are only 2 options and they are very flat. You may be able to get away with this buy adding more depth to the design.

Leave a Comment