I've been teaching myself to build websites and I'm building a site that requires a lot of deeply nested menus. One of the largest is a top-level list with 400 direct categories (also nested but don't worry about that). I was thinking about splitting it up into a 4 item vertical menu that horizontally expands 100 at a time. It'll be a wall of text but that's not really an issue if that's the best I can hope for.

Just wondering if there are some suggested or conventional methods of displaying large nested menus like this.

[Edited on November 18, 2013 at 7:07 PM. Reason : important edit: categories have names that are a maximum of 140 characters, most are not though]

11/18/2013 7:04:57 PM

Quote :

"I was thinking about splitting it up into a 4 item vertical menu that horizontally expands 100 at a time."

This is one of the worst ideas I have ever heard.

If the categories were nested properly, you could make a nice collapsible tree (e.g. file system) or menus that nest horizontally (e.g. top menu options in older Windows applications).

You'd start with 8 menu options, and each option opens another menu with 8 more options.... 8^3=512. In other words, you could get away with just 3 levels of nesting.

The best way to do it is probably just with a search/filter box though.

[Edited on November 18, 2013 at 7:38 PM. Reason : what do I know]

11/18/2013 7:37:05 PM

good lord, reorganize and prune your categories

11/18/2013 8:48:01 PM

these are not arbitrary categories, in fact part of the design is demonstrating the flaw that this organization uses for it's categories

there are literally 400 top-level categories that are named

[Edited on November 18, 2013 at 9:05 PM. Reason : accordian might work better than static menu]

11/18/2013 9:04:45 PM

Quote :

"in fact part of the design is demonstrating the flaw that this organization uses for it's categories"

Oh, in that case please make it as painful as possible.

11/18/2013 9:07:35 PM

i'll give you 1 guess what industry/sector this encompasses. if it takes more than 1, shame on you.

11/18/2013 9:09:04 PM

gubbamint

11/19/2013 12:04:56 AM

Are you fixing Healthcare.gov?

11/19/2013 9:22:59 AM

Tag cloud, obviously

Next question

[Edited on November 19, 2013 at 11:32 AM. Reason : ]

11/19/2013 11:32:44 AM

400 top-level categories?

THANKS OBAMA

11/19/2013 11:39:33 AM

this is how healthcare.gov got created

[Edited on November 19, 2013 at 12:33 PM. Reason : dammit, someone already made that joke]

11/19/2013 12:33:25 PM

400 top level categories could just as easily be banking. I deal with tons of stuff like this when looking at our Reference Data structures.


WRT your original post: if you're building something stupid, based on an implicit requirement, in order to prove a point in HTML, don't. You'd be wasting your time. Just do it in excel or something similar. You only need to model it to show the lunacy, not build it.

Quote :

"Just wondering if there are some suggested or conventional methods of displaying large nested menus like this."

The closest interaction pattern you'll find is the nested menu, or mega menu, but from a mental model these are simply not manageable at the scale you're talking about. The brain can't reliably handle more than about 10-15 options at a time. Give a user 100+ and the options all become noise.

http://www.nngroup.com/articles/ten-usability-heuristics/

http://www.sensible.com/dmmt.html

11/20/2013 8:38:49 AM

if you really want to do this, maybe do like tire sites where you pick your model car and drill down through several steps

ex: http://www.walmart.com/finder/tires/?povid=cat1077064-env449864-module551220-lLink10

11/20/2013 10:11:16 AM

what i wound up doing is putting things like ^ at the top so that logical persons who know what they're doing can more quickly find what they need but then you can scroll the page down to read the 400+ top level categories as full width buttons

11/20/2013 2:42:42 PM