3 essential navigation trends for 2015

Happy New Year to all our readers! Today, we’re going to take a look at three key navigation trends that will dominate 2015.

One might think that we have explored every possible variation of navigation on the web, and yet we see continued exploration inside of this very specific niche. It is truly amazing just how many variations of design can be applied to a humble list of links.

Here I want to consider 3 popular trends in the area of navigation: first how use of the navicon (or hamburger icon) is changing, second a new approach using full screen menus and finally what I consider the perfection of the mega drop down menu. Let’s dive in and see these approaches at work.

Long live/death to, the navicon!

Facebook is given credit for popularizing the use of navicons to hide navigation options off screen, or off canvas. With the birth of responsive web design the web design community was desperate for a solution to navigation. Packing everything into a navigation panel that sits off canvas, and moves in upon selecting the navicon was an attractive solution. It seems the community latched onto it as a somewhat easy solution that seemed to make life much easier for the designer and developer. As a result the navicon has become a go-to option for mobile apps and websites.

Recently however, the navicon has come under attack. In many of these debates it seems that one crucial detail is omitted. The mobile apps industry is easily moving away from off screen navigation in favor of on screen options. This comes as the trend is towards focused, single purpose apps. This makes the change more reasonable. In contrast, even a small web site can be packed with dozens, if not hundreds of links in the navigation. Take for example a site like sony.com, or even this site. These sites have navigation needs that go well beyond what is possible with a simple tab strip. For this reason it seems to me that navicons, and off screen menus are here to stay. We simply have to be aware of their limitations, potential problems and so on. And of course, always keep in mind the usage: is it a mobile app or a mobile/responsive web site. Because they are not the same.

The web site for design agency Long Story Short is a lovely example of how to leverage the navicon in a meaningful and restricted way. This site makes use of the navicon to hide away the full range of navigation options. It does so on both the mobile and desktop versions of the site. The use of navicons on the desktop is actually a whole sub trend here. What makes this site a premium example of the approach is that the most critical elements of navigation appear outside the menu. The home page is a portal to the three most important sections of the site. In this way the hidden menu isn’t the primary navigation, but rather a secondary one that fills in the blanks.

The Squarespace site is another lovely example of how to effectively use hidden menus. On this site the tour and login options are always visible. While approximately 23 menu options in total are contained in the slide out menu. Frankly, the use of hidden menus to allow the most important navigation options to take center stage is nothing short of brilliant. I went through a phase where I was really down on the use of navicons on the desktop; it seemed like a miss use of the technique. However, after seeing how sites are using it to drive users towards the most critical elements I can’t help but love it.

Finally, if you’re getting grief over the use of navicons, or hidden menus don’t take anyone’s word for it. Instead, do your own usability tests to see if it is working for your site. A great rule of thumb is to avoid debate, and go test instead.

Full screen navigation

The second trend I would like to look at is the use of full screen navigation menus. These menus are typically activated by a button or link of some type; quite frequently a navicon. The difference here is that instead of a small panel that slides out, the navigation takes over the entire screen. On mobile this feels normal, but on the desktop this is actually a new and interesting approach.

The navigation on this site is really interesting in that the navigation overlay packs a lot of punch into the menu. Here they have the expected menu options, but since it is full screen they also have room for a full contact form, contact information, social media links, a recent blog post and a prominent call to action.

It’s interesting to consider that a user launching a menu at any time is looking for direction. This makes it a prime opportunity to steer them towards what you want them to do. In this case they want the user to get in touch or visit their project planner.

In this example we also see the pattern at work, but in a much more minimalistic way. Instead of packing in extra options they opted to simply present a very concise list of navigation options. Plus they get bonus points for animating the navicon into an “x” to close the menu.

Perfection of the super-sized menu

Finally, I want to consider the super sized or mega drop down menu. The use of super sized menu systems are nothing new. What I do find interesting is the content placed inside of them. In my assessment of things designers have really put this new space to work in powerful ways.

The Lowes website perfectly demonstrates what I have in mind. Here you can see that the menu system has become a location for content. This content can be used to direct the flow of users through the site. Most importantly it can drive them towards the most important content. The question becomes, what is the most important content? Perhaps it is the most profitable items in your store. And in this way the navigation acts as a salesperson pushing the most profitable products. Or perhaps it is used to guide users to the most popular items.

Another site that uses this option in a slightly different way is the New Balance website. Here the first three dropdowns are large in nature, but are essentially lists of links. However, the last option for creating custom shoes produces the dropdown shown above. This menu option is a single link. I love that they took the opportunity to make this single item into a really compelling intro to the content behind the link.

Conclusion

These three trends, though we can discuss them separately have many traits in common. Primary among these is how navigation has changed over the years. Dropdown menus used to be generally an organized list of links. For the most part they were somewhat neutral in that all things were presented equally. Now we find that navigation systems are a key way to help guide users towards desirable goals.

For me the challenge is clear. That we should elevate our thinking of navigation and really embrace the influence it has on the experience of using the web sites we create. All too often I find that navigation is a bit of an afterthought. When in fact, it should be among the most critically considered and refined elements in the design.

Patrick McNeil

Patrick McNeil is a designer, developer and writer; but above all things he is a passionate educator. He is a Professor of Graphic Design at the University of Missouri St. Louis where he focuses on teaching UX Design methods and front end development techniques. Patrick is also the author of the bestselling book series The Web Designer's Idea Book and the curator of DesignMeltdown.com. For more information about Patrick visit his personal site, pmcneil.com, or follow him on Twitter @designmeltdown.