Why You Should Not Make Your Squarespace Mobile Menu Visible on Desktop (Here’s What You Should Do Instead)
The superficial trend of hiding your menu on the desktop is not only not rooted in factual data, but there are a plethora of studies proving hidden mobile and desktop menus can be detrimental to discoverability (the ease with which information can be found) on your site. In fact, there is evidence that doing the exact opposite - visibly showing a few menu items on mobile in combination with the hamburger menu button - can increase mobile navigation on your site by up to 30%.
Hidden desktop menus sacrifice the ease of navigation on desktop devices, making it less noticeable to users. This can result in a 20% decrease in user interaction with the menu on desktops, which can have detrimental consequences on your site’s user-friendliness.
As a front-end developer in the Squarespace realm, I cannot tell you how many times someone has wanted me to show them how to achieve a mobile flyout menu on a desktop for whatever reason. I’ll admit that near the beginning, I obliged without offering much pushback because I thought if I could just help people achieve their website goals, they would be more willing to work with me; but, I found out a little later people who may not know any better tend to appreciate research-backed reasons for why their idea may not yield the intended result. With that being said, let's look at some major issues with hidden menus on desktop views, as well as some alternatives to hiding your menu.
Why Should We Worry About Navigation Anyway?
Easily-navigatable websites are among one of the most important aspects of using a website according to actual website users - and who better to get insight from than the very people using websites? In a 2018 consumer UX survey done by Clutch, 94% of users say easy navigation is the most important website feature, which is a pretty astounding statistic. Knowing this, which one of the following websites would you have the most trouble navigating: the one on the top that has a very small, ambiguous hamburger menu toggle in the upper left-hand corner, or the one on the bottom which has visible, and concise yet descriptive menu items laid out in a scannable row?
Hidden desktop menu - ambiguous hamburger menu that is hard to find.
Visible desktop menu - clear and concise menu that is easy to find
Assuming you selected the bottom option, that is most likely the exact same opinion other site visitors will have based on the previously mentioned study.
“Out of sight, out of mind” - Why Hiding Menus is Bad for Discoverability
Simply put, when navigation is harder to find, users are less likely to use it. This statement is simple enough to understand on its own because it makes logical sense that when something is hidden, it is harder to find, but let’s look at the data to back this up.
In a usability test of 180 people performed by the Nielson Norman Group, a UX research and consulting firm in user experience, participants were asked to test 6 different live websites with different types of navigation designs including hidden navigation (main navigation links were hidden behind an icon), visible navigation ( main navigation links were visible in menu bar), and combo navigation (a combination of some visible and some hidden navigation links). The metrics measured in this task relevant to navigation included whether the participants used the navigation at all, how much time it took participants to use the navigation, and how difficult finding the navigation was. The findings of the study concluded that on desktop, only 27% of people used the navigation when it was hidden compared to 50% who used navigation when it was visible and a combo of both, and on mobile, only 57% of people used the navigation when it was hidden compared to 86% who used the navigation when it was a combination of visible and hidden. Furthermore, it took participants 5-7 seconds longer to use navigation when it was hidden behind an icon, and the difference was smaller on mobile devices (2 seconds), most likely because people expect the menu to be hidden on mobile devices more than on desktop devices.
From these findings, we can conclude that on desktop devices, in particular, having some sort of visible navigation is an important factor in providing a good navigation experience.
Despite its benefits, having visible mobile navigation might not be the best option for your site if you have a particularly advanced desktop menu. If your desktop menu uses elaborate dropdown menus like mega menus, a short, visible mobile menu might not accurately convey everything you want the user to know about your site. In this scenario, keeping the hamburger menu and including important navigation links on the home page of your site might be the better option for your site. If you want a flexible solution for adding a visible mobile menu to your Squarespace site, check out my Visible Mobile Menu plugin that’s compatible with all Squarespace 7.1 templates. It gives you total control over what you want mobile site visitors to see when navigating your site.
In short, hidden desktop menus implement one of the biggest no-nos of good web design, which is sacrificing ease of use for outlandish design. I’ll even admit that when I stumbled across a few of the sites featured in this article with hidden navigation menus, I thought they were breathtakingly beautiful and kind of fun to look at (which is another aspect that website users care about), but what good is an attractive website if it’s difficult to navigate? Similar to how hiding a No Right Turn or a One Way Sign behind a tree would be terrible for road navigation, so is hiding something as crucial as website navigation behind an often ambiguous hamburger menu toggle.
Alternatives to Hiding Menus
Now that we’ve gone over the problems with hidden desktop navigation, let’s talk alternatives.
My educated guess - based on past experience with clients - is that if you were searching for how to hide the menu on desktop, you want to accomplish 1 of 2 things:
You think your website will be more visually appealing if you hide the navigation bar.
You have too many navigation items and it looks cluttered on desktop views.
My answer to the first question (which is of course my personal opinion - not law) is that including a visible navigation bar on your desktop views will not be near as “unattractive” as you may think. Based on the previous Clutch study we covered, users care about easy navigation just as much if not more than they care about the attractiveness of your website. While having a beautiful website is indeed important, it shouldn’t come at the cost of usability and functionality.
My answer to the second question is less of an opinion and more of a universal fact in web design - abnormally long navigation menus are oftentimes more confusing to users than informative. Stick to no more than 6 menu items. In some cases, a dropdown menu might be a good choice for your website, so long as it is not too long of a dropdown. If you think you have too many menu items that will easily fit into a dropdown menu, check out the mega menus I have available in my plugin store, compatible with all Squarespace 7.1 templates.
Summary:
Although hiding your desktop menu behind an icon might make your website look cleaner and subjectively prettier to look at, it oftentimes sacrifices the ease of navigation on desktop and mobile devices.
If you want a flexible solution for adding a visible mobile menu to your Squarespace site, check out my Visible Mobile Menu plugin that’s compatible with all Squarespace 7.1 templates.
If you enjoyed this read, don’t forget to subscribe to my email list for more UX design and Squarespace tips and tricks!
