Essential navigation patterns in 2016

Default avatar.
January 25, 2016
Essential navigation patterns in 2016.

Your navigation menu makes or breaks your website’s UX, which is what you should be primarily designing for at all times. There’s no better service you can provide your clients as a designer than to ensure that the sites you build for them boast a stunning and highly functional user experience. A splendid UX guarantees that your clients’ sites get more leads, visitors and readers, not to mention retain regular visitors. It is the most important part of creating a site, and you have great control over it based on how you design your site’s navigation menu. Unfortunately, not all designers place a high priority on designing for excellent navigation, which does a disservice to clients, and visitors. To create a very credible reputation as a designer — and to be an in-demand designer — you have to master one of the most basic aspects of web design. That’s creating stellar navigation for your clients’ sites. Here’s how.

Sticky navigation

Sticky navigation

is an essential component of navigation since it empowers your users to instantly access the menu and easily find what they want on your site. Sticky navigation stays locked in place as users scroll down a page. There’s nothing more frustrating — especially in the case of long-scrolling pages — than to have to scroll all the way up again to navigate to another page on the site. Remember that, on the Web, speed is everything (loading pages, finding desired content, etc.) so allowing users to access the navigation menu more quickly is a best practice. By including a sticky navigation bar, you’re also helping to reduce cognitive load on your users by constantly putting their navigation choices right in front of them. Alternative Press features a good example of how to incorporate sticky navigation into your pages. Note how all the most important sections are easily accessible and identifiable, by effective color contrast, in the navigation bar, no matter how far you scroll down the page. Alternative-Press-Screen-Shot

Obvious hypertext

Hypertext is any text reference on your pages that users can click on to get additional info, usually on another page, whether it’s on the same site or off-site. Hyperlinks are probably the most identifiable example of hypertext. Since hypertext contains information that’s going to help the user experience by providing more information, it only stands to reason that such helpful references are made very noticeable. Overall, this adds to the navigability of the site you build. I recommend making hypertext blatant by two, simple, design features: 

  • Underlining
  • Changing the color

When you underline any word on your page content — let’s say it’s a hyperlink to your client’s about page — it immediately draws the attention of site visitors, which helps them navigate to important information with greater ease. Similarly, when you make the color of hyperlinks different than the text and background of your pages, you again, make it stand out on the page, so users can easily identify and click on it. Marketing site The Daily Egg uses both underlining and different colors for its hypertext, making it very easy for users to identify links. The-Daily-Egg-Screen-Shot

Mega menus

Mega menus

are a great idea for navigation, especially if the site you’re designing for your client has a lot of content and categories. eCommerce stores come to mind. These are essentially huge, drop-down panels that open up additional layers of navigation to help your users find specifically what they want more quickly. Such menus improve the user experience by including benefits like: 

  • elimination of scrolling;
  • tooltips;
  • orderly structuring of content by icons, layout or typography.

All told, these features make it a lot easier to use the navigation menu. For a solid example of a mega menu, head to Food Networks site. Notice how the flyout menu displays one of the most sought-after pieces of content of the site — the recipes — in an easy-to-see format that lets users immediately choose where they want to go instead of scrolling or pagination for more options. Food-Network-Screen-Shot

Pattern and language affordances

A pattern affordance is using a conventional symbol that the majority of site visitors will understand immediately, such as a house icon to represent the homepage of your site. A language affordance is the explicit use of a word, like home”, to clarify that clicking on that tab will bring users to the homepage of the site. Affordances communicate to users how they can interact with the elements in your design. While this is certainly Design Basics 101, it’s still as important to practice today as it was in the very early days of the Internet. A functional navigation menu should have the house symbol or the word home” positioned on the very first navigation tab on the left. While some designers may instead opt to include a company logo as the home” icon or button, that still leaves too much room for user error. eTailer Frame Warehouse demonstrates this design principle to a tee, with its use of home” to leave no doubt where that tab will take site visitors. Frame-Warehouse-Screen-Shot

Fast load time

Speed = great user experience. Designers of all stripes should jot that down as one of the most crucial design rules that they simply can’t and shouldn’t relegate. According to Wired Magazine, almost 50% of shoppers want the average page to load in two seconds or less! Put another way, if the pages you design for your clients take longer than two seconds to load…there’s a really good chance that they’ll leave your clients’ sites and never return, thus causing severe conversion nightmares. This is a worrisome statistic, to be sure, but there’s something designers can do about it to ensure they’re providing high-quality page performance to their clients. Simply test the page speed of pages you design. There are a number of reliable tools to help you determine page load times: 

For an example of a very fast page load time, we go to Enchanted Learning’s What Is a Whale? page. The design could use some work, but the page loads in just over one second, according to the Alexa analytics toolbar. Enchanted-Learning-Screen-Shot

Great navigation is great UX

A huge part of a great user experience is your site’s navigation. It is the foundation on which the entire user experience rests, if you really think about it. When your users can’t find their way around your client’s site with ease, then it becomes frustrating for them, causing them to leave in a hurry. Thus, excellent navigation should make it easy for people to use any site you create; that’s the benchmark of a fine user experience. While it can be tempting to give the navigation the short shrift in the design stages — because of new design trends popping up all the time — it’s not advisable. Your users will notice, as will your clients. To please your clients, you must please their users. You can only do that when you design for a great user experience first and foremost, with a primary emphasis on getting the navigation right from the get go.

Marc Schenker

Marc‚Äôs a copywriter who covers design news for Web Designer Depot. Find out more about him at marcschenker​copywriter​.com.

Read Next

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…