Long lists to fill page

Question

I have a task where I need to display a long list of categories (variable number). Underneath each category is a list of subcategories (once again variable number). Now I could just have a single column of this information that will force the user to scroll down to see them all. Instead I would like to utilize the empty real estate and perhaps have a set of three or so columns that allow the list of categories to fill out the rest of the page.

I also don't want it to be "griddy" (hey i think i invented a word there!). A category may have one subcategory while another may have fifteen. I don't want an ugly whitespace separating the single category with another category below it just b/c the category to the right of it (the one with fifteen is long). Any ideas on how I could best approach this - either some css or just some general advice?

Thanks!

Answer 1

You could organise like many e-commerce mega drop-down menus are these days. Although having said that, I only found a small number of examples that really fit your requirements, and that is simply based on an alphabetically sorted index, which I imagine most people are familiar with using.

You can style the categories and subcategories according to your needs, so long as the categories are clear and the subcategories are indented for example, and carry less weight, perhaps with less whitespace between subcategory items than categories.

The columnar aspect is no problem if clearly separated like in the examples below.

Isn't that essentially what you are describing - an index?

Examples

An old example from Target.com

Current example from Craftsman

Current example from the White House

Answer 2

You're asking for a good UX solution to a problem which is aesthetic. Maybe the solution is to forget the idea that white space is a bad thing and focus on what would be easier to use.

Menus and submenus are essentially a limited depth version of a file system. Why not use the solution that Apple have used, but only give two columns?