The History, Pros, and Cons of Digital Design's Most Commonly-Used Icon

It's one of the most recognizable icons in modern digital design: three short, horizontal lines stacked neatly together. You've seen it countless times, representing the main menu on nearly every website and application. Sometimes it transforms into three dots—a "kabob" menu, if you want a fun fact, but its function remains the same: it's the gateway to everything your site has to offer.

With over 64% of all website traffic coming from mobile devices earlier this year, this tiny icon has become a massive deal. Its presence dictates how users navigate and, ultimately, how your business is perceived online.

But is tucking away your navigation always a good idea? Let's dive into the fascinating origin story of the hamburger menu and weigh its pros and cons to help you optimize your website's setup.

Why a "Hamburger?” A Trip Back to 1981

To understand the hamburger menu, we have to look back over four decades to the dawn of the commercial personal computer.

In 1981, the Xerox Star was in production. Designer Norm Cox was tasked with a foundational challenge: creating a set of intuitive icons for the graphical user interface (GUI) to make the complex new machine user-friendly for the average consumer.

Cox’s work is legendary and still informs modern design. The icon for a new document (a sheet of paper with a folded corner) and the folder icon for directories both came from his initial set. But the most widely used—the three-lined menu—was a masterpiece of minimalist design. Cox explained the careful thought process:

"Its graphic design was meant to be very ‘road sign’ simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple.”

Though the design was replaced in 1987, it staged a massive comeback around 2009 with the rise of smartphones. The limited screen real estate of these new pocket-sized computers made the hamburger menu's ability to maximize space invaluable, cementing its role in today's digital landscape.

The Pros

The hamburger menu's success is rooted in its inherent advantages, especially for mobile optimization:

• Space efficiency - This is the primary driver. On a small screen, there's simply no room for a fully spelled-out navigation bar like: Home | About | Services | Contact. The hamburger icon offers a single, non-distracting button that neatly houses all your links.
• Improved user experience - By simplifying the visual design, the hamburger menu minimizes cognitive load. Users are presented with a clean interface dedicated to the content, and when they need to navigate, a well-organized drop-down is easier to scan than a crowded top bar.
• Improved marketing - Fewer distractions mean more focus on your core message. Tucking away the navigation frees up crucial above-the-fold space for compelling headlines, engaging visuals, and clear calls-to-action (CTAs).

The Cons

While efficient, this design approach isn't without its potential pitfalls, largely because hidden content is sometimes forgotten content:

• Increased user friction - Hiding the menu means adding an extra click. Instead of a one-click action, a user must click the icon then click the desired page. If your navigation isn't immediately obvious or easy to find, you risk frustrating visitors and increasing your bounce rate.
• Visibility vs. concealment - You must carefully decide which pages are important enough to live outside the menu. Pages that are vital to your business may suffer from decreased visibility if they are exclusively hidden inside the hamburger icon.

To mitigate the cons, ensure your most crucial, high-value pages are accessible via links on the homepage or through a complementary, always-visible navigation element like a bottom bar.

The hamburger menu is a powerhouse of efficiency, especially on mobile, but it requires strategic implementation. Its simple three-line design is far more complex than it looks, demanding that you strike a delicate balance between a clean interface and immediate content accessibility.

Check back in this space regularly to read more about today’s business technology.