Designing the Great Website Navigation with 10 Tips

This blog post is going to overview different navigation approaches that make interfaces really usable.

All of us watched the tremendous growth and appearing of the new trends in web design sphere over the past years. Of course, those changes couldn’t help affect website navigation. Designers have adopted many interesting techniques in their eternal struggle for intuitive interfaces and best possible user experience.

Navigation examples featured in this article work perfectly well for a wide variety of sites types as well as responsive web design across different screen shapes and sizes. What does this mean for you? You can pull cool ideas for your next design projects out of this variety.

Before we begin: if you are not ready to take your time and design from scratch, ready-made WordPress themes will considerably simplify your life. Developers track all the latest trends instead of you and create businesses WordPress themes with user-friendly navigation.

Sticky navigation bars

The navigation bar is aimed to help the users swiftly browse through your website. Keeping it in a fixed place is a good idea. It enables the users to navigate the site from any page. Many websites have a sticky main navigation menu bar at the top of the screen. It stays visible all the time while the user scrolls down and explores the content.

Now it has become easier to make a fixed position menu thanks to CSS and jQuery plugins. What’s more, many current website themes are delivered with a sticky navigation bar as the default and this trend is not likely to go anywhere.

Furthermore, the fixed navigation bar is also very convenient for mobile users as sites naturally look longer and thinner.

How to use a sticky navigation bar?

Supposing you have a site with lots of navigation items – keep them fixed. It’s a tried and tested way to keep visitors on the site longer and increase overall page views.

However, we advise you to make sure that the navigation bar doesn’t take up too much space. It must not be so large that it blocks the viewing of main portions of the page content. You can get around this issue by resizing. In other words, make your navigation bar shrink as the user scrolls down. The trick will make it less intrusive. The users will probably benefit from a universally accessible fixed navigation menu as long as they can still consume the page content.

Mega menus

Mega menus became popular with the increase of magazine-style blogs. They differ from ordinary drop-downs. Mega menus not just flow down vertically, they expand wider and contain multiple columns of content as a rule. The technique works well if used smartly. It does not suit for every site. Actually, mega menu is recommended to use only if you have enough content.

Why use a mega menu?

It will be simpler for your visitors to get a sense of your website by looking through related content. Can you provide more content in a mega menu? Then why not to use it?

Note that mega menus don’t work on mobile devices since there is not enough room on the screen for them. Though, a lot of people still browse the web on desktops and laptops where mega menus are displayed correctly.

Universal navigation

A universal navigation is suitable for the companies that work with or own multiple brands. In these cases, it makes sense to keep universal navigation on every page to draw attention to all products regardless of brand.

This trend is not for conglomerates or holding companies. Sometimes, it is used on networks of websites or resources that link out to all the brand’s international sites.

Why using universal navigation?

Do you work with a larger network of products or brands? You can link them all together and create a successive brand identity. The great thing is that a universal navigation can drive visitors across the whole network and help to merge different audiences.

Vertical slide-out navigation

More and more websites are adopting the vertical navigation. It really works well when it works. The technique is particularly popular for portfolios or creative agencies as they expand the boundaries of traditional web design all the time.

Why use this type of navigation?

If you are going to create a fullscreen layout instead of the traditional grid design, try vertical sliding navigation.

It’s not that easy to create a working vertical navigation from scratch. It’s also rather difficult to make it work in responsive designs. However, if you’re open to experiments and new ideas then vertical navs can become a refreshing twist for your site.

Hidden menus

You surely know about hamburger icons and their significance in responsive design. People recognize the hamburger icon and now what it means. That’s why more and more sites are hiding their menus.

This is a bit strange because hamburger menus don’t help the visitor find links quickly. However, they clear up space on the screen by means of removing the navigation from sight. Lots of studies tell that most users struggle with hidden menus. But as more people use smartphones for browsing, they grow familiar with the hamburger icon and the convenience it gives.

Why use globally hidden menus?

The best place to use a globally hidden menu is a website aimed at a tech-savvy audience. These visitors recognize the hamburger icon immediately, they know exactly that it means ‘click here for menu’. For instance, if you’re designing a tech blog or B2B digital agency, hidden menu is a perfect fit. But if you design a web resource for another purpose, think well before choosing this approach and never sacrifice usability in favor of style.

Responsive sub-navigation menus

Today when you design a website it’s impossible to avoid dealing with mobile navigation. It’s mega popular and it’s going to stay for a long time. Designers often take the decision to hide some navigation links on mobile in order to cram the menu better into small screens.

However, many websites keep all navigation items by using drop-down menus. To stick to this navigation model, you’ll need a hamburger nav with toggle icons for link drop-downs.

You’ll notice this technique on mobile screens or in small browser windows only. For example, some mobile sites use small plus signs (+) to indicate a sub-menu beside each link.

Why using responsive sub-navigation menus?

It goes without saying that visitors should be able to browse your entire website regardless of the device they’re using. Sub-menus give your customers this opportunity.

But keep in mind that each sub-menu should be clearly marked with an icon, different color, or some other visual. Visitors should know what will happen after they click/tap a link – will it open the menu or bring them to a new page.

Carousel of top stories

Top stories carousels are getting more popular on blogs and content-rich news sites. Such kinds of large resources can publish dozens and even hundreds of new articles every day.

By adding a simple carousel to the top of the page, you enable the visitors to check out the latest articles as they enter the website. You can curate or update the featured stories dynamically and style them with thumbnails or whatever you like.

Why using top stories carousels?

Are you designing a blog with plenty of content? Believe us, top stories carousel will incredibly improve your user’s experience. You will give a chance to your visitors to find out about the hot stories. This will increase the average total time on site as things like this encourage visitors to explore more than one story per visit. It’s natural that most of the blog owners who publish tons of content want to increase the time visitor spends on site and the article carousel is an excellent way to do this.

Table of contents

Google likes long articles. This encourages bloggers to write and publish in-depth guides on practically every topic. This is really great for web content but is not always convenient for the users. There is a good way to improve the user experience. Some blogs add a table of content boxes with defined sections into longer articles. The hack simplifies the things. One of the vivid examples to demonstrate the technique is Wikipedia. The resource has been using a ToC since its inception.

Why using the table of contents?

The most weighty reason to use a table of contents is improving the user experience. Longer articles are becoming common and it can be daunting to land on the one with a numerous number of words. A ToC reduces this intimidation factor. The technique is useful for SERP rankings either because Google can offer jump links that are based on a table of contents, which means that the solution is great.

9. All-caps corner links

This navigation trend is subtle, but it has been spreading rapidly over the past few years. Today almost all startups and professional businesses use the all-caps text style to create a navigation. It gives an intuitive and symmetrical feel to the layout.

These navigations commonly follow similar styles:

• All caps
• Small lettering
• Sans-serif fonts
• Extra horizontal spacing
• White or very light hue

Whenever you see such kind of navigation, it seems very welcoming. This kind of design has become the synonym for a clean, crisp, and professional-looking navigation.

Why using all-caps corner links?

This navigation looks professional, it’s subtle yet noticeable, and makes your site appear trustworthy to the user. Are you designing a startup or corporate website? Then give this trend a try. It’s probably the best navigation design style for today. Though, make sure that you won’t end up with a faceless site that looks identical the rest of the websites on the Internet.

Single page dot navigation

Designers started to use this type of navigation with the rise of single-page websites. What is dot navigation? It’s a series of circular icons located on the left or right side of the screen. Each dot represents a different section of the site. As the layout is one long page, these links also indicate user’s current position. The trend is ingenious, but not every user understands what these dots stand for or how to use them.

Why use single page dot navigation?

Are you designing a single page layout? Then we’d recommend using a sticky navigation bar at the top of the page. This simplifies the comprehension process. People see what each slide represents and what sort of information they will find on the page.

If you can’t or don’t want to use a top navigation, these dots are the next best thing. But you can do even better combining both. You may have a top navigation with text links and include dot navigation icons too. BTW, you can include text beside the dots.

Wrapping up

As you see, there are lots of variants to choose from, and all of them can work well in the particular cases. Do you already know which one you are going to use for your next project? Maybe you have any questions/additions to our list… Please leave them in the comments.