Do hamburger menus work on desktop sites?

Default avatar.
August 11, 2015
Do hamburger menus work on desktop sites?.

We have mobile devices and their designers and developers to thank for the hamburger menu and its increasing popularity. Now however, more and more desktop sites are also adopting this design and navigation solution. Because of mobile devices’ smaller screens, screen space comes at a premium. Designers have to prioritize what design choices take precedence over others. They also have to be smart about making the most of smaller space. A hamburger menu only displays navigational headings and selections when users actively click on the symbol. Otherwise, it’s a discreet, almost invisible icon usually located at the top left or right of a site — mobile or desktop. To say that this is the epitome of minimalism is an understatement. Since it affords supreme functionality while staying out of the way, it’s being used by an increasing number of designers.

Hamburger minimalism

One of the most enduring design trends of the last few years has been minimalism due to its focus on clean, simple and easy-to-navigate aesthetics. It comes as no surprise, then, that hamburger menus are popular because they promote minimalism on any site, both in terms of design and function. 001 Designer Brian Hoff understands this well on his site. Note the hidden menu near the top right portion of the homepage. It’s clean and simple from a design standpoint because it sits there inconspicuously until the user decides he wants to move on and clicks it to open the navigation options. Yet from a function standpoint, it’s also a study in minimalism because all it takes to interact with it is for the user to hover the cursor on the icon and click on it. Then, a fly-out menu appears from the right side of the screen with just a few navigational options. Easy-peasy! Of course, this also bleeds into the user experience, as anybody trying to navigate Brian’s site is going to enjoy doing so with this minimalist hidden menu than with a menu that’s brash and huge, which would distract from easy navigation and overwhelm with too many options.

Hamburger focus

Web design is all about laying out elements and stressing some over others in an attempt to prioritize how site visitors absorb information. It’s part of how information architecture works: if you want visitors to understand what your site’s all about from the moment they lay eyes on it, then you’ll design to draw attention to the site’s tagline or value proposition while scaling down the importance of other elements. 002 eWebDesign understands this and has designed its site accordingly. Note how the hidden menu is very discreet at the top right of the homepage. It’s not even sticky, so scrolling down will make it disappear. This unobtrusive presence of the hidden menu means that the visitor’s attention is immediately drawn to the site’s unique value proposition, which is that subscribers to its blog receive web news straight from industry experts. This also seamlessly segues to the call to action button of subscribe,” right below the proposition. If the menu was laid out traditionally — in the form of a horizontal navigation menu above this proposition — chances are that visitors would instead be immediately distracted by a myriad of things to click on! That would harmfully impact the number of people signing up to the site.

Creative problem solving

Every site that’s built faces a big problem right off the bat: how does a designer plan things so that the site is both functional and still aesthetically attractive? Getting the navigation right from the get go — both in terms of the user experience and usability — is key. The hamburger menu allows creative and practical designers to come up with navigation solutions that serve both function and beauty. Sometimes, the solution isn’t what you’d ever really expect, and visitors tend to be blown away by a navigation layout that delights them with something they’ve rarely or never seen before. 003 Case in point: digital studio We Are Empire, from Manchester. Its website relies heavily on concepts like white space, huge images and cleanness, yet that just scratches the surface. When users click on the hidden menu — again, discreetly placed at the top right corner of the homepage — they’re absolutely delighted with a creative solution to functional navigation. As soon as the hamburger menu’s clicked, no fly-out menu appears from any side. Instead, the entire screen switches over to the navigation menu, which appears by itself on the entire screen; the change in color from white to pink reinforces this change. From there, users are free to find exactly what they want on the site.

Straightforward communication

The goal of any website is to have visitors use the site with ease and efficiency from the moment they begin browsing it. One of the most powerful ways of enabling this is through affordances, which communicate to visitors what various elements of a site mean and how they can be used. Pattern affordance uses familiarity to tell visitors immediately what an icon, for instance, can be used for. Ergo, pattern affordance quickly tells a visitor how they can interact with an icon to get a desired result. The hamburger menu has become nearly ubiquitous on mobile in recent years. Therefore, it’s a safe bet that a large number of users are familiar with it: how it looks, how they can use it (by tapping it to open a menu), and even where on the screen it’s usually to be found. Its presence on any website affords instant communication on how to navigate said site. 004 Digital ad agency Xander demonstrates this on its website. Though the homepage is so bare to be almost extreme in its minimalism — note the absence of anything, really, that grabs the eye above the fold — users can immediately look for the hidden menu and find it in the top right corner, a usual location. This obedience of pattern eliminates confusion from the standpoint of users and empowers them to start finding what they want on the site immediately.

Not just a fad

Even now, in spite of the hamburger menu’s ubiquity, it still attracts criticism from some circles. Its wide adoption on many sites both mobile and desktop indicates that there’s a demand for it, yet doubts persist. By this point, it’s more than obvious that the hamburger menu is a permanent fixture on many homepages, both small and large. It’s more than a passing fad because designers understand that it solves navigational problems efficiently, smartly and easily. And that’s exactly why this approach to the navigational menu is now firmly rooted in our web-browsing habits.

Marc Schenker

Marc‚Äôs a copywriter who covers design news for Web Designer Depot. Find out more about him at marcschenker​copywriter​.com.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…