BES Playbook

4.6 Page Layouts

Layouts

Generally speaking, the layout of a page should prioritize content importance from top to bottom, providing orientation (wayfinding and labels) to components throughout. Layouts should also follow the natural flow of task completion; users completing a number of form fields on a long vertical page might encounter the “submit” button – the primary call-to-action – beneath the original viewport and offscreen. This is permissible because the form fields are the prerequisite for completing the task of the page, and should thus be prioritized in the visual hierarchy.

F Pattern

Studies have found that, in cultures that read from left to right, most people scan screens in an “F” pattern, with preference given to elements that are positioned at the top and left of the screen. Consider placing the most important elements at the top and left of your layout. The upper right of the page is considered secondary in importance due to its positioning at the top of the page, but the importance of the right side rapidly diminishes as you move further down the page.

4.6 F

Other layout patterns support different densities of content and types of tasks to complete. They all acknowledge the way the user scans the page, tending to favor the top and left.

4.6 Zig Zag 4.6 F 4.6 F

References

feedback