Designing Excellent Website Navigation (5 Ideas)

One thing a well-designed navigation feature will do is give visitors a high-level overview of what they can expect to find. At the same time, it will help visitors orient themselves so they can maneuver about the site quickly and easily, not get lost, and take quick action when obliged to do so.

Smoothly functioning navigation is also good for SEO.

In short, when designing site navigation elements, visitors’ wellbeing should be the top priority.

In this article, we will explore in some detail five best practices to keep in mind when designing website navigation elements. BeTheme examples have been included so you can get a clear picture of what these best practices involved.

How to design great website navigation — with examples

It is easy to take website navigation functionality for granted. Home, About, Products, etc., appear at the top of the page, each with an appropriate link that will take you to where you expect to be going.

It couldn’t be simpler, and that’s the way we want it, but it has to be designed with care. The last thing you want a visitor to see is "Page Not Found", or something similar.

Here then, are five tips that you should know and heed.

Tip #1: Make the logo prominent

The logo serves as a company’s digital face. It can be seen as a welcome, and it plays a key role in building brand recognition and establishing trust and loyalty.

The logo can represent the company on a variety of different platforms — social media and email signatures to name a couple.

Consequently, it needs to be properly placed in the website’s header.

1. Link: The logo needs to be linked to the home page.It should generally be placed in the top left corner since that is where people tend to look for it, according to a study conducted by NNG.
2. Placement: Placing the logo in the center can be an acceptable alternative, in which the Home link is placed to the far left. The BeBaker 3 pre-built site illustrates an example of this.



3. Size: The logo should be large enough for the details to be easily seen or read. 250 x 100 pixels and 160 x 160 pixels are ideal sizes for rectangular and square logos, respectively. Check to make sure the navigation links in the header are not crowded.

As an example, the BeDentist 4 logo is 166 x 60 pixels, it is to the far left, and there is plenty of room for the navigation links.

Placing and sizing the logo can be an exercise in balance. If the logo is large, the font size of the navigation links may need to be increased so they do not become “lost in space,” while at the same time they should not appear to be crowded.

Tip #2: Use a sticky header

This can apply to any website featuring a great deal of content. To avoid visitors having to read the content like they were reading it from a book, the content should be broken up into manageable sections separated by a judicious use of white space.

A sticky header can make it easy for a reader to scroll back to the top of the page.

Using a sticky header can be even more important when content is being viewed on a smartphone.

BePizza5 provides an excellent example of how to effectively employ a sticky header.

As the visitor scrolls down the page the distinctive navigation bar shrinks up; yet it remains legible and usable.

An alternate approach, as illustrated in the Cottage 2 pre-built site, uses a sticky left-aligned navigation.

The logo is still nicely placed and doesn’t interfere with the content, as are the navigation links, which remain visible.

Tip #3: Highlight the page being visited

When you are navigating a website, or most anything else, it is helpful to know where you are. The content of the page being visited would normally give a clear indication, but that may not always be the case.

A visible navigation marker could provide a reference point that would help visitors find out where they are and help them get to where they want to go next, like a map in a shopping mall that tells you that “You Are Here.“

There are a number of ways to highlight “You Are Here” in a website. BeTheme gives you a variety of approaches to work with. One such approach is to change the text color for the page currently being visited as in the Be Ebook 3 navigation example.

Or you could elect to place a colored line beneath the current page.

For some audiences, a bolder method of highlighting the current page would be appropriate; like the method shown in the Nursing Home pre-built site.

For a site targeting older users this approach could make sense.

Tip #4: Use recognizable icons, and only recognizable icons

Icons can be helpful web design elements. They can be paired with text to communicate the meaning of certain points or used as standalone elements.

Standalone icons must be used with caution however since their meaning must be obvious and there are only two dozen or so icons that are immediately recognizable to most people, and only a few of them have anything to do with navigation.

Four icons that do make sense can be found in the BeDietShop pre-built site:

They are, reading from left to right:

• User profile for account settings.
• Heart for likes or favorites.
• Shopping bag for the cart/bag page.
• Magnifying glass for search.

There are other icons you will occasionally come across, a familiar example being an eCommerce shopping cart.

While standalone icons can be useful as navigational shortcuts, you need to be certain that most of your site’s visitors will know what they mean, and that their use will make navigation easier instead of more difficult.

Tip #5: Organize mega menus so they are easy to peruse and easy to use

Larger websites usually take more time to organize, and once that has been accomplished website navigation has to echo that system or organization.

Larger websites, those defined as multipage sites having a dozen links or more, can profit by using mega menus as the foundation for their navigation design. When well organized, a mega menu can be extremely helpful and effective.

Organizing a mega menu often follows a categorization process that involves the use of:

• Bolded headers .
• Columns for related pages.
• Images to highlight important pages.

The Betheme Store mega menu illustrates this organizational approach.

Note how easy it is to scan through the various categories to find a page or topic of particular interest.

Some websites, because they are too large or are not all that well organized, may not be good candidates for using mega menus. When this is the case, filtering and search techniques will often do the trick as is the case with BeClothingstore.

This type of website “navigation” tends to keep the number of options available to a visitor to a manageable minimum.

Make navigation work for your visitors with BeTheme

Without an organized navigation system, visitors might have to spend an excessive amount of time trying to put your website to good use. One worst-case scenario might be having to search to find a shopping cart!

A row of links at the top of the page is usually helpful but might not always be enough.

That is why it is so important to take time to design your site’s navigation and do so with your visitors in mind.

An easy way to get a practical and highly usable navigation up and running and save yourself a great deal of time in the process is to start with one of BeTheme’s pre-built sites. They are designed and built using the aforementioned best practices. At the same time, they are customizable, so you can mix-and-match styles to create the navigation system that works best for you!