4

I have a site where I need to present filtering items in a sidebar. These items work as "filters" for the site's content on the right. The user can click these filters on or off (selected are highlighted), and the content on the right side populates according to these selections. The problem is that there can be even 40-50 of these items in this view in multiple different groups and the user needs to be able to see all of them. How do I represent these items in a clear and understandable way?

enter image description here

The picture is a sketch of the current situation that the items are in now. Every item has a recognizable icon attached to them, which helps identifying which filter means what. Could the items be shown only as icons to save space, or is that a bad pattern? There isn't much space in the sidebar as we need to include also other tools in there (settings etc.) which adds to the problem.

  • 1
    I think the cognitive load of recognising and remembering that many icons without labels would frustrate a user or slow them down. If you genuinely have to leave in that many filters, I'd keep the labels. – Stolbot Apr 30 '19 at 8:25
  • 2
    I wouldn't go icon-only. I'd bet users will have trouble identifying so many glyphs. What is the nature of the filters that there must be so many? Is there any way they could be grouped using other controls? I'm thinking of a range-slider (ie, with prices, sizes) or general types (such as car models being arranged into sedan, hatchback etc). – cloudworks Apr 30 '19 at 9:36
  • Unfortunately the filters can't be grouped with range-sliders etc. as they aren't quantitive or anything that could be arranged in order. I'm sorry I didn't provide more information on the original post, but the filters are actually types of a specific product. The filters can be only grouped with their pre-defined groupings, which makes this situation difficult. – orangerectangle889 Apr 30 '19 at 11:30
  • 1
    Dont go icon only, or if you do, make sure to have a way to expand the sidebar to force it to present a label. GitLab has maybe 5-7 sidebar items, each with an icon, and even with consistent usage, I have to expand the flyout to figure out what they mean every now and then. I know that you say they are "recognizable icons", but they aren't and won't be to everyone. – zero298 Apr 30 '19 at 12:38
2

I have a few thoughts and suggestions on this but firstly it would be good to see a mock up with realistic content otherwise my advice could be off but generally:

Firstly, I'd avoid putting items into columns, they‘re harder to scan as you have to zig zag, and there's less room for filters that have longer descriptions. I'd also recommend filters are represented as form controls. That way users can select multiple filters with a single round trip.

And it has other advantages – for example, checkboxes signify you can select multiple from a category, where as another category may be radio buttons to signify that only one option can be selected from that category.

Secondly, you could show fewer items in each section either by having a show more button or by having a scrollable area with the options (with perhaps a little search box above to filter those items down more quickly).

Thirdly, you could also show fewer categories of items and only reveal certain categories as they become more relevant based on the previously selected filters.

Finally, you could collapse entire categories so users have the best chance of know all the available categories upfront though they do have to put a little extra effort in to reveal the options within those categories.

Here's a prototype of a filter pattern I made: https://nostyle.herokuapp.com/examples/filter-form

It works well responsively and is fully accessible even when the AJAX filtering is in place.

enter image description here

And here's a screenshot of another prototype which has worked really well in research (but I can't show you a live demo of this I'm afraid):

I'm in the middle of applying the patterns I mentioned above to this design.

enter image description here

Good luck and let us know how you get in in research.

| improve this answer | |
1

Have a look at the screens below. I'm not reinventing the wheel here, and just went a simple truncation mechanism: show/hide or show more/show less (whichever wording is suitable for you). Scrollbars would, of course, have to kick in.

PS: Ignore the items names on the second screen being repeated. I just used the ones you had in the picture.

PPS: I did think of also placing an arrow to the side of each of your groupings and make horizontally 'scrollable' or 'paginatable', but icons and unintuitivity of it stopped me.

PPPS: I'm also part of the team working on a huge enterprise search UI, and sadly no matter how much we try, it's very hard to make ALL the things and filters appear everywhere and at the same time. As some physics kicks in and we have to come up with slightly clunkier, but still solutions:)

enter image description here

enter image description here

EDIT: Here is the alternative mock you suggested.

enter image description here

Hope this helps!

| improve this answer | |
  • 1
    Thanks for taking the time to answer! I actually tried suggesting this solution first, but the problem is that the items can't be put in any specific order, and it would be hard to decide which items to show and which items to hide by default, and it would be good to see all of the group's items at once. Your solution got me thinking could the truncation method be used for the groups themselves, like in accordions or similar? For example if I have "Group 1", "Group 2" and "Group 3", the Group 1 would be shown by default as it probably is used the most and the others opened if needed? – orangerectangle889 Apr 30 '19 at 11:39
  • no worries:) I could adjust the mocks so you could see – aly.i.ux Apr 30 '19 at 12:37
  • See the edited answer. Now the Groups are truncated instead. – aly.i.ux Apr 30 '19 at 12:42
  • Thank you! :) I think this is something that I could go forward with. I know that the client wants to "see all items at once" but I don' think that is possible with so many items, at least without scrolling. The sidebar is also going to contain some other settings and filters for the site, so I think that the less space we can use the better. – orangerectangle889 May 2 '19 at 6:36

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.