Sorting tabular data using a dropdown menu?

Question

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:

---

Dropdown 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?

Answer 1

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.

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" :)

Answer 2

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.

Answer 3

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 results
2. Trulia.com search results
3. Google reviews

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

Answer 4

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.

Answer 5

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.