Connect With Us

Web Designing Layouts (F & Z) Pattern

By Nikesh Suwal on Apr, 10, 2017 in web-design-layout-pattern, design, f-patter, z-pattern

Here in Jyaasa we believe that web design should focus on how the information is read and scanned on the screen by people. Visual hierarchy, F-pattern and Z-pattern are most important principles behind our effective web design that many people have adored.

Visual hierarchy

A hierarchy is essentially an order of items, goals, ideas, and/or needs. Hierarchy in web design mainly about focusing a user to understand and embrace the principal goals of a website and interact with the material in the ideal order to facilitate a smooth and pleasant experience with the website.
Visual Hierarchy = Information Prioritization

How we make sense of what we see

Firstly, let’s understand what is visual communication 

  • We recognize similarities and differences. 
  • We look for patterns.
  • We create relationships between the things we see. 

How do we establish hierarchy in layout design? 

  • F pattern
  • Z pattern

F-pattern

F-pattern is one of the most common eye-scanning patterns when we talk about the block of contents. It follows the shape of the letter ‘F’ as it refers to the user first scanning a horizontal line across the top of the screen i.e. Left to right.

General behavior pattern:

  • Start in the upper left corner.
  • Read/scan the first (head)line of the text.
  • Scan down the left side of the column until you find something interesting.
  • Read the interesting thing more carefully.
  • Continue scanning down.

Eyetracking heatmaps with 3 different examples of the F-pattern for reading web pages

Heatmaps from user eye tracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn't attract any fixations.

Why F-Pattern Works

F-Pattern works as it allows readers to scan naturally! This layout is natural & feels it comfortable as we do prefer the reading top to bottom & left to right. There is a myriad website in the realm of web application development that are using this pattern. Most of the advertisements rely heavily on F-layout as it drives user-engagement in more natural & comfortable manner.

Redit

 

Z-pattern

The Z layout is a design understanding that attempts to get ahead of the user, abstracting any distraction and presenting encouraged action as quickly as possible.
It tackles the 4 of the big principles of an effective design for branding, call-to-action, structure and hierarchy.

Brand or Logo Recognition

  • Relevant Links Related to the Page, Company or Product.
  • Information gathering – What is the immediate benefit of this product or service?
  • Action – Allow for the visitor to take immediate action related to the product being shown.

Why Z-Pattern Works

However, Z-pattern does not need to any final words. Since, it controls four major reasons for effective web designs as in:

  • Hierarchy
  • Branding
  • A call-to-action
  • Structure

 

The pattern actually works as in the readers scan the same way as they scan the book i.e. Top to bottom & left to right. The pattern urges simple foundation as in you can add multiple call-to-actions, compress and extend the height of the pattern and whatever you would like that makes sense.

Medium

Facebook

SlideSharehttp://bit.ly/2ooesFW

Share This:

Comments


Add a new comment

Latest Posts


Design Sprint By Neha Suwal on Aug, 14, 2017

3 years of helping startups and entrepreneurs with technology By Neha Suwal on Aug, 04, 2017

Digital Marketing for Startups By Neha Suwal on Jun, 30, 2017

Jyaasa in Prestige Talks By Neha Suwal on Jun, 16, 2017

Helping digital era entrepreneurs: How Jyaasa helped create a tech startup success story in Sydney. By Kapil Raj Nakhwa on May, 29, 2017