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.

▲

mrandish 2 hours ago | parent | next [-]

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.

▲

fasterik 2 hours ago | parent [-]

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.

	▲	mrandish an hour ago \| parent \| next [-]
		> 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.
	▲	bfung an hour ago \| parent \| prev [-]
		> 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)

▲

jchw 3 hours ago | parent | prev | next [-]

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.

▲

jakelazaroff 2 hours ago | parent | next [-]

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

▲

jchw an hour ago | parent [-]

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.

	▲	jakelazaroff an hour ago \| parent [-]
		No one is defending outright buggy animations. OP is just saying the idea that every frame should make logical sense on its own ignores how animation actually works (and they're correct).

▲

fasterik 3 hours ago | parent | prev | next [-]

We're not recording reality, but we're trying to create convincing and aesthetically pleasing effects for brains that evolved in reality.

	▲	jchw 2 hours ago \| parent \| next [-]
		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.
	▲	jancsika 2 hours ago \| parent \| prev [-]
		If you can't even guarantee internally consistent state then good luck communicating your "convincing and aesthetically pleasing effapt update && apt upgradeects" successfully.

▲

iterateoften 3 hours ago | parent | prev [-]

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.

▲

nvme0n1p1 3 hours ago | parent | prev | next [-]

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.

▲

jesse__ 3 hours ago | parent | prev | next [-]

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

▲

hamburglar 3 hours ago | parent | prev | next [-]

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.

	▲	tosti 2 hours ago \| parent [-]
		True that, but imho the jankiness of the video is clearly visible. It just jumps into place halfway.

▲

willXare 12 minutes ago | parent | prev | next [-]

Every animation looks guilty if you interrogate it frame by frame.

▲

voidnap 4 hours ago | parent | prev [-]

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.

	▲	fasterik 4 hours ago \| parent [-]
		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?