Navigation

Website Navigation

1. Navigation planning

When beginning any project think of Maria from the Sound of Music and the line – "let's start at the very beginning, a very good place to start". In the case of web-design and particularly menu navigation, the starting point is figuring out what kind of features the website offers and the hierarchy in which information should be displayed. A website menu in its early stages is typically referred to as a 'sitemap' and this is usually put together as a diagram or spread sheet to show the different levels of information. There's no right or wrong when it comes to creating a sitemap, in fact we encourage our clients to work with whatever format they feel comfortable using. Typically, we see sitemaps come through looking like the examples below:

Google doc or Excel spread sheet:

Word Doc List:

Diagram style:

2. User friendly language

It is also important to consider menu navigation language and labelling. With so much competition on the web, it's no surprise that we try to get creative with our copywriting but sometimes this is at the expense of clarity. Your site may be industry-specific however, it's important not to forget about the user and how they would interpret or understand what you do. For instance if you were to label a shop area 'Marketplace' this is not a term that users are familiar with and hence it leaves an opening for interpretation. Any link that takes more than a second to figure out or language that forces the user to click in order to discover what's available compromises user experience. If you're keen to see which wording will perform better for your primary navigation you can put some A/B testing into place. More often than not, it's best to keep your primary navigation simple and easy to understand and if you're wanting to add personalisation then why not try this with pop-ups and notifications? The example below from Spread Shirt exemplifies clever copywriting to encourage users to provide feedback.

Directions for Creating a Sitemap in Word

Step 1: Open a New Word Document

Keep in mind that these directions correspond with Microsoft Word 2013. Screen displays and layouts may vary depending on the version you’re using.

Step 2: Navigate to the Insert Tab and Click SmartArt

From here a window like this will pop up.

Step 3: Choose an Organizational Chart Style

For laying out a website it’s best to choose a chart in the Hierarchy category because it most accurately reflects the way websites are designed. Within this category, feel free to choose whichever style suits your fancy. Keep in mind that you can switch to a different style at anytime if you find you don’t like the one you picked.

Step 4: Start Filling in the Chart

The next screen you’ll be faced with is a chart with automated [Text] fillers. It just needs to be filled in with the appropriate content.

Using the box on the left titled “Type your text here” you can start typing in the different titles of your website pages. The top row of the chart should include the words you would want to see in the main home page navigation bar on your website. For example, a simple sitemap for MayeCreate.com might look like this:

Homepage Location in Sitemap

Pay attention to the location of the homepage in the layout of the navigation. Some people make the mistake of thinking that the homepage of their website should be at the top of the chart and would create a site map like this:

Google Sites

Report abuse