This week in ICM 502 – Visual Design at Quinnipiac University we are learning about the importance of the hierarchy of information in design. This touches on a lot of what has been covered throughout the semester to present information in its proper order.
As designers, it is important to not only make your design pretty, but also to help guide the reader or viewer to get through the information in the order of importance. Additionally, it is important to have an end goal in mind, and to design the layout to help accomplish this goal. Without a goal in mind ahead of time, it is much less likely that you will meet accomplish something significant with your design.
Breaking it down, this is what you should focus on:
- Develop a Goal
- Organize Your Hierarchy
- Design For Power Levels
- “The Skim”
- “The Branch”
- Call To Action
- The Designer Toolbox
Develop a Goal
Goals are the most important thing to look for when you set out to design. You need to know what you (or your boss) wants to ultimately accomplish with the website. Are you looking to get people to purchase something? Make a phone call? Share a picture? Share with friends? Join the Navy? Kill the radio star? Knowing what your end goal is will help you to get the rest of your design to point your reader in that ultimate direction. Also, numbers are important. If you want to get a 2% turnover rate, your design may be different than if you are looking for a 50% turnover rate. Know these goals and you will be able to accomplish them.
Organize Your Hierarchy
What’s the first thing you want people to look at when they come across your design? What is the most important thing that will catch their attention? Where do they go from there? Are they going to maintain interest in the next thing? Will it lead them to the one after that? Now, does your design lend itself well to this hierarchy?
Make sure that you arrange your elements to best lead your audience through the hierarchical process that is conducive to your goals. In type, we often know how to set up this hierarchy. We use titles for the first hierarchy. Headers for the second and third hierarchy. Body text for the next. Sometimes we use bold text to help break it up, and knock things up a peg in the hierarchy. This also helps with being more scan-friendly. Shawn Borsky’s hierarchy chart helps you to see where the foundation is, and how to finally achieve your end goal in your hierarchy. This chart is pulled from his article, “Using Power Structure and Gestalt for Visual Hierarchy.”
The hierarchy is also done with visuals. Remember that visuals carry visual weight, and can help lead your story along. But if your least important visual has the most visual weight, it can detract from the overall message and lose your reader. Brandon Jones uses this as an example to demonstrate visual weight in his article “Understanding Visual Hierarchy in Web Design.”
When you look at this, you notice that the square has the most visual weight. This is due to its massive size. But what else carries a lot of visual weight? The orange and pink circles? They aren’t near as large as some of the other circles, but because of their bright and attractive color, they carry some more visual weight. You can read more about how some colors are more effective for drawing attention (and thus carry more visual weight) in my article on Color Theory.
Design for Power Levels
When you design your page, you want to make sure that you hit different power levels for different users. Not everyone will read your page the same way. As such, it is important that you understand the different levels of reading to really make the most impact on the largest number of your readers. Much like in print journalism, where you use the inverted pyramid style of writing, it is important to have your most important information more accessible to these readers, and the extra nuggets in the smaller hierarchies. As Borsky describes it, these power levels are “The Skim,” “The Branch,” the Call to Action, and the Facilitation.
Many power readers will skim an article before they even begin to read it. They will look at the titles, the headers, and the images to see if what is there is even worth reading. If these don’t get their attention, they will likely move on, and not come back. Hopefully your design at this level has given them at least a basic understanding of what your page is about.
After you have caught the attention of the skimmers, you now have them in the branch. This means, in web, that not every user will click on the same link. So you have to offer a variety (but not too much variety) so that you can let them feel like they are in control of their own destiny. This will also help to diversify your audience, and end up with a larger percentage of initial contact to end goal being met. Remember, though, that too much choice will end up overwhelming your audience, and they won’t make a choice. You may end up with a much larger initial contact, but your number (not percentage) of end goal turnover will likely be much smaller. Try and keep it to somewhere between two and four options for optimal choice selection.
Call to Action
Ultimately, we want our readers to do something. Register on the website. Sign up for a service. Buy a product. Subscribe. Share. Something. Anything. The best way to do this, once you have gotten past the branch, is with a call to action. You don’t want it to be too obvious, like a flashing moving noisy image that shouts “CLICK ME!” This will make the reader feel like the whole thing has been a cheap ploy to get him to that point in the first place. But you do need it to be conspicuous enough that they know what it is you eventually want them to do, but that it is their choice to do so. Sometimes, your call to action isn’t even a button. Something like “Read on” is a call to action, but is not overly garish.
The final step before the final step. The facilitation is the last thing that helps them get to the end goal. It is not the end goal itself, though. A click on the “Contact Us” page does not equal an email or a phone call. But it is the last step to get there. Here, it is important to be friendly and commanding, and offer easy skimability (again with the skim) and minimal commitment. This will help you turn that initial contact into your final end goal.
The Designer Toolbox
There are many tools that you can use to help you accomplish the hierarchy and get your readers to end goal. Below we will cover some of these in summary.
Gestalt, which is German for the “unified whole,” is the human psychology that tries to take all the individual pieces and organize them into a whole. Much like the shapes above, we are taking a bunch of pieces and making them into one group. To do this, you should have your pieces flow from one to another. Continuation. Similarity. Closure. Proximity. These all help you organize your elements into one unified whole page. Borsky’s article has a lot of good examples of this in his second half.
Different images have different effects. Some are good as background. Others are good for helping to move you from one part of the page to another. Effective use of images will help carry your design a long way.
Different types of type can help carry your hierarchy, and some will actually deter your message and not help with your unified whole. Understanding typography will help keep your gestalt.
White space is important for helping to organize your page and create different groups without the need for borders and lines. Effective use of white space can really lend itself to the professionalism of your layout.