Navigation Placement in a Web Design, Part 1: Traditional Placements

tradionalnavplacements
Part of designing a website is determining where the site’s main links–its navigation–should be displayed in a layout. It’s important to place the navigation in a clearly visible spot, where the user does not have to scroll or hunt endlessly for it.

Yet many of us webdesigners balk at just putting the navigation in the same tired old places in a layout every time; you want to be able to innovate just a little, make your layout look different from everybody else’s. Yet your site must still be easy to browse.

With that in mind, what are some of the traditional navigation placements?

Position #1: Left of Content

navleft
Many websites nowadays have at least some navigational links placed at the far left of their layouts, like the graphic above. For left-to-right readers, this works great, because the left-to-right reader’s eye instinctively navigates to the top and/or left of any page to begin viewing, and having navigation placed there can direct them quickly to your content.

However, this placement being so traditional means that it can be rather boring in terms of design. How much can you innovate a left-aligned navigation without simply imitating what a thousand other webdesigners have already done?

Position #2: Center-Aligned Over Content

navtopcenter
This navigational position is great for sites that don’t have a whole lot of links in their navigation, and it’s become a big trend in design as of late. It looks clean and sharp, blends in with the layout a lot better than left-aligned, and it allows room for one or more sidebars of extra content beside your main content block. (This has been especially adopted for mobile-friendly layouts!)

However, this presents a problem when users (especially desktop users) are viewing extra-long pages of content: in order to browse to another page, you have to scroll all the way up to the top again to click on another link. All the “Back to Top” links in the world can’t permanently solve that problem.

Position #3: Right of Content

navright
This is actually a favorite navigation position of mine, because it’s a bit unexpected. This way, users are drawn to your index page’s content first. If you’re creating a site that’s meant to be browsed slowly and thoroughly, this is a great design, and it works well for personal sites.

But the problem with this navigation position is also that it’s unexpected. People may spend more time hunting for links than they do clicking on them. How can you draw more attention to the links without putting them somewhere else on the page?

This and many other issues are tackled in Experimenting with Navigation Placement–click to read the 2nd part of this article!

2 thoughts on “Navigation Placement in a Web Design, Part 1: Traditional Placements”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.