I'm developing a web app and i'm confused on where to place the filter across browsers.

Should i try to keep it consistent in the same place, so users "know" how to navigate doesn't matter if it's on a desktop or on a mobile. Or should i try to use the best of the space larger screens provide to create a best flow?

Currently my 2 options are:

First option:

  • Desktop: Place on the left side (fixed), so users can interact see real time results and only scroll on the content (or on the filter if it applies).

enter image description here

  • Mobile/Tablet: Open the filter list from a FAB on bottom right corner. The list is going to be the same as the desktop.

enter image description here

Both are in different positions.

Second option:

On both scenarios the filter would be right after the header with an option to expand the filter, showing all the other options.

enter image description here enter image description here

Even though the first options seems to be inconsistent, i think it has a better fit and better visual/flow to the user. But is this a correct thinking? Or is there anything else i'm missing? Most of the references i was looking has a left filter but on a mobile it goes to the header, like a mix of the 2 options i currently have.


I would actually ensure that you design two versions that are each the 'best' option for each platform. So, ensure your desktop site works in the best way it can for desktop users, and your mobile site works the best way it can for mobile device users.

I would ensure that:

  • each version has a feel of familiarity between them, so that a user jumping from one to the other isn't totally lost
  • provide your filtering option at both ends of the filtered list for ease of use (e.g. with your 2nd option, ensure that the filter appears both at the top and bottom of the results on mobile devices)
  • ensure that you provide an option for those on mobile devices to opt for the desktop version of your website (and ensure the option is there for them top go back to the mobile version!)
  • in terms of designing the mobile 'site' ensure that you consider those factors of importance to this platform (e.g. screen resolution, speed, etc). There is a plethora of articles out there on the best way to do this.

Based on your mockups, it may very well be that the desktop version of your first option is the way to go, in conjunction with the mobile version of your second option.

Below are only a few examples of articles you may find useful:

  1. http://www.uxbooth.com/articles/considerations-for-mobile-design-part-1-speed/
  2. http://www.hongkiat.com/blog/mobile-web-design/
  3. http://mashable.com/2011/03/24/mobile-web-design-tips/#zjrTN9ykjZqy
  4. http://martinoxby.com/web-design/web-design-considerations-mobile-friendly-sites/

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.