Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm working with a table of data and am focusing on the sorting functionality. I'm considering using a dropdown menu as opposed to traditional table header sorting (where you click the heading to sort one way, and click it again to sort another way).


Header sorting:

Table header sorting


Dropdown sorting: Dropdown menu sorting


Things I love about the dropdown menus for sorting are:

  • They give you the opportunity to use simple language to describe how the sorting works, like "Newest first" or "Alphabetical (A-Z)". With table headers, you generally use a simple up/down indicator, which is less intuitive.

  • One can immediately pick the sorting direction without having to sort twice, like picking Z-A first, without having to first sort A-Z.

  • You can add a sorting option that doesn't have visible data associated with it, like "Popularity."

  • When not every table column can be sorted, the lack of sorting controls on some columns can be confusing. "Why can't I click here to sort this column?!"

  • Dropdowns are touch-friendly out of the box, whereas many header sorting implementations rely on mouse hover states to reveal which columns are sortable.

  • In situations where multiple layouts exist for the data, such as a table/data view vs. a gallery view, the dropdown can exist in the same location and function the same way.

The specific page I'm working on will use a table to display the data. All of the columns are sortable (at least for now). I have existing dropdown-based filters above the table, so the sorting dropdown would be consistent with them visually. All of this points to "just use the header columns for sorting!", but I would love to consistently use dropdowns as a way to sort throughout the system.

So, I suppose my question is, do you find it strange that sorting would be controlled by a dropdown menu on a page of tabular data? Or, are the benefits I've listed above, and sorting being controlled by dropdowns on other pages, enough to warrant using a dropdown in this case as well?

share|improve this question
    
On the point about sorting options with no visible data associated, how would users know the relative difference between the ranks? As for dropdowns being touch friendly, I think column headers by default should show icons to allow people to interact rather than having to hover over to discover. Otherwise, a good question and good thinking behind it. –  Michael Lai Aug 8 '13 at 4:09
    
@MichaelLai: I think of Amazon's "sort by popularity" and "new and bestselling" options. You can only assume the items listed higher up sell better, but you don't actually get a peek at how many have sold. –  Kip Aug 8 '13 at 16:57
1  
as along as it makes sense to do so for your application, because I don't think people who read books care about how many copies are sold as long as they know it is popular. Other properties where it is important to know the relative difference between each sorted item like sales figures are important to show. –  Michael Lai Aug 8 '13 at 22:40
    
as a user, i would feel comfortable with header sorting; however, you can create test these options with the actual users. –  Awesh Aug 16 '13 at 9:42
add comment

5 Answers

My first instinct would be to use the header columns to sort, especially since each of your columns are sortable.

However, the fact that your site uses a universal dropdown to do this means that your users won't be caught off guard by this behavior. Adding different non-visual sorting abilities is also a big plus for the dropdown.

I think consistency across the site and added functionality is a good enough reason to go dropdown.

share|improve this answer
add comment

I like your bullet points regarding the pros of sorting via drop down vs. the cons of sorting via headers.

There's a site with great UI called Hipmunk (for flights, hotels etc). They do their sorting & filtering via button bars.

A button bar should provide you with all the "drop down pros" you mentioned, with the added benefit of saving an extra click for your users. Not to mention that all sorting possibilities are on-screen and not hidden behind a drop down.

The cost of a button bar is "real estate" of course, so if that's an issue I'd stick to a drop down.

Here's a link that should lead to a page that shows what I'm talking about.

enter image description here

If link doesn't work just go to hipmunk.com, search for a flight and you'll see their grid with the sorting & filtering.

Note that they have non-visible data sorting such as "Agony" :)

share|improve this answer
add comment

I would argue that sorting results via a dropdown is just as common practice (if not more so) among popular sites as sorting via table headers. Examples:

  1. Kayak.com search resultsenter image description here
  2. Trulia.com search resultsenter image description here
  3. Google reviewsenter image description here

Granted, a few does not represent the whole, but users likely won't be thrown off if you do choose to use the dropdown.

share|improve this answer
    
I think the main thing I'm wondering is how confusing you dudes think it would be to have a table format with a dropdown for sorting. Since I posted the topic, I think we've decided to stick with table sorting for this page just because it's in table format, and use the dropdown elsewhere. We agreed that it's too expected to be able to click the table headers. –  Kip Aug 15 '13 at 21:46
add comment

This is an interesting question. There certainly are some benefits to having the sorting as a dropdown, however this is also re-imagining an already web familiar practice.

My only concern is if there are more than one dropdown that was used as a filter instead of a sort. I suppose a toggle could be used instead, but the concept gets a little funky once you add other similar elements alongside it.

share|improve this answer
add comment

Using a drop-down for your sort options has plenty of benefits, as you've listed. There are some disadvantages though, compared to column header sorting. For example:

  • Column header sorting is more findable: if a user wants to sort the table by Date Created, they go straight to Date Created and click on it. A drop-down list might be above the table, or off to one side, or mixed up with other screen elements; and also, if the user is interested in "Date Created" but have to find a drop-down labelled "Sort", that takes an extra mental processing step. Remember the user isn't interested in sorting for its own sake; they're interested in finding the items they're after, and sorting is only a means to an end. It doesn't help if the UI makes them stop and think about the sorting instead of their end goal.
  • Text labels are tricky: if you use a drop-down, you give yourself the problem of coming up with a good description, in words, for each sort option. It's trickier than it sounds; "Newest first" is great, but to pick on your other example, "Sort: Alphabetically (A-Z)" isn't great because it doesn't tell the user which column it's sorting by, and it makes them stop and think about what alphabetical ordering means - again, they don't want to have to think about the sorting, they just want to find their data. It might be better as "Sort: by Project" for example; but that still leaves you the problem of indicating, succinctly, the difference between the forward and reverse sort options. Perhaps add up/down arrow symbols? Sorting by column headings doesn't have this disadvantage.
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.