MicroArts Follow MicroArts Bookmark and Share
Subscribe to our Branding Insight Feed MicroArts on Facebook MicroArts on LinkedIn MicroArts on Twitter

Designing for Information Hierarchy

By Taylor Luke
Senior Designer

The way a person’s eye trails through a layout can be the key to comprehension and retention of the message your company is trying to relay. And when done correctly, it will lead your viewer to follow through on the call-to-action and take the next step with your company or product. Here are five best practices to ensure the information in your print advertising, brochure, sales sheet, tradeshow booth, retail packaging, point-of-purchase display, website and other layouts are being viewed in the most effective way.

1. Determine the order you want information delivered before creating the layout.
Before your information is placed in a layout, put it in order. What is the first thing you want people to notice? If the information is for a magazine ad, it might be the headline. If it’s for a package, it could be the product name and logo. For a promotional landing page, you may want a call-to-action to be the first thing noticed. Number your content and keep in mind the order as it is designed into a layout. A great self-test you can do once the information has been placed in the design is the blink test.

Close your eyes… now open them on your layout… what’s the very first thing that you look at? Is it the information marked #1 on your list of hierarchy? If not, assess the design to remedy this. The remaining four practices provide ideas to help you troubleshoot.

2. Use fonts wisely.
The bigger a font, the more prominent it will be. True. A bold font will stand out in a crowd. Yes. San-serif typefaces are eye-catching, while serif typefaces tend to be easier to read in paragraph form. Proven. Putting words in ALL-CAPS, italics and underlines shouts they are important. Of course. However, using all of these treatments in the same layout will lead to chaos. A sophisticated layout uses only one or two of these methods to indicate “important: read this” through type style. Adding too many different type treatments in one layout is as effective as highlighting every single line in a textbook when studying for a test.

3. Use icons and color for quick-read summary information.
Some information can stand alone. This type of “CliffsNote” information can be designed for quick reference and easy reading. Bullets are the stand-by method, but go a step beyond this and you’ve got an even more successful way to showcase this information through the use of icons. Creating universal symbols for each bullet point will attract the eye in the same way, hooking the viewer visually first and engaging them to then read the related content. The icons give the viewer an idea of what they’ll be reading about before they get too involved. In your information order, icons are most effective for items that are the second or third piece on the list. Use of color for icons can move them forward or back in that rank. For example, a complimentary color that blends in with the rest of the layout will not place as much emphasis as bright contrasting colors.

4. A classy and updated call-out can be just as effective as a bright orange star burst.
Call-outs often bring to mind some sort of infomercial graphic or clearance sticker in neon colors. These design elements are commonly referred to as “violators” because they invade the space of a layout with a totally unrelated style. There is often still a need for this kind of information prominence when you want your audience to “Call Today” or see a “New Product”, but you can be just as effective at getting attention without sacrificing design. For example, in a layout with many straight lines and 90-degree angles, a call-out can stand out through the use of a more organic shape and curved lines.

5. Keep important information “above the fold.”
We are all familiar with the top news story being placed in the top half of the front page of a newspaper. That’s the story that will catch your attention when sitting in a stack or in a news bin. The same practice is successful for other media as well. For example, websites have a “fold” that is generally considered to be about 760 pixels down the browser window. This is the length the average website viewer has their monitor settings at to see a web page without scrolling. Items near the top of your order should reside here, while lower priority items might require scrolling.

If the information in your branded materials does not follow these best practices, you are not getting the most out of your content. Contact us to see how we can control the eye and the understanding of your customers.

Digg This

2 Comments

  1. Posted December 15, 2009 at 12:16 pm | Permalink

    Very informative post..what I do is normally I will use a nice fancy fonts and a web 2.0 look..people like to see something that is nice,pretty..

  2. Posted December 15, 2009 at 1:33 pm | Permalink

    Clean web 2.0 + more stylized font is a nice contrast. Thanks for the comment!