Massive data in mega dropdown - looking for inspiration

Question

I need to design a mega-dropdown navigation for an online store and I'm looking for some inspiration. Here is some information about the project.

The content is categorized at two levels. The main level is not problematic - it actually refers to big sections of the store, so the case is simple here.

Now, at the second level, there are at least three keys to categorize the content - let's call them like this:

• Topic (about 15 of them - quite fine for me)
• Type (just 7-8 of these, also fine)
• Category - and here is the trick - there are almost 40 (!) categories in just one (yet very important) of the level one sections (for the other ones they are significantly less numerous).

Besides, in the mega-dropdown, I need to provide also some space for promo content of the level one section.

The tricky part here is that the Category stuff cannot be put on another page and just linked from the dropdown - too many users rely this one, so it needs to be quite easily accessible. At the same time, it cannot be called the main and most important way users choose to navigate through the content - it's just inevitable, let's call it "a burden".

As I want to keep the whole mega dropdown above the fold and keep this pattern convergent with the tablet version (I believe it's possible in the mockups below, just maybe there are too small fonts in these :)), I have come up with an idea of double-state mega dropdown. I know it seems a bit kinky, but it allows me to hide this additional navigation while still keeping it accessible.

In the mockups below, the two states are presented one below another, and the gradiented switch gets activated on hover in desktop version and on tap in tablet version, so it forms some kind of accordion. I cannot place some tabs on the top of the dropdown, as these would need to be quite high (horizontal sub-nav disadvantage) and I cannot place them on the left/right side, as various top level sections are triggered by hovering over the buttons that are located from left to right above the mega dropdown.

Let me know what you think about this case. Any inspiration, even trashing this idea, would be appreciated.

Here is the image:

And here is a link to the .rp file if anyone would like to fiddle with it,

Answer 1

Here's a good read about mega dropdown list. Primarily Amazon's Mega Dropdown bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Alrigth then. Set this as the answer to facilitate future seeker. =)

Answer 2

Do you have any sort of hierarchy to these things? Or do you have a shorter list of things that you can filter by initially and then allow the user to narrow their results after that? Have you considered a faceted navigation approach?

A quick search on UX.SO gave me this - Combining breadcrumb and selected facets/filters into one

It doesn't exactly address what you're looking for but it shows you what I'm talking about. 40 categories is a lot for a user to have to read through. If you can do some progressive disclosure you can simplify the interface as well as make it easier for your users to read the few options you're showing.

Answer 3

Ultimately you are always going to have to compromise. I think your best bet is to use a much simpler faceted navigation where the user can tab between type, topic, and category.

This should accommodate all but your 40-figure oddball, which you'll have to find another means to accommodate for. I would plan on prioritizing and showing a previewed list for that one as John S. has alluded to.

Your current approach is just another form of compromise; it's much more complicated throughout in order to save the 40-figure oddball instead of sacrificing that set of categories for the simplicity of the rest of the nav.

I have put together an Axure doc that shows how I'd see the nav working. Hope it helps.

You can download it here: chris-allison.com/categories-case-uxso.rp