Design hierarchy and reader’s flow

MESSAGE DELIVERED!

Have a nice day,
In today’s episode, we’re going to look at the design hiearchy, that is, how good design readability can deliver key information to consumers in a clear and fast way.

Why evaluate the design “readability”?

Reading speed is important because in most communication touch-points the consumer or shopper gives us minimal time, whether we are in a physical or online environment. If we have 1-2 seconds in a traditional retail or e-commerce environment to grab the initial attention, we have another 2-3 seconds to deliver the key message. And the more complexly we put together and offer the information to the recipient, the more at risk they are of not reading it to the end and losing a potential customer.

Objective data from a real eye-tracking camera

Very objective data and evaluation of the legibility of the design is provided by a classical eye-tracking camera, which can record the fixations of the human eye while reading. The aggregated output then shows us the main points where the reader stops and where his attention is directed in the next step. Combined with the heatmap, we thus get a very good overview of not only how much attention a design element gets, but also the order of the elements when reading the design.

Analysis of the reading path (eye fixations during reading) compared to a classical heatmap.

Using predictive AI eye camera

Predictive eye cameras using artificial intelligence (AI) cannot yet accurately estimate the real direction of reading (first solutions are already emerging). Nevertheless, it can quickly and with high accuracy help identify opportunities to improve design in terms of reading speed and, by implication, the hierarchy of graphical elements.

Attention analysis using Ai predictive eye camera (focus and heat map).

Reading speed is affected by the number of graphic elements and especially those elements that draw primary attention to themselves. The focus map of the predictive eye camera shows us those graphic elements that will draw the reader’s primary attention. If we have too much information (graphic elements) in the focus map area, the reading speed will also be slower. Combined with the heatmap and general insights from the attention area, we can infer that the primary attention will go from the child’s face towards the headline and text in the case of the example above. Then to the logo or to the baby’s finger pointing to the diaper.

With such information, we can already optimize the design in terms of its hierarchy and reading speed.

Other useful insights

The reading hierarchy can be assessed based on other insights, such as atavisms, which are biologically programmed actions encoded in the unconscious part of our brains. This rule has been formed since the beginning of evolution and is related to the self-defense mechanisms of humans. It tells us the order in which the human brain processes stimuli from the environment. We perceive other people first, then animals, physical things, symbols, and then texts. If we work correctly with the placement, size, colour or contrast of these elements, we can guess and thus influence the reading sequence of our communication.

There are other handy insights that can be used to evaluate reading direction, just look around the internet.

Key part of effective communication

Hierarchy of design and the associated speed of reading and delivery of the main message are key characteristics of effective communication at all levels of marketing communication. Therefore, it is important to pay attention to rapid and objective evaluation.

In the next episode, we’ll look at the third important area of communication, which aims to generate action in the form of a sale or conversion.

Have a great summer ☀️
Jan from Designcheck.ai

Explore more

Hierarchie designu a rychlost čtení.

MESSAGE DELIVERED! Pěkný dobrý den,v dnešní epizodě se podíváme na hierarchii designu, to je na to, jak dobrá čitelnost designu dokáže spotřebitelům doručit klíčovou informaci srozumitelně a rychle. Proč vyhodnocovat

Read More »