Screenflows

Screenflow

Screen flows are designed for a single user completing a multi-step process. Steps are shown above the content.

Screenflow steps

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

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

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 is 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 two-step screen flows, or screen flows 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.

Last updated: Aug 2019