Every day we consume tons of information from a variety of sources: both offline and digital. There is increasingly more data, and it is not surprising that our brain starts to ignore some of it, perceiving what is most important and convenient. The main task of the UI/UX designers is to help users achieve their goals with your product. But how do you draw the user’s attention and compete with all of this information noise, though? Thankfully, Ralabs UI/UX Design Lead Serhii Strokov created a guide to visual hierarchy rules that will help to review your or your vendor’s work.
Visual Hierarchy Definition
Visual hierarchy is a method to prioritize the information and properly compose its elements. With the help of visual hierarchy, we can control the user’s attention, and achieve your outreach goal efficiently.
It is like architecting a house: all the elements should be balanced and have a functional purpose. Otherwise, the house will break down. The components of visual hierarchy are color, contrast, fonts, space, the composition of elements.
Visual hierarchy can be created by using:
- Colors and contrasts
- Fonts structuring
- Focus on what is most important
- Grouping similar elements
- Content prioritization
- Negative space
- Reading patterns
Color and contrast
Contrast is an essential tool when creating a design. Our brain primarily perceives contrast, not color. When creating a visual hierarchy, contrast is critical to your composition and its most important elements.
According to best practices, designers build the user’s journey by highlighting relevant information with greater contrast. Here is an example of how technology companies do this in their modern presentations of new products.
Color is also a meaningful way to build a visual hierarchy. Color may highlight a Call to Action, bring the user’s attention to an important system’s status, and group similar objects.
Notice how the above image clearly shows that the title belongs to the picture next to it. And, despite the variety and saturation of elements on the screen, the blue Call to Action or “Buy” button always attracts the user’s attention throughout the journey.
Font structuring
Never use too many fonts. You may want to use a few depending on your product’s complexity, but in most cases, 1-2 header types, a subtitle, body text, and, possibly, a caption – all you need for a good font composition. Then, your content will be structured well and easy to read by users.
Focus on what is most important
Make the important items larger. If you are using a picture, give it a whole block on the page. Users get lost among a large number of identical elements. So, why confuse them? Post a large photo where you want to focus the user’s attention, and describe it. It will be clear and effective.
Grouping similar elements
By using the Principle of Proximity – grouping similar elements – you reduce the cognitive load on your user. Our brains are used to search for common ground between different objects, and grouping minimizes the load.
Grouping also helps find the necessary information in your content. For example, we are used to grouping our photos into photo albums, music into playlists, and etc. Splitting one large form into several smaller ones, for example, will also help to reduce the stress of filling it.
Content prioritization
Sort your content, give the user small doses when needed, and build a logical chain. Highlight important blocks, give less priority to less important ones — or do not display them at all. In this way, the user will simply walk through the journey to your business goal.
Negative Space
The best way to highlight the information you need is to avoid creating noise over it. If you look again at all the images above you may notice that they look spectacular because of the Negative Space — free space around the content we put on a screen.
The size of the font or other object doesn’t matter if there is not enough space around it. Give your composition a chance to breathe, don’t be afraid to make larger spacings, cut texts, divide into two blocks that do not fit into one.
Users are incredibly overloaded with information, and they scan rather than read. Therefore, it is essential to provide information in smaller doses.
Reading Patterns
There are different types of patterns of scanning information by users. Among the most common for desktops — “pattern F” and “pattern Z”. We scan the data by these patterns every time before reading.
Pattern F
In 2006, Jacob Nielsen researched that users mostly scan websites using a pattern that resembles the letter “F”:
- First, they scan the text in landscape orientation.
- Eventually, they look a little lower, scanning vertically.
- Then the horizontal scan takes place again.
- Vertical scanning continues.
This pattern is important to keep in mind when building a Visual Hierarchy for sites with a lot of content: blogs, search, newsletters, and more. For this pattern, the first lines of the text are crucial.
Users have to be interested at this moment. If you build your hierarchy on this pattern, the advantage will be its naturalness: it’s a natural way of scanning the information for us.
Pattern Z
This pattern is suitable for websites with small amounts of texts, especially for landings. The users do not need to read a lot of information.
They read the first line and then scan the page diagonally before focusing again on the next block, where it is a good idea to place the CTA button.
Conclusion
Knowing the visual hierarchy patterns, you lead the users’ attention and drive the actions that your business needs.
- Before you start designing, evaluate the content you are going to fill your page with.
- Prioritize, sort, and group content, remove the excess, and then design the page using the rules described above.
- Remember that the visual hierarchy is directly related to the basics of composition. So, explore the principles of composition for more confidence.
Following these rules, you may be sure that you will get a good, readable design.
Need help evaluating your visual hierarchy or crafting UI/UX design?Drop a message to Ralabs UI/UX Lead and get a complimentary review of your project.
