The last few years have brought major innovations in website navigation.
As more users are surfing the web and purchasing from their phones, responsive design (adaptive design across devices) is becoming increasingly important. This means the organization of web content must change with the way users navigate websites as well, so site navigation has seen major changes. Particularly for websites that contain a lot of pages and content, it’s crucial that website navigation is intuitive, simple, and clear for various users, devices and browsers.
The introduction of the Hamburger Menu (the icon made up of a few horizontal lines that replaces the full menu on mobile devices) came into the picture as a solution to remove long lists of links from mobile screens. It didn’t take long for hamburger menus to be used for desktops as well. Critics attest that hamburger menus hide valuable information and can hurt conversions, citing the “Out of Sight, Out of Mind” philosophy. While this argument is valid, I think there is a place for the hamburger menu on some websites especially as the users grow more accustomed to using it.
Overlay menus (characterized by a full-screen overlay that covers the screen and displays only the menu) and Mega Menus (a form of dropdown menu with several columns and even dynamic content) are other ways of presenting sub-pages of a website in the main navigation, making them accessible on every page of the website.
Pros and Cons of the Hamburger Menu
When deciding if a Hamburger Menu is a good idea for your website, it’s good to know both the pros and the cons for adopting this kind of navigation.
Benefits of adopting a Hamburger Menu
Provides graphical hierarchy to content allowing users to “digest” smaller amounts of information at a time. Especially for properties that offer many services, room types, or just have a lot of content, trying to squeeze everything in the main navigation bar can make the header seem overwhelming and messy.
Minimalist design and less confusion. There is nothing worse than a large, beautiful full-screen image or video that’s covered up with a long string of links in the header. As long as guests have a clearly defined Call To Action (Booking) button available to them at all times, the Hamburger Menu could be an optimal solution to clean up the header and organize the navigation better.
Responsive across all screen sizes. It’s actually easier for responsive design to design a Hamburger Menu for all screen sizes. This avoids the issue of your main navigation menu wrapping to the second line on smaller screens or overlapping your logo.
Potential drawbacks of adopting a Hamburger Menu
Additional clicks can hurt conversions. For highly converting websites, such as extensive ecommerce websites or online stores, the additional click to view the menu could be a nuissance to browsing products and discourage users from completing their transactions.
Intuitive? Despite the fact it may seem like the Hamburger Menu is understood by all users, the reality is that there is still a learning curve for this relatively new UX design feature. For this reason, placing the Hamburger Menu icon in the top right corner, which is where most users search for the main navigation intuitively, can help make this feature more clear.
When is a Hamburger Menu Not a Good Idea?
In my opinion, high converting websites – large e-commerce websites – do not benefit from the hamburger menu and would do better with a Mega Menu. The objective with these types of websites is to drive traffic to complete transactions and every click counts. Forcing additional clicks to view the menu is counterproductive to this strategy.
Some Examples of Our Favorite Overlay Menus and Hamburger Menus
Below are a few of our favorite hamburger menus and overlay menus. What makes them our favorite? They offer a high impact appeal with big graphics and bold colors, organize the website content in a simpler way, and allow the website to be explored at different levels of investment.
The Standard hotels are known for their grunge party culture and groovy vintage vibes, so when it comes to the website’s main navigation they went with their brand red on a clean white background. It’s slick and clear, making it easy to explore every corner of their site.
The Line Hotel
The Line Hotes are the cool, newest hangouts in whatever city they’re in (currently LA, DC, and Austin). They opted to place the hamburger menu in the top left corner to save the prized top right hand corner of the screen for the booking button. Based on studies of where user’s tend to look first at the screen, especially to interact, the top right corner is important real estate (think “Restaurant Menu Psychology”) – so hotel companies seeking to optimize conversions through direct bookings should consider this
Two Fifty Main Hotel
It’s definitely a choice to move the main navigation from the top of the screen. Almost inevitably you’ll run into the issue of missed conversions or higher bounce rate (users that visit just one page of your website before leaving). But never the less, if the design is clear, simple, and functional, who’s to say it doesn’t work? The Two Fifty Main Hotel moved it’s hamburger menu to the middle of the screen on the sides, and opens a very minimal menu. For a small hotel, this is a great solution to cover the bases and simplify the content for visitors.
An example from our own work, we recently updated the Personalized Italy main navigation to accommodate a growing destination list. In keeping with the starry brand language, user’s click on “Start Dreaming Here” to open the main menu overlay. Large colored boxes visually organize the destinations in corresponding blue hues (each selected by the client to represent a specific relationship she has with the place – explained on each destination page). The full-screen navigation dedicates an equal amount of space to each destination to encourage visitors to peruse different areas of the site they might not have explored with simple text links on the top of the screen.
Another one from our collection, the Italy Hotline menu overlay is activated only for the “Tours and Destinations” link in the main menu, while the “Gourmet Experiences” link directs the user to the food tours category.
Like this article and would like to receive more in your inbox?
Subscribe to our monthly newsletter for more updates, hospitality news and tips for your business!