I think a lot of these are because Apple has built animations into their products as first-class citizens, but that means that they need to somehow figure out how to compose them well. (Which obviously is a rather difficult problem to solve!) In my experience, you end up spending a lot more time trying to get all of the animations to work well together than you do on creating the actual UI, and that time is just not…
I'd slightly rephrase that as "Apple has recently started building pointless animations into their product, instead of sticking to meaningful animations like they were doing since unmemorable times".
The thing about UI animation is that even if no tween frame was ever hinky I'd still turn it off because it's an anti-pattern. It's there to look good on a retail shelf, not to improve day to day usage.
This resonated with me, but I would have loved to see some positive examples as well. The tone did not read as a rant, but as someone that doesn't know too much about good UI construction, I did not feel like I walked away any closer to understanding what a North Star should be.
I did just this recently. I detailed the imperfections first, which were similar to this in concept, and then walked through the improvements I made.
I think you are taking it a step too far. First of all, unlike film, we are not recording reality in any way, every pixel that appears on screen is there because we put it there . I'd argue a closer parallel is a cartoon. And something like cartoon inbetweening is not an example of imperfect frames. These are in fact, perfect and even carefully crafted frames. It's one thing if the frame halfway through an animation…
We're not recording reality, but we're trying to create convincing and aesthetically pleasing effects for brains that evolved in reality.
If you can't even guarantee internally consistent state then good luck communicating your "convincing and aesthetically pleasing effapt update && apt upgradeects" successfully.
For UI purposes, sub-150ms animations can be very effective as "pro" interface behaviours. That's close to our best reaction time [1]. Good UI personality doesn't have to get in the way of pro-level efficiency. One of the ways to achieve this is to not actually transition between states, but simply animate the "end bounce" of an introduced element, as if it was eased into position. So not actually slid from the left,…
Reaction time is unrelated to perceptible latency. You're not reacting to things; you are seeing the result of an action you requested. You already know it's coming. To say that delays less than your reaction time don't matter is like saying it doesn't matter if your flight is delayed by an hour because it takes 8 hours to cross the Atlantic.
Watching your own hand movements through your phone camera is a good demonstration of this. Set 60 Hz video mode, and the latency is probably less than 30 ms - but still extremely obvious.
I agree that some of the examples the author provided are instances of bad animation. But I don't agree with the premise of the article. Computer graphics is all about exploiting features of the human visual system. We perceive things differently when they're moving vs. when they're standing still. It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context. We can also pick ap…
I initially thought "Every Frame Perfect" meant a strict avoidance of any jank or stutter in motion, which I'm fully on-board for but as a film, video and 3D technologist, you're spot on calling out motion blur and similar temporal artifacts. In motion, they not only look 'most correct' to the human visual system, they are the most interpretable. Adding the correct blur to motion makes it appear clearer but seen as a…
Regarding your last point, I think it's almost always wrong to move something discontinuously, but I do think designers should think a lot more about getting out of the way of the user. A 50-100 ms animation is more than enough for most motions and keeps the UI feeling snappy. Also, animation should be decoupled from input wherever possible. I hate it when I have to sit there waiting for an animation to complete before the app will start acknowledging my keystrokes.
I've seen a few comments along the lines of wishing that the author had included examples of solutions. I wrote a very similar post recently that details both the issues with the animations, very similar to this article, as well as how I improved them.
This resonated with me, but I would have loved to see some positive examples as well. The tone did not read as a rant, but as someone that doesn't know too much about good UI construction, I did not feel like I walked away any closer to understanding what a North Star should be.
I did just this recently. I detailed the imperfections first, which were similar to this in concept, and then walked through the improvements I made. If you're curious, you can see it here: https://www.thisischris.dev/projects/project-6/
Thanks for highlighting the "one element cross fades into a totally different one" example. That particular type of animation really makes an app feel ungrounded and unreliable to me, it gives a sense that the UI elements aren't really tied closely to the data and are just barely existing. And somehow I see it all the time across tons of apps.
The improved versions where the elements actually transform into each other, sharing the same visual real estate, is so much better.
I agree that some of the examples the author provided are instances of bad animation. But I don't agree with the premise of the article. Computer graphics is all about exploiting features of the human visual system. We perceive things differently when they're moving vs. when they're standing still. It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context. We can also pick ap…
I think you are taking it a step too far. First of all, unlike film, we are not recording reality in any way, every pixel that appears on screen is there because we put it there . I'd argue a closer parallel is a cartoon. And something like cartoon inbetweening is not an example of imperfect frames. These are in fact, perfect and even carefully crafted frames. It's one thing if the frame halfway through an animation…
We do this in cartoons as well. Check out this Spider-Verse animator breaking down a shot of Gwen drumming. [1] If you look at individual frames, there are all sorts of details that make no logical sense. In one frame, she actually has three hands! But it looks great if you see it in motion.