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

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!

  • 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.