A multi, multi, multi-level Table of Contents
Navigation for reference materials

What kind of book has a 13-level, nested table of contents (TOC)?

(That’s what I said when I first reviewed this project.)

Then I became familiar with reference materials for the legal market. Legal professionals constantly refer to these “sources” for case specific sightings and other content.

The TOC is the navigation for these books. It’s the mechanism by which all is made relevant for the user. They need to know where they are within the volume while reading a document, as well as be able to move around relative to where they are. And the TOC can get up to 13 nested levels deep. Not to mention that each level could have dozens of submenus below it. Hello scrolling forever.

Try putting a usable, readable, tree-menu for that in a fixed width side bar.

Why are we doing this?

Let’s face it, business want to make money. And when your business makes money every time a page of content is viewed, well, that’s when a business has incentive to be user-centered in its design. So when our users started making it clear that navigating this content was a mess, business listened.

And just like that, UX becomes very important to the business. Yay!

These reference materials were the second largest sources being accessed in the system, so, from a revenue stand point, it was huge—as were the usability challenges revealed by formatting this content for the web.

What do we know?

A large list of pain points in regard to making these reference materials easier to navigate was revealed by the following methods; contextual interviews, open card sort, content audit and analytics.

Specific to the TOC, users felt its current state was unusable. A consistent and persistent TOC was critical to the use of this content online.

I inherited a beast

A messy one that doesn’t clean its room.
This is what a document within a volume looked like. You can see a sliver of the TOC at the top, a small piece that was inserted above the document. This didn’t meet any of the requirements of our users. There is also a button labeled “Table of Contents”, when clicked, it simply revealed the same small portion in a pop-over.

My favorite user quote:

It's super clunky to navigate the TOC, that's why I don't use it. It's like a maze. You can easily get lost.

A multi-level push menu

After many iterations and testing, we landed on what we called the multi-level push menu. This seemed to address all of the concerns of our users, as well as meet the requirements handed down by the business.

I created an HTML/CSS/JS in-browser prototype to develop the interactions of the menu. This was key to working out how the navigation could work in a real-world scenario. Since the transitions were done using real code, we could get an accurate sense of their final behavior.
Here is a screen recording of the prototype in use. I hope you like it. Users did.

Final UI Design

I finalized our solution in high fidelity mockups using Adobe Illustrator.
(Sorry Sketch, I needed much more control over the text.)

I was also responsible for the overall visual design of the project.
  • slide
  • slide
  • slide

Have a question or want to get in touch?

Name

Email

Subject

Message

Congratulations. Your message has been sent successfully.
Error, please retry. Your message has not been sent.