• Happy Independence Day to all our friends in America! 🗽We hope you have an amazing 4th of July, filled with family,… twitter.com/i/web/status/1…

COMPANY BLOG & NEWSROOM

24Mar

Modern Web Navigation Trends & Best Practices

Of all the elements that go into a website’s design, navigation is among the most important features. In addition to providing aesthetic qualities, navigation is about the user interface, can effect calls to action and conversion rates, and can influence how users interact with the website. With each website being a portal to a final goal, whether that goal be making more sales, providing information, or gaining clients, it’s easy to see how navigation plays a major role.

In web design, there are a number of ways a designer can go about planning and implementing website navigation. In modern design practices, there are also trends and best practices for navigation. How and where navigation is placed in an interface takes essential planning, and learning from best practices can make creating navigation a much easier process. In today’s post, we’ll look over some modern trends in navigation, and why the practices work so well.

Menu Subtitles

Smashing Magazine

The first trend we’ll take a look at is the use of menu subtitles. This has been a recent trend in web design for both aesthetic and functionality reasons. Subtitles can act as further description for the end user, making the navigation more usable and better understood. In Smashing Magazine’s example, the subtitles themselves are links to sub-categories. Depending on the organization of a website’s categories and sub-categories, this can be a great option, opposed to using traditional dropdowns.

The subtitles within this type of block navigation don’t only have to be sub-category links, but can also be more descriptive versions of the category in smaller text, or keywords for a more SEO friendly approach.

The best part about this trend is the increase in usability. It can be purely CSS based, and the core of the navigation is based off of plain text. This can make it ideal for those needing to use Screen Readers, or ideal for a search engine trying to organize the website’s content. The markup for such navigation would be relatively easy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="nav">
 <li>
 <h3>About</h3>
 <small>About Me, History</small>
 </li>
 <li>
 <h3>Portfolio</h3>
 <small>Work, Samples</small>
 </li>
 <li>
 <h3>Services</h3>
 <small>Work, Quotes</small>
 </li>
</ul>

Then, within CSS markup, classify each <li> element as a block with set width and height, style as necessary, and set fonts/styles for the small and h3 tags within the <li> element.

1
2
3
4
5
6
ul.nav li {
	display: block;
	width: 150px; height: 50px;
}
.nav h3{/* H3 Nav Styling */}
.nav small{/* Subtitle Styling */}

Finally, from a design standpoint, this type of navigation scheme works great with grid layouts, typographically heavy designs, or just designs that need good organization and communication with the user.

Post-Header Menus

The Free Creatives

This trend is incredibly common in blog designs, but can be used with any sort of web design. While it may not be necessarily ‘trendy,’ it is by far common and also a best practice.

The idea is simply to place navigation directly below the header, logo, or place of first visual interest. In other words: “grab attention > gain interest.” The logo, header image, or main design focus grabs the attention, and the navigation is the first look into the website’s content, gaining interest. This best practice in web navigation is all about the placement, and while the example above is pretty standard, there can be other examples where navigation is placed in a different location, but uses the same technique: within proximity to the first attention-grabbing item.

To use this placement technique, it is also important to give enough prominence to the navigation. Note that there are other forms of navigation in the example above (pages, sidebar links, etc.), but the most important navigation (categories) is larger, contains more whitespace, has more contrast, and again, is the secondary focus right after the logo. It is also the type of content that will gain the user’s interest, and bring them back for more.

Category & Page Separation

Reencoded

This idea may not be so new, but its trend is rising along with the rise of blogs. Separation between two major navigational categories can be very beneficial to the end users, and for having the users meet the goals of the website.

This technique works best for content-heavy sites, such as a blog (above), or otherwise. Usually there are two types of content per website: content of user interest, and essential content. Interest pieces of content are things such as learning materials, blog posts, how-to’s, news, etc. Basically, any content the user actually comes to see.

Then, there is essential information: the about page, contact page, terms of service, etc. — any content that is needed to find out more about the company or individuals behind the website. This type of content is not meant to gain the interest of the user, but is rather a credibility factor.

Both types of navigation should be easily found, although user interest content should be first noticeable as to grab the user’s interest permanently. Like above, interest categories/content could use bigger type, more contrast, excessive whitespace, etc. On the opposite side, it is likely that only returning visitors will be using the essential content, and so they’ll be actively seeking it.

By defining and dividing these two content types, navigation can become more user-friendly. This navigation practice is all about the user, user interface design, and how the user can best interact with the website for an optimal experience.

Icons

NASA

Using icons are definitely a more modern approach to navigation, and NASA does a wonderful job of doing it the correct way. Because NASA has a lot of navigation, and because this area shown above would be their ‘interest navigation,’ they used icons to grab attention towards it. Imagery can be the strongest force of attention, and because of this navigation’s untraditional placement, the icons were needed to gain attention.

This is a great example, but there are plenty of other instances where icons can be used along with navigation to grab attention, even when the navigation is in a more traditional location. Just check out the example below (under Pointers), or go to MacRabbit.com for an example like this. There is plenty of whitespace, contrast, and the location of the navigation is in the top left so it is sure to be seen. However, the designer has still used icons not only for more attention, but for visual interest. Many times, a design may just need more graphical elements, and navigation can be an excellent location for that.

Pointers

Mac Rabbit

Using pointers is a recent trend with a unique visual appeal, and from an interface standpoint, can bring attention and direction to navigation. It best works with simple navigation, like the example used above.

Pointers are often used on active and hover stages for navigation, and aren’t always necessarily arrows. Anything that brings an additional graphical element to a piece of navigation when the user interacts with it can be considered a pointer. Because of this added interaction, pointers can be a simple way to create more interaction and better understanding with the navigation for the user.

Side Tabs

Dizi Designs

Last but not least, side tabs are the last trend we’ll be discussing today. Side tabs, shown above, have their debate when it comes to usability and interface design. However, used with certain types of design and on certain types of websites, this new trend can be an attractive twist to more traditional navigation. The ‘realism’ of the tabs mimic a portfolio, and can be great for portfolio like sites, or information-based websites otherwise.

One problem with this method is that obviously these cannot be created with pure CSS. It takes CSS and images, and that can cause SEO issues as well as usability issues. There is also the readability of the navigation to consider. Best practices when using this type of navigation would include the following:

  • Be sure the right type of website can pull it off. Like above, a design studio is a great example. However, an information-heavy site with the need to appeal to large audiences would not work well with this navigation style.
  • With an awkward direction for the text, make sure the font is legible (sans-serif usually), and has plenty of whitespace surrounding it.
  • Depending on how your CSS is set up, be sure there are link descriptions to cover usability issues. If using images directly in the markup, be sure to use appropriate alt tags. If using links, be sure to create link text, and hide the text if necessary. (position: absolute; left: -9999;)

Conclusion

These six methods above are by no means all of the navigation trends out there. There are perhaps thousands more trends, some commonly used and some purely unique. With navigation being such a huge part of web design, and it needing the most care, some trends will come and go, while others will be here to stay. Feel free to share links to examples or trends that could belong to either category.

What do you think are some other best practices in website navigation? What are some recent trends in navigation organization, usability, or layout? What are some trends purely from a design perspective?

6 comments

  1. ts shrikrishna Jul 01, 2010

    superb p2h, good information, gives me lots of ideas to talk to client, in India web design is like small business, but after reading lots of articles and blogs, able to understand, how design and creativity important for any business – over all presentation to achieve the goal of the customer

  2. personal software Aug 10, 2010

    wonderful share, great article, very usefull for me…thanks

  3. Dugsscoup Aug 16, 2010

    i’m new… hope to brief round more regularly!

  4. Dugsscoup Aug 20, 2010

    i’m new… anticipation to post round more oftentimes!

  5. Larry Simbeck Dec 18, 2010

    I have been exploring on the internet looking to get ideas on how to get our web site coded, your overall style together with theme are excellent. Did you code it yourself or did you get a coder to get it done for you?

  6. Naveen Kumar Jun 26, 2018

    Really a very good blog post and am sure that this web navigation trends will surely help out the designers to learn new things so that they can implement it on their website.

leave a comment

All posts Back to top