Currently, I'm working on a data-driven platform. I designed a side filter bar which allows user to filter data dependable of his needs. The problem appears on smaller screens. After a discussion with my team, we decided that the side filter will be always open by default on smaller screens and will overly the content and than- the user will be able to close it. The solution is indicated below. I'm concerned about this approach (the filter bar overlays content - I believe it's not the best user-friendly thing to do) and wanted to hear your insights- maybe exists a better user-friendly solution? Do you think this approach is ok? What do you think about the filter bar (it connects actually 3 different filtering options - regular filter data, comparison view, and advanced segmentation)Due to many filtering options which are equally important I decided to go with side filter.
It seems the image provided would not really qualify as a "small screen". There is plenty of room to rearrange the body content and fit the filter sidebar to show at all times.
Filter overlays that hide the body is more suitable for small screens such as mobile, where screen real estate is very limited.
Covering the body with the filter options is not an issue, after all, the user cannot find what they are looking for in the body and therefore want to make a filter selection. Meaning the goal is to filter and the screen should show filter options only. When the goal is selecting a filter option, irrelevant body content is a distraction.
If overlaying is still a concern, another approach is pushing over the screen. The filter menu pushes over the entire body (hiding some of it to the right) enough to fit the filter menu in the viewable area.
Not sure if you have explored turning the side filter into a permanent frame and use responsive design to visualise the data on the main frame.
I’m suggesting this because your team has decided that the side filter is important to keep open when the user goes in, and it seems your filter is complex it may be good to keep it open so that users can refer to the filters applied while looking at the data.
I’ll update my answer with a sample picture when I see a similar design. Recall that I saw something like this before.