F-Layout Scanning Pattern

The following is based on the web design chapter from the book, Teaching Computer Science in Secondary Schools and Colleges (2014), although the same theories are available in many other books and online blogs.

  • F-Layout presents information to the user in a way that supports a natural and comfortable reading/ scanning action, which increases usability.
  • Sometime referred to as the ‘triangle’
  • This layout highlights the best place to locate advertisement or call to action
  • This approach can switch the user off so break the pattern by using objects like
    • Page width images/ advertising
    • Horizontal picture bar 
  • Remember that the user only focus on the grey area highlighted in Figure 1
  •  Think of the F-Layout as:
    • Vertical spine of the ‘F’ running from top to bottom
    • Horizontal lines of the ‘F’ are subheading
F-Layout Scanning Pattern Over Gestalt Layout

Figure 1) F-Layout Scanning Pattern Over Gestalt Layout


F-Layout Scanning Pattern
5 (100%) 1 vote

    Comments are closed.