Sofokus - Your partner in digital business development

Do we really need a hamburger menu or a hero carousel in 2018?

27 Jun 2018

When I sit down and start thinking about design trends in website layouts, the first things to notice are navigation bar and the site hero image. Navigation bar is the brain of the website and hero image lays the first impression and overall feeling of the website. When we are considering usability and functionality of the website, are we lacking behind because it is so popular to use certain elements such as a hamburger menu or a hero carousel?

Hamburger menu

Hamburger Menu
History of this icon goes as far back as 1981 when Norm Cox designed the icon for the window-based Xerox Star system which had a graphical user interface. Many years passed and then came the mobile phones with limited screen space. In no time, hamburger icon has infected our mobile phone menus and hiding the valuable information to be found.
In 2016, Spotify ditched the hamburger menu from their mobile app. This “maneuver” increased a user’s general clicking rate by 9%. Menu items got whopping 30% more clicks when they weren’t hidden under a hamburger menu. The problem why the hamburger icon is so popular is mainly because of the designers. It is such an easy way to clean up the layout pushing cool sleek minimalistic designs, unfortunately at the same time they are getting rid of the valuable user experience.
But we can’t always blame the designers going for beautiful sleek designs. When a client wants 20 different links for their menu, then there is not very much to do, because designers are not Gods either. Avoiding the easiness to slap a hamburger icon in the left corner of the web or mobile layout and dumping eight truckloads of garbage under it, there are a few things to consider.
Checklist for better user experience with or without hamburger menu.

  • Less is more. How many menu items the site has? If there are way over five of them, does the site even need that much of the menu items?
  • Prioritise. Even with the slightest prioritising can sort out the most valuable menu items that should not be hidden from the user.
  • Highlight.Use them as a floating top or bottom navigation instead of hamburger menu. Fast and easy to click menu items improves user experience in most cases.
  • You can have fries with your hamburger. Using hamburger menu is totally acceptable, especially when there are a lot of stuff going on. Use best of the both worlds and try to pop at least few links out of the hamburger menu.

Hero carousel

Hero carousel – more content and less space. Sounds pretty good on a paper when companies want to push everything for everyone. An end result is that there is just too much information that people will ignore. Auto-rotating carousels are really bad for the advertising company products. With auto rotation user might just ignore everything because they don’t have enough time to read all the given information. There is one bigger enemy for a hero carousel than content overdose and that is banner blindness. Internet has taught us to ignore third party advertisements and nothing drives a customer away faster than an automatically moving hero carousel that looks like a side bar ad.
British e-commerce product leader, Christian Watson used Google Analytics to test how much carousel with five slides gets clicks for each slide in an e-commerce site. First slide got 66% of all clicks while 2nd slide got only a 14% click rate and when we continue to the 5th slide, it got only 3% of the all clicks. That doesn’t sound very appealing if a customer wants to push five different offers for five different target group in the site hero. In 2013, Adobe tested how removing the whole carousel from the website would affect sales in an e-commerce website and just simply removing the carousel increased sales by 23%.
The easiest and cheapest way to improve user experience, while increasing the click rate and sales of an e-commerce site is just simply to never add a carousel in the first place. Other option instead of using a carousel is to promote deals in a site hero with targeted marketing. Displaying deals or promotions to different user groups individually. Respecting brands design and colors is the main key to avoid banner blindness.
Want to improve your site or even get more sales with your e-commerce website? Try using these next time instead of a carousel.

  • Remove the whole hero carousel.
  • Show only one slide for each target group individually.
  • Try to avoid banner blindness and go with your brand design.

Further readings:

Shortcuts

Osku Laurila

Read more articles by the author (3)