And 37% of respondents said a poor experience with site navigation was enough of an annoyance to make them want to leave the site completely.<\/p>\n\n\n\n
The wrong site menu can actively push people away from your site.<\/strong><\/p>\n\n\n\n Your menu should always be a reliable cornerstone of your website. Visitors need to know where it is at all times in order to orient themselves and find their way around your site.<\/p>\n\n\n\n A ton of testing has already been done website menus. Luckily, you get to benefit from all those hard won lessons without having to try everything yourself. We’ve broken down the biggest lessons below.<\/p>\n\n\n\n Although we don\u2019t have any data on what sort of usability issues the Portland Trail Blazers\u2019 website<\/a> was experiencing, we do know that something prompted them to hire Sq1 to assess their sales funnel and determine what may have potentially been the cause of lackluster sales.<\/p>\n\n\n\n The marketing agency set their sights on the navigation, which was clearly not optimized for the user experience. Here is what it looked like in 2013:<\/p>\n\n\n\n The design itself was difficult to read text from and the layout was confusing. After assessing what visitors\u2019 goals were in using the site\u2019s navigation, Sq1 decided to do a total revamp of the menu\u2019s design and structure.<\/p>\n\n\n\n As a result of this A\/B test, Sq1 found that the new and improved structure resulted in a 62.9% increase in revenue. The Trail Blazers\u2019 site\u2019s navigation has since undergone a number of renovations, but has maintained the same opaque and vertical layout that proved to be the most effective with their audience from 2014. Here is what it looks like today:<\/p>\n\n\n\n When the designers of the Formstack<\/a> website set out to tackle the navigation, they initially asked themselves many questions like:<\/p>\n\n\n\n The page they decided to lead their navigation menu with was titled \u201cWhy Use Us\u201d. They had high hopes for it as a driver of traffic and conversions and so were consequently surprised when click-through rates failed to meet expectations.<\/p>\n\n\n\n Here is what the Formstack website and \u201cWhy Use Us\u201d-led navigation looked like in January of 2013:<\/p>\n\n\n\n Disappointed with the effect their lead page had on visitors, they decided to test a name change to \u201cHow It Works\u201d. It was a name they considered prior to launch, but ultimately scrapped for \u201cWhy Use Us\u201d. As you can imagine, they were shocked when a simple change of wording in their menu resulted in 50% more page views and 8% more conversions across the website.<\/p>\n\n\n\n It didn\u2019t take long before they ditched the flailing \u201cWhy Use Us\u201d wording (which put most of the focus on Formstack) in favor of \u201cHow It Works\u201d (which spoke more to an actionable solution). Here is how the site looked in March of that same year after they implemented the change:<\/p>\n\n\n\n <\/p>\n\n\n\n Back in 2014, the people behind the Bizztravel Wintersport<\/a> website began to notice how much work visitors had to do to get around the site to find the destination and vacation that made the most sense for them. With an average of five clicks required to navigate to the correct region<\/i> (and not even the actual vacation page), they knew there was a serious missed opportunity here.<\/p>\n\n\n\n And so Bizztravel determined that the menu was the greatest source of pain on their site. Lacking in logic and simplicity, they needed to redesign not only the menu, but the header as well, in order to streamline the search process for visitors.<\/p>\n\n\n\n Upon creating an improved and more intuitive navigational system for their site, they launched an A\/B test to confirm their hypothesis. What they found was that the redesigned navigation resulted in 21.34% more conversions than the previous navigational design.<\/p>\n\n\n\n This is a side-by-side comparison VWO captured of the old Bizztravel navigation against the new (which still stands today):<\/p>\n\n\n\n <\/p>\n\n\n\n As you can see, the improved navigational system relied on clearer guides\u2014like country flags and other recognizable symbols\u2014to lead visitors down to a more intuitive and helpful interface.<\/p>\n\n\n\n When we talk about hidden versus visible menus, what we\u2019re really talking about is whether or not a menu is hidden behind a symbol (like a hamburger menu). While hidden menus may make sense for sites viewed on mobile devices, the question of whether or not these minimal navigational cues can be used on a desktop is something UX experts are indeed curious about.<\/p>\n\n\n\n The Nielsen Norman Group<\/a> conducted an experiment to try and uncover what exactly happens when you use hidden menus for both desktop and mobile websites. While we don\u2019t have information on which website they tested this on, I don\u2019t know if it\u2019s necessary as the test itself is clear enough.<\/p>\n\n\n\n Can you guess where the hidden menu is on this site<\/a>?<\/p>\n\n\n\n If you guessed the icon at the center of the page\u2014which logically should only serve as a link back to the homepage\u2014then you would\u2019ve guessed correctly.<\/p>\n\n\n\n In testing visible menus against hidden menus, here is what the NNG researchers found:<\/p>\n\n\n\n Desktop<\/b><\/p>\n\n\n\n Mobile<\/b><\/p>\n\n\n\n In addition, the researchers also found that hidden menus delayed discoverability<\/strong>. In other words, without a clear guide at the top of the website, users had a more difficult time finding the information they were looking for. Hidden menus led to a 21% increase in difficulty and a 20% decrease in the ability to complete a task.<\/p>\n\n\n\n Here\u2019s a good example of a simple, straightforward, and visible menu:<\/p>\n\n\n\n As you can see from the example above, mobile users are definitely more acquainted with the hidden menu than desktop users. But when it comes to determining how to design a hidden menu for mobile, it\u2019s not enough to rely on the hamburger icon and call it a day. These tests from Sites for Profit will show you why.<\/p>\n\n\n\n In the first test<\/a> they conducted, they set out to test the efficacy of the design of the hamburger button. They created three versions of the hidden menu icon:<\/p>\n\n\n\n What they found was that the icon with the border resulted in a higher conversion rate. Their assumption was that because it more closely resembled a button that visitors\u2019 eyes were drawn to it as something to click.<\/p>\n\n\n\n In the second test they conducted, they wanted to know if the word \u201cMENU\u201d could have a more profound effect when used in other capacities. They created four versions of the hidden menu icon:<\/p>\n\n\n\n They found that the hamburger\/MENU with a border received the most clicks; however, it was the word \u201cMENU\u201d wrapped in a border that had the highest conversion rate.<\/p>\n\n\n\n Sites for Profit was sure that the word \u201cMENU\u201d was the clear winner over the hamburger icon since a well-known and descriptive word was likely to be more effective in drawing traffic than an icon that most, but not all, people were aware of. So they took the winners of their two tests and conducted one final experiment<\/a>.<\/p>\n\n\n\n Unsurprisingly, the bordered \u201cMENU\u201d won over the icon.<\/p>\n\n\n\n So, what have we learned about navigation menus from all these A\/B tests? Well, if there\u2019s something that doesn\u2019t seem quite right about how visitors interact with your site, then the navigation is a likely culprit. For something that likely doesn\u2019t take as much thought or planning as, say, your home page design or the wording of a conversion pop-up, it can have a seriously devastating effect on your conversion rate if not properly set up.<\/p>\n\n\n\n Here are some additional tips to keep in mind when designing your website\u2019s menu:<\/p>\n\n\n\n Always link your logo to the home page. According to the KoMarketing report mentioned earlier, 36% of people use it to navigate back to the start.<\/p>\n\n\n\n Despite the multiple menus, search bar, and member links on the REI website<\/a>, the logo stands out large and in charge so there\u2019s never any question on how visitors can return to the home page.<\/p>\n\n\n\n <\/p>\n\n\n\n Keep it simple. The more pages you try to jam in a single space, the greater the chance you\u2019re going to confuse someone. So either keep the number of menu options on the lower end of the spectrum (realistically between five and seven) or simplify the layout.<\/p>\n\n\n\n The La Moulade navigation is a great example of this.<\/p>\n\n\n\n <\/p>\n\n\n\n While they could\u2019ve followed other agencies\u2019 leads in breaking out their services into a variety of sub-pages that, frankly, their visitors wouldn\u2019t really understand, they kept it nice and simple. Three pages in the navigation and a fun animated scrolling effect tells visitors everything they need to know about the quality of work they\u2019ll get when working with La Moulade.<\/p>\n\n\n\n Organize your menu based on priority. The serial position effect<\/a> says that pages that appear closer to the top or bottom will automatically take precedence in your visitors\u2019 minds.<\/p>\n\n\n\n <\/p>\n\n\n\n As you can see on the Comedy Central site<\/a>, they\u2019ve chosen not to list their shows in alphabetical order or in any seemingly logical order that would help visitors find what they\u2019re looking for right away. It\u2019s probably safe to assume then that The Daily Show<\/i> is their highest rated show\u2014or one they want to put in front of more viewers\u2014and that\u2019s why it was given the top slot here.<\/p>\n\n\n\n Use concise, but descriptive menu page titles. This is not the place to try and get creative with headlines.<\/p>\n\n\n\n Build your menus as wide as you can for each screen size. It\u2019ll make the text easier to read and the buttons easier to click.<\/p>\n\n\n\n The Adwyse website does a great job of maximizing the space the menu takes up so that page titles are always large enough to read and<\/i> click on. This applies both to the desktop navigation:<\/p>\n\n\n\n <\/p>\n\n\n\n As well as the mobile navigation:<\/p>\n\n\n\n <\/p>\n\n\n\n Use color or other hover effects to indicate \u201cYou Are Here\u201d within the menu. The Netflix website<\/a> makes good use of their brand red to let visitors know where they\u2019re currently located within the navigation.<\/p>\n\n\n\n <\/p>\n\n\n\n Make your navigation \u201cstick\u201d so visitors don\u2019t worry about where it disappeared to. This applies to any style of navigation, too: mobile or desktop, visible or hidden, horizontal or vertical.<\/p>\n\n\n\n The Coloured Lines\u2019 website<\/a> does a good job of this with their super colorful, icon-driven, and ever-present vertical navigation:<\/p>\n\n\n\n <\/p>\n\n\n\n Mobile and desktop users want a menu that makes sense for them, so don\u2019t try and design one menu to suit all. The Intuit website<\/a>, surprisingly, serves as the perfect example of why you need to do this.<\/p>\n\n\n\n Here is it on desktop:<\/p>\n\n\n\n <\/p>\n\n\n\n And here it is on mobile:<\/p>\n\n\n\n <\/p>\n\n\n\n Either they don\u2019t have any visitors from mobile or they don\u2019t care that they need to pinch and zoom and scroll in order to make their way around the non-responsive website.<\/p>\n\n\n\n When designing a menu for mobile, remember to make it crystal clear that the menu is clickable. A border is a great way to call this out. Here\u2019s how Politico<\/a> does it:<\/p>\n\n\n\n <\/p>\n\n\n\n Icons aren\u2019t always universally understood, so try to avoid using them when possible\u2014for mobile or desktop.<\/p>\n\n\n\n I\u2019d suggest that the Brit & Co website<\/a> actually does a good job of this since the icons they use are all instantly recognizable:<\/p>\n\n\n\n <\/p>\n\n\n\n It\u2019s okay to have deep, multi-layer menus. However, never place them within hidden menus. Always use a mega menu design and think about adding breadcrumbs<\/a> to simplify navigation even further.<\/p>\n\n\n\nMenu Structure<\/h2>\n\n\n\n
![\"Portland](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06024001\/Portland-Trail-Blazers-before.png\")
<\/figure>\n\n\n\n\n
![\"Portland](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06024324\/Portland-Trail-Blazers-after.png\")
<\/figure>\n\n\n\nMenu Wording<\/h2>\n\n\n\n
\n
![\"Formstack](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06024617\/Formstack-after.png\")
<\/figure>\n\n\n\n![\"Formstack](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06024514\/Formstack-before.png\")
<\/figure>\n\n\n\nMenu Logic<\/h2>\n\n\n\n
![\"Bizztravel](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06024827\/Bizztravel-before-and-after.png\")
<\/figure>\n\n\n\nHidden Menus<\/h2>\n\n\n\n
![\"Impossible](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06024936\/Impossible-Bureau-hidden-nav.png\")
<\/figure>\n\n\n\n\n
\n
![\"HostGator](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06025045\/HostGator-visible-nav.png\")
<\/figure>\n\n\n\nMobile Menus<\/h2>\n\n\n\n
\n
![\"CaffeineInformer](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06025853\/CaffeineInformer-Hamburger-Icon.png\"){kind=icon}
<\/figure>\n\n\n\n\n
![\"Caffeine](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06025152\/Caffeine-Informer-MENU-icon.png\"){kind=icon}
<\/figure>\n\n\n\nAdditional Tips for Menu Design<\/h2>\n\n\n\n
Tip #1<\/h3>\n\n\n\n
![\"REI](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06025421\/REI-home-logo.png\"){kind=logo}
<\/figure>\n\n\n\nTip #2<\/h3>\n\n\n\n
![\"La](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06025615\/La-Moulade-simplified-nav.png\")
<\/figure>\n\n\n\nTip #3<\/h3>\n\n\n\n
![\"Comedy](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06025733\/Comedy-Central-Priority.png\")
<\/figure>\n\n\n\nTip #4<\/h3>\n\n\n\n
Tip #5<\/h3>\n\n\n\n
![\"AdWyse](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06030008\/AdWyse-Desktop.png\")
<\/figure>\n\n\n\n![\"AdWyse](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06030112\/AdWyse-Mobile.png\")
<\/figure>\n\n\n\nTip #6<\/h3>\n\n\n\n
![\"Netflix](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06030302\/Netflix-Colors.png\")
<\/figure>\n\n\n\nTip #7<\/h3>\n\n\n\n
![\"Coloured](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06030357\/Coloured-Lines-Sticky-Nav.png\")
<\/figure>\n\n\n\nTip #8<\/h3>\n\n\n\n
![\"Intuit](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06030535\/Intuit-Desktop.png\")
<\/figure>\n\n\n\n![\"Intuit](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06030545\/Intuit-Mobile.png\")
<\/figure>\n\n\n\nTip #9<\/h3>\n\n\n\n
![\"Politico](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06030729\/Politico-boxed-hamburger.png\")
<\/figure>\n\n\n\nTip #10<\/h3>\n\n\n\n
![\"Brit](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06030833\/Brit-and-Co-icons.png\"){kind=icon}
<\/figure>\n\n\n\nTip #11<\/h3>\n\n\n\n
![\"Verizon](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06030952\/Verizon-Mega-Menu.png\")
<\/figure>\n\n\n\n![\"Verizon](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06030949\/Verizon-Breadcrumbs.png\")
<\/figure>\n\n\n\n![\"Bolden](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/06031129\/Bolden-Popup.png\")
<\/figure>\n\n\n\n