The principle of Continuity states once the eye begins to follow something, it will continue traveling in that direction until it encounters another object.

A good example is a line with an arrow at the end of it. The symbol indicates that the user should follow the line and see where the arrow is pointing. The pointing finger also provides the same functionality. See Figure 1 below.

Figure 1: Symbols to direct the user's eye toward an object.

The Grid Layout

One of the most common examples of continuity in form design is the grid layout. Grids are most useful in bringing order to a layout, but also useful in indicating context. (Source: Andy Rutlage – Gestalt Principles).

Question:  What are you left with when you open a form in Nintex Form designer and clear all of its contents?

Answer: A grid.

As Figure 2 shows, the canvas for all Nintex Form layouts is a grid - small rows and columns of cells used to aid in the layout and placement of objects on a form. 

Figure 2: A Nintex form cleared of all its objects is a grid.

The Horizontal Grid

As Figure 3 shows, horizontal form layout labels are right aligned and floated to left to make them appear on the same line as form controls. Horizontal layouts are best for forms that will be used on desktops, where there is lots of horizontal space.

Figure 3: Horizontal form layout

In Nintex Form Designer (see Figure 4), you will notice that the default Desktop, Tablet, and iPad layouts are all horizontal, as those devices all have more horizontal space to work with.

Figure 4: Nintex Form with Horizontal Layout

The Vertical Grid

The form controls in this layout are stacked with left-aligned labels on the top. (See Figure 5)

Figure 5: Vertical form layout.

As Figure 6 shows, the vertical form layout is best for mobile devices where there is more vertical space to work with. Nintex Forms Designer applies a vertical layout as the default for the Smart Phone and Nintex Mobile Phone layouts.

Figure 6: Default layout for mobile phones

Logical Sequencing of Fields

So far, all examples of the continuity principle have been based on physical attributes – an arrow or finger pointing at another object, a grid of labels and fields arranged in a certain way. However, continuity in good form design can come from the logical grouping of fields who share related content.  For example, when collecting geographic information, not only should the fields be placed on close proximity to each other, they should also be organized by order of scope – from largest to smallest.

Figure 7: Sequencing of fields based on logical continuity

As Figure 7 above shows, Country is the broadest category and is displayed first. A country is made up of multiple states or provinces – placed next on the form. A state or province is made up of multiple cities, which in-turn can have multiple postal codes.

Conclusion

The principle of Continuity states once the eye begins to follow something, it will continue traveling in that direction until it encounters another object. Continuity in good form design can come from both the physical and logical layout of the fields. The physical placement of labels, fields, and buttons in a grid can help users quickly and easily navigate the form. While the logical placement of fields together can help reduce confusion.

Below are links to the other posts in this series.

Applying the Gestalt Design Principles to Form Design​

The Gestalt Principle of Proximity​

The Gestalt Principle of Similarity

I hope you found this article to be of value. Thanks for reading!