Seven Principles For Designing Website’s Navigation

Author: Changsoo Lee

Seven Principles
For Designing Website’s Navigation

Assume that your website consists of a number of webpages. How can your users locate a certain webpage that they want to read? In order to make all of the webpages on your website available to your users, you should pay attention to the navigation design on your website. This blog posting will introduce seven important principles.

  • Seven Principles
    1. Target your potential users
    2. Set the functionality of your website
    3. Use consistent layouts
    4. Take advantage of colors
    5. Provide structured navigation
    6. Provide search functions
    7. Test your navigation many times

 

1. Target your potential users

When you design the navigation for your website, you should know who your potential users are. By creating personas and use-scenarios, you can imagine the potential users and their activities related to your website. In addition, you can obtain information about your potential users’ characteristics such as average age, gender, education, and purpose. You can reflect on these factors to create your navigation.

Depending on your target users, navigation designs can differ. Below are some examples.

(1) GNU Operating System (http://www.gnu.org) – This website is for software engineers. The navigation is written only in pure text, which does not have any non-essential graphics.

 gnu

(2) PBS Kids (http://pbskids.org) – The target users are children. The navigation consists of cartoon characters. Children who know the cartoon figures are able to locate television programs that they want to see.

pbs

(3) Everything Girl (http://www.everythinggirl.com) – This website is for young women. For the target users, the navigation contains texts and pretty graphics.

everythinggirl

  

2. Set the functionality of your website

The navigation should be in a different form according to the functionality of your website. If your website sells items that are well categorized, you can consider using a hierarchical or multi-stage navigation style. However, if your website provides up-to-date news or information, a flat or single-stage navigation will be better for your users.

(1) Amazon (http://www.amazon.com) – Amazon has a hierarchical navigation design. If your potential user wants to buy a camera, he or she will be likely to click the “Electronics & Computers” category. This hierarchical navigation helps users locate items that they want to find easily.

amazon

(2) The New York Times (http://www.nytimes.com) – News contents changes everyday. Thus, users do not expect news websites to have hierarchical navigations. When your user clicks “U.S.,” he or she probably wants to see the important news about the U.S., not sub-categories relating to specific states.

nytimes

If you need more detailed information about the advantages and pitfalls of the organization style, I recommend you to read this blog posting, “Flat vs. Deep Website Hierarchies (http://www.nngroup.com/articles/flat-vs-deep-hierarchy/).”

3. Use consistent layouts

The navigation should be displayed at the same position throughout the whole website to helps users locate the same navigation at any webpage. In addition, the navigation that is displayed at the same position helps users distinguish the website content apart from the navigation area.

(1) USA Today: Money (http://www.usatoday.com/money/) – The above black bar part is the navigation area. When a user clicks a category, the content below the navigation area changes corresponding to the clicked category, but the navigation area remains same so that users are able to distinguish the content, which they are interested in, from the navigation area.

usatoday1

(2) USA Today: Tech (http://www.usatoday.com/tech/) – Users are able to distinguish the content from the navigation easily because the website maintains the consistent navigation area at any webpage.

usatoday2

4. Take advantage of colors

When you design the navigation of your website, you can put colors on the texts of the navigation, which corresponds to the color of webpages. For example, the navigation of the Guardian website has green-colored “Sport” and blue-colored “Travel” texts. The sport and travel sections have corresponding greenish and bluish webpages, respectively. Please, see the below examples.

(1) The Guardian (http://www.theguardian.com/us) – Take a look at the text colors on the navigation.

guardian1

(2) The Guardian: Sport (http://www.theguardian.com/uk/sport) – The text “Sports” on the navigation is green and the sport section also consists of greenish webpages.

guardian2

(3) The Guardian: Travel (http://www.theguardian.com/travel) – The text “Travel” on the navigation is blue and the travel section also consists of bluish webpages.

guardian3

5. Provide structured navigation

Users do not want to be lost on a website. Therefore, it is important for them to know where they are on the website. I would like to recommend adding a “Breadcrumb” on your website for providing structured navigation experience to your users.

(1) Samsung (http://www.samsung.com/us/mobile/cell-phones/SCH-R970ZWAUSC) – The breadcrumb says “Home > Cell Phones > US Cellular > SCH-R970”, which indicates the user’s current location.

samsung

(2) Office Depot (http://www.officedepot.com/a/products/333465/HP-Office-Paper-8-12-x/) – The breadcrumb says “Home > Paper > Copy & Printer Paper > Copy & Multipurpose Paper > Product Details”, which indicates the user’s current location.

officedepot

6. Provide search functions

If your website contains too many webpages, you should consider adding search function on your website to help with the navigation. Many of the website mentioned above such as GNU Operating System, Amazon, the New York Time, the Guardian, USA Today, Samsung, and Office Depot have search functions. If your website provides a strong search function, your users will not miss any information that they want to find from your website. A search function makes content fast and easy to find with a search function

7. Test your navigation many times

By conducting usability tests on your navigation, you can find what elements make your users uncomfortable. When your users start to feel unintuitive and uncomfortable from your website and navigation, they will click the back button immediately to escape from your website, rather than learning how to use your website and navigation system. Thus, it is the most important to find the elements that cause your users to be uncomfortable and to correct them quickly.

In this posting, I explained seven principles for designing navigation. If you keep these in your mind, you could design a navigation that enable users find information that they want to obtain on your website.

Advertisements

2 thoughts on “Seven Principles For Designing Website’s Navigation

  1. moses004

    This page uses text and graphics in balance. Images effectively complement text. One suggestion to aid scannability and access is to index the seven principles with links at the top of the page and add named anchors to the 7 principles. That would provide a table of contents for the page. Overall good job of chunking text.

    Finally, consider clarifying the the design principles and their purposes right in the headings. For example:

    1. Set your target users
    In this case “set” seems vague. The screen grabs, however, suggest you’re talking about designing for your target users.
    1. Target users with colors and images that appeal to their interests

    6. Provide search functions.
    The question is why?
    6. Make content fast and easy to find with a search function.

    Reply
    1. leex6647 Post author

      Dr. Moses,
      Thank you for your feedback. I reflected all of your feedback on this blog posting. However, I was not able to make links to seven principles at the top of the page. It seems that WordPress does not provide that kind of internal link function.
      -Changsoo Lee

      Reply

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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