UI Kit - Screenflows
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.
Use a “tabbed” screen flow when there are fewer than five steps, the steps are static, and there are no substeps.
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 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.