When you understand how the human eye processes design elements, you will be able to better arrange the elements for your user.
Content within any digital layout will follow a specific hierarchy. For example, headers appear above the text, menus go at the top, bottom, right, or left of the screen. Designers place content and elements with the goal of presenting the highest priority content on a page first. They then deliver the remainder of the content from highest to lowest priority.
“Hierarchy” is basically the same as saying “organized” for most to least important. The users define the visual hierarchy of a webpage; whichever item grabs their attention first is at the top of the hierarchy.
Hierarchy Principle
Humans are at the mercy of our eye’s natural tendency. So, when it comes to perceiving information, we do so visually rather than as blocks of data. From a young age, when we read picture books or comic books, we understood what was going on because we perceived the images and interpreted the sequence of events.
We perceive information based on several factors that determine how we rank the hierarchy of content within a layout. Some factors that affect hierarchy include:
– Color: Bright colors attract more attention than drab ones. Take, for example, how we use highlighters to mark important content on a paper. Yellow is much brighter and more attention-catching than muted white. After bright colors, darker and richer ones will catch our eye’s attention. Then lighter tints because they appear more distant. Grayscale or muted colors are at the bottom of the color hierarchy. Think about trying to find your friends in a crowd on a foggy day; the one in a bright yellow raincoat will be the first one you spot, then a dark maroon jacket, and lastly, your buddy wearing a gray hoody would be almost impossible to spot.
– Size: The larger the element, the faster it will grab someone’s attention. Think about newspaper headlines; they use the largest font as the header to signal what the rest of the text will deliver. This is to grab your attention and spark your curiosity about what the story will be about.
– Contrast: Contrast helps you show what is important in your design. Dramatically contrasting colors will easily catch the eye of your users.
– Alignment: Alignment creates order between your design elements. Placing content then a sidebar column creates the priority you want the user to experience. Users expect essential information, like login buttons, to be at the top right corner of a webpage.
– Repetition: Repeating styles give the user a sense that content is related. For example, when you visit a page that has many blue words underlined, you know right away these are hyperlinks that can enable you to click on several other pages.
– Proximity: The distance of design elements to each other tells the user how likely they are to be related. When the material is arranged together, users will see these elements as related and make it easier for them to take action on your website and absorb information.
– White Space: The space around your content can be used to draw attention to specific elements. It makes information easier for users to digest and lets the eyes focus on each area of information, like these paragraphs.
– Texture and Style: Texture and style can also be used to prioritize content. The typography on your website sets the tone of your message and content.
Common Hierarchy Patterns
We see many common patterns in both printed and digital pages based on the movements the human eye tends to make.
Z Pattern
Websites with low levels of text content typically follow the Z pattern of eye scanning. The user will scan from the top left to right and then glance diagonally through the content, then move to the bottom right. You can utilize this pattern by making sure you include the essential information along the Z pattern.
F Pattern
For websites with text-heavy content, website designers typically apply the F pattern. With the F pattern, users will begin by scanning left to right along the top. Then they will scan down the left side of the page. When scanning down, they are looking for visual clues to access the information they are seeking. When they find the clue, they want they then scan from left to right and repeat until they are at the end of the page.
Combining the Z and F patterns in one website can be a great practice. For example, you could have a clean homepage that uses the Z pattern and then for deeper, more detailed pages in the website, you can utilize an F pattern.
Hierarchies allow us to easily make sense of a design, so it is important to understand these factors and patterns when designing a website. As humans, we process information visually and perceive elements in the order the website designer has emphasized according to color, size, contrast, alignment, repletion, proximity, whitespace, texture, and style.