Title: To what extent is it sensible to use filter and sort options together?
Tags: buttons;e-commerce;filter;sort
Question: Working on an e-commerce shopping site, I am observing that the users first sort and then refine their results. Will providing both the options confuse the user?

Comment: Could you please expand on your question.  Preferably with some examples. You won't be able to attach images yet, but if you upload them to imgur.com and insert the link, someone will attach them for you.

Comment: @JohnGB Rep of 81 is plenty for attaching images. [New User Restrictions are lifted at 10 rep](http://ux.stackexchange.com/privileges/new-user)

Comment: sorting and filtering are two mutually exclusive features. Confusion can be avoided if user interface is more intuitive.

Comment: Andy - your question isn't very answerable currently, it's far too broad. Please have a read of the [ask] page for advice on how to construct useful answerable questions and update this post accordingly.

Comment: @rags: Mutually exclusive? How do you figure that?

Comment: Both are required

Here is the accepted answer: The short answer

It is absolutely sensible to use filter and sort options together because, for users, they are similar: tools for parsing search results. In my opinion they don't distinguish as clearly as developers do the differences between these two controls.

The long answer

I strongly recommend you an article writen by Greg Nudelman in UX matters magazine: The Mystery of Filtering by Sorting. It gives interesting insights into this subject and backs them up with evidence gathered in user testing sessions.

```
  After observing this phenomenon numerous times, it became clear to me that this was not merely a matter of a simple confusion of terms between filtering and sorting. Instead, it revealed a strong mental model of filtering by sorting that blurred the difference between these two modes of search results’ refinement.
```


Here is another answer: While I agree with the commenters that your question is overly broad, in the general case the answer is no, providing both options will not confuse your users. In fact, what you are describing is an interface pattern called faceted search and it is one of the most common patterns on the web.

Amazon uses it:


Zappos uses it:


Once you recognize this pattern, you will see it everywhere.

Note the convention to place filters directly to the left of the results. Both Zappos and Amazon respect this convention. Note also that they each handle sorting quite differently. Zappos uses a row of tabs with different sorting options and Amazon uses a diminutive "Sort by" dropdown. I don't know that either is strictly better, but I prefer Amazon's treatment because means that users who are accustomed to sorting will be able to make use of the feature and the diminutive design means that it will get out of the way for users who don't commonly sort. Since you are concerned about confusing your users, you may find this works better (but you should test!).

In general, using conventional interface patterns is a good idea. When you have a problem that may fit an established pattern, I find it's best to try that pattern first and then fix anything that isn't working. For reference, the canonical book on interface patterns is Designing Interfaces by Jennifer Tidwell. It's coming along in age, but unless you're doing mobile, you'll find most of the established patterns still in place. If you are developing a mobile interface that, of course, changes where you go to look for established patterns.


{'source': 'StackExchangeDataset', 'subset': 'ux.stackexchange.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 6, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:03/12/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<buttons><e-commerce><filter><sort>', 'Title': 'To what extent is it sensible to use filter and sort options together?', 'ViewCount': 266, 'id': 36205, 'user_AboutMe': '<p>Responsible for applying user center design process in development cycle with design Strategy, gathering requirements, scenario, task analysis, Information architecture, creating design prototype, wireframe and usability testing to create high quality user experiences</p>\n', 'user_AccountId': 1013543.0, 'user_DisplayName': 'Andy', 'user_Reputation': 1226.0, 'user_Views': 129.0, 'user_id': 27780.0}}