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.
Edit this page on GitHub