Create a contents list for Elements documentation pages

[amyhupe]

What

Create a contents list showing at least the h2s on documentation pages within the Elements website.

This could be a table of contents at the top of the page, a sub-nav in the sidebar, or something else.

Why

In Feb 2022 user research, a number of users said that they wanted to know upfront what information they'd find on a page, and to have the option to skip to the sections that were relevant for them.

Done when

• [x] Solution is designed
• [x] Design reviewed by @sturobson and @amyhupe
• [ ] Solution is implemented

[foxintherain]

Design options:

https://www.sketch.com/s/ff5e0b72-6d79-4ea7-bc10-126b557cdec7/v/ZjDpy5/a/R1zW5jz/r/KwYyjA

[amyhupe]

@foxintherain to mock up a version of the vertical contents list with the Global forms documentation to stress test it with a longer page.

James, could you try this with:

• the side nav version
• the in-page version ?

[foxintherain]

@amyhupe @sturobson

Option 1 - Vertical in-line https://www.sketch.com/s/ff5e0b72-6d79-4ea7-bc10-126b557cdec7/a/R1vJm3e (With TOC as first item: https://www.sketch.com/s/ff5e0b72-6d79-4ea7-bc10-126b557cdec7/a/R1vJw8x)

Option 2 - Horizontal in-line https://www.sketch.com/s/ff5e0b72-6d79-4ea7-bc10-126b557cdec7/a/1KJngWn (With TOC as first item: https://www.sketch.com/s/ff5e0b72-6d79-4ea7-bc10-126b557cdec7/a/paZD0wG)

Option 3 - Side nav https://www.sketch.com/s/ff5e0b72-6d79-4ea7-bc10-126b557cdec7/a/VrOGybA

[amyhupe]

Reviewed options with @foxintherain and @sturobson on 27/7 - agreed to implement option 1: https://www.sketch.com/s/ff5e0b72-6d79-4ea7-bc10-126b557cdec7/a/R1vJm3e

@sturobson, I'll move this back into today for you to pick up when ready.

[foxintherain]

@amyhupe Picked this up again just to try out what the mobile would look like:

[sturobson]

this will be part of the new Elements Documentation Site