UI/UX: Screen Development with 5 Useful Tips
The Toolkit of Visual Hierarchy
📅 2020.11.10 - 👤 Borbély Viktor
Visual hierarchy helps in creating digital interfaces. Care must be taken that the appropriate information is available, while not unnecessarily flooding the user. The consumer decides in just a few seconds whether they understand what is on the page? Is it for them? Will they find what they are looking for? With a little attention, we can help a lot with this.
I created my writing based on the design4users article.
Visual hierarchy
In order for the content to be clear to the user, designers apply the well-known visual hierarchy technique. This is one of the basic techniques applied during design. This is fundamentally based on Gestalt psychological theory, which examines users to see what impression the relationship of individual elements creates. It also shows how people unify individual visual elements into groups.
Visual hierarchy strives to show content to users in a product in such a form that their importance level can be deduced from it. It organizes UI components so that our brain can distinguish between elements based on their physical differences, such as size, color, contrast, style, etc.
The visual appearance of a UI element greatly influences the user experience in a product. If the components resemble a big mess, then people cannot navigate within the product or interact with it properly. Furthermore, unstructured content is difficult to read, therefore difficult to run through, so it takes extra effort to find the searched data. A weak UX (User Experience) leads to low satisfaction, the consequence of which is that it is widely avoided.
Typographic hierarchy
A defining part of UI design is content description. Therefore, visual hierarchy is often a function of typography. Experts decided to emphasize the importance of content appearance, so they created a separate system for it: typographic hierarchy.
The framework’s purpose is to organize content as well as possible for the user. Designers use and combine letters in different ways to contrast the most significant and prominent content elements that should be noticed first with those that only have secondary emphasis. They modify the size, color, font family, and alignment of letters.
Typographic hierarchy distinguishes different content elements: headers, subheadings, body text, action buttons (CTA = Call-to-Action), captions, etc. For creating an effective hierarchy, these elements must be broken down into different levels. Let’s see what these are!
Primary level. This includes the largest type, such as the header. The Primary level’s purpose is to give basic information to the user and call people’s attention to the product.
Secondary level. These are content elements that we should be able to comb through easily. These are usually subheadings, captions, which help to easily interpret the content.
Tertiary level. Body text and some supplementary data belong to the tertiary level category. Designers often apply relatively small font type, which must still remain adequately readable.
Since content is the main source of information on the UI, designers must gradually reveal data to us. If they apply the above segmentation, users can easily get from one part to another and interpret the information in the appropriate order.
It’s important to emphasize that the small screen of mobile devices doesn’t allow the application of all three levels. Therefore, during design, the second level must be skipped (subheadings) so that the mobile UI appearance remains transparent.
The toolkit of visual hierarchy
When the designer has selected the content elements, it’s time to establish the order. Let’s go through what the designer has to help set the effect.
Size
One of the strongest tools for transforming a visual element is its size. This is rooted in the human mind that bigger things are somehow more important than smaller ones. That’s why users’ attention automatically first falls on big words or images.
Color
Color has a great impact on perception, so it’s excellent for creating visual hierarchy.
Colors themselves have their own order, determined by the effect they have on the user’s mind. There are striking colors like red, orange, black, which easily attract the gaze. The other extreme is weak or soft colors like white and cream colors, which work better as background.
Contrast
The order is based on contrast itself. One element is in contrast with another, and that’s how the user sees the differences between them. Contrasting can be created with visual differences: size, color, style. Still, it’s recommended to keep contrasting in balance so that one element doesn’t completely suppress the other.
White spaces
Many visual elements can appear on the interface, and for each to be noticeable to the eye, private space is needed. White spaces (negative space), or dead spaces, represent the space between individual elements in the composition. Some designers don’t consider it part of the composition, but experts preferably apply it to create proper harmony.
Proximity
I mentioned above, visual hierarchy rests on Gestalt principles, so designers pay special attention to the proximity of individual elements. As people tend to unite visual elements into groups, UI elements must be placed so that users can categorize them. If some elements are at a certain distance, users perceive this as groups. Designers can use proximity as a tool that helps break content into smaller categories.
Repetition
If people believe some elements are similar to each other, they automatically unite them as a group. This is how repetition works. Designers repeat certain patterns on different objects with the purpose that users unite them.
We can see that visual hierarchy is the foundation of an effective information architecture. When UI elements are structured and organized, people enjoy using a product, and it will be more effective in solving their problem.
Cover image: carlevarino