Design


Visual Content 101

There’s an Unaware Pattern That you Follow as you Scan Content


Content intake is often based on perceiving. The reading material that we went through as young children featured interesting pictures and large print. Whether it was comic books, colouring books or story books, we could take in what was given based on our perception of the illustration. Hence, how we visually perceive a text is often based on a cognitive pattern-direction. You might not know this till now, but when you scan through a web-page, you usually follow a Z-Pattern.

Eye-tracking research indicates that people scan webpages and screens in various patterns of which visual hierarchies exhibit that the Z-Pattern is the most commonly followed technique. The Z-Pattern layout, as evident as it may seem, follows the shape of the letter Z. The human eye travels and traces the Z-route when they scan the page – left to right, top to bottom wherein the following systematic process is followed through –

People scan from the top left and veer towards the right, forming the horizontal line and then they slide to the lowest left side of the page which creates a diagonal line. Lastly, it goes back to the lower right on the page. If you go through the most popular websites, they follow this Z-layout and understand the convention of such visual dynamics and accordingly design their UI/UX. Below is an example of the same.



When, pages aren’t centred on the text, Z-Pattern scanning occurs while for text-heavy pages such as articles, the F-pattern is used. When simplicity and a Call-to-Action (CTA) line is needed, the Z-Layout brings forth the best interface. A premier technique used in content marketing, the Z-layout technique allows for the readers to get to your most important content exhibit, followed by the second most important information second. Important content elements need to be placed along the scanning path as that induces a sense of flow and allows for better assimilation of information for the readers. Through visual weight and visual direction, the right content at the right positioning allows for the user to dynamically impact your target audience and engages the audience with the website.



An interesting insight into the Z-layout pattern is the extension of this to a Zig-Zag pattern which allows for a series of z-movements instead of a big z-movement. Dropbox does that very well and is able to capture the right information for audiences. Visual prominence is an important factor for you to be able to put forth your curated content well and position it adequately across the web-page



The F-Pattern is also used which specifically addresses easy-to-read text which has text-heavy content. Users begin by scanning from left to the right as they scan down the left side of the page, looking for visual clues to the information that are looking for. After having found the cue, they scan from left to right again. This process is repeated till the end of the page. The heat map for the scanning pattern represents the letter “F”. Most content creators and illustrators feel that hierarchies add on to increasing sense of design easily.

So, the next time you are working on your web-page, try inducing elements like Z and F patterns or their probable fusion to visually engage with your audiences and get the right content cue at the right position.