Tearsheet design research: Stepping and Stacking

[RichKummer]

We are currently exploring Tearsheet stacking and stepping as part of the base component. Currently, stepping is only available in CreateTearsheet. Stacking is unique to Tearsheet of the dialog components (including modal and side panel). We should explore whether stacking presents an accessibility issue.

 - Stacking (accessibility, changing focus). Look up Mike Gower issues/chat with him re: stacking.
 - Stepping: adding stepping as optional functionality to base tearsheet. Matt is exploring this.

This exploration will likely need dev opinion/ paired work.

Consider scroll prototype for header section, too.

Tasks

• Reach out to dev team re: stacking
• Reach out to Mike Gower
• Research stacking as a pattern

[RichKummer]

Research on stacking

Neilson Norman Group

Bottom sheets guidance - 2023

• Bottom sheets are more of a mobile pattern, but they share similar attributes with tearsheet, namely the overlay and transient nature of the component.
• NNG recommends not stacking bottom sheets.

One of the biggest issues with bottom sheets occurs when an app stacks several such sheets on top of each other. We have previously discussed some of the issues with stacked bottom sheets. Inevitably, users will have to keep track of where they currently are in the rapidly multiplying stack of overlays and will need to be able to discriminate between dismissing the last sheet on the stack and dismissing the whole stack, as in the example below.

We strongly recommend not using a bottom sheet to replace typical page-to-page user flows. A bottom sheet is a transient UI element that is not intended to be a stable place for users to return to, or spend significant time on. They are intended for interruptions or a fork in the road, rather than the expected “happy path” the user will usually take. For example, don’t use a sheet to display an ecommerce product-detail page: the user may navigate to related products, reviews, or detailed specifications from that sheet, and a bottom sheet will break longstanding conventions of how users can navigate from page to page.