Comment by fasterik
1 day ago
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 apart screenshots but these don't capture everything about how the user perceives a display in real-world lighting conditions.
I would draw an analogy to film. A fast tracking shot might look bad on individual frames because of motion blur. A wide-angle shot might make some objects look "wrong" because of optical distortion. But these are still the right choice if they have the intended artistic effect in the theater.
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 still, it's obviously not clearer. The nuance is correct motion blur appears clearer while guaranteeing it's as clear as the human visual system can perceive moving details at that speed, so no perceptual detail is actually lost. It's a method that objectively improves perception which only works in motion. If frozen, the method breaks. Thus, evaluating motion blurred stills for clarity or interpretability is incorrect.
The rest of the article focuses on details of proper implementation while missing the opportunity to question whether some of these animations should exist at all. IMHO, motion can be a valuable affordance in limited doses but it's reached a point of overuse and, in some cases, outright abuse of the user's visual field and cognitive load. Designers (and their PMs) see it as a badge of 'Refined Modern UX' but it's devolved into a trendy gimmick aping good design without being good design.
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 think it's almost always wrong to move something discontinuously
Yes, I think we agree. When a thing is becoming a larger/smaller form of itself in a different place, it can be useful to cue the relationship visually with motion. But there are times when the change or displacement is minor enough, I do prefer 'just do it', even when the animation is hyper-fast. It's just more visual/cognitive clutter.
It's obviously situational, and if such motion is always very fast, consistent and well-motivated, it never rises to the level of annoying me. I might personally prefer some instances where, if the position overlaps and the size change is minor, just skipping it, but it's not 'bad'. I think the key may be that, done properly, such motion should cognitively be a 'barely there' hint. The moment a state-change animation rises to having perceivable aesthetic value, like being 'pleasing', it's too much.
As the senior product owner, I once had a new designer argue that if an animation was as fast as I wanted, no one would be able to appreciate the excellent S-curve ease-in/out. :-) I had to explain if a simple state-change animation was slow enough to be consciously 'appreciated', it had failed in its purpose.
> waiting for an animation to complete before the app will start acknowledging my keystrokes.
Or you find out you can input as the animation happens, but when the animation finishes, you’ve lost where your input ended up and don’t know if you can backspace/delete and retype.
(Yes, I’m expressing multiple issues here w/ui & animation & input)
Animations on software are infuriatingly slow these days. I turn on dev mode on my android phone for 2 settings. DPI and double animation speed. Simply to compensate for software design taking up too much space and time. On windows I turn animations off for the same reason. Just let me use the thing.
... I wonder if we're seeing a downstream effect of Apple rejecting Flash on iPhone, triggering a slow collapse of Adobe empire. It seems that there are multiple concepts missing in conversations going on here.
1 reply →
"Better to rush to do the right thing than to invest the necessary time determining what the right thing might be." could be the Wayland motto.
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 looks a bit "funny", but is still completely logically correct. It is another if the intermediate state of the animation legitimately doesn't make any sense and is just the result of not really caring about what actually goes on during the animation. In that case I'd almost rather just not have the animation at all, or just have a simpler one.
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.
[1] https://xcancel.com/hf_rosa/status/1089675426312552449
That is exactly what I'm talking about, though. This is not what is happening with buggy computer UI animations: these are not carefully crafted to look better in motion, they're actually only considered acceptable because it's kind of difficult to see the mistakes in the animation. Whereas cartoon animating, you could argue the details don't make logical sense, but that's only to someone who doesn't understand the principles of animation. You can't explain away glitchy weird UI transitions this way because they're pretty much universally not intentional. They're usually just taking the technical path of least resistance.
5 replies →
Or "squash and stretch" [0] frames cartoons and 3D modeling, where people prefer the final result even though individual frames can be grotesque.
That said, I think it's fair to hold most practical UIs to a different standard. Prioritizing amusement leads to a lot of strange non-ergonomic places.
[0] https://en.wikipedia.org/wiki/Squash_and_stretch
1 reply →
GGP's point is that broken in-between frames are everywhere, in films and animations, and this is a total nothingburger.
GP's point is that those frames aren't broken, but they're intentional and calculated, and so they're not even relevant here.
Oh boy, I wouldn't use Spider-verse animation as an example. I personally hate it. When I saw the first movie I thought something was wrong and asked the staff if I had mistakenly been put in a 3D movie without the 3D glasses.
Impressive and creative yes. Viewable? Not to me.
We're not recording reality, but we're trying to create convincing and aesthetically pleasing effects for brains that evolved in reality.
The point is that if a pixel is in a nonsensical place the only thing that is to blame for that is the code. It doesn't matter if it looks pleasing; there's no good reason for something to be wrong just because it looks acceptable.
If you can't even guarantee internally consistent state then good luck communicating your "convincing and aesthetically pleasing effapt update && apt upgradeects" successfully.
Frame transitions in film do not in fact exist in reality. They are added in the editing room or through manipulation of the recording mechanism fyi.
The final "zoom animation from Preview app" also illustrates the inverse. Every frame looks perfect in isolation, just like the author wants. It's only when you see it in motion that you notice the issue.
It doesn't look perfect, the image is misaligned.
I think it’s pretty telling that with the YouTube example, I legitimately couldn’t figure out what he could have a problem with until he slowed it down. The overall effect worked and gave the impression that it was aiming for. The fact that you can get out your calipers and find flaws in a paused animation is not compelling in the least to me. I don’t think looking at your animations in slow motion is a bad exercise — it may reveal unintentional things — but I don’t buy that animations need to “make sense” when paused in the middle any more than a 250ms snippet of audio clipped out of the middle of a word needs to make sense.
True that, but imho the jankiness of the video is clearly visible. It just jumps into place halfway.
It's crazy for me to think that people cannot see how wrong it is from the normal speed video. For me it's obvious and infuriating, it physically feels like it's punching my retina
I like this comment. The idea that animations should be able to be picked apart frame by frame and always be coherent doesn't make much sense, because the user will never actually do that.
I do like the point the article makes about using ui fidelity as a proxy for software quality, and agree that they pointed out some bad animations. But, I think you hit the nail on the head .. frame by frame coherence isn't the best yardstick for measuring animation "goodness".
Exactly, you should optimize for quality and have a high bar forbit but I'm not sure sacrificing framerate for pixel perfect rendering or perfect subpixel antialiasing and compositing a perfect glass chroma aberration when wheezing a superfast animation is more important than it being solid 144Hz or audio synced.
> the premise of the article
I wouldn't mind it, if he had supplied suggested mitigations.
I think every one of those animations are system-supplied ones. Some are likely SwiftUI ones, which heavily abstract you from the iron, and, if other frameworks are supplied, the abstraction goes even farther.
It can be a major engineering effort, to improve a half-second animation.
That said, this is how designers work. I have worked with some of the top designers in the world, and it can be tempting to want to strangle them, as they choose a half-pixel alias as the hill to die on.
But if we try to work with them, it can make an enormous difference in how users react to our software.
> I think every one of those animations are system-supplied ones. Some are likely SwiftUI ones
Yes, this is a major factor for the regression in overall UI quality and consistency on Apple platforms. SwiftUI aims to make all those fancy animations transitions a single line view modifier rather than 30 lines of manually specified CoreAnimation easing curves and manual animation blocks, but it results in a lot of things just feeling janky, because one-size-fits-all rule and precise polish are fundamentally at odds.
This article would do better to show good use cases to draw strengths to their premise but I agree with your take that frames matter less than the total feel of the transition. Some of them definitely could be improved of what he outlined.
I find AI to feel real nice for pushing delight like this further than I used to have time for as it was never a priority.
> It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context.
For example?
Parent comment already mentions motion blur in movies.
In animation (2d, 3d, stop motion) there are smear frames: https://en.wikipedia.org/wiki/Smear_frame
In this thesis you can find examples from different media, including games: https://theses.fh-hagenberg.at/system/files/pdf/Lendenfeld18...
I'm not aware of any normal software intentionally using nonsensical frames in their UI to aid perceiving motion.
That was an analogy, and about art and artistic effect. What does it exploit in human vision??
Your example is even worse - it's a cost-driven degradation of quality
> smear frames helped to reduce production costs
> I'm not aware of any normal software
Ok, but that was the question to shift from some generic theory about how human vision isn't perfect and dynamic vs static to a practical example we can see and evaluate - just like the examples in the blog, where you can clearly see the issues both dynamically and statically
7 replies →
agree.
I hacked a Panasonic GH1 to use 24fps in 2014. My newer camera, the GX85 includes this frame rate by default. Movies look more dreamlike in 24fps, due to the magic number of resetting some cycle every 5 seconds (24 frames in 5 seconds is 120 frames). Seinfeld was also filmed in 24fps. Maybe the jokes sounded funnier becaue of that? I don't know, but I enjoy playing games at 20- 30fps more than 60fps for the cinematic effect.
The difference with games is that they generally don't have motion blur, every frame is sharp like a photo, so at low framerates like 30 you can see a distracting judder from the series of low fps sharp frames which you don't see in movies. At high framerates your eyes will naturally see blur in the same way your eyes see your hand waving as blurry even though there is theoretically infinite frames.
Some of this is also just learned and cultural. 24fps looks like movies because movies are 24fps and you have learned to make that association. In the same way certain color grades and aspect ratios look cinematic, just because that's a reinforced association rather than an inherent fact.
agreed, there is a memory aspect to it too. That said, there is something about this video that looks funny: https://www.youtube.com/watch?v=M3-15YADeyg (I made this last year)
Every animation looks guilty if you interrogate it frame by frame.
> It's very possible that a "wrong" frame in isolation is the best looking one in a real-time context.
Maybe that’s sometimes true. But, more often, the intermediate states will contribute in a predictable way to the overall look of the animation and if the intermediate states don’t look coherent, then the animation as a whole will be hard to understand.
The examples in the article make this clear. For example, the search box where the initial text animates from the middle while the cursor starts on the left. That disconnects the text from the cursor. There’s no reason for that. It’s just shitty animation work.
What do you think the premise of the article is? The article is pretty narrowly speaking of "app" UI and your comment is a "well actually" that some videos intentionally introduce noise or temporary discomfort for an emotional or artistic effect. On the same basis, comments like yours would defend screen shake if it was added to desktop and mobile apps on every user input.
The premise of the article is that every frame of an animation should look good if captured and analyzed statically, in isolation. There's no reason provided for this other than "it feels right." I'm saying that this ignores how the human visual system works and how we perceive displays in real-world lighting conditions. I used film as an analogy to illustrate the point.
The idea that I would defend screen shake is a complete straw man. How do you get from my comment to that conclusion?
> every frame of an animation should look good if captured and analyzed statically, in isolation
This is just true though. It isn't the only thing that matters but if you are creating a game or a video sometimes you do capture things frame by frame to understand why something looks off when animated.
Your film thing isn't an analogy, you are trying to say film is an example where some frames have motion blur so they don't look good, but since that's okay in film, it should be okay in software and apps. The word "good" is being overloaded to mean different things in each example. Screen shake in a video game or chromatic abberation in a film can be good in those contexts because they are the intent of the artistic direction. Maybe if you are hung up on the word "good" replace it with "appropriate" or "intentional".