What is visual hierarchy? Why is it one of the most important concepts in user experience design and user interface design? What are the principles of visual hierarchy design? In this article, I will answer these questions and explain in detail one of the most important concepts in UI/UX design.

Symbols played an important role in human history and culture. It has not been possible to read and interpret the works of ancient people except by interpreting the signs and symbols used in those works. In addition to the signs, the way the components of an image are placed next to each other also conveys a certain meaning.

It is not only shapes that may have a special meaning, colors may also be symbols and signs of something. For example, the red color is usually used to emphasize and attract attention, or the black color is a sign of sadness. In our daily life, shapes and colors (symbols) are very widely used. For example, guidance signs and advertising banners.

Another very good example of the use of symbols and signs and concepts created by putting shapes together is product design (site and application). Yes, it’s not like the site designer or the UI/UX designer puts the elements of the site pages together without any principles and rules. The user interface designer and the user experience designer must create a visual hierarchy between the elements and place the elements next to each other based on the principles of the visual hierarchy.

Visual hierarchy in UI/UX design

How do you organize the books in your room library? There are some that act like libraries. Some people, like me, put books that are more important and must be in sight to be found quickly, or put them in such a way that they can be found at a glance. All books cannot be equally important. This also applies to information. Not all information is equally important.

There are some products that are designed and produced to provide information, such as newspapers. Have you ever paid attention to the layout of newspapers? On the front page of the newspaper, everything is placed in a certain place based on its importance. The main headline should be designed and written in such a way that passers-by can read it at a glance. Sites and applications are the same.

Sites are designed and built to provide specific content and information to the user. There is also information (content) on the site or application that the user must find at a glance and very quickly. Basically, the user should not look for anything on the site and it is the duty of the product designer to make sure that the UI/UX design of the site and the layout of each page (Page Layout) of the site is in a way that leads the user to the most important and useful information. To achieve that goal, designers use a concept called visual hierarchy.

Define the concept of Visual Hierarchy

“Visual hierarchy means arranging visual elements on each page of the site or app in such a way that a natural order is established between them based on the importance of the content or element, so that the user can find out all the information in the order of their importance at a glance, without thinking.”

Therefore, the constituent elements of the visual hierarchy are the set of visual elements (color, font, font size, contrast, empty space, symmetry or asymmetry, etc.). On each site and on each page of the site, based on the type and importance of the content and information that is to be conveyed to the user, the UI/UX designer uses one or more of those factors to create a visual hierarchy between the information.

The importance and benefits of visual hierarchy in product design

There is little to be said for the importance of visual hierarchy. Visual hierarchy is a means of guiding the user’s eye to see information in order of priority. The question that arises is who is the priority, the user or the site owner? The answer is both! What does the store site want? Selling his products. What does the store site user want? Buying what you are looking for in the best conditions and in the shortest possible time.

Therefore, a store site should not confuse its users if it does not want to lose customers. Without visual hierarchy in the site or app, the user does not know where to look! Hierarchy is a visual that tells the user to look here because here is what you want.

So, if the product has the best content and is very attractively designed, and even if the best and most accurate form of information architecture (which is necessary and necessary to build a visual hierarchy) has been done to categorize its content, but the visual hierarchy between the information and its contents, not properly made; The product will not be successful and the user will not have a satisfactory interaction with it. As a result, the product (site or app) will not be useful for the user.

A clear visual hierarchy guides the eye to the most important elements on the page. It can be created through variations in color and contrast, scale, and grouping.

Principles of visual hierarchy design

How to create a strong and clear visual hierarchy on a page? If we write everything that is most important in a larger size or put it in a red-colored bar at the top of the page or in the middle of the page, have we created a visual hierarchy? No! Creating a visual hierarchy has its own principles and rules, and designers must create it on every page of the site based on the principles of visual hierarchy design.

1. Using the principles of psychology, guide the user’s eye based on the natural tendencies of the human mind

As I mentioned at the beginning, in product design, because the ultimate goal is to design a convincing product for the user (human), UI/UX designers benefit from the findings of psychology a lot. In addition to Hick’s Law, the science of psychology tells us that the user’s eye (mind) is more familiar with familiar and predictable patterns and tends to follow those patterns. For example, the human mind tends to recognize. That is, we naturally don’t want to try hard to read and understand something, and our preference is to recognize concepts at a glance.

“So, in order to guide the user’s eye and build a visual hierarchy, designers must either use familiar patterns or act against the patterns to attract the user’s attention.”

Where and how to use the natural tendencies of the human mind or against them in the design of the visual hierarchy of the site, is a decision that the design team must take by considering various factors, including the needs and preferences of the user of that product.

2. Colors alone or a visual element do not create hierarchy.

The building blocks of a visual hierarchy are different and you should not overuse any of them or rely on just one factor. Colors and creating contrast are very, very important. Sometimes contrast may best create hierarchy. But this is not a general rule. Designers usually use a combination of contrast and typography to design headlines or important information. But be careful not to overuse colors and color contrast. Another very important factor that should be paid special attention to in the design of visual hierarchy is the size and scale of the elements.

The user’s eye will see the biggest written or drawn thing first and will naturally understand that it is more important. Therefore, designers use three sizes (and three font sizes) in designing elements: small, medium & large. There is a general rule about the size of elements: the most important element should be the largest element on the page.

3. The visual hierarchy should form a single and coherent whole.

It is true that contrast and large elements and changes in the size of elements should be used to build a visual hierarchy. But this does not mean that the integrity and visual coherence of the product will be lost and everything will play its own way. All the changes in the elements should be proportional to each other and when the user looks at the page of the app or site, he should see a whole unit, some elements of which look bolder and more important. Designers take help from empty spaces and the law of symmetry as well as Gestalt principles to give order and proportion to the design.

4. The designed visual hierarchy should be tested

Nothing in the user interface and user experience design is finalized without testing. A test called The Squint Test is usually used to measure the visual hierarchy. In this test, the page of the site or app is slightly blurred to see if the visual hierarchy and content categories are still clear or not. If the elements become completely unrecognizable, the design of the hierarchy has not been done correctly and should be redesigned. Google Chrome has an extension called Squint for this test.


Leave a Reply

Your email address will not be published. Required fields are marked *