BACK
January 16, 2021
Let’s look at a topic that deals with, oddly enough, how we look at designs

Look at how we view pages of a website. With a greater understanding of how the eye processes these, we will be able to arrange components more effectively.

Through this blog, we are going to look at how we look at pages of a website. With a greater understanding of how the eye processes these, we will be able to arrange components more effectively.

Components, content, pretty much anything that forms a digital page layout will follow a specific hierarchy; examples of these;

  • Menus go at the top
  • Footers at the bottom
  • Headers appear above the body text

Designs try to organise content from the highest priority to the lowest on any given page first.

“Hierarchy” is a simple way of explaining the process of organising the most to least important. Hierarchy is also a way to show relationships between blocks of content if these relationships exist. 

Users define the visual hierarchy of a website or app, content that initially grabs the eye’s attention is the highest priority on that hierarchy. Each item that draws attention after is lower-ranking to the one before it.


Hierarchy Patterns

Common patterns exist for hierarchy both on printed pages and for the digital page. These patterns are based on how our eyes tend to move when viewing a new page. Before selecting a hierarchy pattern it is important to understand our users, and how they process information; for example in English we read left to right, whereas Arabic readers are right to left.


Z Pattern


Source: Understanding the Z Layout; http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design--webdesign-28


Websites with low levels of text content, that act more as an advertising site for a business or product, also commonly referred to as brochure sites, will typically utilise the Z pattern.  Users see this type of page and will scan from the top left to top right, then review the content below following a diagonal line to the bottom left, before finishing off looking at the bottom right. 

To make full use of this pattern ensure that the most important information is included along with the Z pattern as illustrated above by the four points joined by three lines, forming the Z shape.


As touched upon earlier Z-pattern scanning occurs on pages that are not text-heavy. Users first scan the horizontal line between points 1 and 2, this may be because of a menu bar, logo, heading, or simply because of the habit we as user form for reading from left to right starting at the top. 


As our eyes reach the right side, we snap our gaze down and to the left, again this is all based around our reading habits. With our gaze on the left again we naturally follow it across to the right.

Almost all web interfaces are able to utilise the Z-Pattern, since is addresses many of the core requirements of a user interface . When simplicity is a priority, and the call to action is the main focus, such as those landing pages found after clicking on a Google ad, the Z pattern works well.

Websites with complex content may be more suited to the F-pattern, forcing a Z pattern may not work as well as intended. Simpler layouts can have a sense of order if best practices are followed, keep these in mind:

  • Point #1 — The best location or your logo
  • Point #2 — Navigation, secondary call to action
  • Center of Page — A Feature Image or Slider in the centre of the page will separate the top and bottom sections and guide the eyes along the Z path.
  • Point #3 — Additional information or content
  • Point #4 — The finish line, and an ideal place for your primary Call to Action.

The ability to predict the user’s eye movement is a powerful tool, before arranging components on-page, a prioritisation exercise will be of great help. Once you have an understanding of what your users are looking for, it is just a matter of placing elements following the above best practice.

F Pattern
The F Pattern is the designers preferred pattern for content-heavy websites, be this text or video content. This pattern often produces heat maps that reflect the letter F, as shown below.

Source: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/


The F pattern causes the user to start by scanning left to right along the top of the page, before scanning down the left side of the page. When scanning the user is looking for visual clues that will lead them to the information they need. Upon finding the clue, the user again scans from left to right. This pattern is often repeated until they reach the end of the page. A good example of this is Google’s search results landing page. The end result is something that looks like the letters F or E.

F pattern and the aforementioned Z pattern can be utilised across the same website. An example of this could be a very clean homepage that utilises the Z pattern; upon the user delving deeper into the site, more information can be presented using the F pattern instead. 

Blogs or other text-heavy websites can when heat mapped appear to have an F pattern to them. This comes from the user scanning a vertical line down the left side of the text, scanning for keywords or points of interest. This behaviour is typical in a paragraph's initial few sentences. 

Jakob Nielson of the Nielson Norman Group undertook a readability study of 232 users scanning thousands of websites. During the study the following practical implications were discovered:

  • Rarely will a user read every word of text presented to them
  • The key paragraphs are the first 2
  • Always try to start paragraphs, subheadings and bulleted lists with keywords that draw user attention

How could this impact the interface design of your website? Take a look below.

Source: Understanding the F Layout; www.webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design--webdesign-687

You can see in the image that the most important content can be seen in a few seconds, with more detailed content (and a call to action) presented immediately below for quick scanning.

The F-pattern can be very helpful for sites that want to embed advertising or calls to action in a way that doesn't overwhelm the content. Just remember that content is always king, and the sidebar exists to get users involved in a deeper level. As with all patterns, the F-Pattern is a guideline — rather than a template — because the F-pattern can feel boring after the top rows of the F.


Kingsley media
Whether you're bringing a new product to market or redesigning enterprise software, we'll make sure it's done right 👌
Kingsley Media LTD
35 Kingsley Wood Road
Rugeley
WS15 2UF

Company Number: 10121315

©2020