web design

Z-Layout Scanning Pattern

by
Avatar_Dan_Campbell
  • The page structure is different from the F-layout page structure
  • Sometimes referred to as ‘1 2 3 Action!’
  • People in the western hemisphere read pages from left-to-right
  • When they arrive at the right side of the page, they jump to  the left side of the page to start a new line
  •  The image allows the reader to cut diagonally across the page to the next line or hierarchy placement, see page Figure 1.
Z-Layout Scanning Pattern Over Gestalt Layout
Figure 1) Z-Layout Scanning Pattern Over Gestalt Layout

F-Layout Scanning Pattern

by
Avatar_Dan_Campbell
  • F-Layout presents information to the user in a way that supports a natural and comfortable reading/ scanning action, which increases usability.
  • Sometimes 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

Images And Visual Direction

by
Avatar_Dan_Campbell

Web designers use visual cues to point readers to key information

This is achieved in many ways from layout (F-layout) to objects on the page

    • Horizontal, vertical and diagonal lines lead the reader’s eye
    • Space between objects allows the user to move quickly between chunks
    • Hierarchy within the page allows the user to quickly make judgments about it relevance

Images are also visual pointers

  • Used to support information
  • Used by the reader to find information
  • Used to influence the readers emotional state about the information (violence or love)

Research has shown that people

    • Focus on human faces
    • Body language
      • Facial expression
      • Arm gestures

The baby example

    • When the baby is looking at the text (information) more people look at it
    • When the baby is looking away from the text (information) less people look it
baby-eye-tracking-3
Figure 1) Images And Visual Direction – Baby Eye Tracking

Gestalt Theory

by
Avatar_Dan_Campbell
  • Gestalt is a German word meaning “essence or shape of an entity’s complete form”
  • Humans see the overall shape and colour before the details
  • For example, a stone mansion cut the material to the shape that they want before adding the details
  • Google “gestalt pictures” for examples
  • In practice, this means that you should look at the overall shape (structure, silhouette)
  • Remember,  until you change the structure the page will always look the same
Gestalt Theory - Before Change
Figure 1) Gestalt Theory – Before Change
Gestalt Theory - After Change
Figure 2) Gestalt Theory – After Change