Direct Your Audience To Important Content Through Visual Hierarchy

Posted: 04 Oct 2012 05:30 AM PDT

Every website communicates information through design. Some of the information will be very important and some not so much. Your audience won’t know which is which at a glance unless you provide cues for them by creating a visual hierarchy in your design elements.

I want to spend a little time today talking about how I prioritized the different elements that are included in the design of a single post here and how I designed these elements with their hierarchy in mind.

Screenshot of the post 'How Constraints, A Concept, And The Principle Of Unity Help You Make Design Decisions' — Screenshot: How Constraints, A Concept, And The Principle Of Unity Help You Make Design Decisions

Content Needs to be Prioritized

Let’s start by looking at a single post and consider what elements are included.

The image above is the top of a post from a few weeks ago. The screenshot was captured with a size about 1200 x 735. It’s what you would see landing on the page with a browser open to roughly 1200 x 900 depending on how much browser chrome is visible.

You can see quite a few design elements even if the majority of the post isn’t shown.

Logo
Global navigation
RSS button
Post title/headline
Post content (text)
Post content (image)
Post author
Publication date
Categories and tags
Breadcrumbs

Not seen in image, but included further down the page are:

Comments
Social sharing buttons
Social profile buttons
Additional subscription information
Links to recommended content
Copyright information
Advertising

Each of these items was included in my list of content types and has some level of importance that I had to determine before designing. I didn’t rank them all in order from top to bottom, but I did create a few levels of importance and placed the above elements into one of those groups.

Hierarchy is a tool that helps your design communicate the importance of different elements

The post title or headline sat at the top of the prioritized list and an element like the publication date sat at the other. Then there are elements like the social sharing buttons, which I don’t consider important at all when you first land on the page, but take on a greater importance once you’ve finished reading a post.

For the design to be effective these different priorities need to be shown visually.

Visual Hierarchy Communicates Priority

To show the priorities of elements visually we’ll design them with different visual weights and follow a few simple ideas.

Content with a greater priority gets more visual weight.
The difference in visual weight between elements of different priority should be enough to distinguish between them.
The greater the disparity in priority, the greater the difference in visual weight.

The Dominant Element

I mentioned above the post title or headline had the highest priority. It should be the dominant element in the design and hold the greatest visual weight. It’s goal is to attract your attention and increase readability of the post.

To accomplish this I’ve made it the largest and darkest element on the page and provided ample space around it increasing it’s relative weight compared to its immediate surroundings.

It should be the first thing your eye falls on when you land on the page. If you give the page the squint test, you’ll notice that after everything else on the page has blurred away, the post title is still highly visible and even readable.

I could have done more. I could have made the text even larger and increased the space around it. I could have given it a bright color or added visual effects like drop shadows and gradients. Trent Walton does a great job of dressing up post titles to stress their importance and call more attention to them.

Reading glasses creating focus on a newspaper

Focal Points

Elements at the next level of priority become focal points to draw your eye after it’s had time to absorb the dominant element. Considering the same “above the fold” screenshot of my post, there are a few focal points that hopefully attract your eye.

The logo
The rss button
The top of the post image

There might not always be a post image visible immediately, but when present its goal is to help draw you further into the post. Here your eye might bounce back and forth between post title and image a few times before settling on the opening paragraph you’ll hopefully read.

Naturally I want people to notice both the logo and the rss button, particularly when visiting the site for the first time. Notice how these two elements use color to contrast with other elements, while maintaining similarity with each other.

Contrast sets them apart in the hierarchy
Similarity shows they’re at the same level of the hierarchy

Where color is used elsewhere on the page it’s often cooler blues and greens that recede into the background, unlike the red that moves to the foreground. Both of these elements are also a little larger than the text on the page.

I’m not sure I’ve given these elements enough visual weight. I could have made the red brighter or made the elements larger. Adding too much visual weight would have them compete with the dominant title, but I could add more weight without that happening or increase the weight of the title to keep it dominant.

These 2 focal points should also help you notice the global navigation as your eye runs back and forth between them. It might even catch the red marking the current section as active.

Further down in the post elements like subheadings, images and captions, pull quotes, lists, and blockquotes become focal points to draw you through the content. Each is given a different visual weight than the main text to attract your eye to them.

Lesser Elements

What’s left are the lesser items in terms of the hierarchy. First is the main text of the post. Naturally I want you to read the post and consider the text important, but if I’ve kept you here for a few minutes and the other elements in the hierarchy are doing their job, you’ll likely begin reading at some point.

What’s contained in the main text is actually the most important thing here, but visually it doesn’t need to be shown that way. You aren’t going to miss it’s presence.

Next is the meta information in the left column. My name, the publication date, category and tags for the post, and the breadcrumb links. All of these are nice information to know, but none are essential to reading the post. If you skip over these it’s probably not the biggest deal, at least on your first visit. If I’ve done a good job in getting you to come back, I know you’ll notice these at some point.

Taken in their entirety the group of meta information could be seen as something of a focal point. The combined visual weight of the block helps create a balance with the content on the right. There’s a generous amount of space around the group and you’ll no doubt notice it before moving down the post, however the individual elements inside are given less weight than most other elements on the page.

If you do read down the meta information you’ll end up at the post title in the breadcrumb trail. Notice how like the main post title it’s also bold, which should help draw your eye back to the post title and ideally back into the post itself.

Similar consideration has been given to the elements further down the page that don’t appear in the screenshot above. With all of them I first determined the level of importance based on the type of content and the page goals and then gave more important elements a greater weight visually.

Summary

I’ll be the first to admit this may not be the prettiest page you’ll come across online and it probably doesn’t get you to say wow the instant you see it. There are no eye-candy graphics or trendy css techniques in place

However, by following solid design principles and creating a visual hierarchy in the elements, the design can accomplish its goals. It lets you quickly know if you’re in the right place and then points you to some additional cues for what the site itself is about and where you can go. It directs you to the more important content and leads you further into the page.

It presents a call to action early on in the form of the rss button and quickly gets out of your way. At appropriate times it’ll remind you to share the content with others and remind you again to subscribe, if you already haven’t.

Not to say it can’t be improved, but a few simple principles can do a lot and at a later time the eye candy can be added as long as it helps reinforce what’s already in place. A principle like hierarchy is a tool that helps your design communicate the importance of different elements. Meaningful aesthetics that remain subordinate to these principles and page goals can then be added to great effect.

Next week I’ll consider the design in terms of its responsiveness and talk about how I both designed and developed it with the knowledge it would be viewed in more than a desktop browser.

The post Direct Your Audience To Important Content Through Visual Hierarchy appeared first on Vanseo Design.