Where to put the table of contents on mobile
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.
- 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.
- 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.
- 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?
- 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...