Content overload is a common problem that’s not only caused by a high quantity of content. It’s also caused by the way all that content is displayed. You can’t control how content grows over time, but you can control the way you present it. This is why layout hierarchy is crucial for reducing content overload.
There is a direct relationship between content overload and information quality (research study). When content is presented without any unique differences, it’s harder to consume. But when those unique differences are perceivable, the content isn’t as overwhelming.
Designers often overwhelm users when they present their content in a list or grid layout. This happens when they fail to emphasize any unique content. Instead, users have to sift through each one to determine their uniqueness. To make it easy for users to discover what’s useful, give your layout a strong hierarchy. The following design techniques will help you design a better layout.
De-emphasis
Non-content elements shouldn’t take prominence over content. The content should be the star. Line dividers, arrow cues, titles, and links are all non-content elements that steal attention. Make sure this doesn’t happen by de-emphasizing their size or color contrast.
Notice how the title and link are too large, and the arrows and lines are too high contrast. The user’s attention is divided between the content and these non-content elements. As they scan the list, the non-content elements jump into view as they fixate on content. The more content they scan, the harder it’ll be to sustain their visual attention.
Pattern Breaking
Repeating content the same way in a layout is the norm. But when a piece of content breaks that pattern, it gets more attention. You can emphasize high-priority content by applying a distinct shape to the list row.
The most important content is displayed on a white, rounded shape that elevates into the foreground. The rest of the content have no shape and recede into the gray background.
If you want to take it a step further, you can turn the list row into a scrollable carousel. Now it not only looks different, but it functions differently. This is especially useful for displaying an array of content in a compact space.
You can also use a distinct shape to emphasize images of content rather than an entire list row. The white shape is applied to the thumbnails to make the items more noticeable.
Scaling and Badging
Another way to strengthen your hierarchy is to scale your content and put a badge on it. Larger text and images increase the content’s prominence and ensure users won’t overlook it. To do this, you have to increase the list row’s height to fit the larger text and image. Consequently, this will also enhance pattern breaking.
A badge to signify special items can help users make selections easier. Place a colored text badge to clarify why a particular content is unique. When they know why it’s special, they’re more inclined to engage with it.
Access Full Article
Get access to the full article to learn the design techniques for hierarchy on grid layouts. Your subscription gets you access to this article and all future articles.
Book
Affiliate
