Creating Visual Hierarchy

Things to keep in mind when trying to design a good visual hierarchy…

In general, people from Western cultures will:

  • Quickly scan from upper left to bottom right to get an overview of the screen.
  • Tend to look at larger items first and smaller items last
  • Be attracted to bright colors first, but also look at colors that contrast with or are different from other colors.
  • Interpret item places above other items as more important than items placed below.
  • Look at items that appear “heavier” first.
  • Assume arrows and elements pointing to the right mean forward while arrows pointing to the left mean backward.
  • Look at moving elements before static ones.
  • Tend to look at moving images of another human (such as a video) before moving on to other elements.

(Graham 1999)

The following list contains some of the visual techniques you can use to emphasis the focal point in your visual hierarchy.

  • Make it the biggest
  • Make it the brightest
  • Enclose the item in a different shape than that of the other content screen.
  • Make the item a different shape that that of the other content screen.
  • Add a border to the shape around it.
  • Change the color of the item to make it contrast with other items onscreen
  • Isolate it from other items onscreen
  • Add a special effect to it (like texture)
  • Make it bright if everything else is dull (or visa versa)
  • Make it sharp if everything else is out of focus (or visa versa)
  • Position the item so all the other elements lead to or point toward it.
  • Animate it (make it blink or change colors, apply a rolling texture to it, or create a looping image animation)
  • Use another animated element to call attention to the item.

Sections of a Webpage

Global Navigation : Visitors need to know, on every page of the site, where he or she is in the context of the site as a whole. As a result, global navigation should appear consistently on every page. Global navigation refers to the major sections of the Web site, not every single page.

Local Navigation : A submenu of links within each of the major sections of the Web site. Local navigation should appear near the top and at the bottom of every page.

Page-Specific Content : Includes headers (aka headlines), sub headers, text, images (including photos, drawings, charts, etc), video, audio, animation, and captions / copyright notices (for images and other media elements). Most pages will contain a combination of these elements. The most prominent content should appear in the center of the page.

Administrative Navigation: This is a separate group of links to utility information unrelated to the actual content of the site, such as “help”, “site map”, “contact us”, and/or “about us”.

Page Title: Your page title should match the link that led to the page as well as the header for the page. It is often ignored but very important because it is the information listed when bookmarks are displayed and search engines give their results. Page titles are best used in this format: Site Name: Section Name: Page Name. 40 characters or less is best.

Search Capability : Some people can’t be bothered browsing – especially if they’re in a rush. If you can, implement search facilities for your Web site and make them consistently available on every page.

Page Footer: Be sure to use a consistent footer at the bottom of each of your pages.

Tips to follow:

  • Use a Hierarchical Structure – Place items of higher importance at the top of the page in easy to find places.
  • Text Links in Lists vs in Paragraphs – Better to keep links separate from textual content.
  • The Home Page Is the Doorway to Your Site – As with feng shui, the entry of your site has the power to make people feel welcome or scare them away. You home page design is very important. Be sure it clearly identifies your site.
  • Keep Pages Short and Concise – Long scrolling pages are difficult to read online.
  • Provide a Link to a Site Map on Each Page – This would normally be part of your administrative or utility set of links.
  • Use Consistent Navigation Cues – Keep your link sets in their same locations on each page. Think about conventions you see in the outside world and how they’re consistent followed: road signs, street addresses, page numbers, book indexes, etc..
  • Use Links Thoughtfully – Label your links using clear and obvious terminology. Bury your external links deep in the site to force visitors to use your site before they leave it. Sending external links to new browser windows allows your visitors to easily pick up where they left off on your site.
  • Test As You Go Along – Even at the wireframe stage, you should be getting feedback from others. Show them your pages and see if they can understand how you use your site.
Stolen from the study package for Ned11

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s