Have you once stuck in a website or a web-app which has a lot of elements and unsure where the element will bring you to?Or the overall website is making you out of focus?

In this article, we will dive in more about the importance of visual hierarchy and how it dictate the delivery of information to the end user, in other word, it leads user to know where to focus.

UX designer use hierarchy to arrange the visual element and guided user attentions understanding and journey in the product. They use some principle such as contrast, scale to help them establishing rightful place of elements

The importance of Visual Hierarchy

When designing your information architecture, visual hierarchy is crucial to facilitating visitors’ navigation of your website, product, or app.

Additionally, visual hierarchy lessens the effort required from customers to interact with the product, website, or app by enhancing navigation.

Moreover, a UX designer’s general objective is to improve a product’s usability and reduce friction. One method to accomplish this is to be aware of your visual hierarchy.

The principles of hierarchy in UX

Scale

Size and scale are important in grabbing attention and providing significance to elements in a product. Larger elements naturally draw attention due to their visibility.

Best practices when using scale:

Use no more than 3 sizes. Three sizes provide essential variety to work with — think type size for header, subheader, and body copy — but still keep hierarchical relationships well defined and clear.

Make the most important element the biggest. Emphasise the most important aspect of your design by making it the biggest. In other hands, make less-important elements smaller.

Colour and contrast

When creating a visual hierarchy and highlighting particular elements, colour is a very effective technique. Colour can be used to distinguish between different sorts of material, elicit feelings, and show interactivity.

Best practices when using color and contrast:

Think about the saturation of colour. Bright colors naturally stand out, so use them for important items; less-saturated colors can be used for items of lesser importance.

Don’t use too many colours. While some complex colour schemes are beautiful to look at, they can feel overwhelming on a webpage. When too many colours of similar value or saturation are used, people’s perception of hierarchy among elements is often reduced.

Don’t use too many contrast variations. Use no more than 3 contrast variations for complex designs. If everything is contrasted, then nothing stands out.

Do not rely only on colour to communicate visual hierarchy. People with colour blindness may not be able to perceive differences between certain colour combinations.

Reading patterns

Every UX designer understands the value of effective composition. On its first impression, it has the power to create or ruin a product. Thus, in those vital initial moments, composition is everything. 

Why? Partly because of the fact that consumers rarely read all of the text or elements on the screen. According to a follow-up study by Weinreich et al. regarding the empirical study of the web, the majority of visitors often just skim the sites in search of a few words.

Let’s examine the various reading patterns listed below to gain a better understanding of how consumers scan.

The F-pattern

Screens with a lot of content tend to display this more frequently. As seen in the example heatmaps below, the F-pattern is formed when users follow a line and only briefly delve inside content.

Users scan pages in this shape for many reasons. The most frequent explanation is that instead of reading the complete article, people are searching for short answers to their queries or issues.

The Z-pattern

Z-pattern users place greater emphasis on visual elements than written material, in contrast to F-pattern users. Where readers do not absorb a lot of textual content, this is typically the case for landing pages or one-page websites.

UX designers must position the most crucial items in the corners of the Z to ensure that consumers do not overlook them because they are aware that people scan pages in a Z-shape.

The Gestalt principles

The Gestalt theory addresses how people interpret their surroundings in general. It lends credence to the idea that people identify patterns in objects by grouping them together to create a larger image.

The product’s visual hierarchy is influenced by these five Gestalt concepts. These offer suggestions on how designers might present various product elements in a coherent approach.

Instead than focusing on how our eyes perceive what they see, these concepts are mostly about making sense of the outer world.