What is the best way of displaying nested categories with very long names?

Question

I'm creating a website that is going to contain a lot of structured information (material for passing the final high school exams in Israel)

The information has already been structured into categories and sub categories by the Education ministry. My aim is to take that structure and display it in the most intuitive and friendly way possible.

Basically I have 8 main subjects

Currently I have opted to display these as the main navigation items in the website like so:

[english] [literature] [history] etc...

Each subject will have a subject page where it needs to be divided into two more sub-levels, categories, and subcategories.

The categories are usually around 3-6 for each subject and can have long names; the sub categories can be up to 15 and can sometimes have very long names. for example a subcategory of a category within history is named:

Similarities and differences between the Zionist movement and other nationalistic movements in Europe in the 19th century

note: none of the names can be re-worded and are officially named by the education ministry who I have zero affiliation with.

each subcategory will contain a list of materials that each link to their own page, this is what the User is searching for, specific learning materials.

My intuition is to possible have some kind of nested expanding accordions, or possible tabs for categories, and a side navigation within each tab for subcategories?

I am far from an expert in UX and am sorry if the answer is obvious but I have done some research and am still not sure of the right way to go.

Answer 1

It seems like yours is a moderately to deep hierarchy problem. In this case, you can take hint from Khan Academy. They too have Subjects > Categories > Sub-categories > More sub categories

Each subcategory usually has a longer description.

Clicking on subjects reveals a list of subjects, which in turn shows a list of sub-categories on hover.

Clicking on a particular sub-category (say Algebra Basics) reveals another set of sub-categories with detailed description. Note how the main menu name has changed to the sub-category name.

You can go even deeper. You can see that they have also provided a link back to the previous sub category in addition to changing the menu item.

It works for Khan Academy because they have presented the whole navigation in a neat way. It becomes easier for the user to comprehend it even though it goes pretty deep. Also, it would be a good idea to provide search with this kind of deep hierarchy problem.

Hope this helps!

Edit: Khan Academy navigation menu works perfectly on mobile. Totally responsive.

Answer 2

Well, first of all, you have to define whether you need this for desktop, mobile (app) or desktop and mobile combined (responsive). This is paramount to your question, because you have some specific needs that require different approaches depending on context.

If you're going for desktop, I think something like "mega menu dropdown" is the more tempting approach . However, I wouldn't recommend it in your case. First of all, you already mention you're creating a "splash" page width subjects from where you send users to the respective categories and sub categories. If these categories and/or sub categories are similar between subjects, you're taking a good approach to the problem.

Another thing: while "mega menus" were the rage a few years ago, now you can see how they're being abandoned, because they created more problems than solutions and they create user annoyance

Summary: Making users suffer a drop-down menu to enter state abbreviations is one of many small annoyances that add up to a less efficient, less pleasant user experience. It's worth fixing as many of these usability irritants as you can.

Besides the 2 links I'm providing, here's my personal take: Think of these giant bold mega menus. Now get your smartphone. Try to find something. Complicated, isn't it? Not to mention many people will never know they'll actually have to click to see results, because you don't have hover states.

In short: mega menus? Avoid them if you can.

So, what to do?

personally, I think you should take a careful reading to the Navigation and Navigational Transitions pages of Material Design, specifically take a look to the videos displaying the behaviors. Whether you use Material or not, it will provide you with some great starting points to do what you need. For example, I made a quick wireframe in Material to illustrate this:

Here you can see how hierarchies expand and have a known affordance for users. And as you may imagine, stacked cards will adjust to a grid in desktop (for example, you could have 4 columns of cards on desktop)

But keep in mind this is just an approach. You could use other options, like Multi-Level Push Menu (see below)

or a Responsive Multi Level Menu(see below)

But keep in mind that these two solutions, while cool and neat, may get into the same issues than mega menus (depending on size of your elements), so just adding then for consideration or for other people looking for simpler approaches

well, hope it helps!