1

I am looking to add a table of contents to my blog's articles, so that users may conveniently skip sections they are not interested in. I feel like a design where the ToC is a sticky element on the sidebar is a good choice, as long as the screen real estate is actually there. However, this is obviously not workable when the page is viewed on a phone. I am considering four solutions.

  1. Just put the ToC above the first heading.
    • This is less handy than putting it on the side — now, scrolling until you find the next heading is an option you'll consider using instead.
    • A familiar design, considering this is what Wikipedia does.
  2. Keep the sidebar ToC on wide devices, and move it to above the first heading like (1).
    • This limits the cons of (1) to only mobile devices, but it makes for an inconsistent UX between these two types of devices.
  3. A button in the (top right?) corner of the screen, that will show and hide the table of contents.
    • I don't recall seeing anyone do this. Feels a bit weird without an entire bar of buttons to accompany it. Do I reserve the vertical space, and reduce the screen space available for the actual content, or do I create a cut-out in the corner, gaining some more content space, but in a non-rectangular shape?
  4. Slide from the side to reveal the ToC.
    • Not discoverable, but perhaps this can be fixed with a tweak I'm not seeing.

Is there some solution that I'm not seeing? Perhaps it blows all of these out of the water? This seems like a problem common enough to have been studied in depth already...

1
  • I've been trying to determine a solution to this myself, OP what did you end up doing? I'm amazed at how little discussion there is on this issue, in a mobile first world everyone is still putting TOC in the sidebar which on mobile moves it to the bottom of the page = useless. I'm looking for great TOC ux too, I've seen some put it horizontally scrollable as top navigation style element, but that requires very short HTML anchors, and isn't all that intuitive to users (who may or may not realize they can horizontally scroll this). Feb 26 at 15:40

1 Answer 1

1

On mobile devices screen space is most important, having ToC before the main content may be frustrating. I would suggest having the ToC revealing from the side, but the button for it always visible in the corner as a quick shortcut.

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