Differentiation between filter and sort on a single page

Question

We are building a contest site in which we are displaying a number of videos with a filter by state and filter by store option and a sort by vote (low to high) and date uploaded (past to recent).

Currently, our page layout has the filter option to the upper left of the videos with a dropdown. To the right, we have the sort function that looks like this:

Vote             Date Uploaded  
Low | High       Past | Recent

where the second row text is clickable. Another option I considered was using dropdowns for the sort in addition to the filter (e.g. "Vote: Lowest to Highest") but I'm concerned that users may be confused that such similar looking elements have different functionality.

Is using a dropdown for both filter and sort user-friendly? Or is there another possibility I might not be considering?

Answer 1

You're right that using dropdown for 2 different functions on the same page is a bad confusing approach. However, in general, dropdown works fine for both filtering and sorting as long as the control is properly labeled.

The only suggestions for your situation I have are 1) to make sure that the current filter is not clickable & is highlighted somehow, in case you haven't implemented this, and 2) to see whether a different filter setup, such as the one below, is easier for users to understand:

    Sort by     Most votes      Newest first
                Least votes     Oldest first

You can also consider adding a "Randomize" link in the same section as the sorting options.

Answer 2

There was a great article about this a couple of years ago that found that filtering/sorting are the same thing to a lot of users. There is a strong mental model of "filtering by sorting".

The Mystery of Filtering by Sorting by Greg Nudelman:

"The ostensible need to visually separate sort controls from filtering controls is a myth."

So I think you could place all of the sorting/filtering options in the same space (on the left or above the listing depending on your design) - and always test, test, test. :)

Answer 3

I agree with @dmvrb - label to make it clear what the control does. Changing the type of control to another paradigm might just shift the confusion to other users.

One possibility to prevent user's confusion is to change the wording.

For example: instead of "Filter by" use "Show only", and instead of "Sort by" use "Order by"

Answer 4

A common UI idiom for sorting tables of data is to via clicking on the column headers. There would normally be a small symbol inserted into the column header to indicate the sort (an up/down arrow or an up/down triangle are the usual suspects). Clicking a second time would reverse the sort order.

Do that, and you now don't have two drop downs for different functionality.

Answer 5

Presuming the default state shows all videos, one may FILTER what is on display, that is a user can choose to display sets or groups from all videos - in this case, most votes or least votes. A user may then SORT what is on display, yet what is on display is the same just arranged differently - in this case, Newest first or Oldest first .

From one set or all, a filter abstracts a group from that one set or all. While sorting, affects that current set, but only in the method it is displayed.

Consider the popular jquery plugin http://isotope.metafizzy.co/

• Jason