F Patterns

Follows the shape of an F. Starts at the top left. Moves horizontally across the top to the right. Drops down, repeats.

Navigation Example: Scan down the left-hand side of the page reading headlines or subheads.

Use: Text-heavy or dense designs. Information is contained in sections.

Z Patterns

Follows the shape of a Z. Starts at the top left. Moves horizontally across the top to the right. Scans downward on a backward diagonal to the lower-left corner and across to the lower right-hand corner.

Navigation Example: Browsing a page.

Use: Text-light or sparse designs. Main elements are placed along scan lines.

Read about how the F shape is bad on the web and to control it https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Read about visual perception and design https://www.interaction-design.org/literature/topics/visual-hierarchy