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.
Read Next
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…
Web Tech Trends to Watch in 2024 and Beyond
It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…
By Louise North
6 Best AI Productivity Apps in 2024
There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…
By Simon Sterne
3 Essential Design Trends, February 2024
From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…
Surviving the Leap from College to Real-World Design
So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…
By Simon Sterne
20 Mind-Bending Illusions That Will Make You Question Reality
Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…
By Max Walton
15 Best New Fonts, February 2024
Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…
By Ben Moss
The 10 Best WordPress Quiz Plugins in 2024
Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…
By Robert Reeve
20 Best New Websites, February 2024
It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.
Everything You Need to Know About Image Formats In 2024
Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…
By Robert Reeve