Web Design: Navigation Intro (1 of 4)

navigation GPS imageOne of the primary aspects to consider when building or improving your website is navigation. The term navigation is defined as the science and skill of moving from one place to another. When applied to a website, navigation means the method you use to help your users move from one page to the next in order to find the content they want to view.

The Web is a medium that matures quickly, with the marketplace (users) often dictating what is successful. Over time, two chief methods of website navigation have evolved:

  • Vertical navigation - Including a set of links or buttons in a column on either the left or right side of the web page.

  • Horizontal navigation - Including a row of links or buttons along the top or bottom of the web page.

Vertical Navigation image Horizontal Navigation image

These do not have to be mutually exclusive; you can use both. The decision whether to do so should be based on the look and feel you want to convey with your site, and the amount of content your website holds overall.

Vertical navigation

Vertical navigation has become a de facto standard. Users are accustomed to looking for a set of links, typically on the left side of a page, and potentially set off either by a design element such as color, a box, or a set of control buttons. However, for users of mobile devices (an increasing percentage of users each year) or for users with small screens, this may require scrolling in order to view all choices.

Horizontal navigation

Horizontal naviation may appear at the top, bottom, or both top and bottom of a website. If using both top and bottom, it is less likely that the page will also employ vertical navigation. Benefits of including a set of horizontal links include immediate accessibility to the viewers of your web page. Even casual or new users also show an intuitive understanding that the links will navigate them to other parts of the website. However, if your horizontal links span the entire width of the page, it becomes more difficult to read, and you should take this into consideration.

Using Both Vertical and Horizontal Navigation

Using both vertical and horizontal links can make your website consistent and easy to navigate - a major factor for usability. However, it also restricts the design of each web page and may hinder users, forcing them to scroll further down to view content that otherwise would appear closer to the top of the screen. You must balance the need for clear navigation with an understanding that users are less likely to scroll often to access important content, and may lose interest if they don't easily find what they seek.

Once you choose your navigation scheme, you must make stylistic choices and technical choices.