6 ms·

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

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 11y 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 11y 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 11y 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/suggestions/9099424-allow-users-to-turn-off-cursor-glide-animation 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.
- panic 11y 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 11y 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 11y 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 11y 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 11y ago
  I always associate them with creating latency and slowness. Maybe your reason is why I associate them that way.
userbinator 11y 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 https://en.wikipedia.org/wiki/Inattentional_blindness
panic 11y 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.

daurnimator 11y 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 11y 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 11y 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/suggestions/9099424-allow-users-to-turn-off-cursor-glide-animation 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.

panic 11y 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 11y 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 11y 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 11y 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 11y ago
I always associate them with creating latency and slowness. Maybe your reason is why I associate them that way.

userbinator 11y 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 https://en.wikipedia.org/wiki/Inattentional_blindness

panic 11y 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.