Hamburgers

by prawn • 10 years ago

79 32 10 years ago

spectre256• 10 years ago

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.

daurnimator• 10 years ago

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.

I got to the last one and I didn't find it jarring.

I find meaningless animations a waste of time ==> i.e. anything but a spinner to indicate "currently busy" I get frustrated at because it's forcing me to wait before getting to the next step.

nowprovision• 10 years ago

Animations look tidy and I'm sure you learnt a bulk of CSS3 in the process and hopefully had fun, but Im not going to include 558 lines (517 sloc) 26.9 KB to get animations for hamburgers that change to X. Infact it's not even the size it's the added dependency and risk of such dependency (as browsers evolve) that concerns me.

I also didn't find the last one jarring, why would it take more than a blink to slide out side menu (or vice versa) on an SPA unless doing some ajax loading for side menu content (can't see why this can't be avoided though)?

Stratoscope• 10 years ago

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...

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

panic2• 10 years ago

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.

SyneRyder• 10 years ago

"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.""

Bingo. I clicked through all of them, wondering why there is a need for so many different animations showing that the hamburger menu is disabled/inactive.

talmand• 10 years ago

What do you recommend to happen when a button changes state? The first time it opens the menu and the second time it closes the menu, as an example.

im3w1l• 10 years ago

Maybe it's just me, but I associate animations with trying to hide latency and slowness by giving me a little eye candy while I wait. For that reason I see the last one as mark of quality, it's signaling that there is no latency to cover up.

collyw• 10 years ago

I always associate them with creating latency and slowness. Maybe your reason is why I associate them that way.

userbinator• 10 years ago

I turn off all UI animation whenever I can. It makes everything feel a lot faster and instantaneous, the way a UI should be, and it doesn't distract me with unnecessary changes that consume attention and could cause me to miss the necessary changes.

https://en.wikipedia.org/wiki/Inattentional_blindness

panic2• 10 years ago

The problem is that the animation is completely disconnected from what's actually happening in the interface. Since the animation is happening at the same time as whatever action is caused by the button, it needs to be considered as part of that action. All of these animations (including the "boring" lack of animation) will distract you from the point of that action, which is (presumably) to bring up some kind of sheet or menu.

A cross-fade is almost certainly the best animation to use here. The progress of the cross-fade can follow the motion of the sheet or menu, reinforcing the connection between the button and the action, but without being overly distracting. The focus should be on the content of the sheet or menu, not the button itself.

ocdtrekkie2• 10 years ago

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• 10 years ago

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.

jonsuh2• 10 years ago

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.

gleenn• 10 years ago

Minimization should certainly help some of that.

ocdtrekkie2• 10 years ago

The minified file in the repo is 22 KB, to the standard one's 26 KB. It's probably kinda pointless to minify, yet have all of the potential options in the file. Maybe one big file, but individual minified versions?

tcbrindle• 10 years ago

I admit I clicked this thinking it was going to be about junk food.

kdkooo• 10 years ago

I agree, it seems to me most people would only want to use one or a small selection of these, so it would be much more useful to have the ability to easily grab a hamburger's code individually.

alpb• 10 years ago

More pure CSS Hamburger icon animations: http://codepen.io/designcouch/pen/Atyop

aresant2• 10 years ago

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...

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

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

daveguy2• 10 years ago

Most ux elements are shit until people learn to recognize them and understand them. If people don't yet understand that they are the main menu then they soon will. They are especially good for space constricted interfaces, like phones.

The conversionxl study is from mid 2014 so the results may be dated.

aresant2• 10 years ago

"The conversionxl study is from mid 2014 so the results may be dated."

The first study I linked to is from less than a year ago and finds the exact same results.

natrius• 10 years ago

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• 10 years ago

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?

mathattack• 10 years ago

I agree - I'm not a fan of hamburgers. But against Nomran's [0] advice I blame myself. It's taken many times to realize what they are, but I assume that I'm just a fogey who is slow in understanding the new standard. :-) I assume that the game is over and eventually we'll all catch up.

[0] http://www.amazon.com/Design-Everyday-Things-Donald-Norman/d...

Animats• 10 years ago

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... [2] https://web.archive.org/web/20130326200424/http://www.girbau...

bennettfeely• 10 years ago

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

pcurve• 10 years ago

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

mchahn• 10 years ago

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.

Hamburgers

Related Stories