By Nikesh Suwal on Apr, 07, 2017
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.
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
How do we establish hierarchy in layout design?
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:
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.
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.
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.
However, Z-pattern does not need to any final words. Since, it controls four major reasons for effective web designs as in:
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.
Don't miss the next one!