Trend that seems to have invaded every interface. Mashable’s responsive website sports the stereotypical hamburger menu. This is a style that users are becoming very familiar with and from a design perspective while effective, it has become a bit boring. This menu icon and style is becoming a staple in mobile as well as desktop interfaces. UI trends are a double edged sword, they work because everyone is using it, so people understand what those odd 3 lines mean – problem is they get overused and fast.
I find one of the best techniques to handle UI or Icon trends is to find the most common interaction of the trend but add a unique spin on it just like Google has done.
I recently got a new phone (nexus 4) and it had a very interesting hamburger menu.
While still keeping with the trend of 3 to 4 horizontal lines on top of each other. Often circles are placed next to the lines to indicate icons with text next to them. Google has added small shapes next to each line instead. This is to represent a list of varying objects (in this case notifications). They will be presented, as a list but may not be relevant to each other. Gloople also has a funky take on the hamburger menu including different widths.
I’ve touched on it on a previous post about flat UI but hamburger menus are one of the great UI options that can easily be built in CSS. Much like the gear settings icon used in Facebook and other popular sites, I’m predicting this menu icon will be here to stay. The hamburger menu is one of the notable UI trends of 2012-2013 and a great idea for those looking to embrace an easily recognised menu option. However it’s worth considering adding a twist to spice things up for a lively an innovative take on an effective and function UI. If you are thinking of using the hamburger menu on your next project just remember it’s a fine line between a fresh juicy menu and a stale lunch.
Get in touch with the experts at Media Heroes today to find out how you can use the hamburger menu in your next project.