UI Kit - Screenflows

Screen Flows

Screen flows are designed for a single user completing a multi-step process. Steps are shown to the right of the content (tree navigation) or above the content (tabbed screen flow).

Use a “tree” screen flow when there are more than five steps, or steps are dynamic based on content, or some steps have substeps.

Screenflow steps to the right of the content

Use a “tabbed” screen flow when there are fewer than five steps, the steps are static, and there are no substeps.

Headers under a screenflow

On mobile devices, both tabbed and tree screen flows render the same way.

Mobile screen flow example

Using a multi-step process can simplify a complex form. Follow these guidelines when doing so:

  • Long forms can benefit from being split into steps. If your form will be greater than x2 of the most common screen height, then consider steps. (On desktop, this is ~1600px or 25 lines. On mobile this is ~800px or 12 lines.)
  • If splitting into multiple steps, use 3-7 steps. Avoid 2-step screenflows, or screenflows with too many separate steps.
  • Put step breaks at logical points. Do not force a form into steps, instead break the flow at natural points.
  • Consider adding a “review” screen as a final step if collecting a large amount of data that would be difficult to edit later. Review screens should show read-only data in the same format as the Review harness.