2

I am looking at this Vercel page:


They put the table of contents in a select box at the top of the post, and then the burger menu is more global links.

Proposition

What are the pros/cons of merging the table of contents into the burger menu, and the search input as well, so we have just one menu item on mobile and no weird deep select boxes and such.

I was thinking of this:

  • burger menu contains these direct links
    • search input
    • settings
      • Click on settings, swipes right to go to a bunch of links, including logout/login (like iOS settings UI/UX)
    • section selector (select box, with current content section selected)
      • home page (top-most)
      • documentation (subsection)
      • getting started (which has multiple pages, listed in the toc next)
    • table of contents (list the possibly 1-2-3 nested table of contents.

This I think would have the problem of, you want to find the TOC, you click the burger menu, but you have to wade through inputs and settings links before you find the TOC, which seems highly undesirable. So perhaps you have in the burger menu, a settings gear, and then the table of contents. You click the settings gear to reveal the search input, login/logout/etc.. But this way the burger is directly the "contextual menu", but also gets you to global settings when necessary.

Excuse my lack of vector editing skills, but this mockup demonstrates what I'm talking about. The burger menu would reveal an overlay over the whole phone.

enter image description here

An alternative is to have two top-level icons, a burger menu, and a gear icon.

What are the pros and cons with something like this? How would you solve having all of these elements in a minimal way?

  1. Global settings (dark mode, language, other inputs)
  2. Global search input
  3. Global links (logout, home, etc.)
  4. Table of contents

I would like to have just one top-right icon, but maybe you need more? Maybe you have figured out a creative way to solve this sort of thing.

1 Answer 1

1

I'd recommend you having more than one top-right icon due to the fact that when navigation is hidden, users are less likely to use navigation.

I've quickly drawn an example of how I believe your documentation website's navigation should look like (example below).

To meet up your requirements I've inserted TOC list inside a burger menu section. By default it would display entire TOC list and it could be filtered by specific topic if user wanted to by selecting a topic inside a dropdown menu.

I would add another section at the bottom of the burger menu for other global links like accessibility, language, dark mode, etc. If TOC has a lot of topics, my solution would be to add a vertical scroll inside the burger menu.

I would leave the global search and toggle between dark mode outside of burger menu due to the previously mentioned fact to improve the usability of navigation.

There's a possibility to include global search field inside a burger menu, but I believe a user testing would be necessary to see if users would perceive the search field as a global or as TOC list filter field (proximity principle). The similar arguments would apply to toggling between dark mode. In my current solution I've put toggle both inside and outside burger menu, so it is up to you whether to leave it only inside or outside burger menu, or even keep it in the both places for better usability.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.