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 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.
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.
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.
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".
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?
I'm sure a UI that had none of these imperfect frames would feel better, but now I really want someone to edit each of these clips to show what it would actually look like.
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.
Games are entertainment products, not tools. It's acceptable for a game UI to draw attention to itself for artistic effect, but I don't want to have to put up with this when I'm trying to get work done. Instant state transitions become imperceptible as you learn how they work. An instant UI effectively functions as part of your body, just like hand tools do. Animations make this impossible.
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?
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, for example, but rebounding the last few pixels from an imaginary slide. Our eyes just draw their conclusions to inform us of a movement, and in exchange the component is readable and usable immediately.
[1] ~100ms represents optimal reflex time in recent research. [2] Anything that requires user attention to interact after the component appears is very comfortable with a 150ms transition. One important note is that for components you can navigate across (i.e. one key shortcut invokes a modal state, another key runs a command in that modal), experienced users will "type" consecutive shortcuts in one go, and you must have the second behaviour responsive from frame 1.
[2] Some athletes seem to train down to ~80ms on very specific reflexes, which recently lead to race-start controversies when block timers disqualify sub-100ms reactions for runners.
I think this is key to understand the motivation behind pretty and animated UIs. In games it has a different motivation compared to UIs that you use as a tool. If you compare old software to new software, a lot of tab switching and hotkey magic is simply not there anymore. Blender has a notoriously difficult UI but once you get the hang of it, you become very efficient. I think the current way of creating UIs caters to people making decisions of whether to purchase the software but that don't actually use the software in the end.
Animations are highly effective tools for conveying state information.
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.
Hover effects are a terrible way of indicating if something is clickable, because you have to mouse over them instead of just looking at them. This problem was already solved a long time ago by rendering inactive elements in gray. I'm not sure which GUI did this first, but the Apple Lisa (1983, first mass-market personal computer with a GUI) definitely did it.
Maybe you dislike them, but that does not make for a fact.
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.
No they are not used everywhere. Some games with good UI use animations everywhere that an animation is appropriate. But plenty of good UI exist without animations. The point above is that no animation is better than an inappropriate animation.
You're thinking of smear frames. Squash and stretch are animation techniques that are perfectly coherent. Smear frames as well contribute to an overall coherent animation. They're a counterpoint to the general idea put forward in this article, but it's also rarely ever relevant to this type of animation.
Games are games, work is work.
I disabled every animated transitions in my desktop UI. Elements appear instantly at full size in the place they rest and disappear instantly.
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.
Games are for fun. Wasting time in a game is fine, that's what it is for. (edit: not saying that pejoratively)
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.
I think the default "product manager wants to build flashy animation" fundamentally contradicts that, but I also don't think it's fair to apply that criticism across all animations.
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.
The cursor animation is actually a great one because it does not add any latency. By comparison, when animations are not disabled on my Pixel 6 it takes almost one second to switch application instead of maybe 100ms (double tapping the app swap button to get to the previous app running).
God yeah smartphones are the worst, Apple (& co) particularly. My iPhone 12 Mini could feel so much faster if I could just disable all the annoying animations that just make everything feel slower instead of being helpful. Setting animation speed to 0x is probably the feature from Android I miss the most.
> At the same time, why does everything need motion?
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!
Outside of dedicated notification areas, a GUI should only change state in response to user action. Because the user requested the state change, they naturally know how it changed. This means any animation is a redundant waste of time.
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)
This isn't true generally. I am personally far more comfortable with disabling smooth scroll. It has more to do with your mind's expectations. Which can vary between people. Some people expect smooth and others don't. Motion itself isn't necessary.
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.
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.
>Motion is critical for reorientation after transition.
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'.
Would be nice if there were some _positive_ examples to go along with all of the negative ones. All I’m really getting from this is that I should avoid animations, which I don’t think is what the author is actually trying to say.
> All I’m really getting from this is that I should avoid animations
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.
I'd rather have an imperfect frame now than a perfect frame later. Latency should be the top priority for any UI, because when latency is low enough it feels like a part of your own body, which minimizes cognitive load. Animation is especially bad for this, because animations add hundreds of milliseconds of latency.
Old computers, before double-buffering and compositing, were fast. Single-digit millisecond latency from input to output was common.
Now it’s 30-ish years later and computers have not recovered the latency increase from compositing, double-buffering, and other attempts to make every frame perfect. If you are showing a frame on the screen that has failed to react to input that already occurred, especially more than about 20ms later, that frame is not perfect. It’s extra imperfect if the user cannot easily do what they’re trying to do while waiting for the computer to catch up with them.
But yes, most of the examples in the article are surely both imperfect in the sense the author meant and pointlessly slow, so there is no dichotomy :-/
- 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...
I think it's not uncommon for good animations to cheat a bit while in motion, rather than look perfect on every frame. Like how cartoons can use smear frames that look bizarre when paused at the wrong time but when viewed as part of a larger animation help sell the motion visually.
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.
Yeah the difference is that the blur frames are deliberate and purposeful for the overall effect. The animations showcased here are accidental jank that reveal a clobbered together unpolished app.
I don't think this analogy works because the blur frames look good in motion, and the frames in the blog post look terrible in motion. The animation in the first example is so bad that the first time I watched it I thought there was going to be three buttons at the top at the end, and it was weird and disorienting to realize there was only two.
The game Overwatch is a pretty great contemporary example of this [1]. It has some excellent fluid animations, which look really weird if you freeze frame 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.
> The rule of thumb is: If I take a screenshot of your app at any moment, it must make sense
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.
Well, this is the exact opposite of his point. Of course it should make sense when not animating! That is given. The entire crux of his point is that it should also make during an animation.
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.
It's like you read until that point, but then didn't read the justification for why it makes sense to care about frames during the animation, the author does outline a bunch of reasons why it should make sense during the entire thing.
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.
But the author tried to show exactly that, if screenshots during animation don't look sensible, it points to animation as a whole not making sense - it being either messy, overlapping, or confusing - and, in general, eroding the user's trust.
I first heard something similar taking motion design classes in art school: every frame should look good. Transitions and animations that have bad in-betweens look bad overall
There’s a similar principle of congruence in information visualization, stated in Animated Transitions in Statistical Data Graphics by Heer & Robertson as: “Maintain valid data graphics during transitions. To ensure viewers’
mental models are congruent with the semantics of the data, we
suggest that, as much as possible, intermediate interpolation states
remain valid data graphics.” https://idl.uw.edu/papers/animated-transitions
Feels like UI elements have a lot of abstractions that are not perfect for motions.
With every hack you work around the layout engine that gives you this simplicity of defining layouts.
Some libraries allow you to define keyframes for the motions in between, but it still isn't perfect, especially if you look at the youtube sample where one element overlaps the other and the animation would take up too much time or look odd if this wasn't the case.
Even if you perfect all of this, would you really want to spend more processing power and script weight on these aspects?
I feel like most UIs have severe latency issues out of the box, anything that doesn't address the elephant in the room adds insult to injury.
I feel like OP brought up a good problem to solve, with no solution. I dream of the days where posts like these end with "5 ways to better execute on this today".
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".
The expectations set for what turns out to be an article without solutions are also raised by the title the author chose. Show us these mythical perfect frames?
These aren’t bugs in the traditional sense. They built the animation system to work like this, and replaced the old system that didn’t produce these psychedelic transition states.
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 worth it if your start and end states are beautiful and intuitive. There's also the cross-UI-framework tax that has come up since Apple has allowed mixing SwiftUI and (App|UI)Kit, and animations are part of that.
An app with no animations at all is going to feel terrible. You can test this out yourself, if you have an Android you can set animation speed to 0x in the developer settings. It is jarring to see instant changes and it actually takes your brain a second to process what happened, and that process is probably slower than having the animation in the first place.
I have mine at 0.5x and that feels sufficient, still fast but I can see apps opening and closing etc.
I'm a happy user of android with animations turned off. It's the only mean to make it somewhat "snappy". IMHO lag is always worse than lack of fancy transient state in input -> UI change context.
Not for me, I always turn off animations. It feels fine for me, and I can operate the phone a lot quicker without having to wait for animations to complete.
I don't turn them off entirely, I kind of enjoy the feeling of momentum animated elements can provide, but I definitely do go in and speed them up massively. I find that when a phone is feeling unresponsive or sluggish, it's usually because I'm moving two steps ahead of the animation and it has to catch up. Feels like tripping on your own feet.
After using Android for like a decade, I eventually succumbed and got a iPhone 12 Mini (back when it was new). I still miss the ability of turning off animations as I could do on Android, and I'm 110% my current phone would feel 200% faster if I could just turn off every damn animation that just exists to exists. I'd much rather have a second to process if that's needed (which I don't think it is), than being slowed down by one second every time an app changes the page, everything feels like molasses when you navigate around.
The title reminds me of The Simpsons, watch an episode and pause it. Unlike live action, every frame of The Simpsons is art. It is almost unbearable to internalize the sheer volume of purposely constructed images that The Simpsons is sending at you. Gluttonous in scale.
Animation should convey meaning, not achieve pixel-perfect morphs between states.
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.
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
I admire those people, because they're valuable asset in some companies (e.g. Google scale, saving 1.4Mb for 1 Billion people every day is a lot), but my mind doesn't even want to think about what's 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.
Starting from a literal bandwidth costs perspective definitely won't get you there. I'd start by trying to feel personally annoyed by things like that. Then maybe try to feel more annoyed, since you know it'll touch every customer forever.
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.
It would have been compelling to describe / show what it should have looked like. Because the only alternative for some of these would just be sharp jumps instead of any animation - animating simultaneous appearance and transition of information will inherently result in frames that look imperfect.
Positive examples are all other animations that do work well, or are just animated in After Effects, for which there are plenty of examples online already, like on Twitter.
Great article, the worst offender is compact tab mode in the current Safari. The animations they implemented make that unusable, sometimes it’ll move tabs away from where the tab was when clicking, the animation always look clunky and the entire experience feels utterly untested. Doesn’t just look poor, but violates quite a lot of HIG rules Apple recommends for third party devs. Maybe something to focus on in a part two of this article.
Bah, each time someone say this they "forgot" that one side effect of 'every frame is perfect' is that it can increase latency..
Perfection or latency? That should be the user's choice not the developer's..
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 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.
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.
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.
We're not recording reality, but we're trying to create convincing and aesthetically pleasing effects for brains that evolved in reality.
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.
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".
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?
I'm sure a UI that had none of these imperfect frames would feel better, but now I really want someone to edit each of these clips to show what it would actually look like.
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.
Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.
Games are entertainment products, not tools. It's acceptable for a game UI to draw attention to itself for artistic effect, but I don't want to have to put up with this when I'm trying to get work done. Instant state transitions become imperceptible as you learn how they work. An instant UI effectively functions as part of your body, just like hand tools do. Animations make this impossible.
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?
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, for example, but rebounding the last few pixels from an imaginary slide. Our eyes just draw their conclusions to inform us of a movement, and in exchange the component is readable and usable immediately.
[1] ~100ms represents optimal reflex time in recent research. [2] Anything that requires user attention to interact after the component appears is very comfortable with a 150ms transition. One important note is that for components you can navigate across (i.e. one key shortcut invokes a modal state, another key runs a command in that modal), experienced users will "type" consecutive shortcuts in one go, and you must have the second behaviour responsive from frame 1.
[2] Some athletes seem to train down to ~80ms on very specific reflexes, which recently lead to race-start controversies when block timers disqualify sub-100ms reactions for runners.
I think this is key to understand the motivation behind pretty and animated UIs. In games it has a different motivation compared to UIs that you use as a tool. If you compare old software to new software, a lot of tab switching and hotkey magic is simply not there anymore. Blender has a notoriously difficult UI but once you get the hang of it, you become very efficient. I think the current way of creating UIs caters to people making decisions of whether to purchase the software but that don't actually use the software in the end.
Animations are highly effective tools for conveying state information.
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.
Hover effects are a terrible way of indicating if something is clickable, because you have to mouse over them instead of just looking at them. This problem was already solved a long time ago by rendering inactive elements in gray. I'm not sure which GUI did this first, but the Apple Lisa (1983, first mass-market personal computer with a GUI) definitely did it.
Maybe you dislike them, but that does not make for a fact.
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.
Indeed: one of the first things I do on a new android phone is activate developer mode specifically so that I can set the animation timescale to 0×.
No they are not used everywhere. Some games with good UI use animations everywhere that an animation is appropriate. But plenty of good UI exist without animations. The point above is that no animation is better than an inappropriate animation.
You will also see plenty of cases where a screenshot captures incoherent frames.
Squash and stretch is a whole art style that relies on unrealistic frames.
You're thinking of smear frames. Squash and stretch are animation techniques that are perfectly coherent. Smear frames as well contribute to an overall coherent animation. They're a counterpoint to the general idea put forward in this article, but it's also rarely ever relevant to this type of animation.
Games are games, work is work. I disabled every animated transitions in my desktop UI. Elements appear instantly at full size in the place they rest and disappear instantly.
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.
Games are for fun. Wasting time in a game is fine, that's what it is for. (edit: not saying that pejoratively)
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.
I think the default "product manager wants to build flashy animation" fundamentally contradicts that, but I also don't think it's fair to apply that criticism across all animations.
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.
The cursor animation is actually a great one because it does not add any latency. By comparison, when animations are not disabled on my Pixel 6 it takes almost one second to switch application instead of maybe 100ms (double tapping the app swap button to get to the previous app running).
God yeah smartphones are the worst, Apple (& co) particularly. My iPhone 12 Mini could feel so much faster if I could just disable all the annoying animations that just make everything feel slower instead of being helpful. Setting animation speed to 0x is probably the feature from Android I miss the most.
> At the same time, why does everything need motion?
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!
Motion is critical for reorientation after transition.
Often with out it your brain has to rescan the entire page on each refresh.
Outside of dedicated notification areas, a GUI should only change state in response to user action. Because the user requested the state change, they naturally know how it changed. This means any animation is a redundant waste of time.
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".
This is the standard confusion HNers have with real life.
I think it should work this way vs “how it be”
Do you have some concrete examples?
"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)
This isn't true generally. I am personally far more comfortable with disabling smooth scroll. It has more to do with your mind's expectations. Which can vary between people. Some people expect smooth and others don't. Motion itself isn't necessary.
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.
True in 3d CAD when switching between work planes. I can't think of another application.
Ah yeah, that makes sense, but I still feel like there's room for a little more discretion.
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.
>Motion is critical for reorientation after transition.
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'.
Would be nice if there were some _positive_ examples to go along with all of the negative ones. All I’m really getting from this is that I should avoid animations, which I don’t think is what the author is actually trying to say.
> All I’m really getting from this is that I should avoid animations
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.
I'd rather have an imperfect frame now than a perfect frame later. Latency should be the top priority for any UI, because when latency is low enough it feels like a part of your own body, which minimizes cognitive load. Animation is especially bad for this, because animations add hundreds of milliseconds of latency.
I think that's a false dichotomy. The examples the author gives would not be slower in any way if done correctly.
Old computers, before double-buffering and compositing, were fast. Single-digit millisecond latency from input to output was common.
Now it’s 30-ish years later and computers have not recovered the latency increase from compositing, double-buffering, and other attempts to make every frame perfect. If you are showing a frame on the screen that has failed to react to input that already occurred, especially more than about 20ms later, that frame is not perfect. It’s extra imperfect if the user cannot easily do what they’re trying to do while waiting for the computer to catch up with them.
But yes, most of the examples in the article are surely both imperfect in the sense the author meant and pointlessly slow, so there is no dichotomy :-/
However, the author makes these assertions:
- 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...
I saw that but couldn’t really connect it to the rest of the article because none of their examples had data loading.
Like the issue with the osx side bar transition is that the order of operations makes no sense.
When expanding, it makes the buttons vanish only to animate their reappearance from nothing once a panel slides over them.
It would make sense in the physical world if the panel occluded the buttons during transition.
During closing, the reverse problem happens. The buttons aren’t occluded but clip through the panel like it became water.
It happens fast but not so fast that you can’t see it, and there is an unnecessary distortion.
In today’s world of AI, good taste is all we human workers have so we should call out cut corners.
You might have thought the title was about Wayland and you're right. But this isn't about Wayland.
New Principle and I love it, however its hard to do on move dynamic and populated sites like youtube. Gonna follow this from my next project.
I think it's not uncommon for good animations to cheat a bit while in motion, rather than look perfect on every frame. Like how cartoons can use smear frames that look bizarre when paused at the wrong time but when viewed as part of a larger animation help sell the motion visually.
Agreed!
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.
Yeah the difference is that the blur frames are deliberate and purposeful for the overall effect. The animations showcased here are accidental jank that reveal a clobbered together unpolished app.
I don't think this analogy works because the blur frames look good in motion, and the frames in the blog post look terrible in motion. The animation in the first example is so bad that the first time I watched it I thought there was going to be three buttons at the top at the end, and it was weird and disorienting to realize there was only two.
The game Overwatch is a pretty great contemporary example of this [1]. It has some excellent fluid animations, which look really weird if you freeze frame them.
[1]: https://youtu.be/vIdeGmN__Pw?t=550
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.
Or if the author mocked out what each of the bad examples should look like if done properly.
> The rule of thumb is: If I take a screenshot of your app at any moment, it must make sense
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.
Well, this is the exact opposite of his point. Of course it should make sense when not animating! That is given. The entire crux of his point is that it should also make during an animation.
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.
I think you nailed it. Animation nuance is fine to burn time on if you’ve run out of things to do.
It's like you read until that point, but then didn't read the justification for why it makes sense to care about frames during the animation, the author does outline a bunch of reasons why it should make sense during the entire thing.
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.
But the author tried to show exactly that, if screenshots during animation don't look sensible, it points to animation as a whole not making sense - it being either messy, overlapping, or confusing - and, in general, eroding the user's trust.
I first heard something similar taking motion design classes in art school: every frame should look good. Transitions and animations that have bad in-betweens look bad overall
There’s a similar principle of congruence in information visualization, stated in Animated Transitions in Statistical Data Graphics by Heer & Robertson as: “Maintain valid data graphics during transitions. To ensure viewers’ mental models are congruent with the semantics of the data, we suggest that, as much as possible, intermediate interpolation states remain valid data graphics.” https://idl.uw.edu/papers/animated-transitions
Feels like UI elements have a lot of abstractions that are not perfect for motions. With every hack you work around the layout engine that gives you this simplicity of defining layouts. Some libraries allow you to define keyframes for the motions in between, but it still isn't perfect, especially if you look at the youtube sample where one element overlaps the other and the animation would take up too much time or look odd if this wasn't the case. Even if you perfect all of this, would you really want to spend more processing power and script weight on these aspects? I feel like most UIs have severe latency issues out of the box, anything that doesn't address the elephant in the room adds insult to injury.
This is the kind of things that bother me when using software and unfortunately almost every software is affected.
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 feel like OP brought up a good problem to solve, with no solution. I dream of the days where posts like these end with "5 ways to better execute on this today".
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".
The expectations set for what turns out to be an article without solutions are also raised by the title the author chose. Show us these mythical perfect frames?
These seem like low-priority bugs to spend time on? Most apps have bigger problems.
The issue is that we didn’t have these kinds of incongruent animations twenty years ago, and nowadays they are the norm, worsening user experience.
These aren’t bugs in the traditional sense. They built the animation system to work like this, and replaced the old system that didn’t produce these psychedelic transition states.
Is there more about what they did somewhere else? I don’t see any implementation details in the article.
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 worth it if your start and end states are beautiful and intuitive. There's also the cross-UI-framework tax that has come up since Apple has allowed mixing SwiftUI and (App|UI)Kit, and animations are part of that.
An app with no animations at all is going to feel terrible. You can test this out yourself, if you have an Android you can set animation speed to 0x in the developer settings. It is jarring to see instant changes and it actually takes your brain a second to process what happened, and that process is probably slower than having the animation in the first place.
I have mine at 0.5x and that feels sufficient, still fast but I can see apps opening and closing etc.
I'm a happy user of android with animations turned off. It's the only mean to make it somewhat "snappy". IMHO lag is always worse than lack of fancy transient state in input -> UI change context.
I have mine at 0.5x.
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.
Not for me, I always turn off animations. It feels fine for me, and I can operate the phone a lot quicker without having to wait for animations to complete.
I don't turn them off entirely, I kind of enjoy the feeling of momentum animated elements can provide, but I definitely do go in and speed them up massively. I find that when a phone is feeling unresponsive or sluggish, it's usually because I'm moving two steps ahead of the animation and it has to catch up. Feels like tripping on your own feet.
After using Android for like a decade, I eventually succumbed and got a iPhone 12 Mini (back when it was new). I still miss the ability of turning off animations as I could do on Android, and I'm 110% my current phone would feel 200% faster if I could just turn off every damn animation that just exists to exists. I'd much rather have a second to process if that's needed (which I don't think it is), than being slowed down by one second every time an app changes the page, everything feels like molasses when you navigate around.
All animations are just wasted time while you can't properly interact with the UI, it's much better to just turn every one of them off.
Give it one day and you won't come back to those sluggish animations slowing your intent down.
I have it at 0.5x. 0x is just not smooth enough, plus sometimes apps actually don't load fast enough so you're stuck waiting for them anyway.
The title reminds me of The Simpsons, watch an episode and pause it. Unlike live action, every frame of The Simpsons is art. It is almost unbearable to internalize the sheer volume of purposely constructed images that The Simpsons is sending at you. Gluttonous in scale.
This explains why I feel compelled to turn off any animation whenever there is a toggle to do so
Animation should convey meaning, not achieve pixel-perfect morphs between states.
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 would love to understand these people, really!
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:
I admire those people, because they're valuable asset in some companies (e.g. Google scale, saving 1.4Mb for 1 Billion people every day is a lot), but my mind doesn't even want to think about what's perfect.How do I get there? What are the resources I can read and learn from to look at things to make them perfect?
Broken windows theory
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.”
> Broken windows theory
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.
Starting from a literal bandwidth costs perspective definitely won't get you there. I'd start by trying to feel personally annoyed by things like that. Then maybe try to feel more annoyed, since you know it'll touch every customer forever.
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.
What a rare creature, an article without AI mentioned in it! Thanks for sharing
It would have been compelling to describe / show what it should have looked like. Because the only alternative for some of these would just be sharp jumps instead of any animation - animating simultaneous appearance and transition of information will inherently result in frames that look imperfect.
Negative examples are cool. Time consuming to put together. I did appreciate that. What are some positive examples?
Positive examples are all other animations that do work well, or are just animated in After Effects, for which there are plenty of examples online already, like on Twitter.
Now I have to get Ubuntu/Wayland/winit/wgpu/rend3/egui/wine to work.
Great article, the worst offender is compact tab mode in the current Safari. The animations they implemented make that unusable, sometimes it’ll move tabs away from where the tab was when clicking, the animation always look clunky and the entire experience feels utterly untested. Doesn’t just look poor, but violates quite a lot of HIG rules Apple recommends for third party devs. Maybe something to focus on in a part two of this article.
This blog makes me appreciate my browser's reading mode
All I can think seeing those examples is how macOS went from beautiful to utterly jank in the last 10 years.
Bah, each time someone say this they "forgot" that one side effect of 'every frame is perfect' is that it can increase latency.. Perfection or latency? That should be the user's choice not the developer's..