In a portfolio web design which focuses on the mobile version design (because of the scenario in which users will use it) does it make sense to keep a hamburger menu for the desktop version? It's a responsive webpage, and when I am on the desktop version, the menu seems inexistent. (It's also located on the right side, what makes it more confusing because it is mixed up between the colorful images. In the mobile version it seems more intuitive and highlighted.)
-
3Your description makes it sound like the desktop version of a responsive design uses the hamburger menu. If so, why? The point of responsive design is to gracefully use the limited space provided, and the hamburger menu is currently the way to show a menu in that context. Don't show a hamburger on the desktop.– Nicholas PappasJan 13, 2015 at 23:02
-
Indeed, they are using hamburger menu in the desktop version, I guess to match styles and aesthetics, but it's way too confusing. Thank you Evil Closet Monkey for your answer– sofiatrJan 13, 2015 at 23:23
-
can add a screenshot?– AdesJan 14, 2015 at 7:50
-
In my opinion, it doesn't make sense to use a hamburger menu in any scenario. Check these articles for research regarding the usability of the hamburger icon; lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus theatlantic.com/product/archive/2014/08/… techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you– VelkommenFeb 13, 2015 at 15:36
-
Ally Bank uses a hamburger menu even when I access the site via a Desktop and I find it extremely unusable (there's a bunch of dead space on the top where there used to be helpful links/menu options).– J. DimeoFeb 13, 2015 at 15:40
Add a comment
|
4 Answers
As Evil Closet Monkey said, it doesn't make sense that the hamburger icon is being used on a desktop version of the site. If you're using a responsive framework, like Bootstrap or Foundation, they should automatically adjust the menu style depending on screen size like the picture below.
If you look at this article where I grabbed the image, you'll see how navigation works while using Bootstrap. It also shows you the HTML to set up a fluid navigation bar.
The hamburger menu... I'm torn.
The hamburger menu decreases discoverability because it hides what the user is more than likely going to use to... well... discover
At a glance, the user can tell what's where and how to find what they are looking for. Being hidden underneath someplace isn't ideal for scanability. Having said that, stay away from keeping it on the desktop site.
The reason why people feel the need to keep it on mobile is because there isn't much space for a full blown menu. Just be careful. The hamburger menu is ambiguous, it was tested to find that people didn't understand it. If you want to incorporate the hamburger menu, make sure to at least add a label to it (or just completely take out the icon and leave the label like "menu").
To add to this, sites like twitter has completely eliminated the use of the hamburger menu and threw a menu to navigation at the bottom of their application.
Same thing with Facebook, but they still have a hamburger menu, but for a different purpose.
How it was:
To what it became:
Context is everything. Maybe it matters, maybe it doesn't. The fact that it's a portfolio site has no real bearing in and of itself.
Generically speaking, should you retain the hamburger menu on larger screens? Traditionally we haven't. But it's becoming an increasingly popular option. Some sites that retain the hamburger menu even on large screens:
Whether it's good or bad, again, depends on context. Some sites you want a really robust always-visible navigation system. Sometimes site navigation is secondary to the home page content. It's a judgement call.
Arguments for not using a hamburger menu on large screens:
- hiding navigation is usually a bad idea, so why hide it?
- while people are more familiar with them on small screens, they may not be looking for them on large screens
Arguments for using a hamburger menu on a large screen:
- lots of large screens are now touch devices. Hamburger menus allow you to expose a much larger touch-friendly version of site navigation than if it was on-screen at all times.
- may make development and maintenance of that part of the site a bit easier across all viewports.
- may offer some consistency for users that use your site on multiple devices.
I agree with the answer and comments above, it's like UX 101 and I won't argue with that but... let me add a different view to consider.
You say this is for a portfolio. Portfolios are meant to display your work, but also who you are. It's a way to tell the world "Hey, I'm me. And additionally, I can do all of this!". Personally, I know what are the basics of UX, UI, design trends, etc. Now I want YOU to show me something else, doesn't matter if right or wrong, I want you to show you can think out of the box. Everybody and his mother can follow the rules in a book, what I want to see is if you can break the rules (providing you know them first). Keep in mind nothing was ever created without breaking rules. By definition. It's an absolute impossible.
And by the way, if you're a designer with an artist edge, you probably know how that tedious menu takes that valuable space even on that giant screen, right? You probably don't want to pollute your great design with that boring nav
What I mean with this is... yeah, why not? But also... what stops you from doing something else? Something really crazy? You'll have a lot of space to go creative, so... why don't you?
PS: I did a desktop site with hidden menus based on some full screen layout with crazy tabs that gave the client 225% more business (consultation and design). I don't know, maybe with the regular menu it could have work even better, but believe me it's not exactly an issue. And if in doubt... TEST!
