Portfolio filtering (with sub categories)

[grimski]

I’m working on a filter tool for a portfolio website (not mine). It seems like a relatively simple job but one of the categories has 4 sub-categories which is making live a bit of a pain. It’d be good to get some people ideas on this. Unfortunately there’s nothing I can do about the sub-categories.

The website has quite a minimal design so trying to keep it that way with this is a bit challenging.

Here’s a CodePen: http://codepen.io/moy/pen/EZpdQQ

The high-level nav works pretty well. You click and the category gets highlighted. Though I do need to add a “Refresh” button as it won’t automatically update (yet).

The problem is when you click “TV Commercials”, that’s the one that has 4 sub-categories.

First, I though it would be nice if they slide-out inline with the other items, pushing the content along. But the text wrapping is going to be an issue and I don’t think there’s a CSS method to stop them wrapping and have the items extend out of the container. Also it might be difficult to differentiate between what’s what, what’s a sub-category, where have these come from? All confusing for the user?

Something like this forked version, but as you can see it’s very clunky and I’m not sure how user-friendly it is…
http://codepen.io/moy/pen/egjbem

I thought I bought the sub-list sliding out when the it’s parent is selected but as the list is nested, it needs absolute positioning which makes width and positioning awkward. It also won’t take it physical space.

Another option could be on :hover just displaying the sub-list like a dropdown menu like you would in a main navigation for example. But then on refresh of the page/at a glance it won’t be obvious what section you’re in.

Or maybe even a button that says “filters” which launches an overlay or reveals all the filters in some way. Once you’ve selected a few and hit update maybe it can list the active categories on the page..?

What are people’s thoughts on this? More of a UX question but I think I need some fresh eyes on it. It’s an interesting little problem but bloody annoying now!

Look forward to your replies. :)

[grimski]

I’ve decided on a solution like this:

http://codepen.io/moy/pen/EZpdQQ

Rather than being able to select multiple tags you’ll only be able to select one and then it will display the relevant content. For this I’ve used radio buttons but the items in the drop down (under TV Commercials – there’s an arrow to indicate this on my local version) don’t appear to ‘check’ once you click them even though the text updates in the parent.

Although we’re going to try and get the page to refresh on click, so the items could be links rather than radio buttons, thus eliminating this problem. I suppose there’d need to be a no-js fallback. So it would be good if it could be checked and work when a button is pressed.

Another small issue I’ve noticed is obviously when the text changes in the parent so does it’s width depending once what category is selected. Is there a way to make this slide/animate a bit more gracefully using javascript?

[Author]

Posts