UX design is all about making things easy for the user. One way this is done is through the use of visual hierarchies. This means arranging design elements to stand out in order of importance. This can be achieved in a number of ways, some of which are outlined below.
Size and Proximity
The size of different elements can clearly place emphasis on some and pull focus away from others. Items that are larger in size tend to grab the attention of users, as it is the first thing they will most likely see. The most important items on a digital product should be the largest. This will catch the eye of most users and provide them with the most pertinent information upfront. Smaller-sized items, such as graphical design elements, messages, and more, can then be used to further explain something or to describe less important details.
Proximity goes along with size very nicely. The law of proximity, a Gestalt law, describes that in design, objects that are near each other are perceived as being related to one another. For instance, in a blog post, the headings are closest to the body text they are related to. This works cohesively with size because large elements can be placed near smaller elements that are still related but less important. This way, readers know where to look if they want more information on a specific part of the digital product. So in this article, if you wanted to learn more about recognition and recall, you would find that subheading which is larger than the body text and read the information that is below it.
Color and Contrast
A visual hierarchy is based on more than just the placement of objects on a page. Color can play a huge role in what the user sees as the most important. Color can call out important information and make it stand out from the background. For instance, if a website is mostly black and white, a designer might use a pop of blue and yellow to pull important information to the viewer’s attention. Oftentimes the colors used on a digital product match the colors in the company’s design language to build a stronger connection between the brand and the user. Sometimes specific colors are used to try to tell the user something about the brand. Red is the most popular color for marketing because it captures the attention of users and holds it. It is associated with power, an idea many brands want to portray.
Contrast goes along with color and can play just as big a role. Contrast is what makes the blue and yellow stand out on a black-and-white background as mentioned above. If the designer chose a navy blue, the color would not stand out because it is too similar to black. A sky blue however has a high contrast to black and would easily highlight whatever information the designer wanted. Designers need to make sure they are selecting high-contrast colors so users are able to easily view information and to make sure the visual hierarchy is clear. Colors that are easy to see comply with accessibility standards, so selecting the right hue is something brands need to be aware of. Contrast checkers such as WebAIM exist to help designers ensure they are following standards.
Alignment and Repetition
For years, repetition has always been a key asset in retaining information. This trick can also be used in digital experiences to help users move smoothly to their end goal. Repetition guides users by reminding them of the most important information. This is done by repeating words or phrases throughout a digital product so the user becomes familiar with them. This familiarity reduces cognitive friction and allows users to easily remember content.
Alignment is important in a visual hierarchy as well. For long-form writing, people typically read in an F pattern. This means the most important information should be near the top because users are likely to skim after the first couple sentences. For short-form writing or website designs, the content should be placed in a Z pattern. This is because users typically look over the top of the website, skim over the middle diagonally and then focus on the bottom of the page. Designers can form a visual hierarchy by putting pertinent information where users are most likely to focus their attention for the longest amount of time.
Whitespace, Texture and Style
Sometimes blank space is viewed as a negative thing, but it can be significant in highlighting information users should view. White space permits few distractions surrounding words or a design drawing the attention of the user to that area. Using textures and other design elements can have the same effect. As long as a page is not overwhelming, textures can have an attention-grabbing effect that draws users to specific details.
Why Does it Matter?
A visual hierarchy provides users with subconscious cues that guide them to needed content. These elements allow designers to choose where the user spends their time on a digital product. Utilizing these ideas can increase sales, decrease bounce rates, and provide an overall better experience.