MOBILE 1st BURGERS
food truck day?

Free Stuff

The hamburger icon is a familiar way for users to open up a navigational menu linking to each destination, especially when using mobile devices. At freefrontend.com there are various hamburger style codes that are free and available for download. Some do use javascript to complete the styling which will come in use in the near future for understanding what exactly the code is effecting . They do have icons purely of just HTML and CSS that are available for download and use in your coding.

Alternatives

Research tells us that 49% of mobile users are one thumbers(mostly right) so bottom navigation is a very pratical design. A bottom nav using icons that are identifiable and limiting the number of destinations in the menu from 3 to 5, helps users navigate faster and more efficiently. Designing a visible and well-structured nav that is consistent throughout the site is very important for the user experience. The target areas of the destination icons on the menu should be large enough to be tapped and simple enough for the user to identify with. A combination of using colors, labels, and icons for proper visual clues, as well as checking usability testing, will ensure a better UI.

Inspiration

Catching the attention and implementing a user friendly experience is a goal all designers are trying to achieve. One way is using a hamburger icon with some neat effect to display the menu. At Line25, there are several cool hamburger icons available with said effects. Slide out light saber-like menu drawers, animated doughnuts for menus, and simple hamburger menu icons are available to use or inspire a custom style.

SUMMARY

Hamburger menus offer a recognizable UI for mobile first design, however, it has its pros and cons. One of the pros is that most mobile users already identify with the hamburger menu icon on mobile devices. Even though the burger icon may seem outdated, it definitely still has practicality. Users know that it leads to some kind of menu to main stream their search or interests. The familiarity with the interface by users brings value to its continued existence. However, there is an argument that the hamburger menu lacks efficiency and it out of date. Additionally, research by Spotify verifies that the use of the tab-based menu in mobile application has increased user-experience by 30%.

The various ways to display your toggled menu is fascinating to me. Developers use several menu UI style variations that are available when users choose the hamburger icon. A developer has an arsenal of different effects available to display the navigational menu. They can slide along, slide in, fade, drop down, bounce, single drawer, or zoom, to offer developers a unique and large enough for mobile use as space is limited.