Navigation and Canvas

Aug 2, 2010
Episode 35
This week, Nick explores the winding maze of web navigation, and Jim starts part 1 of a two part series on the canvas tag. Exciting!

Thanks to those who make Doctype possible!


When designing navigation, it’s almost always a good idea to use standard conventions. Let’s look at an example…

You should never force your site visitors to guess as to where a link will take them. For example, on an e-commerce site, a shopping cart icon or the phrase “Shopping Cart” has a very standard meaning, and provides a real world metaphor. Some sites might use slightly different terminology to give it some flair and personality, and that’s fine. For example, you might call it a “Shopping Basket” instead of “Shopping Cart.” However, if you, as a site visitor, were to come to an e-commerce site and see a dollar sign instead of a shopping cart, would you know what it meant? It’s easy to say yes in hindsight, but many people would likely be confused by this. To them, it might mean payment without being able to review their items.

This is just one example of a de facto navigation standard, and there are many others, such as the phrase “Site Map.” Stick to these standards and users will be more educated about how to use your site, even when they’re using it for the first time.


This should almost go without saying, but so many websites still don’t have consistent navigation. This is important.

When a user comes to your site, and they identify the main navigation down the side, or across the top, or wherever, they expect it to look the same and be in that same place once they click a link.

This might seem extremely obvious, but many sites on the web make this mistake, probably without even realizing it.

Imagine if something like this were to happen in real life. You’re following directions on a map, you make a left turn on a road, and then you look down at the map and find that it’s completely different. It sounds bizarre, and it is, but imagine how lost a user feels when they click a link and the navigation changes or disappears. At that point, they’re not worried about the content, they’re just worried about where they are and how to get back to where they were before.

As a minor note, it’s OK to have alternative forms of navigation disappear, outside of the main navigation. For example, on the home page of Doctype, the episode navigator towards the middle of the page is completely unique and doesn’t appear anywhere else on the site. The navigation at the top always stays there though.

Revealing Structure

When a visitor first hits your site, the navigation they see should give them an idea of how the site is structured, and what the scope of the information is.

A site can reveal structure in a number of ways. It starts with the name of the major navigation items. For example, if a site had items like portfolio, blog, and about, I don’t even need to see the website to know that it’s probably a personal home page.

On the other hand, if you’re a very large corporation and need to convey lots of information, such as your products, support, shareholder information, and so on, you might want to consider having some major categories with one sub level of navigation. This will help the user understand how information is grouped on your site.

At the same time, you don’t want to overwhelm the visitor. Apple does a great job of this on their website, and names their top level navigation primarily based on their products. By clicking something like iPhone, I can assume that anything I might want to know about the iPhone will be there, such as hardware specifications, feature lists, how to purchase, and so on.

If you have any navigation tips that you’d like to share, let us know in the comments!