15

Has anyone moved their sidebar filter (similar to eBays filter, left example) to the top (YouTube example)?

How did the users respond? I'm tempted to put it on top to keep the UI clean and tidy, but I'm worried that many users will feel "unconfortable".

Filter examples. Sidebar vs top EDIT: Feel free to post your opinion on this, even if you haven't "tested" it live with users :-)

| improve this question | |
  • Nice question Joseph. Could you make smaller versions of your images and add them as images in your question? – Benny Skogberg Nov 9 '12 at 11:16
  • 2
    It's worth noting that these top-anchored filters are far more tablet and phone friendly in portrait mode, without having to specifically target them. – scronide Nov 15 '12 at 19:28
5

Interesting question, I just checked some popular "search oriented" websites and found a couple of examples:

Google and Bing have a limited set of filtering choices and both have them right below the search bar (Google had it on the sidebar panel until a few days back).

Yelp has more filtering options and also haves them below the search bar.

Yelp - Filtering - UI Pattern Bing - Filtering - UI Pattern enter image description here

However, the sites that have much more filtering options (eg. Ebay, Amazon, Airbnb, etc) all have the traditional sidebar and a small subset before the listings below the search box.

| improve this answer | |
3

I did a user test on this a while back. When I asked users to perform a task that requires them to filter down the results, they did not notice the filters on the side. Moving it before the content made it more obvious for them. This surprised me, personally.

I suspect it might have to do with the domain (I was working on an education website for high school students). When it comes to e-commerce, users expect it on the side (e.g. eBay, ASOS, Amazon) with sorting options on the top.

Scalability might also limit your options on this. You might include search, subfilters, etc.

| improve this answer | |
  • I also recently tested side filters with the same results. Almost no one touched the side filter, but when I moved it to the top (before the content), almost everyone did. – conan Aug 6 '19 at 17:30
1

At MapR, we chose a top level filter pattern. Customers approve. In fact, nary a complaint nor bug is filed from anyone using the product to analyze and administer their large scale compute clusters.

Function: The pattern allows people to add/remove filters at will. Moreover, the options within the filter pivot on the Expression Subject... In other words, when you select anything in the first expression subject, the expression operator updates, and the expression value input updates.

enter image description here

Persistence: So you filtered some data... cool. How can you share this state with others, or better yet, bookmark it for later? Use the url hash to your advantage. This doesn't need to be completely human readable, but simplistic, and extensible to multiple patterns of filtering. See the url in the image below for reference.

enter image description here

I apologize because this site will not allow me to post the screenshots I have illustrating this example in detail because I am a new user here and need 10 points reputation... when I get the 10 points, I promise to return and update this post.

Update: 10 points gotten. Images uploaded.

Good luck to you.

| improve this answer | |
  • 1
    If you have screenshots you can always link to them, and if they're relevant then someone here will edit your post to bring the images inline for you until you get the rep you need to do this yourself. – JonW♦ Nov 15 '12 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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