9

I'm building wireframes for an intranet site. The user needs to be able to select states so they can see articles for that particular state. They need to be able to select multiples states because sometimes they'll want to see articles for multiple states in the same list. I have three designs:

1) I don't really like the checklist in a drop down. This keeps the states hidden and it just seems like there's too many things going on to make it easy on the user. They may have to scroll to see all of the options and then select multiple states. There are plenty of flavors of this approach out there. If I went this route I would also add a label called "selected states" and list out the states they have checked next to it to reduce cognitive load.

enter image description here

2) This works except I'm building multiple sections with the same type of layout. Some sections will have six navigation buttons on the side and not just one. If it turns out they need a functionality like this it'll be pushed way down the page.

enter image description here

3) Imagine this is styled better with two columns. It completely removes the user from the update page and makes them focus. I feel like it's a little too prominent for the task they're doing. Also, it's hidden so they can't just see their options really quick. They should know the options though. I would also put a label on the page to indicate the states they chose like I option 1.

enter image description here

The number of states will not increase or decrease (at least for the foreseeable future). I know I'll need to test this with users, but I'm just trying to get to a solid starting point. I'm facing resistance from higher-ups on getting to the users of this site right now.

Which of these is the best option to get users to quickly and easily make selections and get on with their reading? Why? Is there a solution I haven't thought of?

Some reading I came across:

Both of these have the dual lists as options, but at that point, the list is becoming very prominent. I don't really like this because the focus shouldn't be on the list(s), it should be on the articles that display based off of the selection in the list(s).

Multi-selection dropdown list implementation best practice

What is the best UI for multi-selecting from a list?

This answer does just say to go with checklists though:

Most intuitive multi-select component for the web

Both of these refer to a plugin called Chosen, which is still kind of the same thing as option one with some variation:

Multi-select filter other than check boxes?

Need to display multi-select menu component with limited space

Improve this question
1
  • Your option 2 seems like the easiest approach for most users. It doesn't appear that you have specified whether each article will have its own filter or whether all articles will be simultaneously filtered by your filter control. Too, how likely is the user to actually use the filter, in your opinion?
    – Jedi Commymullah
    Jun 3, 2015 at 0:58

3 Answers 3

Reset to default
5

I'd go with the dropdown or the filter bar (option 1 or 2) depending on the frequency of use and the available space. Option 3 is too invasive and distracting.

With those two you'll be able to show selected states, for me the difference is that filter bar takes more space and saves user 1 click (no need to expand dropdown), and with the dropdown you gain space though it's not that "comfortable".

I'll go for the left bar as first option because it's affordance is more clear since it's often used, for example, in e-commerce site. If you also needspace for another sections, give the option to collapse/expand them, although you'll lose the visibility on the state unless you show it somehow after collapsing.

If you go with the dropdown, I'd recommend you these two options that display selected items and let users filter.

Chosen.js

enter image description here

wenzhixin/multiple-select

enter image description here

Improve this answer
3

I would definitely go with option 2 and work on some variations. It seems much more intuitive than the other 2 propositions since the actual filters are visible without needing any user action.

Besides, you mention other filters that could also be needed on some of the pages. Why would this States filter be a drop down menu at the top of the list while others filters would be in the sidebar? I'd recommend being consistent with where you place all of your filters.

It makes sense to place the "sort by" on the top right but all filters should probably be in the same area.

Are the other 5 or 6 types of filters going to occupy as much real estate as the States ?

You might want list only a few of the states and have a link to see them all as you can see on this example for the "occasions" filter.

enter image description here

I would suggest you look into what's done in ecommerce. There are a lot of examples and articles about faceted search and filters which could be interesting. For instance : http://www.smileycat.com/design_elements/faceted_navigation/

Improve this answer
3
  • My apologies, I don't think I was very clear, the other buttons on the side will be navigation. They may not be actually buttons in the end but they will take up space at the top of the sidebar. I edited my question for future readers. The occasions list with just a few showing is a nice thought!
    – Fletchling
    May 28, 2015 at 14:05
  • 1
    I see, the sidebar will be for navigation. It wouldn't be a good thing to mix global navigation and filters... Any chance of having a horizontal nav ?
    – Raphaëlle M
    May 28, 2015 at 14:08
  • I didn't include the nav bar at the very top of the wireframe(out of laziness so I didn't have to change labels, I see now that was a mistake) but it has navigation in it as well. It's very similar to the blue nav bar on this page actually. Company name on the left, with five links to the far right.
    – Fletchling
    May 31, 2015 at 16:13
1

For another example of method 2 in action, here's a screenshot of Newegg website's left panel.

enter image description here
Here, I've expanded Core Name, and checked a few.
Note the user's filter choices are repeated across the top of the page. They can be removed there, plus there is a Reset button.
Each category of filters is expandable with a click. This is a handy way to keep the filter accessible along the left sidebar. Your control is there, only when you need it. enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.