Multiple dropdowns in the header section

Question

I would like to have the ability to filter content based on countries. Countries have been divided into different groups based on geolocations as regions, cultural habitats, climatic situations. I have the header space to similar to what stackoverflow has, with similar elements including help and search box. Can someone help me with suggestions on how to incorporate the filters as dropdown boxes or multiselect.

Answer 1

A lot of dropdown menus in your navbar can be a pain for users to navigate, even if dropdown menus open on hover to save a clic.

I recommend you to propose a mega menu which is a unique dropdown menu showing different columns at the same view.

Here is an exemple:

And a tool bootstrap ready to use it: http://geedmo.github.io/yamm3/

Answer 2

could you give a bit more details on what the list looks like ? Can you select multiple entries ? I know this has helped me in many situations but not sure whether this could address your problem : http://harvesthq.github.io/chosen/

Answer 3

You have several options, as I see it:

Select box

You can use the standard HTML <select> box. That gives you one dropdown menu in your header, but it's going to be quite long. To deal with that, you can use optgroups - these will split up the list and people will see categories rather than one long list.

Separate menus

You could have, as you say, 4 separate menus on the top bar. The disadvantage of this is that you're going to use quite a lot of space. Then again, it would be easy to use and would make a simple web app.

Custom menus

The last option: design your own system. I'd go with one dropdown menu that has 4 options (the categories). On hovering those, they would give their child list of countries, so if you have 200 countries then you have a sort of top > category > countries structure, with ~50 countries in each list.

Out of those, I'd advise going for the last option if you're going for pure UX. It's the nicest option. However, if you have limited time or want to make it easy, you might want to choose a different method. I don't know if you're developing this or if you have developers, but obviously, the more complex the method is to implement, the longer it will take: so the last method will take quite a while compared to the others.

Answer 4

I would steer away from dropdowns for such selectors, especially if you are providing less than 7 languages, it involves more interaction - plus having visible without interaction will be beneficial from a visibility POV.

There are some great pointers in this article on how to present language options to your users, also avoid using just flags as language selectors.