Understanding Eyes Movement in Web Design

Although we humans are born unique and different, there are some actions that we share in common resulting in creating a ‘pattern’. Pattern is when something is repeated again and again that it becomes a predictable style, our eyes movement also has patterns, especially when we read. 

With books, the pattern on how we read usually starts from the number of the chapter, then the name of the chapter, then we start reading the text below. However, to ensure that every reader has the same pattern, designs come into play. For books, the name of the chapter may be designed bigger or in bold to make sure that readers read the chapter name first before reading the text. That is the same with web designs, there is a pattern on how users browse a web. This article will discuss how to design a web following eye patterns as well as using designs to navigate flow.

Z Pattern

One of the well known eye patterns is the Z Pattern. This pattern indicates that users naturally read, consisting of 4 joints and users only scan the middle of the page as they will move from right to left diagonally. The only parts that users will be reading in this pattern is 1. Top left 2. Top right 3. Bottom left 4. Bottom right, respectively. This pattern is widely used in designing pages with low levels of text content.

Eyes Movement
Eyes Movement – Z Pattern

This is an example of utilising the Z Pattern in our homepage. As the page doesn’t contain a high quantity of texts, applying this pattern effectively visualises what the brand represents in only 4 points. 

Orders of what you put in these points are crucial. Usually, websites put their logo/brand at the top left of the page because it is the first thing that users see. The second point usually is an interactive element whether login/signup, contact button, Join our community etc. The third space would be something informative. A brief introduction to the brand or a button to the explanation of services. On the end of the pattern, creating a call-to-action is a good placement since it encourages and suggests the next action for users. 

F Pattern

The F Pattern, also known as the F-shaped pattern, is another pattern that is broadly used in web designs especially blogs. The F pattern, refers to the way that users typically scan and read content on a web page. It was first identified by Jakob Nielsen, a user experience expert, in the early 2000s. The pattern focuses on text heavy contents.

The way users scan through the page according to the pattern is beginning at the top left, scanning towards to top right then continuing searching down along the left side for words/elements they are seeking. After finding what they are seeking, they continue from that left point to the right and if they are still not satisfied with the information, they continue doing the same process again.

Eyes Movement
Eyes Movement – F Pattern

Pages that consist of many texts similar to this will be executed using the F pattern.

Visual Hierarchy

After understanding the eye movement and its patterns, another step that a website needs to have is a nicely arranged visual hierarchy that flows smoothly as well as prioritizing what is more important. Designers will visually design and put information into components and categorize their hierarchy using:

  1. White Space: To separate an element from other piles of information. Negative or White Space is a space or a breathing room between elements in the page. It doesn’t need to be in white as it can be any color or gradient. Using this around the element that is prioritized at the top will not only make the element stand out but it will visually separate it with other elements.
  2. Fonts: Using a unique font in the design will grab the user’s attention.
  3. Scale: The bigger the size, the more chance of the user looking at it first. For example, this sentence lies under the ‘Scale’ topic and the ‘Scale’ topic is under ‘Visual Hierarchy’. We know that because there are differences between these elements, size and style. Headings are bigger than normal text and also bolded. The heading ‘Visual Hierarchy’ and the title of this article is also different although they both are bolded. Scales visually create distinct values that users can easily identify. It also helps when the user is trying to find information.
  4. Alignment: If the content is aligned or placed together, it can be recognized as the same hierarchy. One example of aligning elements is to put information that is in the same category together with similar designs that when together is seen as a group.
  5. Lines: Using lines to connect elements is also another method to guide the eye.
  6. Color: Bright colors can attract the user’s attention. Applying colors in text also makes it pop up among black letters.

Conclusion

Patterns like Z or F give us a sense of what our page should contain and how it should be laid out. Placing important components on a specific space on the page according to the pattern can ensure the order of how users see the content.

With the Z pattern, having only 4 joints and 3 lines, it is effective in pages that have a low level of text. For F Pattern, it is suitable for sites with text heavy content. Moreover, after understanding the eyes movement patterns, designing how the logo of the brand, call-to-action buttons, images, or texts are placed will significantly assist user experience when they are seeking for information. Remember, put what you want users to see along the pattern that the eye moves and their experience will improve immensely.

Yes Web Design Studio

Tel. : 096-879-5445
LINE : @yeswebdesign
E-mail : info@yeswebdesignstudio.com
Facebook : Yes Web Design Studio I Web Design Company Bangkok
Instagram : yeswebdesign_bkk
Address : 17th Floor, Wittayakit Building, Phayathai Rd, Wang Mai, Pathum Wan, Bangkok 10330 (BTS SIAM STATION)

HAVE A PROJECT IN MIND?