Every Frame Perfect(tonsky.me) |
Every Frame Perfect(tonsky.me) |
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 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".
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.
The idea that I would defend screen shake is a complete straw man. How do you get from my comment to that conclusion?
At the same time, why does everything need motion? My understanding is that motion should be used if an action subtly changes the UI in a region that's different from where the action was triggered (e.g. toasts)
I think many of these transitions are unnecessary and would feel just as good if they snapped immediately with instantaneous reflow.
- No partially loaded content. - No relayout while content loads.
Holding those as hard rules leads to delay or rejection. Instead, while I agree it's better to have everything up front, gracefully handling cases when we don't is important, and some degree of responsiveness, even with partially loaded content, often makes for a better experience for the user than a delay.
Just be up front about it and find ways to keep continuity of relationship and smoothness. Diffeomorphic mappings are your friend...
With MacOS I felt there was a major quality change for visual quality & animations when SwiftUI was used BY Apple for the OS and applications.
I'm not a developer, but it felt there were areas where an icon or window just didn't visually work the way it used to or SHOULD in placement or animation.
The hackish-ness hasn't changed over time: there are so many examples throughout the OS/Applications that I want to say "it was always like that", except it wasn't: Apple set the bar and it was high, the quality was exceptional.
I feel there are a lot of hacks going on with SwiftUI to achieve the same UI placement or animation.
Last quick note I think about often: a lot of analog creation was really hard. It still is. When it comes to digital we've been thinking we'll come back to things later, but never do... we build more bad on top of bad... sadly.
After reading this blog post, I think the rule of thumb should be "If I take a screenshot of your app at any moment (except during animations), it must make sense". I don’t think making sense during an animation should really be a goal, as long as it makes sense before and after.
In an ideal world, it is hard to argue with. Yes, sure it should make sense. But also, please don't spend precious cycles on this unless all the other bugs are fixed, and this animation consistency is truly the most important remaining issue to address.
Maybe I've just spent too many years as a pixel-perfect chasing frontend developer, but things can look very janky if they jump out of place during animations, compared to where they are before/after.
Wouldn't be the worst takeaway from the article. You should avoid animation for animation's sake in general. Imagine if we animated letters flying up from your phone's keyboard into the text field as you type them for example.
Instead, we get a zooming in/out raccoon (making fun of the reader, IMO) for recognizing this problem via the OP author.
Maybe it's just a really hard problem to solve across all devices & latencies... Perhaps more time needs spent on "problem solving" vs "problem description".
When iOS first launched, some of the brilliance was in how UI elements transformed into one another—a title in the title bar becoming a "back" button on the left, for instance. There were no intricate morphs, just a simple cross-dissolve between two elements shown briefly at the same time. It read as meaningful without being literal.
The Crop/Adjust example doesn't hold up here, because the two modes don't share a focus. The crop animation is deliberately different: it emphasizes the cropping controls at the edges of the image that you might otherwise miss, prepping you visually for the task and tying the controls into the image workspace. Adjust mode has no direct controls on the image itself, so the transition out should differ. The mismatch is the point, not a flaw.
For most UI, you don't need pixel-perfect morphs between small elements. The real job of animation and behavior is to convey meaning and context. Make your transitions pixel-perfect and most people would never notice the difference.
I just look at the largest tech companies in the world that with their unlimited finances cannot produce software that isn't glitchy like this.
I have mine at 0.5x and that feels sufficient, still fast but I can see apps opening and closing etc.
The problem with 0x is that it seems to only affect like 90% of the UI. Certain things still animate, and the cadence feels awful as a result.
At 0.5x the stuff that's mysteriously unaffected by the animation speed setting isn't as jarring.
I would use 0x if it worked properly.
On a personal level, if thing works - I say, cool, lets focus on something else now.
But I have worked with people who are similar to the author and we will get into the conversation:
- they: wait, but the bundle size is 2.4Mb, it can be improved a lot
- me: by how much? and we have 10k users/day and we have cache policy setup
- they: we can reduce it to 1Mb, imagine saving 10k*1.4Mb every day
- me: yeah, but its not costing us much, if you focus on making it perfect your salary will cost us 2 years of outbound traffic cost.
- they: no, but its not perfect
How do I get there? What are the resources I can read and learn from to look at things to make them perfect?
The issue with “premature optimization is bad” is that some see it as a permission to not optimize at all. Hence you eventually end up with a system where everything is bad.
—
Although for some of us being obsessive-compulsive weirdos this is the only way of life: an itch that keeps on physically scratching until resolved.
“Be guided by beauty. I really mean that. Pretty much everything I’ve done has had an aesthetic component, at least to me. Now you might think ‘well, building a company that’s trading bonds, what’s so aesthetic about that?’ But, what’s aesthetic about it is doing it right. Getting the right kind of people, and approaching the problem, and doing it right […] it’s a beautiful thing to do something right.”
Absolutely, but on the other hand businesses operate with lots of broken windows as well, and they are fine with it.
Dilemma I am having is, on one side, business needs my best judgement for today and short term, because this is how most businesses survive, on the other hand, on a personal level I feel like I am stuck making non-perfect decisions, hence I can't even think about perfect world, because I am not training that part of my brain.
In that bandwidth case I'd be annoyed by the waste which kind of pervades software already, and it'd feel great to know at least we countered it a little bit.
Compare an ordinary pencil (no animations, movement is directly tied to your hand) to a pencil with a pompom on a spring attached to the end. Which is most fun for brief use? Which would you rather write a whole page of text with?
Instant transitions are something I strongly prefer and use in practice. There's no question, I don't want my operating system slowing itself down to a factor (literally) of 1000x, pointlessly fading and jiggling and sliding and bouncing and wiggling. And, as this article points out, animations in operating systems often make a visually illegible mess in the meanwhile.
Animations might be a good idea in theory, but it doesn't seem like anyone has figured out how to do them right.
Squash and stretch is a whole art style that relies on unrealistic frames.
Reasons:
1) I'm doing that thousands of times per week, I know what's going to happen
2) It's my desktop, there is no one else who might be puzzled by a non standard behavior
3) It's faster.
By the way, it is a GNOME desktop on Debian 13.
Oops, I lied. I was about to click on Reply and I realized that the bottom panel (which on a standard GNOME is at the top) is on autohide with a short transition. Maybe because it's the only transition that I activate with the mouse pointer: I hit the bottom of the screen and while it's traveling the last pixels the bar starts sliding in. It's very fast.
Other applications are to do things. They should do the thing and get out of the way as fast as possible. Animation-induced delays are fundamentally contradictory with that; they waste the user's time instead of doing the thing.
They don't. Most things don't. This kind of nonsense keeps an extra half-dozen people employed, and gives license to a half-dozen other people to smugly proclaim $BRAND's design language is superior to alternatives.
In most of the cases shown, it would probably feel better if the animations weren't there. I clicked the button, show me the thing. Don't do a dance and then show me the thing, just show it!
Often with out it your brain has to rescan the entire page on each refresh.
The notification area doesn't need animations either, because a GUI is only appropriate for displaying non-urgent notifications. If something really needs urgent attention, you need alarms and flashing lights, not an animated "toast".
"Back-in-the-days" you'd click and stuff would instantly happen, and I don't remember anything being more difficult to visually interpret.
On my Kubuntu desktop if I disable all animations (the whole compositor) I don't feel there is an increased cognitive load of rescaning things - but maybe it's my preexisting memory of the UIs and certain baked in UI expectations. Maybe this animated stuff helps people that are computer illiterate? (software made for the lowest common denominator)
The only time I have to "rescan" is if I input a scroll and anticipate a scroll and it doesn't scroll. It has nothing to do with motion. In fact, in that case, I "rescan" even though the page hasn't changed, but because it doesn't match my expectation that it would change.
https://tonsky.me/blog/every-frame-perfect/toolbar@2x.mp4, for example
I don't think I would have to rescan the entire page to figure out where things were afterwards. Everything's shifted to the right, just like when I open my browser bookmarks.
The only case I can think of where this is true is on scroll, and that barely counts as animation. Anything else is an irritating waste of time.
The absolute worst offence is animating page content on scroll. Great job making me wait on pointless nonsense while scanning your website for the bit I'm looking for. People who do this should be sent to reeducation camps. Both for the animation, and for disregarding 'prefers-reduced-motion'.
Consider a toolbar with a mix of enabled and disabled buttons. Hover effects (which I would consider animations) convey that something is clickable, and on-click effects confirm an action. These effects convey meaningful information to both beginner users and power users of any software, and are in no way inconvenient to either group.
I generally agree animations tend to get in the way when you want to get shit done, but the idea that animations are only applicable as artistic effects rings untrue to me.
Good and useful animations communicate something, they're not there just to be there or to make it "pretty", which is most designers use them. But they can actually communicate intent, action, immediacy and other important things, if they're used sparingly in the right situations, without actually getting in the way.
Probably the most basic animation most of us PC users see every day is the very basic animation of a text cursor blinking on/off in text fields, like the one I write it right now. It's super basic, but communicates that the computer is waiting for you, it's alive and you can enter things. If it was static, you get the impression something is stuck instead, or couldn't tell exactly where the cursor is at a glance. But it blinks, and that tells us stuff.
I think it should work this way vs “how it be”