
Hamburgers - prawn
https://jonsuh.com/hamburgers/
======
aresant
Since this is trending on HN here's my CRO public service announcement:

Hamburger menus have been conclusively proven to be shit UX elements.

They lose on every metric against similarly sized, but clearly labeled "menu"
buttons along with other permutations.

So if you care about users actually using your menus, study-up on the
alternative formats and, as usual, test it yourself:

(1) [http://moovweb.com/blog/hamburger-menu-handy-tool-or-
useless...](http://moovweb.com/blog/hamburger-menu-handy-tool-or-useless-
icon/)

(2) [http://exisweb.net/menu-eats-hamburger](http://exisweb.net/menu-eats-
hamburger)

(3) [http://conversionxl.com/testing-hamburger-icon-
revenue/](http://conversionxl.com/testing-hamburger-icon-revenue/)

~~~
natrius
Is number of menu clicks actually a metric that should be maximized? If the
only functions in the hamburger menu are things you don't actually need to use
the app, you're probably fine. Consider Lyft and Uber. Their sidebar menus let
you view your history, change your payment information, etc. But you don't
need any of those to use the app.

If you're going to hide functionality, make sure users can have a good
experience even if they don't find it.

~~~
pavlov
As an overflow menu for rarely used controls, the hamburger is fine. It (and
its cousin the three-dot ellipse menu) have been used that way for years.

As a main menu, it's terrible for that exact same reason. The hamburger menu
is where people expect to find secondary actions, and suddenly you're putting
the most important navigation there. Why? It's like having a department
store's main entrance in the back alley next to the trash cans.

Someone may reply with, "We just need to teach users about the new meaning of
the hamburger menu". Again, why? What's the point?

------
bennettfeely
Not to brag, but I think I might have been the first to try this technique of
transitioning the three-line menu icon into different shapes.

As a college student it's been really awesome to see the interaction spread
first to many different versions on Codepen, to Starbucks' website, to
Google's Material design specs, to Apple's website, and newer examples popping
up everyday.

Original Codepen from October 2013:
[http://codepen.io/bennettfeely/pen/twbyA](http://codepen.io/bennettfeely/pen/twbyA)

------
ocdtrekkie
I admit I clicked this thinking it was going to be another post explaining all
the reasons why hamburgers are bad/non-ideal UI patterns.

The animations are kind of cool, but I don't feel like the cost is worth it.
This is 26 KB your site does NOT need. Though I suppose you can reduce that
substantially by only including the specific hamburger animation you want to
use in your site, and deleting the rest.

~~~
pedalpete
I was initially going to disagree with you, but in many ways you are correct.
You are probably only going to use one hamburger for your site, so why
download all of them. Would be nice to see the css split out into the
different hamburger types, and then just select the one you want to use,
rather than loading all the css which does not get used. Maybe that brings it
down to the 2-4kb range.

~~~
jonsuh
Gzipped the entire CSS file hamburgers.min.css is 3KB.

However, still no excuse. Which is why I also included the source, which is
designed to be modular so you don’t have to include the whole library. The CSS
is compiled via Sass and each type is its own partial that can simply be
commented out. When compiled with only one of the larger types, that trims the
CSS down to 1KB.

I also purposely have each type commented in the expanded CSS hamburgers.css
so one can easily scan and delete the type(s) they don’t need.

------
spectre256
It's easy to think of much of modern web design as tiny, frivolous details
that just wastes a ton of time to create, but click through all of these and
tell me when you get to the last one that the lack of animation isn't jarring.

The human eye and brain is tuned to deduce effects from action that involve
movement like in the real world, and a seemingly small detail like good
animation can help make an interface more friendly.

~~~
Stratoscope
That's the problem with these animations: none of them have anything to do
with movement in the real world, or even any connection to the meaning of the
hamburger icon itself.

When you click the icon, you aren't thinking "I want to turn the icon into a
big X." Instead, you're thinking "I want to see the menu." An animation that
turns the hamburger into a big X in a flashy way has nothing to do with the
goal you had in mind when clicking it. It's just a distraction.

Unfortunately, many designers are drawn toward flashy, distracting, irrelevant
animations like this.

A good example is Office 2016 for OSX. It has a bunch of new animations,
including two that are especially bad:

1) When you click a cell, it doesn't just highlight the cell like any other
spreadsheet. It _animates_ the outline cursor from the previously selected
cell to the new one. But when you click on a cell, that very cell you're
clicking on is where your attention is focused. You're done with the
previously selected cell and no longer thinking about it. The animation from
the old cell forcibly draws your attention back to the old cell, the one
you're no longer interested in.

2) When you click one of the Ribbon headings, the entire new ribbon does a
little sideways animation before settling into place. The animation goes
either to the left or right, depending on the relative positions of the
previously selected ribbon heading and the new one. It's as if they were
trying to give the appearance that the ribbon is one big long continuous strip
and the animation shows the correct part of the strip sliding into place - but
they only show the very last part of that movement. This animation has nothing
to do with what you wanted to do when you clicked the ribbon heading. It's
very distracting and disorienting.

There is a bit of good news for Excel users. Microsoft is going to provide an
option to turn off these animations, after a request to remove them attracted
over 2000 votes:

[https://excel.uservoice.com/forums/304933-excel-for-
mac/sugg...](https://excel.uservoice.com/forums/304933-excel-for-
mac/suggestions/9099424-allow-users-to-turn-off-cursor-glide-animation)

Of course, making it an option means that most Excel users will never find
that option and will just live with the distracting animations.

~~~
panic
These hamburger animations are even worse than the Excel ones. At least the
Excel animations try to reinforce some kind of spatial model that would help
you understand the UI. The hamburger animations just completely miss the point
of using animations at all. They're like the UI version of a mixed metaphor.

------
alpb
More pure CSS Hamburger icon animations:
[http://codepen.io/designcouch/pen/Atyop](http://codepen.io/designcouch/pen/Atyop)

------
Animats
If this were part of some consistent design language, used by many web sites,
it might be worth it. Lacking that, it's not helping.

Some classic animated menus: [1][2] These are in Flash, but could be
replicated with CSS and JavaScript. (With difficulty, because they need
graphical design tools, not just code.)

[1]
[https://web.archive.org/web/20070903002623/http://www.girbau...](https://web.archive.org/web/20070903002623/http://www.girbaud.com/eng/home.html)
[2]
[https://web.archive.org/web/20130326200424/http://www.girbau...](https://web.archive.org/web/20130326200424/http://www.girbaud.com/eng/)

------
mchahn
This is only loosely related, but does anyone else have a problem with the new
standard of a left-pointing arrow on the top left of a screen with a label?
The label tells where you are _now_ but it's presence next to the arrow makes
it appear to be where you are going. Every sign in the real world with an
arrow and a label means the opposite. I find myself often confused.

------
pcurve
Instead of "X", how about just pressed-down state of the same icon?

