Best practice for flow canvas layout

When working with the flow canvas, it is important to be aware of best practice guidelines for efficiently organizing and laying out steps on the canvas.

Horizontal progression and vertical complexity

The central principle for laying out your flows on the canvas is that progression through a flow should be laid out horizontally from left to right, and complexity within sections of a flow should be laid out vertically.

The example diagram below shows this best practice applied to a flow:

Progression through the flow should be laid out horizontally from left to right, and complexity within sections of the flow should be laid out vertically

Horizontal Progression: In this example flow, the progression of a user through the flow is visually clear as the steps have been laid out horizontally from left to right, simulating the journey of the user through the flow once it has been published as a web application.
Vertical Complexity: In this example flow, whenever a stage of the flow is reached that requires more complexity in terms of multiple steps, decisions, configuration etc, it is helpful to lay these steps out vertically so that they are visually grouped against each stage of progression within the flow.

Overlapping outcomes

In this example flow, you can clearly see the relationship between steps and their connecting outcomes, as the outcomes have been laid out so that they do not overlap.

Some flows will require a certain amount of overlap, but where possible it is best to avoid overlapping outcome connector lines as much as possible. See Joining steps with outcomes on the flow canvas.