Introduction

Introduction

The layout of a diagram is the position the shapes with respect to each other and the paths taken by the connectors.

With the same definition of objects and links, there is an infinite possibility of layouts, but it is worth defining the most appropriate one for each type of diagram.

The layout of a diagram can be obtained manually, automatically or both.

The purpose of this page is to describe the general characteristics of any automatic layout calculation - called auto-layout - and its availability to the user. An example of layout is described in "Graphical View" Auto-Layout

Usage

As of today, the possible ways to use the auto-layout are:

permanent auto-layout: the user cannot choose the position when inserting new shapes, cannot move existing ones. This case is usually use when the diagram is in read-only.
auto-layout on request: the user can position new shapes wherever he wants and move them. Then the user can launch the auto-layout calculation with an icon button.
Switchable auto-layout: When the auto-layout is on, the auto-layout is launched systematically at the end of each shape insertion or manipulation, when the auto-layout is off, the user can also launch the auto-layout command on request.
Auto-layout after specific manipulations: when the auto-layout is on request or the auto layout is off, some manipulations may need to recalculate the layout afterwards. Instead of leaving the user to do it each time, it is possible to trigger the layout calculation systematically if it makes sense.

Specifications

Note: All designs and design rules are given for a left to right display. For the right to left display, please switch simply the right with the left.

An auto-layout for a given type of diagram requires to choose the right orientation, to take care of the alignment of shapes and spacing between shapes for a good readability and aesthetics impacted in particular by the design of position of ports in shapes.

Orientation

The diagram layout is defined to optimize the reading first, prior to the editing. The orientation is one of most important characteristics of a diagram to facilitate the reading, knowing that the user use to follow reading conventions (left to right, then top to bottom)

There are four main layout orientations possibilities:

the horizontal layout (A, image at the top of the page)
the vertical layout (B)
the circular layout (C)
the free layout

The choice of the layout orientation depends on the type of relationships.

<div> <div>If</div> <div>Use</div> <div>Example</div> </div> <div> <div>The main relationship represents a flow</div> <div> <p>A horizontal layout.</p> <p>Eventually a vertical layout depending on the height/width ratios of the diagram and the viewport</p> </div> <div> <p>Data Flow</p> <p>Process Flow</p> </div> </div> <div> <div>The main relationship connects objects to a central object.</div> <div>A circular layout</div> <div>Star schema</div> </div> <div> <div>The main relationship is a hierarchical relation</div> <div> <p>A vertical layout</p> <p>Eventually a horizontal layout</p> </div> <div> <p>Organization charts</p> <p>Value Driver Tree</p> </div> </div> <div> <div>There is no “main” relationship: The model contains a lot of types relationships without any preponderant one.</div> <div>A free layout</div> <div></div> </div>

Alignment

For horizontal or vertically oriented diagrams, the alignment of shapes contributes to a good aesthetic.

The alignment of shapes and the position of ports (“signal”) allows to avoid some irrelevant angles ("noise") in connectors and augment the signal-to-noise ratio.

false

dont

false

Don't display without alignment if the vertical position of the shapes does not have any specific meaning

When the connector is nearly horizontal and vertical (due to a manual positionning), it may be possible to move one of the extremities of one or two pixels (in viewport coordinates) to have a perfect horizontal or vertical line displayed.

false

A non alignement of shapes of one pixel is not visible when the connector stays strait.

dont

false

A line with a small angle against the horizontal or vertical that generates a step of only one pixel is highly visible

Spacing

The space between shapes influences the global size of the diagram area. A sufficient space is needed between connected shapes in order to make the connector visible.

A space is also needed between non connected shapes and connected shapes in order to distinguish them.

false

dont

false

Port Position on Shapes

The position of ports impacts two different domains: the semantics and the aesthetics.

a port on the left side is an input, a port on the right side is an output.
a port on the bottom can be a secondary input or output
a port on the top is a controller input that drives the behavior of the shape.

It avoids naming the ports in the diagram to differentiate them.

The position of input and output ports of shapes determine if we can simultaneously align shapes and have horizontal/vertical strait connectors or connector with only one angle. The design of the position of the port on each type of shape cannot be done separately from the design of the diagram layout.

false

When there is a need to align one of the lefter shape with the righter one, it means that there is a prefered or main input. That conducts to design the position of the ports to have a strait connector.

dont

false

Don't design a symmetrical position of ports on the righter shape when connected shapes positions need to be asymmetrical against it.

#8 Usability Heuristic for User Interface Design (Neilson Norman Group)
"Graphical View" Auto-Layout: an example of auto-layout.

Support

If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.

Introduction

Usage

Specifications

Orientation

Alignment

Spacing

Port Position on Shapes

Related Links

Support