r/UXDesign • u/InevitableHealth2729 • 16h ago
Examples & inspiration My attempt to have Table of Contents without adding a dedicated section
Enable HLS to view with audio, or disable this notification
I'm developing a note-taking app and wanted a way for users to quickly understand where they are in a document, see its overall structure, and jump to another section.
Most apps solve this with a dedicated Table of Contents (TOC). But I found them not ideal because:
- They need a dedicated section/panel and take up space.
- The TOC is visually different from the document itself, so users have to mentally map each entry to the actual content.
So I implemented an 'Overview Mode'. When enabled, the content of the page gets simplified (showing only the titles) and by clicking on a content it will disable the mode and shows the actual content instantly without any jump or scrolling.
The idea is that, your eyes can see only one thing at the time. So instead of looking at something that looks visually different than what you're familiar with and takes up space when you don't need it, with a simple click (or even a keyboard shortcut), you can see the simplified version (overview/outlines) and vice versa.
The video shows an example. I'd like to know what you guys think about this approach.