Placement and order

In order to place your objects and components correctly, you must always keep in mind the reading pattern of your user. Two types of patterns can be encountered: F and Z.

Reading patterns

The F reading pattern

The F-shaped scanning pattern is characterised by many fixations concentrated at the top and the left side of the page.

Users first read in a horizontal movement, usually across the upper part of the content area. They will then move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.

The main interaction should then be aligned on the left.

The Z reading pattern

The Z-shaped scanning traces the route the human eye travels when they scan the page — left to right, top to bottom.

Users first read in a horizontal movement, usually across the upper part of the content area. They will then move down and to the left side of the page creating a diagonal line, and then move back across to the right again forming a second horizontal line.

The main interaction should then be aligned on the left.

Placement of buttons

Buttons in dialog windows should in most cases be placed in the bottom right corner and supplemental actions should be placed on the oppsite side of the dialog than the main button group.