How to layout / structure a page with a long sidebar but a short content section?

Question

Basically, I have a data table in the main content area and a filter section on the sidebar. The filter on the left serves as a filter for the data that would appear in the data table.

Now, each of these filter category can be quite long hence most of them would require a scrollbar as shown. And I can have about 6-7 of these filter categories so you can see that the left sidebar can be very long while the main content area can be very short (e.g. just 1 row).

What I am thinking as a solution is to add another scrollbar for the sidebar. However, it would look like there's already so many scrollbars as the actual page itself may also have a scrollbar (if the data table list gets long).

Is there a better way to handle this?

Answer 1

Of what I'm reading from your question, this is something a lot of websites are having issues with. "What happens when our search results are less then the amount of filters filling our page?". For that some great examples of online solutions can be found. In a company i'm working on, we have been struggling with the same question.

First of all, if your website / application is already live. Be sure to do a research of which filters are the most used filters. If you can't do that, make assumptions which you will test on a later stadium. Your most used filters, will be filters that are default open to a user. All other filters can be collapsed, and opened by a user.

Something else to consider is to avoid the use of scrollbars. Not only will it look disturbing in a design, it kills the overview for a user. Therefore, choose to only show a few filter options (again research which of these are most used). Let a user either search for it, or click to open more.

With this said, a user then accepts he is making his filterbar longer then 'necessary'. And also knows his results can be found on top of the page. Your design could then look something similar to this:

One other thing that could really help is, when a user has scrolled down so far, his search results are not visible on screen. Notify a user something has changed and he needs to scroll back to the top. Make it even more easier for him, to add a click functionality on that notification. Only show this notification when a user changed something to his filters. For example, activated Filter 7, Option 2.

Answer 2

Going by the comments and your requirement, I will suggest you following approach:

• Not all filters need a dropdown menu. You can use checkboxes/radio some other inputs. This will reduce the height. Example:

• You may use some filters at the top of the content as well. These will act as quick filters. Example:

• Just like others have mentioned, use a collapsible menu. Make only one or two visible at a time.

• You should avoid scrollbar.

In case, you need the reference to the website of these screenshots: https://www.myntra.com/men-jeans

Answer 3

First, you probably should be using real data in your mock-ups and wire-frames to properly address questions like these and adequately assess which solution is best and then continue gathering the ideas before prototyping and testing one or more possible solutions.

Also, are you required to present all six (different?) filters at all times?

If so, perhaps you can display the filter type, and show/hide the filter parameters as needed. Having said that, it would be a good idea to also present which filters are affecting the type of data that gets displayed or returned as you would with search results — so the user can make adjustments to find the products, data or information they're looking for.

Answer 4

In response to your question I would like to point out 2 things:

1. Reduce / group filters: Filters are used to reach the indented set of result from a larger set (Where the raw result is likely to be huge and not scan-able ) but in your case if it is just 10 rows most likely that user will not even touch filters and just does the scanning. Also you can reduce number of filters by giving column value filters in the table Header like below along side few sidebar filters:

---

2. Prioritize filters: Assuming the case you have mentioned is edge case and all your happy cases gives page full of table rows: This will definitely require filters. But you can prioritize the possible options to filter based on context or user trend and club rest of them in "More". Or keep them collapsed.

---

Suggestion: How many columns does your data-table has, only 4? If it has more than that or it's dynamic I would suggest to go with top filter bar instead of sidebar.

Answer 5

You can go for the scroller on the left side and it's totally fine across the internet. This is even one of the things people are practicing to make the elements scalable.

Check out Slack, eBay, Amazon etc. They all have filters/left panel active and when you dig deeper in case of e-commerce sites(and increase the number of people/channels on slack), it automatically introduces the scroller on the left panel when the list grows.

Second thing. To introduce the selectors, make sure that you are showing the selected points as a capsule on the top of the table area with a cross so that the user can know what were the things he/she selected and can remove whenever he wants. like this

You can see that the selection on the left is PUMA and it is appearing on the top along with a cross icon so that I can remove that whenever I want.

You can definitely introduce this into your app to show the filtered results and an easy way to remove them or go back.

Good luck! :)