Self Initiated: Burger nav/Off Canvas Menu Research

hamburger

Here I will showcase some research I conducted into Off canvas menu’s also known as the’Burger nav’. This style of navigation is a fairly recent development within web design, but over time is becoming more and more popular. Most of the time, off canvas menu’s are used to adapt a standard navigation into an off canvas container when viewing a particular website on a mobile or tablet device.

This technique comes in handy when used on a smaller device, because it is easier to select a link because the slide in container allows the links to be a lot larger than if the navigation was just down sized responsively.

Bellow is a gif that shows exactly how the off canvas menu works, the user selects the burger icon at the top, and on the left hand side the navigation slides in.

offcanvas

Not only has off canvas navigation taken over the mobile and tablet realm, but it is becoming more and more common on desktop also. Take for example the Byte Park berlin website:

byteparkberlin.png

This is the view on a desktop, and once you select the button the off canvas container comes out like this:

bytepark2.png

Off canvas menu’s look amazing, and is quite a stylish way of presenting your navigation in comparison to only using a standard array of links in an inline-block. It can be argued though, that off canvas menu’s effect functionality of a website. In my own personal opinion an off canvas menu makes the users journey trying to navigate through a website take longer than if it where a standard navigation, which is right in front of you and is pretty much straight forward.

Here is a comparison of the time it takes to navigate through a page using a basic navigation, and an off canvas menu:

 

Whats Out Of Sight Is Out Of Mind

One problem with off canvas menu’s which has been heavily debated is the fact that, because the user is used to going onto a page and getting the navigation straight away, when entering a website that uses a burger navigation/off canvas because the user cannot see this straight away, they spend a second thinking about what to do because they want to be on another page, like Steve krugg once said…

 

“Dont Make Me Think!”

– Steven Krug

 

Resource: Off Canvas Menu’s Good or Bad?

 

Here are some pointers I came across for and against the Off Canvas burger menu, taken from an article on Westwerk:

Negative

  • It’s not intuitive – Although for some people the hamburger icon has become nearly as ubiquitous as, say, an eject symbol, that’s not the case for many others. A number of user-testing studies have shown that the majority of internet users still don’t know what the three stacked lines represent, and therefore may have significant trouble locating the menu and navigating your site
  • It’s not efficient – By default, hamburger menus conceal navigation links, forcing users to first click on the icon before they can view their options and pursue their goal. While this may not seem like a big deal, in the world of web design every click counts. The average internet user is notoriously impatient, so an extra step could easily lead to someone abandoning your site before completing their desired action.
  • It decreases discoverability – Again, because the hamburger menu is hidden by default, that means that users are less likely to quickly and easily discover additional pages and information. Most site traffic tends to come from links that direct to a specific page within the site, not the homepage itself. If someone comes to a page on your site and the rest of your site navigation isn’t easily visible, chances are pretty slim that they’ll actively seek out the menu and click around for a while.

 

Positive

  • It saves space – The main reason the hamburger menu was created in the first place is also the main thing that it does best: saves valuable screen space. When it comes to mobile design screen real estate is at a premium, and navigation layouts that work on desktop can look clunky and overwhelming when translated to a phone or tablet. The hamburger menu solves that problem by consolidating a significant amount of information without sacrificing aesthetics.
  • It’s widespread – Despite the recent controversy, the hamburger menu remains incredibly popular. As the go-to icon for some of the most respected names in the online world (The New York Times being one of them), if you do choose to use it on your site you know you’ll be in good company. While “everybody else is doing it” shouldn’t ever be reason alone to implement a certain feature or functionality on your site, the widespread popularity of the hamburger indicates that something about it must be working well.
  • Recognition is on the rise – Although the hamburger menu isn’t quite as intuitive to users as some might hope, recognition is definitely on the rise. While some websites are beginning to try out more direct alternatives (creating an icon with the word “menu,” for example), the hamburger icon shows no signs of slowing down anytime soon. The more pervasive it becomes, the more likely it will work its way into the collective conscience of internet users, negating at least one major argument against its effectiveness.

Resource: Westwerk

 

From this research I have learnt a lot about the off canvas menu, number one is the fact that this type of menu is not very popular among members within the web industry. Not only does this menu take a lot longer for a user to navigate a website, but also it is out of sight which is not great considering one of the biggest flaws in relation to creating a website, you cannot leave it up-to the user to the think about how they are going to navigate a page, it has to be easy and fluid for the user.

Although this type of navigation has its bad points, it also has some very positive affects on the usability of a website, such as it saves space on a website and comes hand in hand for the usability of a website on a tablet or mobile device. The hamburger/off canvas menu, is also growing in popularity which indicates that this type of menu, which fits in with current web trends, and is also becoming recognisable as it grows in popularity, which indicates that this type of nav is becoming the norm on modern day websites.

After this piece of research, I have decided to add this to my ivy clothing website, so it allows for the website to fit in with current web trends and also makes the website easier to use on mobile and tablet.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s