Spike: On This Page on Foundations subpages

[sarinapadilla]

In order to add On This Page functionality to our documentation site pages, a developer/designer needs to mock up/build a prototype.

Estimate # point

Expected Deliverables:

• An approach for implementing OTP on our documentation site pages

Additional Notes:

• This came out of our meetings for updating Utilities pages with our own content instead of pointing to USWDS. The content on these pages might be really long, so we want to see if On This Page will help with the design and use of these pages.

Results of Spike

Enter the information, or links to any (non-sensative) files with the findings here

[laurelthrash]

@blilianyu @monika-jaeger Adding to the design board as "Ready for Pickup." Note: this is a low urgency ticket, but will be good to initiate this ticket so that design inputs are complete when this ticket is picked up later on.

[monika-jaeger]

On this Page comps added into Figma. Note: this shows the Guide Card page to illustrate a long page with many items.

• No items selected, showing full list
• First item selected showing active state

cc: @blilianyu @laurelthrash

[blilianyu]

As discussed in our 5/7 UX meeting, we would like to have OTP be consistent across the board on DS, Doc Site and Cgov. Coming out of MLP user research, we have found that users are not fans of cramped content (call-out box/feature card in the upper right) and USWDS's OTP will not work for our needs.

We would like to get content owner feedback on USWDS OTP, conduct user research and have design burst to create a NCIDS OTP component.

• USWDS: https://designsystem.digital.gov/components/in-page-navigation/
• NCIDS Figma Prototype: https://www.figma.com/proto/8qu1psEjnehVDoZyWrH7ny/NCIDS-For-All?page-id=785%3A741&[…]aling=min-zoom&starting-point-node-id=1947%3A23154&mode=design

We'd like to revisit some of the options that were created back in 2021 when USWDS did not have this component. Note: Based on discussions for Dynamic Listing Pages, options 1 & 3 with the OTP sticky on the left will not work as we cannot add to the left nav.

• Option 1: https://710fda.axshare.com/#id=ucrmhw&p=page_1
• Option 2: https://4moseo.axshare.com/#id=ucrmhw&p=page_1
• Option 3: https://fpwdcp.axshare.com/#id=ucrmhw&p=page_1

For reference:

• Notion: https://nci-ps.notion.site/On-This-Page-3db0e04f3457411f854c77503e1ab7cf#b453c25c69664d22a28946ba18a1f8e5
• Discovery: https://app.mural.co/t/publicissapient7269/m/publicissapient7269/1620220494066/f2a6d5096908952bf7b39bcf5375451be3615413?wid=1-1620239341485

cc: @monika-jaeger @laurelthrash @sarinapadilla @andyvanavery31

[laurelthrash]

Conferred with @andyvanavery31 @sarinapadilla offline. The information collection for the spike is complete (see Lilian's comment above). Andy and Sarina to create necessary subsequent tickets then close this spike ticket. Cc: @blilianyu @monika-jaeger