Tuesday, July 22, 2008

Using breadcrumbs to define IA



"Breadcrumbs" is a technique used to let visitors know where they are in a site as they get deeper into content. An example might be:

Home > About the Company > Staff > Creative Director

Usually all but the current page is also a link, which lets you go up how ever many levels you want in one click. Generally it's a rather useful technique, particularly in large sites with many layers to them.

Rottentomatoes.com has an interesting take on breadcrumbs. In addition to setting up the hierarchy in a left-to-right manner, they also scale the text to match the relative "size" of each section. It's a good way of enforcing a mental map. Just as the United States is bigger than Massachusetts, which in turn is bigger than Boston, RT shows that the "Movies" section is bigger than "In Theaters" which is also bigger than the individual page for "The Dark Knight."

While there are a couple potential issues with how they have set this up (the breadcrumbs themselves don't really look like links, the / is not necessarily the best separator, and it is a bit odd that the movie name is in a different font), the overall concept is one I hadn't seen before and quite appreciate. It not only tells you where you are but reinforces the hierarchy and information architecture of the site.

Kudos, RT.

No comments: