It’s useful to see keep context of what is being filtered, but it isn’t recommended on longer sets of filters. Slideover onscreen filtering - A filter view that partially overlays the search results.Thierry Meier has already done a great job discussing the merits and the use case of each type of mobile filtering, so I’ll be brief in enumerating them: However, this option might not be as suitable for cases where there are a lot of search parameters with no clear hierarchy, since it would become cumbersome to navigate through a lot of dropdowns. It’s easier to skim and it can accommodate a larger number of filters, since it’s not limited to the page’s width. The sidebar filtering interface on the left is the gold standard on desktop websites. Which leads us to the next question… Sidebars and toolbars (desktop web) It’s common to see a combination of both: a filtering sidebar paired with a sorting tool on the top. Even if we can sort pants by fit, seeing jeggings on top and those early 2000's extra baggy jeans at the bottom wouldn’t be particularly helpful. This allows users to go through an entire range (by sorting price low to high) rather than forcing them to choose a specific bracket (by selecting $0–20, $20–40…).įiltering is a sounder option for filters that might be mutually exclusive. Sorting makes sense with filters of the same “type” (for instance, ‘Price’). During user sessions, Baymard even reports some people to use “sorting” and “filtering” interchangeably. However, research suggests that for the user, the outcome is roughly equivalent: both surface the most relevant content according to their criteria.
In theory, they are different: sorting organises the content according to a certain parameter, filtering removes it from view. Design decisions for filters will depend on the context, on the number of parameters, on the type of user. In UX, it always depends - filters are no exception. The browser behaviour should match this perception - if a user wants to go back to see a previous filter selection, clicking on the back arrow shouldn’t take them to a completely different page. Since the content of the page changes, the perception when using filters on desktop web is that there are multiple “pages” instead of a single page with different filters. Make sure filter changes are separate events in the browser And please don’t punish my lexical limitations by reloading the page every time I select one box! I wan’t to see what’s in both without having to load the page twice on my poor internet connection. ‘Search by mood/styles/topics’ filters are a good option, but separate filters for ‘Rebellious’ and ‘Satirical’ is going a bit too much into minutiae. Kulture Shop has room for improvement, though. Kulture Shop displays filters in their original position as well as at the top In this case, there are only 35 items to browse, but it wouldn’t be manageable with more results. We’d be better off browsing their entire category of dresses and mentally noting what is relevant and what is not (this one is too short, this one is long-sleeved…). Yet these are the filters on Chumbak’s online store. The language used to model these choices should be the language in the filter.įor instance, when going to a clothes shop, it’s unlikely we would ask for a ‘Fit & Flare’, ‘Shift’, or ‘Bodycon’ dress. Think the way someone would ask a shop assistant for a dress, or how a group of friends chooses a vacation rental home. Use real world languageįilters should be modelled after the actual behaviour of users. It is frustrating to have the intention of selecting two or more filters, only to see the page reload painstakingly slow with each selection.
This will allow the user to narrow down their search quickly and more comfortably.Īllowing multiple selections also works better for slower connections. Whether we know exactly what we want (we‘re interested in a restaurant that has tables outside, and allows pets, and has vegetarian options), or we only know what we don’t want (we’re not interested in a restaurant with loud music), it makes sense to allow for multiple filters to be selected at once. Allow multiple selectionsĭecisions might not be taken based on a single data point. This is particularly helpful giving the sheer number of items.Ĭategory-specific filters also have the advantage of being an education point for people who have less experience with the content being displayed. Myntra offers very detailed category-specific filters.