Hacker News Reader

We can probably learn a lot about UI animation from video games.

In fighting games there are the concepts of animation priority[0] and cancelling[1], which essentially govern whether the animation for your previous move will block your next move, and whether an animation can be interupted by a new move.

Most good video game UI animates after-the-fact, so you can navigate very quickly and the UI animation lags behind your navigation a little bit. That’s mostly only possible with a controller input because with a mouse the anmiation must complete before the widgets are visible to be clicked on.

[0] https://www.giantbomb.com/animation-priority/3015-7740/

[1] https://www.giantbomb.com/animation-canceling/3015-1568/

YES! Please, Apple, listen. I hate that Safari scrolling on iOS is blocked during the animation of link opening in background tab. Let the icon fly, just let me use the browser meanwhile!

Classic Mac interface (one of best interfaces of all time, IMHO) actually had special animation to show how a folder opens from a small icon into a larger window with contents. The whole interface was very economical, they just could not afford extra cruft those days, yet they decided that this animation was crucial for understanding.

Agree the Classic Mac animations were really good and didn’t really slow you down.

I’d compare that with the too slow IMHO animation when an app goes full screen on macOS.

Or look at Split View, it was clearly designed for ios touch and then later shoehorned into macOS.

My pet theory is that they left out keyboard ahortcuts for Split View because moving windows about with the keyboard would be too fast and highlight how slow the animations are.

Using a touch pad or mouse is slow anyway so you notice less.

I agree. I've long thought that animation could potentially make it much clearer what's going on in Vim.

Like if the user types 'das' to delete the current sentence, and it quickly highlights the text to be deleted, and then shows it shrinking away, as the text that was following it moves in to take its place. (Obviously, you'd want the animation to happen pretty quickly).

Such animation could make it clearer what the command is doing, and this could also make it easier to tell if you'd accidentally typed a command that didn't do quite what you wanted.

That’s great for someone watching over your sholder eg if you’re doing a product demo but less good if you’re on your own. There it just slows you down when you want to move on to the next task.

I gave reasons why it could help the user themselves. (Here's another: for users learning Vim)

And why should it necessarily make things slower? The animation could be quite fast, and I don't see why such animations would necessarily need to block or hold up future inputs or animations. (I do think, though, that you'd need to actually try it out to see if it works in practice)

I agree it’s possible to have animations that add useful information and don’t block the user.

In practice they are rare, certainly in consumer products. I can think of more products with janky UIs than I can ones with insanely great UIs.

I think they'd be great for new users but we'd need to be able to turn them off. No matter how fast and intuitive an animation is it's never going to be as fast as no animation.

You might like kakoune, a vim-like editor which focuses on interactivity: https://github.com/mawww/kakoune It flips around a few of vim's operations (like for example, to delete a word, you do 'wd' and not 'dw'). This allows it to highlight the text before performing an operation, which makes what you're doing much clearer.

I love Kakoune. Vim muscle memory and not being able to work out how to have per-language settings (for indenting) were the only thinsg that stopped me from switching.

I'd suggest just switching to movement first, by way of visual mode. "v" turns on visual mode, "as" selects/highlights the sentence, then "d" to delete it or escape to return to normal mode.

JIRA pages are "animated" by new widgets popping in, then showing loading icons and then finally displaying their final content. You cannot target any single element on the page while it does that because everything moves around every 500 milliseconds or something like that. You just have to sit there and wait until all done. And then it only loaded X of Y items and you have to click to get the rest which again leads to more layout changes. It's as I am watching the same rube goldberg machine over and over again.

Ok, I can see that something is happening. But that renders the whole UI unusable while it does. And it gets tiresome after the first time.

Poorly executed X does not make X bad.

Then again, we're not talking about perfect true X, but the typical execution of X. Typical execution of animations is terrible, so it's a problem.

https://addons.mozilla.org/en-US/firefox/addon/no-transition...

> What if animations started at a slightly slower speed, and gradually increased in speed the more you used them?

Ubuntu's Unity does this; it keeps track of the number of times you've minimised a window, and as you minimise windows more, it progressively speeds up the animation (maxing out after 100 times).

Source: https://ubuntuforums.org/showthread.php?t=2204321&p=12923084...

If you're very frequently cmd-tabbing between two apps on different spaces, that delay - any delay - becomes infuriating. I tried a 'one app per space' model a few months ago, because I wanted a one-key shortcut to any app, but the animation delay just made it unworkable.

> What if animations started at a slightly slower speed, and gradually increased in speed the more you used them?

That's an interesting idea. Or how about if the initiation of a new animated action forced already running animations to rapidly complete? Then if you're doing a bunch of things that trigger animations in rapid sequence, then they would all effectively just be running at higher speeds, in proportion to your specific speed of working.

I still think we should let expert users tweak it manually, but as a default I think that's a great idea!

The problem with the animations are not that they are bad, per se.

They do provide a visual guide to new users of what just occurred. That has value for the new user.

The problem is that too many systems/programs that provide these animations forget that the animation that was useful to one as a new user the first few times, becomes an irritating time sink when it has been watched the ten thousandth time. After the ten thousandth time watching it, many users already know what is going to occur, and just want it to occur and move on. But the system/program provides no "turn off animations" profile setting. So when one gets to the point that one no longer needs the animation to inform of what occurred, one is still forced to sit through its delays. That is the big problem with animations.

Real world example. My Android 7.1 phone came with all the standard android animations turned on at the outset. At some point after having it for a short time, I discovered the animation time adjustment settings inside the hidden developer menu. After I set them all to zero (i.e., do not animate) the phone suddenly felt like it was 1000% faster.

So, in this case Google did include a "turn them off" feature (good). But they hid it inside a normally hidden menu inside the settings app (bad). Why was this hiding of this setting bad? Because most users will never find the developer options menu (because it is hidden) and therefore will never know about the "turn off animations" settings that could make their phone feel significantly faster immediately. So most will be stuck watching animations that make their phone feel slow, even when they already know the outcome and no longer need the assist provided by the animation.

What about GP's suggestion: The more a particular animation occurs, the faster it runs. Remove some milliseconds from it each time, down to some very low limit, so new users get the clarity benefit and experienced users get the speed.

I remember reading about such auto-adjusting UIs long ago, but the idea from then was things like shrinking labels to make room for more advanced features showing up. Not good for consistency, but auto-adjusting animations...

To be fair, with some software we are often not even targeting new users at the expense of power users - we are targeting the audience for our product demos.

If our animations make a punter go wow when they see the product for the first (and only - unless we get to stage 2) time, and they buy it, then it has done its job.

A good animation should be barely perceptible. If it’s too slow, the application feels sluggish. Too fast, you may not know what happened. It reminds a UX talk from Airbnb, where they have this one guy that focus only on animations. It’s a good idea to provide the ability to skip the transition with the press of a button. It’s reminds me how one can skip the dialogues in video games.

> If it’s too slow, the application feels sluggish.

> It’s a good idea to provide the ability to skip the transition with the press of a button.

It is not really about animation speed, but more about responsiveness, commonly animation block all inputs because it is easier.

Few days ago there was a discussion on the BEAM/Erlang ecosystem designed so that everything is as responsive as possible. I believe that is really cool.

You just gave me an idea for a vim plugin... I guess it's already done? Recent changes could be highlighted with a background color. For example changes from the last 10 edits would have green background. That way if I pressed a key by accident and caused vim to change who knows what, I could spot it.

If your UI is complexly enough that it needs animations to show what’s happening, that’s a red flag.

You could add the animation, or you could remove things from the UI until it’s clearer.

Sometimes a “tool” for getting things done is actually a tool for helping you do bad things longer.

The speed of animations is not important.

The latency they produce is.

If you had a 10ms animation that blocks UI, that would be annoying.

If you had a 10 second animation that doesn't block UI, that would probably be fine.

Even if an animation feels like it blocks UI, that is a problem.