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.
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.
Sorry, I'm not connecting how "collapse of Adobe empire" leads to "multiple concepts missing" in this UX discussion. Can you clarify?
Also: Apple dumped Flash ~15 yrs ago, so whatever it is... it's very slow. The larger, more recent suspects for any "collapse of Adobe empire" would be "Adobe forcing $ubscription model" and "rise of Figma."
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.
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.
I think there's also a major difference between the kind of weird intermediate frames that are acceptable for a highly-stylized cartoon at 24FPS and the kind of intermediate frames that are acceptable for a UI running at 120FPS.
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).
Look at the youtube example - it has two pieces of UI animating from from a start point to an end point, and the paths are such that they momentarily overlap. There's nothing buggy or janky about it in motion; TFA is just saying that if you ignore the motion and take a screenshot mid-transition it looks odd. Same complaint as what GP describes, and silly for the same reasons.
It's what I personally took away from it. I was also someone who had the same feeling when I first heard Wayland's "every frame is perfect" mentality. I thought, "This is probably a good idea on multiple levels."
I agree the YouTube example isn't the worst one, but also at the same time, I don't agree with you that there is nothing buggy or janky about it.
There is no logical reason for there to be two copies of the video rendered at once. The video is literally resizing into position, while all of the UI elements shift around it. Why would there be more than one copy of the thing that is resizing?
I will relent on only one thing: "If I take a screenshot of your app at any moment, it must make sense" is too strong of a statement on its own. The context that it is a screenshot of an animation is important, just like cartoon inbetween frames. However, I think if you're being generous with interpretation you can allow this to be implied.
I see what you're getting at, but I think you're focusing on the incidental. An animation is good if it's clear and intuitive in motion. It may often be the case that good animations also look nice in a screenshot halfway through, but (a) they don't always, and (b) working well in motion is obviously the more important of the two goals.
As such it makes no sense to worry about the latter thing - it's not a signal whether the animation is good or not.
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.
Of course, even real life can look quite grotesque if you look at it in slow motion, as things get deformed by forces [0], so it makes sense animations would need to simulate that.
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.
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.
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.
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
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".
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.
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.
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
No, artists (of every animated media: 2d, 3d, stop motion, video game) intentionally put extra effort into creating ugly frames.
Not based on theory, but based on taste (artists' personal taste, or measured).
It's not a cost cutting method, not anymore. It actually requires extra effort, and it makes the product more expensive.
Maybe in animated media it is an acquired taste/coconut effect and not a way to exploit our visual system.
Either way this does not say much about whether youtube should have only sensible frames or not. But it points to the direction that (intentionally) broken, nonsensical frames in UI are worth exploring--they are everywhere in animated arts. As GP has said: "It's very possible".
And as the reply asked: provide at least one example
> Maybe in animated media it is an acquired taste/coconut effect and not a way to exploit our visual system.
So not relevant to the original theory? Also, that'd be an example of extra effort into ugly frames that originated as cost saving measures, not quality/artistic expression methods.
You can read why people prefer 24 fps movies instead of high-fps ones.
I'm quite puzzled by the article. Animations in software are transitions, it should not be perfect in UI sense, because it might look weird to the human eye in this case.
I'd prefer motion blur to something crisp. This is the case of file picker example.
You can also read why those people are misguided.
But instead of doing the irrelevant art analogies again, go back to the article and cite a specific principle that is violated by blur.
It has a list:
> Now, what does it mean in practice?
Also, blur doesn't even look weird statically! And again, provide at least one example where it looks weird to our eyes
> This is the case of file picker example.
You also don't seem to understand what that example shows, the "blur/crisp" is not at issue here, it's, for example, "textedit" jumping on top of "where".
Now explain what non-artistic human vision benefit there is to 2 words being drawn on top of one another in a UI transition instead of the first word disappearing completely before the second moves to its place.
>You also don't seem to understand what that example shows
I do understand, and this is exactly what I consider weird. Instead of repainting (in any way, even what is considered pleasant by you and Nikita), I'd prefer blur/mosaic/white window during the animation. Not the motion blur, but just not the actual contents of the window! This breaks "every frame is perfect", you can't make a meaningful screenshot of this transaction.
In KDE's Kwin, I configure windows resizung using crude stretching algorithm. This means I see non-proportionally weirdly stretched window several frames, then it repaints. On screenshots that looks really weird, while in reality this is quite ok.
> On screenshots that looks really weird, while in reality this is quite ok.
That wasn't the criterion, which was "the best"
> very possible that a "wrong" frame in isolation is the best looking one in a real-time context.
So show your Kwin animation example and explain how it's the best due to "human vision" compared to a transition without the weird stretches.
> I'd prefer blur/mosaic/white window during the animation
You mean blur where no content is visible/readable (that's different from the animation examples where text is visible, is moving, just not crisp)??? That's another reason you should just answer the initial question directly and provide a UI animation example supporting the theory instead of keeping arguing with nothing to show for it.
And again, what features of "the human visual system" does white window exploit that makes it the best?
Yes. Making perfect transition animations for the software is a very hard task, which is totally useless in my opinion — transitions shouldn't be made for screenshots, it should be made for humans to understand what have changed, how did click influence the UI.
>explain how it's the best due to "human vision" compared to a transition without the weird stretches.
Simple: Nikita's file picker example tries hard to repaint in time, and that looks very weird, because it's both janky and not how the window usually repaints.
And the latter is what the human eye and human brain are consider weird. If the animation does not attempt to present the contents during the animation, but instead only acts as a transition from state 1 to state 2 using smooth (as in constant-FPS) action, it does it job better, even if it does not preserve or even present the real contents during the animation.
The example of it could be seen on many websites which show the web page elements templates during loading (elements are positioned on their places but don't have real data yet).
>And again, what features of "the human visual system" does white window exploit that makes it the best?
If you present crispy sharp, high-fps picture to the user, the brain would look for any animation deficiencies, nitpicks.
If you just hide the contents in some way (blur, no repaints, no data), the brain just won't try to find anything weird.
> should be made for humans to understand what have changed, how did click influence the UI.
But that's exactly where you fail with bad transition - they make the understanding harder!
For example, in your video the file name text/icon is moving from the center to the left, but transition animation is showing it stretching horizontally instead, and nothing re the actual move! This is bad and serves no purpose, just creates visual noise and as though the icon is "floating" for a split second.
> If the animation does not attempt to present the contents during the animation
But your video does present content during the animation! It's just that this content doesn't illustrate the object moving, but an unrelated transformation.
So I just don't understand what you compare here and what you think is better.
> the brain would look for any animation deficiencies, nitpicks.
You still have not given a single example of the alternative where you've exploited the brain to not notice. By the way, white flash is a noticeable deficiency
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)
> 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".
I still have Sonoma on some of my devices. All I can say is: wow, steady regress.
The save dialog, albeit a little shakey, is nowhere as chaotic as in your example. The buttons in Notes move between panes in a perfect seamless manner. Albeit the animation occasionally glitches out when you repeatedly focus and deselect the Safari bar, the cursor is perfectly timed with the text, only fading in after the text is done moving to the left. The Preview bug must be something recent too, I can't reproduce this.
I miss it when companies like Apple, Sony, and IBM paid attention to the smallest details. Apple in particular earned its current valuation with the iPhone, an all-touch device that did nothing extraordinary compared to Windows Mobile and Symbian PDAs of the time (and was in fact functionally lagging behind compared, failing to even match the then-contemporary feature phones in some areas) BUT one that you didn't actually want to smash against a wall after a few minutes of use. Now these animations are bringing back exactly the Windows Mobile and Symbian vibes.
Remember how happy Steve used to be with OS X animations? He would replay them on stage multiple times, in slow motion. These though, these would have the people behind them face the fate of the iPhone 4 antenna man.
The animations in your short video do in fact look more orderly and less chaotic. Could it be that Apple was using AppKit in Sonoma and switched to SwiftUI now?
Play it at 0.25x and notice the app opening animation.
In iOS 6, the status bar is never unreadable for a single frame.
In iOS 7, the status bar is first obstructed by home screen icons animating under it, then obstructed by the dock animating over it, and finally it fades away while a new status bar is drawn on the app that is being opened.
It irks me to no end that iOS handles the status bar this way to this day. In the app switcher, every app card is drawn with a blank area at the top [1] where the status bar would go, when really the status bar should be permanently at the top and the app card should not include space for the status bar (webOS figured it out before iOS 7 [2]).
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.
I think the “imperfect frames” on the Safari search bar are, practically, just fine and doing it in the way that looks better in screenshots would be worse.
The cursor appears on the left because that’s where the user will actually start writing. I assume that’s where people look, if they know the UI. Having it appear in the middle of the screen and then move over would be unnecessary and distracting.
The stand-in text slides over to the left, to draw the attention of the unfamiliar user.
To add to this, experienced users will often start typing without looking based on what they trust the eventual state of the UI will be. Moving the cursor immediately makes it explicit that this should work.
This is following a more important rule which is "Never make keyboard input timing dependent!" I'm looking at you new Windows start menu and VS Code quick open.
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.
> ~100ms represents optimal [human] reflex time in recent research.
For unpredictable inputs. Intervals between a human own actions or discrepancies in delays between successive external events can be effected or perceived with significantly greater precision, especially for people with e.g. music training, especially for percussionists. I’d bet on somewhere between one and two orders of magnitude more precision, that is single-digit milliseconds, at higher skill levels. (Chopin’s Fantaisie-Impromptu is among the easier rhythm-based parlour tricks and already requires staying below ~30ms of error. Alternatively, a single frame at 60fps is 17ms, and speedrunners can hit single frames of a game pretty reliably.)
I'm pretty sure that the way speedrunners get their fast times are by either anticipating, or more likely, by finding an earlier trigger event that correlates, and allows them to hit the frame perfect timing.
Yes, that was my point: just because people can’t react to unexpected events faster than ~100ms does not mean that shorter time periods can somehow be disregarded as imperceptible to the conscious mind or beyond human capability. The perception or reaction jitter is easily an order of magnitude lower than the reaction latency.
Yep! That's why I thought it was important to mention the caveat on chained shortcuts. Two keyboard inputs can easily happen within 30-50 ms of one another when it's a learned movement. This is not a situation where a user relies on visual cues to move between steps, however.
Reaction time is unrelated to perceptible latency. You're not reacting to things; you are seeing the result of an action you requested. You already know it's coming. To say that delays less than your reaction time don't matter is like saying it doesn't matter if your flight is delayed by an hour because it takes 8 hours to cross the Atlantic.
Watching your own hand movements through your phone camera is a good demonstration of this. Set 60 Hz video mode, and the latency is probably less than 30 ms - but still extremely obvious.
it's quite a lot more than 30ms, as phone cameras do some real heavy-weight image processing to compensate for their tiny size, I'm talking neural networks and such. the throughput might be 60fps when it's all conveyor-ed but the latency sure isn't
You're right. Looks like it's more around 90 ms, at least for my iPhone 12 Mini. Test setup was taking a photo of the iPhone 12 Mini watching an incrementing counter on a 50 Hz CRT.
If the animations are effectively 'cancellable', i.e. they don't block input or delay the change in state, this can be reasonable. You can put in a sequence of actions into a UI at a much faster pace than 100ms, if you have the muscle memory for it.
Using a keyboard or other hardware input device, yes however in today's modern touchscreen world, you have to wait for the UI to render before you can get to the next step so you do build up a step for the next step memory, but you do have to watch the screen so it's not exactly muscle memory.
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.
Everything in reality is animated. Nothing instantaneously snaps between two states. Which is why UX designers want to animate everything, it looks more natural for something to move from one place to the next rather than snap instantaneously. Everything used to be even more animated, ebook readers would play a 3D page turning animation, these days we settle for subtle abstract animations.
>Everything in reality is animated. Nothing instantaneously snaps between two states.
That's precisely why a GUI should not be animated. No matter how I operate it, the action I use already has its own animation, e.g. my finger moving on the mouse. If I add another animation in the GUI itself that's double animation. It's equivalent to pressing a button and triggering a servo to automatically press that same button.
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.
Unless you can back that up, "Majority" is something you're making up. It's a guess.
It also doesn't matter whether it's true if the majority or not- "Instant transitions are only good in theory" is not a true statement. Instant transitions are good in practice for many people and that has been true for decades.
Most people with that opinion keep using apps and devices with animations, but thinking it would be better without them. Very few actually torture themselves like that in practice.
I thought I had disabled animations on android, but it looks like I have it set for half duration.
Probably because I had run into some apps with bugs when animations are disabled, and making them run twice as fast as normal is more compatible and reduce the annoyance enough that I forget its enabled. Apps that animate at normal speed in defiance of my settings get deleted.
But I also set windows not to show window content while moving or resizing, because I find that to be annoying too.
Reducing duration or eliminating animation is one of the first settings I do on a new install.
Most shoulder-surfers who see my phone ask me how everything's so fast, and get me to show them the settings. Being able to disable the extremely-excessive animations many things have nowadays is fantastic, and is a great reminder that hardware actually has made progress in the past two decades.
(I use accessibility -> reduce motion, personally. less flaky than the dev options, though also less reliable)
Finally someone not roleplaying. You're the first person who acknowledges the flakiness of the dev options. People are self-reporting when they claim they set it to 0x without realizing it's unusable due to the bugs.
Denigrating others as "roleplaying" is unnecessary and not serious.
AOSP is not the only operating system that allows you to disable animations, even if its implementation is not the best. And yes, I still use 0x on my Android, because it's still that much better than having animations enabled.
It mostly works fine, I ran with it for a year or so. Actually needing to disable it is extremely app-specific and rare enough that many people probably never experience it (it's essentially always a sign of buggy code).
Though it does kinda often make inertial scroll/pan very bad feeling, as it jumps ahead of where you released, to where it will settle. "Reduce motion" is dramatically better there, which is a big part of why I use it.
Much MUCH more problematic is that Android (on a Pixel) has had a badly broken "recent apps" view for years now, when you have both a third party launcher and reduce motion enabled. It frequently (literally most of the time) gets stuck in its animations and won't scroll anywhere except to leap to the start or end of the list.
Setting animations to 0x is famously broken on Android with the UI jumping up and down on transitions. It's a litmus test to spot people falsely claiming they have it disabled without realizing it outs them.
You continue making unsubstantiated claims with loaded terms, denigrating others by accusing them of being dishonest when just stating their preferences.
It's not a litmus test, you are simply wrong in the way you dismiss other people.
Some of us like it at 0x, even when some apps are janky. Further, plenty of us here use desktop operating systems. Android is not the only way to get on the internet.
Both Windows (at least as of 10 and before) and most Linux distros allow you to disable animations too, and it works fine. Desktop operating systems ~15+ years ago lacked these animations entirely.
For a professional tool, animations are anathema. They interfere with muscle memory.
Someone who uses a program continuously can be clicking or typing before a dialog box or button is even in the right position.
My wife drives me MAD with this. She has already clicked the cancel button on a popup before I can even read the first word in the dialog box. This is fine when she is working as the dialog box is just a dumbass notification from some idiot UI designer. This is NOT fine when she has asked me to help debug a problem. I have to force her hand off the mouse so that I can read the damn error message before she clicks it away.
I don’t understand this. One of my colleagues drove me mad with exactly this behavior. He opened an internal tool to load some complicated data for visualization. The tool immediately had a popup that said “Loading” with a sole button labeled “Cancel” in it. He reflexively clicked “Cancel” and then complained that the internal tool did not work at all.
The amount of times people asked me for help without even reading the very obvious error message is astonishing. Many people just completely switch off their brain when anything goes wrong.
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.
I find a much more enjoyable interface after disabling animations on every device I use---as well as shadows, glow, blur, translucency, hover effects, and rounded corners. Eye candy is an annoyance and wastes developer time, in practice, even when done "correctly".
Kinetic scrolling on touchscreens can stay, but only because my finger doesn't have a no-friction scroll wheel.
Not the gotcha you think it is considering how common fake loaders are in all application development. They're inserted for a reason, but that's a different topic. We're talking about pure animations here, not loading screens.
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 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.
I agree that some things have a use and can do so without getting in the way, but I think as your example illustrates it is mostly to help new or infrequent users who aren't familiar with how the system works and often comes at the expense of regular users. Like mrob mentions (with a wonderful example), I usually want software to function like hand tools where I can just do a thing as quickly as I can do it and without unnecessary distractions. I've turned off cursor blink in my terminal and even though it isn't as bad in the browser I just turned it off in Firefox since you mentioned it (add a new preference ui.caretBlinkTime set to 0). Some of us do get more distracted by this kind of thing than others :/. Same with audio cues.
I do still like progress indicators when you might be waiting on a longer task (and when it actually indicates liveness, which too often it doesn't :( ).
Games I can sometimes appreciate the new user benefits and affecting the pace can sometimes have an artistic intent or relaxation effect that tools should not normally have. I have stopped playing games for excessive animations and will usually quickly (but not always immediately) disable anything that can be disabled. It is so common that I distinctly recall the free game Strange Adventures in Infinite Space intentially doing the opposite to great effect (it has been a bit but I think it was not only instant transitions but on mouse click instead of release).
Hand tools have mass and momentum, they are most definitely "animated". You need force to accelerate them up to speed, they don't change state "in binary", or in a blink. Good UI is when you don't even consciously notice the animation, but it has subconsciously given you more information (e.g. desktop changes with very brief animation tells you from where did you transition to where. I personally find i3/sway to be a bit slightly disorienting with certain workloads)
A mouse, even a lightweight gaming mouse, is substantially heavier than a pencil. Even if you somehow made a mouse with zero mass, your hand still has mass. The momentum is unavoidable. You don't need to add an inferior simulation of additional momentum to the momentum that already exists.
No one said that one should add "hindrance" to the movement itself. But just because your hand slowly decelerated at the end, causing the mouse as well to stop slowly, maybe the endpoint of the movement should reflect the vector of movement as well? E.g. scrolling to the bottom of the page causing a small bounce back instead of doing nothing is an absolutely information-providing animation you don't even think of as an animation. That's how you know it's good.
>E.g. scrolling to the bottom of the page causing a small bounce back instead of doing nothing is an absolutely information-providing animation you don't even think of as an animation. That's how you know it's good.
A bounce-back animation is bad design. Bouncing is distracting and annoying. My scroll area should not bounce unless I deliberately order it to bounce. GTK has a somewhat better solution, where it shows a animated shrinking translucent chord of a circle (or some similar shape) at the end of the scroll area. This could be considered a dedicated notification area, but it's not a good one because it overlaps whatever else is in the scroll area. Ideally, the "invalid scroll" notification should be shown in the scrollbar.
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.
Hardly any difference. If you haven't seen it before, try an Android phone in your hand and toggle animations 1x/0x and see what a stark difference it is. iOS is still littered with animations all over the place with that toggle enabled.
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.
I think exactly that. When you add motion, do it right, but when you don't put time in to do it right, it's clearly the better option to leave it out completely.
Without animations, much things feel snappier because you don't have to wait on a shitty animation thats running through.
> 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!
Slot machines has to have something always going on, overly dynamic Apple animations help with that. For regular UI animations, it helps normal users who struggle with sudden changes in screen contents, as well as helping to smooth out framerate and hide delays caused by API calls or backend processing.
"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)
Well, yeah. This app's UI is horrible. It's both cluttered and sparse. But what's worse, it's ANNOYING.
The key here is that animations happen outside the foveal area. Our vision is tuned to be extremely sensitive to motion and changes _outside_ the foveal area. So when something moves at the corner of your vision, it distracts your attention from your current focus.
This makes a lot of "modern" UI literally anti-productive. It actively _slows_ _down_ people and increases cognitive load.
I think this is actually a perfect example. The animations make it more complicated to follow, not less! If it just highlighted the stuff you were hovered over it would be easy to understand, I honestly don't get the motivation behind the animation.
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 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.
The OS shouldn't be making many big changes that force me to reorient. When I'm moving between different UIs I often want to compare them; animations make it harder to compare state A to state B. I can detect very fine differences between two images by switching between them within a second, if there's a 1-second animation it not only means it's going to add a second, it adds a bunch of visual noise which might make it impossible to be able to distinguish what's an actual difference and what's just noise introduced by the animation.
Try using a tiling window manager. I generally dislike animation in my UI, but when a window, especially an unexpected one opens up and changes your layout it can take a second or more to reorient and it can really interrupt your flow. Animation would alleviate that.
That said, I still prefer sway over the animated alternatives for other reasons.
>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'.
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.
It is easier for me to play speed chess with smooth animation of each move rather than when a piece instantly teleports from origin to destination, but I have reason to believe that I'm unusually intolerant to frequent activation of my orienting response.
I think this is a weakly presented argument. The article doesn’t actually present stronger alternatives or even why anything shown is negative to the user. It might be negative but otherwise this is the same vacant critique that is levied by pointing at smear frame or transitional points in media to critique it.
The user also has an untenable maxim. Every frame must make sense? I would posit this is impossible, or I’d ask the author how they’d handle window resizing while keeping every frame perfect.
I also think the author themself finds it easier to point out flawed frames (again without actually explaining why they’re issues) than doing as they say. Tap the header links on their blog and see the animations play after the click is complete. Or go see their own UI projects and see how text and objects don’t stay within their containers. Surely someone saying that this is a tenet that should be followed could demonstrate it themselves.
I think this is just a very hollow critique on their end.
A more competently written article would have focused on why anything shown is bad for the end user, and how they might handle it instead. A good critique should actually include some substance and point to more than just the what, but the why and how.
I think your critique is actually the hollowest thing here.
The article is presenting an idea, not a solution. You've failed to see this and have constructed several strawman arguments in order to critique it.
Most importantly the article does not present itself in a definite sense - it is written with care to say "I think", "Next thought:", "Probably", "So yeah.". This article is a person sharing what they are thinking, and unlike many of my thoughts - it is a fairly complete thought which is clearly sparking many other reasonable people to think along similar lines.
The author doesn't present the solution - but there is no reason they should have to. What an odd and unreasonable bar you set.
I also don't find your attacks on the authors site particularly endearing. The taste gap is well known, and punishing someone for their conceptual contribution outstripping their practical skill is quite... distasteful.
A more competently written critique would have been more charitable and in the spirit of this community.
>> The article is presenting an idea, not a solution.
The article establishes an arbitrary standard, provides examples and criticizes them on the basis that they don't meet that arbitrary standard, and then... nothing.
It is easy to criticize something from the outside. Much harder to dig deep, learn the material and understand why it produces the status quo, and then propose workable solutions. That's where the actual value lies.
There’s an irony in you claiming my comment is uncharitable and claiming the article is a discussion point when you haven’t even taken up the question I posited and framed them as a strawman.
Can it be possible to make everything during a user interaction perfect looking? What does that mean?
That was part of my original comment that you skimmed past rather than engaging with. So if you truly believe this should be a starting point of a discussion, then why not even bother taking that point to build a discussion point off of?
I’d also argue that this is not presented as just an idea. That is disingenuous. The author clearly writes “I call these situations “The technology has outsmarted the programmer” “
That is more than just a discussion point but a levied criticism at the skill of the people making things. In turn therefore they’ve set the framing of skill as part of the discussion and I don’t think it’s unfair to point out their own lack of ability to execute to their high standard.
But let’s go by your standard of saying that we shouldn’t take the authors own execution or their own words into consideration but only focus on the core idea they present.
Then that still leaves defining what they consider every frame being perfect. What are the bounds of that statement?
I’m really shocked you can’t see the sheer hypocrisy on your part here again.
You have literally added nothing to the discussion, other than levying criticism and denigrating any points made just because you either don’t agree or don’t actually have anything material to add.
Anyway, it’s the internet. No point getting annoyed by drive by responses from a stranger. Enjoy your weekend.
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've seen a few comments along the lines of wishing that the author had included examples of solutions. I wrote a very similar post recently that details both the issues with the animations, very similar to this article, as well as how I improved them.
Appreciate heads-up! I just checked Chrome on my Android device and it's all working fine for me. I don't know if I set the page up weirdly but I have to refresh the page sometimes for the videos to show up.
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.
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.
Smear frames are not something often applicable in this kind of animation. Smear frames are just about specific to frame-by-frame animation. No smear frames are demonstrated in this article.
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.
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.
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.
As a user of software I find myself disabling most transition animations when the OS or application supports it, desktop, mobile and web. Very rarely I find myself turning something back on - either it's actually useful in the situation, or it's done so well that it's pleasant even to an old like me.
Most of the animation examples in the article are there to communicate transitions in the UI (eg the movement of a UI element). Functional animations are genuinely a good practice from an accessibility standpoint and not just flourish. It’s just hard to do well.
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.
Try "reduce motion"? It's not quite the same thing (prefers cross-fades in many cases), but it might help. Anecdotally some things are noticeably faster, and not having them swing around before settling lets me get a read on their location faster.
Kinda fits with what I remember when I used iOS daily - I suspect it's because there's so much more UI customization compared to Android (where practically everyone uses the stock animation core pieces, of composes stuff from it).
Having been an Android dev who handled this stuff very carefully: yeah it's very error prone to do by hand. You have to keep in mind which animations are generally "desired" (like inertial scrolling and panning) and rebuild the stock stuff by hand to work around it if you have custom views or animations, so they don't jump around weirdly (leaping ahead of where you release, because there's where the inertia would settle).
I kinda wonder if this stuff is part of the reason for the new Jetpack Compose stuff - it makes custom views significantly more difficult, so you're very strongly incentivized to just combine stock components, where this all mostly works correctly by default.
It's jarring to see instant changes that don't make sense. Animations are primarily a way to paper over UI that sucks to begin with.
Many transitions in Android are perfectly fine at 0x animation speed. The majority of transitions that suck without animation suck because the pre-/post-transition layout sucks and the transition between the two states doesn't make sense as a result.
It's the same with several of the transitions in TFA. For example, the address bar placeholder text[1] should just be left-aligned all the time. The save dialog[2] should leave all the basic controls in their original location[3] when switching from the basic mode to the advanced mode. That means the "Where:" label should also remain in the advanced mode, and the controls[4] that pop up to replace it should either be moved to the right or below. The search bar should also be moved down.
These are some really basic details and it is my understanding Apple used to not screw them up nearly as badly.
[3]https://imgur.com/ZpHLCsv Artist's rendition. Please excuse the minor jank and criminal amount of empty space; I couldn't be arsed to fiddle with the screenshots to get pixel-perfect positioning and shrink the advanced dialog horizontally. Bikeshedding over where exactly the new controls belong is welcomed but irrelevant to the point I'm making.
[4]Is it just me, or are their icons uselessly, impenetrably, unhelpful?
An app with no animations feels awesome. It's great and it doesn't take my brain any time to process what happened since I already knew what was going to happen when I press the button that makes things happen on purpose.
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.
Thanks for highlighting the "one element cross fades into a totally different one" example. That particular type of animation really makes an app feel ungrounded and unreliable to me, it gives a sense that the UI elements aren't really tied closely to the data and are just barely existing. And somehow I see it all the time across tons of apps.
The improved versions where the elements actually transform into each other, sharing the same visual real estate, is so much better.
Ty for the kind words! I completely agree with you too. Compose added a Crossfade modifier that makes it super easy to apply the animation to a content switch but it's often applied in the lazy way you mentioned.
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.
I'd slightly rephrase that as "Apple has recently started building pointless animations into their product, instead of sticking to meaningful animations like they were doing since unmemorable times".
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
Excellent article. The examples from Mac OS Tahoe show how sloppy the work is. Just lazy shit done without attention and care. Steve Jobs would have fired a bunch of people. And this stuff matters:
> This creates a false feeling that something subtly changes when you switch between modes. And you know what? I don’t want my UI to give me false feelings.
The animations in iOS 26 and MacOS Tahoe feel wrong. Almost like an uncanny valley. It makes the UI unpleasant to use.
The KDE start menu has always annoyed me (well, since whenever they switched from the Windows 95 inspired one to the XP or Vista inspired one) for this reason. When you switch views, the view switches immediately (which is good) but the indicator animates slowly from one state to the other.
The result is that the indicator is not really indicating what it's supposed to (since it's out of sync with the view): It's indicating the old view when I'm already in the new one, and then it's indicating something between the old and new views, when clearly I'm not between views at all. So it's completely wrong for the entire animation until it finishes.
> 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.
> It's like you read until that point, but then didn't read the justification
My comment starts with "After reading this blog post"; of course I read it, but it left me totally unconvinced, especially because the author doesn’t bother showing good examples: he criticizes these and then leave you with a random raccoon animation and that’s all. For example, I don’t understand what’s wrong with the Youtube animation; it looks perfectly fine to me.
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.
Yes and I disagree. Youtube doesn’t "erode the user’s trust" with an animation that the author of this post finds yanky just because if you take a screenshot in the middle of it you see a frame that no real user sees that doesn’t look good.
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
In most UIs, it feels like they're animated for the sake of being animated. Very rarely do I say "Ah, I'm glad that was animated, because the transition would be confusing otherwise."
Things like this are part of the reason why operating systems that used to measure in the tens of megabytes now measure in the tens of gigabytes, and require chips 1000x more powerful in order to MAYBE reach the same level of snappiness (although usually not).
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 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?
This is begging for someone to spin up Mac OS X Tiger or Snow Leopard and compare! I recall their butter smooth rollout animations looking pixel perfect
I suspect the specific versions you call out were in that time period for a reason.
Snow Leopard was the first to integrate iOS's CoreAnimation framework. Nearly all animations now are based on that. Before, the CPU manually updated the sizes and positions of things, frame by frame, in a loop. This is how you'd program a Game Engine.
After, with CA, state-change property models are sent to a different process entirely which does its own interpolation to animate the UI at a higher thread-priority than any other process in the operating system. This is fantastic if maintaining 60+ FPS at all times, even on an iPhone 1 or 3G with less power than you'd have in today's AirPod chips, was a central requirement. (And it was, the first iPhones dominated their competitors in terms of input latency and framerate)
But programming CoreAnimation is much more complicated and easy to make mistakes in if you want "every frame perfect". Trust me, I made a lot of the animations that shipped in iOS 7 (the Calendar app is full of them, OS level transitions for the core chome elements of iOS). It took nearly a year of meticulousness to get things looking ok. In the years since I left the company, I've noticed these transitions get more and more janky and buggy and full of artifacts. Clearly, whoever replaced me doesn't have the same eye and sense of craft. Oh well.
I've been learning a bit of Swift / SwiftUI recently while building a macOS app and this seems to be a problem all the way down the tech stack, even for simple apps.
While it's been surprisingly easy to animate things, I've spent way too long trying to synchronize the movement of different components, to make sure things don't jump around, etc. Window content snaps to size while the borders animate, the shadow doesn't refresh alongside the borders, that sort of thing. Maybe I'm missing something in terms of how I should set up my code, or maybe it's a hard problem to solve automagically in a framework.
In some cases I basically gave up on slow animations (which make the issues obvious) and rely on fast movement to hide the imperfections - but it creates a less polished feeling as the article points out.
The root cause of this stuff, from experience, is that animations are hard to retro-fit after the fact. It's a lack of planning.
The UI code needs to be structured with animation in mind, with hooks in the right places. And to do that, you need to know what is likely to be animated together.
But what ends up happening is you encapsulated a few of the moving pieces in abstractions (e.g. "toolbar", "sidebar"), but you want to animate stuff within. You end up copy+pasting animation logic inside each (now leaky) abstraction and duct taping it all together. UI abstractions are hard!
(Yes, on apple platforms there are transition blocks which will capture changes to the entire view hierarchy, but then the battle becomes preventing animations on stuff that shouldn't change!)
- An animation that prevents the next thing for enough milliseconds that it causes input loss. Example - the iPhone calculator that wouldn't accept the next digit until the last press was done animating.
- Animation that moves active elements like buttons out of or into the way as you are clicking/tapping, causing an errant click.
- A lack of animation or visible context change that causes you to not realize the screen has changed. This sometimes gets me when I click another section or chapter in some kind of two-pane interface and the other side updates at a random time.
- Animations that take so long that you can't work at the speed of your hand/eye/brain coordination.
- Animations that feel like you're trapped in a liminal space until they're finished, which I think is basically the subject of the article.
Better things:
- Coordinated animations that accentuate updates, especially when you didn't request them. Reordering a leaderboard, adding a new item in the middle of a list from a distant update, etc.
- Animations that cover for slow processes. If we expect a while (but not too long) before a request and a response, an animation can be better than a spinner or nothing at all. It might help prevent the rapid clicking that some users do. I prefer if it doesn't spend a whole second when the response comes back in a tenth of a second.
- Stylistic animations that don't affect how you work. The genie effect and the bouncing app animation of old Mac OS X come to mind. A key feature is that you usually can turn them off.
One thing I will never understand is why do me need to have animations at all? There is zero value on them. Worse I'm inclined to believe that they introduce a nasty amount of bugs and they also need to be maintained.
Animations give you clues as to what is happening and how to undo it. A great example is the macOS “genie effect” when minimising windows. A first time user who clicked the minimise button on a window and saw it simply disappear would be lost as to where it went or how to get it back. Even as it appeared on the Dock, the lack of animation there as well could be imperceptible or the user might be unable to see what changed.
By having a clear animation which indicates where the window is being moved to, it’s obvious where the window went and thus how to recover it.
Good animations do a lot for how the app feels. Like all code, they need to be kept in sync when related parts of the code change, of course, so yes, they're a non-zero development and maintenance burden.
So what I don't get is the need to have half-assed animations in a half-assed app. You can add them once everything else is perfect.
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.
People should know that most of the Mac examples shown in the article are regressions that happened in Tahoe.
- Sequoia's Notes had perfect sliding animation.
- Safari's URL bar seemed the same. (Though I think it's more a placement issue, not animation issue. They could just put a placeholder at the end of the bar, not at the center.)
- 'Save as' dialog had a problems with sidebar, but not janky as much as Tahoe's.
The entire premise of this article is wrong and derived from a misquote. Kristian Høgsberg, in Wayland stated his goal was a system in which "every frame is perfect, by which I mean that applications will be able to control the rendering enough that we'll never see tearing, lag, redrawing or flicker."
It had nothing to do with "if I take a screenshot of your app at any moment, it must make sense." As others here have pointed out - this entire article is very poorly conceived.
The entire premise of your comment is wrong and derived from not understanding this quote of the author:
> Wayland is talking about the technical side of things (modern GPU stacks are very complex and Wayland is trying to take control back) but it could be applied to UI too.
Most stupid animations I have seen introduced to UIs are done because they are stupidly effective at impressing business stakeholders, especially non-technical ones.
It never fails to astound me how some people will fawn over "delightful" transitions. I guess I can understand it in the sense that it is an easy thing to help communicate the perception of high quality to the broader business.
Animation is all about trickery, especially real time animation where you have a performance budget, like in video games. You can reveal the trick by doing frame by frame, or other techniques, but it matters less than the overall feel. It is more of an art form than an exact science.
Often the animation itself is the trick. The backend is too slow to deliver data in time, so you start some animation to hide the latency. If you make a screen capture during that time, of course you won't see the data because it is not there yet, that's the trick. Ideally, the back end should keep up, this way, you don't even need an animation, but sometimes, you have to make do with what you have.
I still remember that you could slow down animations in OS X - I think with the shift key. Steve Jobs even did it in presentations because they looked so gorgeous in slowmo. If we‘d still have that I‘m sure they would care more about that every frame.
As great as the spirit of this article is, it only offers problems without solutions.
I’d love to see example of “bad” solutions made “good”.
As a result, I feel like solving this problem is easier said than done. I can’t think of a great way to solve many of the problems presented here. (Admittedly, I’m not a UX designer, so the bar is low for me.)
It feels like this could get significantly worse with Apple introducing folding devices. There's already a good number of iOS form factors that need to be supported, and now you need to be able to transition between form factors too. It feels like the ability to carefully handcraft nice interfaces is going down, as combinations go up.
https://news.ycombinator.com/item?id=48461226https://cupertinolens.com/2026/06/09/wwdc-2026-apple-is-fold...
The application of "every frame perfect" to the mouse pointer ranges from neutral to actively harmful. It causes roughly 1 frame of delay, which can be enough to bump the display-eye-hand-mouse loop out of whack (this seems to be different from person to person). It also causes pointer stutter when the system is under load side the pointer can't be independently updated.
Re: YouTube example, the issue (as I understand it, and I'm what you could describe as the opposite of an expert in that) is that the video and the playlist blend with transparency over one another. Had the playlist appeared sliding from the right side of the screen, it would have worked (I guess).
yes what you described is how it is right now on youtube, the main reason is to make it look more fluid and natural, apple examples shown mostly work because the overall structure is very static and have a lot of negative spacing. More animations tend to negate the principle described if not done with extreme care.
We do not perceive the world as a series of still frames. Any UI forcing that upon us is unnatural and will break immersion in subtle and unexpected ways. Apple and macOS may have their faults but the UI design is head and shoulders above anything the Wayland team has produced to date.
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.
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.
Curious is there most efficient&precise(SOTA?) way to create animations/transitions(like theorem), I've written some of these and really hard to figure and fix out(e.g like the zoom animation from last section of page).
Never use animation just for the sake of it. This article would not have existed had software designers stuck to this rule. All examples in the article use completely unnecessary animation.
Dragning downwards on the iPhone Home Screen to search is a perfect example, the gradual blur animation is never auto playing once activated. Instead, it responds to your drag and you are always in control.
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.
A really infuriating example of this is the Windows Photos app (or whatever it is called this month) where scrolling through a photo album will show every image jumping around as it first shows them at some arbitrary scale, and then fits them to the window.
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..
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.
This silly pretentiousness goes a long way to explain why it took so long for Wayland to even be usable.
I get that this is the way of the world, but I still think we'd have been be better off with, you know, real attention paid to classic free/open source ideas (like not breaking backward compatibility.)
Articles from this site pop up occasionally. Something about the background color causes me to see a medium-sized bright spot in my vision after a few minutes. Due to this, I have to remind myself not to click when I see the URL.
The thing about UI animation is that even if no tween frame was ever hinky I'd still turn it off because it's an anti-pattern. It's there to look good on a retail shelf, not to improve day to day usage.
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.
> needs my best judgement for today and short term
But this is how they also fail long-term
Russians have a saying: you can only lean (which is the same word in russian as rely on/upon, thus the physics pun angle) on something that is resisting
Meaning, it is also your job to resist enshittification for the company to succeed
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.
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.
Sorry, I'm not connecting how "collapse of Adobe empire" leads to "multiple concepts missing" in this UX discussion. Can you clarify?
Also: Apple dumped Flash ~15 yrs ago, so whatever it is... it's very slow. The larger, more recent suspects for any "collapse of Adobe empire" would be "Adobe forcing $ubscription model" and "rise of Figma."
"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.
I think there's also a major difference between the kind of weird intermediate frames that are acceptable for a highly-stylized cartoon at 24FPS and the kind of intermediate frames that are acceptable for a UI running at 120FPS.
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).
That's not what TFA is about though.
Look at the youtube example - it has two pieces of UI animating from from a start point to an end point, and the paths are such that they momentarily overlap. There's nothing buggy or janky about it in motion; TFA is just saying that if you ignore the motion and take a screenshot mid-transition it looks odd. Same complaint as what GP describes, and silly for the same reasons.
It's what I personally took away from it. I was also someone who had the same feeling when I first heard Wayland's "every frame is perfect" mentality. I thought, "This is probably a good idea on multiple levels."
I agree the YouTube example isn't the worst one, but also at the same time, I don't agree with you that there is nothing buggy or janky about it.
https://tonsky.me/blog/every-frame-perfect/youtube@1x.png?t=...
There is no logical reason for there to be two copies of the video rendered at once. The video is literally resizing into position, while all of the UI elements shift around it. Why would there be more than one copy of the thing that is resizing?
I will relent on only one thing: "If I take a screenshot of your app at any moment, it must make sense" is too strong of a statement on its own. The context that it is a screenshot of an animation is important, just like cartoon inbetween frames. However, I think if you're being generous with interpretation you can allow this to be implied.
I see what you're getting at, but I think you're focusing on the incidental. An animation is good if it's clear and intuitive in motion. It may often be the case that good animations also look nice in a screenshot halfway through, but (a) they don't always, and (b) working well in motion is obviously the more important of the two goals.
As such it makes no sense to worry about the latter thing - it's not a signal whether the animation is good or not.
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
Of course, even real life can look quite grotesque if you look at it in slow motion, as things get deformed by forces [0], so it makes sense animations would need to simulate that.
[0] https://youtu.be/On1CsbTwlDs?si=0UZADk-jtJvOQGww&t=33
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.
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
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 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
???
No, artists (of every animated media: 2d, 3d, stop motion, video game) intentionally put extra effort into creating ugly frames.
Not based on theory, but based on taste (artists' personal taste, or measured).
It's not a cost cutting method, not anymore. It actually requires extra effort, and it makes the product more expensive.
Maybe in animated media it is an acquired taste/coconut effect and not a way to exploit our visual system.
Either way this does not say much about whether youtube should have only sensible frames or not. But it points to the direction that (intentionally) broken, nonsensical frames in UI are worth exploring--they are everywhere in animated arts. As GP has said: "It's very possible".
> As GP has said: "It's very possible".
And as the reply asked: provide at least one example
> Maybe in animated media it is an acquired taste/coconut effect and not a way to exploit our visual system.
So not relevant to the original theory? Also, that'd be an example of extra effort into ugly frames that originated as cost saving measures, not quality/artistic expression methods.
You can read why people prefer 24 fps movies instead of high-fps ones.
I'm quite puzzled by the article. Animations in software are transitions, it should not be perfect in UI sense, because it might look weird to the human eye in this case.
I'd prefer motion blur to something crisp. This is the case of file picker example.
You can also read why those people are misguided. But instead of doing the irrelevant art analogies again, go back to the article and cite a specific principle that is violated by blur.
It has a list:
> Now, what does it mean in practice?
Also, blur doesn't even look weird statically! And again, provide at least one example where it looks weird to our eyes
> This is the case of file picker example.
You also don't seem to understand what that example shows, the "blur/crisp" is not at issue here, it's, for example, "textedit" jumping on top of "where". Now explain what non-artistic human vision benefit there is to 2 words being drawn on top of one another in a UI transition instead of the first word disappearing completely before the second moves to its place.
>You also don't seem to understand what that example shows
I do understand, and this is exactly what I consider weird. Instead of repainting (in any way, even what is considered pleasant by you and Nikita), I'd prefer blur/mosaic/white window during the animation. Not the motion blur, but just not the actual contents of the window! This breaks "every frame is perfect", you can't make a meaningful screenshot of this transaction.
In KDE's Kwin, I configure windows resizung using crude stretching algorithm. This means I see non-proportionally weirdly stretched window several frames, then it repaints. On screenshots that looks really weird, while in reality this is quite ok.
> On screenshots that looks really weird, while in reality this is quite ok.
That wasn't the criterion, which was "the best"
> very possible that a "wrong" frame in isolation is the best looking one in a real-time context.
So show your Kwin animation example and explain how it's the best due to "human vision" compared to a transition without the weird stretches.
> I'd prefer blur/mosaic/white window during the animation
You mean blur where no content is visible/readable (that's different from the animation examples where text is visible, is moving, just not crisp)??? That's another reason you should just answer the initial question directly and provide a UI animation example supporting the theory instead of keeping arguing with nothing to show for it.
And again, what features of "the human visual system" does white window exploit that makes it the best?
>That wasn't the criterion, which was "the best"
Yes. Making perfect transition animations for the software is a very hard task, which is totally useless in my opinion — transitions shouldn't be made for screenshots, it should be made for humans to understand what have changed, how did click influence the UI.
>So show your Kwin animation example
https://litter.catbox.moe/s6ahsjybdcfkvdi5.mp4
>explain how it's the best due to "human vision" compared to a transition without the weird stretches.
Simple: Nikita's file picker example tries hard to repaint in time, and that looks very weird, because it's both janky and not how the window usually repaints.
And the latter is what the human eye and human brain are consider weird. If the animation does not attempt to present the contents during the animation, but instead only acts as a transition from state 1 to state 2 using smooth (as in constant-FPS) action, it does it job better, even if it does not preserve or even present the real contents during the animation.
The example of it could be seen on many websites which show the web page elements templates during loading (elements are positioned on their places but don't have real data yet).
>And again, what features of "the human visual system" does white window exploit that makes it the best?
If you present crispy sharp, high-fps picture to the user, the brain would look for any animation deficiencies, nitpicks.
If you just hide the contents in some way (blur, no repaints, no data), the brain just won't try to find anything weird.
> should be made for humans to understand what have changed, how did click influence the UI.
But that's exactly where you fail with bad transition - they make the understanding harder! For example, in your video the file name text/icon is moving from the center to the left, but transition animation is showing it stretching horizontally instead, and nothing re the actual move! This is bad and serves no purpose, just creates visual noise and as though the icon is "floating" for a split second.
> If the animation does not attempt to present the contents during the animation
But your video does present content during the animation! It's just that this content doesn't illustrate the object moving, but an unrelated transformation.
So I just don't understand what you compare here and what you think is better.
> the brain would look for any animation deficiencies, nitpicks.
You still have not given a single example of the alternative where you've exploited the brain to not notice. By the way, white flash is a noticeable deficiency
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)
> 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.
[flagged]
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".
I still have Sonoma on some of my devices. All I can say is: wow, steady regress.
The save dialog, albeit a little shakey, is nowhere as chaotic as in your example. The buttons in Notes move between panes in a perfect seamless manner. Albeit the animation occasionally glitches out when you repeatedly focus and deselect the Safari bar, the cursor is perfectly timed with the text, only fading in after the text is done moving to the left. The Preview bug must be something recent too, I can't reproduce this.
https://streamable.com/kx7op6
I miss it when companies like Apple, Sony, and IBM paid attention to the smallest details. Apple in particular earned its current valuation with the iPhone, an all-touch device that did nothing extraordinary compared to Windows Mobile and Symbian PDAs of the time (and was in fact functionally lagging behind compared, failing to even match the then-contemporary feature phones in some areas) BUT one that you didn't actually want to smash against a wall after a few minutes of use. Now these animations are bringing back exactly the Windows Mobile and Symbian vibes.
Remember how happy Steve used to be with OS X animations? He would replay them on stage multiple times, in slow motion. These though, these would have the people behind them face the fate of the iPhone 4 antenna man.
The animations in your short video do in fact look more orderly and less chaotic. Could it be that Apple was using AppKit in Sonoma and switched to SwiftUI now?
A lot of these animation regressions in Apple's UI originated from iOS 7 and the move away from skeuomorphism.
The move away from skeuomorphism made it acceptable for UI elements to do things that make no sense.
Examples:
1. https://photos5.appleinsider.com/archive/13.06.15-Homescreen...
The status bar is unreadable on in-between frames, whereas in iOS 6 there was no such problem.
2. https://youtu.be/XawiZc8qmWA?si=vqT-JEYf0NDp8I9o&t=461
Play it at 0.25x and notice the app opening animation.
In iOS 6, the status bar is never unreadable for a single frame.
In iOS 7, the status bar is first obstructed by home screen icons animating under it, then obstructed by the dock animating over it, and finally it fades away while a new status bar is drawn on the app that is being opened.
It irks me to no end that iOS handles the status bar this way to this day. In the app switcher, every app card is drawn with a blank area at the top [1] where the status bar would go, when really the status bar should be permanently at the top and the app card should not include space for the status bar (webOS figured it out before iOS 7 [2]).
1. https://imgur.com/a/Qj6DGus
2. https://imgur.com/a/bM8OWZc
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.
I think the “imperfect frames” on the Safari search bar are, practically, just fine and doing it in the way that looks better in screenshots would be worse.
The cursor appears on the left because that’s where the user will actually start writing. I assume that’s where people look, if they know the UI. Having it appear in the middle of the screen and then move over would be unnecessary and distracting.
The stand-in text slides over to the left, to draw the attention of the unfamiliar user.
To add to this, experienced users will often start typing without looking based on what they trust the eventual state of the UI will be. Moving the cursor immediately makes it explicit that this should work.
This is following a more important rule which is "Never make keyboard input timing dependent!" I'm looking at you new Windows start menu and VS Code quick open.
> experienced users will often start typing without looking based on what they trust the eventual state of the UI will be
Does that not still point to bad animation if for a different reason?
The animations seem to be a workflow hindrance rather than helpful.
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.
> ~100ms represents optimal [human] reflex time in recent research.
For unpredictable inputs. Intervals between a human own actions or discrepancies in delays between successive external events can be effected or perceived with significantly greater precision, especially for people with e.g. music training, especially for percussionists. I’d bet on somewhere between one and two orders of magnitude more precision, that is single-digit milliseconds, at higher skill levels. (Chopin’s Fantaisie-Impromptu is among the easier rhythm-based parlour tricks and already requires staying below ~30ms of error. Alternatively, a single frame at 60fps is 17ms, and speedrunners can hit single frames of a game pretty reliably.)
I'm pretty sure that the way speedrunners get their fast times are by either anticipating, or more likely, by finding an earlier trigger event that correlates, and allows them to hit the frame perfect timing.
Yes, that was my point: just because people can’t react to unexpected events faster than ~100ms does not mean that shorter time periods can somehow be disregarded as imperceptible to the conscious mind or beyond human capability. The perception or reaction jitter is easily an order of magnitude lower than the reaction latency.
Yep! That's why I thought it was important to mention the caveat on chained shortcuts. Two keyboard inputs can easily happen within 30-50 ms of one another when it's a learned movement. This is not a situation where a user relies on visual cues to move between steps, however.
Reaction time is unrelated to perceptible latency. You're not reacting to things; you are seeing the result of an action you requested. You already know it's coming. To say that delays less than your reaction time don't matter is like saying it doesn't matter if your flight is delayed by an hour because it takes 8 hours to cross the Atlantic.
Watching your own hand movements through your phone camera is a good demonstration of this. Set 60 Hz video mode, and the latency is probably less than 30 ms - but still extremely obvious.
it's quite a lot more than 30ms, as phone cameras do some real heavy-weight image processing to compensate for their tiny size, I'm talking neural networks and such. the throughput might be 60fps when it's all conveyor-ed but the latency sure isn't
You're right. Looks like it's more around 90 ms, at least for my iPhone 12 Mini. Test setup was taking a photo of the iPhone 12 Mini watching an incrementing counter on a 50 Hz CRT.
If the animations are effectively 'cancellable', i.e. they don't block input or delay the change in state, this can be reasonable. You can put in a sequence of actions into a UI at a much faster pace than 100ms, if you have the muscle memory for it.
Using a keyboard or other hardware input device, yes however in today's modern touchscreen world, you have to wait for the UI to render before you can get to the next step so you do build up a step for the next step memory, but you do have to watch the screen so it's not exactly muscle memory.
Perceptible latency goes well below 10 ms. https://www.youtube.com/watch?v=vOvQCPLkPt4
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.
Everything in reality is animated. Nothing instantaneously snaps between two states. Which is why UX designers want to animate everything, it looks more natural for something to move from one place to the next rather than snap instantaneously. Everything used to be even more animated, ebook readers would play a 3D page turning animation, these days we settle for subtle abstract animations.
>Everything in reality is animated. Nothing instantaneously snaps between two states.
That's precisely why a GUI should not be animated. No matter how I operate it, the action I use already has its own animation, e.g. my finger moving on the mouse. If I add another animation in the GUI itself that's double animation. It's equivalent to pressing a button and triggering a servo to automatically press that same button.
> Everything in reality is animated. Nothing instantaneously snaps between two states.
Alternatively nothing in reality is animated and everything instantaneously snaps between states.
https://en.wikipedia.org/wiki/Zeno's_paradoxes
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×.
Which the majority of people think is a horrible experience. There's even a sibling comment in this thread pointing that out: https://news.ycombinator.com/item?id=48518721
Unless you can back that up, "Majority" is something you're making up. It's a guess.
It also doesn't matter whether it's true if the majority or not- "Instant transitions are only good in theory" is not a true statement. Instant transitions are good in practice for many people and that has been true for decades.
I see Kiro's guess and raise you an anecdote. I just turned animations off on my Android device, and instantly it feels faster and more responsive.
Maybe software programs got faster with our faster CPUs but all the animations just made everything feel slow.
Yes! It feels faster and more responsive now because it is faster and more responsive now. Your device is taking less time to do the same work.
Most people with that opinion keep using apps and devices with animations, but thinking it would be better without them. Very few actually torture themselves like that in practice.
I thought I had disabled animations on android, but it looks like I have it set for half duration.
Probably because I had run into some apps with bugs when animations are disabled, and making them run twice as fast as normal is more compatible and reduce the annoyance enough that I forget its enabled. Apps that animate at normal speed in defiance of my settings get deleted.
But I also set windows not to show window content while moving or resizing, because I find that to be annoying too.
Reducing duration or eliminating animation is one of the first settings I do on a new install.
For me, animations are the torture, and I am most productive on machines that aren't artificially hobbled with animations one can't turn off.
Your experiences are not universal.
Most people aren't even aware that it's possible to turn them off.
Most shoulder-surfers who see my phone ask me how everything's so fast, and get me to show them the settings. Being able to disable the extremely-excessive animations many things have nowadays is fantastic, and is a great reminder that hardware actually has made progress in the past two decades.
(I use accessibility -> reduce motion, personally. less flaky than the dev options, though also less reliable)
Finally someone not roleplaying. You're the first person who acknowledges the flakiness of the dev options. People are self-reporting when they claim they set it to 0x without realizing it's unusable due to the bugs.
Denigrating others as "roleplaying" is unnecessary and not serious.
AOSP is not the only operating system that allows you to disable animations, even if its implementation is not the best. And yes, I still use 0x on my Android, because it's still that much better than having animations enabled.
It mostly works fine, I ran with it for a year or so. Actually needing to disable it is extremely app-specific and rare enough that many people probably never experience it (it's essentially always a sign of buggy code).
Though it does kinda often make inertial scroll/pan very bad feeling, as it jumps ahead of where you released, to where it will settle. "Reduce motion" is dramatically better there, which is a big part of why I use it.
Much MUCH more problematic is that Android (on a Pixel) has had a badly broken "recent apps" view for years now, when you have both a third party launcher and reduce motion enabled. It frequently (literally most of the time) gets stuck in its animations and won't scroll anywhere except to leap to the start or end of the list.
Perhaps you should note the replies to that sibling comment
Setting animations to 0x is famously broken on Android with the UI jumping up and down on transitions. It's a litmus test to spot people falsely claiming they have it disabled without realizing it outs them.
You continue making unsubstantiated claims with loaded terms, denigrating others by accusing them of being dishonest when just stating their preferences.
It's not a litmus test, you are simply wrong in the way you dismiss other people.
Some of us like it at 0x, even when some apps are janky. Further, plenty of us here use desktop operating systems. Android is not the only way to get on the internet.
Both Windows (at least as of 10 and before) and most Linux distros allow you to disable animations too, and it works fine. Desktop operating systems ~15+ years ago lacked these animations entirely.
Real life has everything "animated". Nothing happens in an instant, there is force required to accelerate mass, etc.
Short, well-done animations make for better UIs.
This might be true, but the operating systems with animations you can't disable aren't short and they aren't well done.
You're not operating the GUI by thought alone, so your muscles already provide the animation. Adding additional animation on top of that is unnatural.
> Short, well-done
This is the neglected key point. None of the examples were short or well-done.
> Instant transitions are only good in theory.
For a professional tool, animations are anathema. They interfere with muscle memory.
Someone who uses a program continuously can be clicking or typing before a dialog box or button is even in the right position.
My wife drives me MAD with this. She has already clicked the cancel button on a popup before I can even read the first word in the dialog box. This is fine when she is working as the dialog box is just a dumbass notification from some idiot UI designer. This is NOT fine when she has asked me to help debug a problem. I have to force her hand off the mouse so that I can read the damn error message before she clicks it away.
I don’t understand this. One of my colleagues drove me mad with exactly this behavior. He opened an internal tool to load some complicated data for visualization. The tool immediately had a popup that said “Loading” with a sole button labeled “Cancel” in it. He reflexively clicked “Cancel” and then complained that the internal tool did not work at all.
The amount of times people asked me for help without even reading the very obvious error message is astonishing. Many people just completely switch off their brain when anything goes wrong.
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.
Instant transitions are wonderful for efficiency, and you do see that mirrored in games as well. And you hope to see it in utility-oriented software.
I find a much more enjoyable interface after disabling animations on every device I use---as well as shadows, glow, blur, translucency, hover effects, and rounded corners. Eye candy is an annoyance and wastes developer time, in practice, even when done "correctly".
Kinetic scrolling on touchscreens can stay, but only because my finger doesn't have a no-friction scroll wheel.
> Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.
Would you rather the game have the coolest load screen in the universe or no load screens at all?
Not the gotcha you think it is considering how common fake loaders are in all application development. They're inserted for a reason, but that's a different topic. We're talking about pure animations here, not loading screens.
I stopped playing quite a few games because of gratuitous animations.
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 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.
I agree that some things have a use and can do so without getting in the way, but I think as your example illustrates it is mostly to help new or infrequent users who aren't familiar with how the system works and often comes at the expense of regular users. Like mrob mentions (with a wonderful example), I usually want software to function like hand tools where I can just do a thing as quickly as I can do it and without unnecessary distractions. I've turned off cursor blink in my terminal and even though it isn't as bad in the browser I just turned it off in Firefox since you mentioned it (add a new preference ui.caretBlinkTime set to 0). Some of us do get more distracted by this kind of thing than others :/. Same with audio cues.
I do still like progress indicators when you might be waiting on a longer task (and when it actually indicates liveness, which too often it doesn't :( ).
Games I can sometimes appreciate the new user benefits and affecting the pace can sometimes have an artistic intent or relaxation effect that tools should not normally have. I have stopped playing games for excessive animations and will usually quickly (but not always immediately) disable anything that can be disabled. It is so common that I distinctly recall the free game Strange Adventures in Infinite Space intentially doing the opposite to great effect (it has been a bit but I think it was not only instant transitions but on mouse click instead of release).
https://rich.itch.io/strangeadventures
Hand tools have mass and momentum, they are most definitely "animated". You need force to accelerate them up to speed, they don't change state "in binary", or in a blink. Good UI is when you don't even consciously notice the animation, but it has subconsciously given you more information (e.g. desktop changes with very brief animation tells you from where did you transition to where. I personally find i3/sway to be a bit slightly disorienting with certain workloads)
A mouse, even a lightweight gaming mouse, is substantially heavier than a pencil. Even if you somehow made a mouse with zero mass, your hand still has mass. The momentum is unavoidable. You don't need to add an inferior simulation of additional momentum to the momentum that already exists.
No one said that one should add "hindrance" to the movement itself. But just because your hand slowly decelerated at the end, causing the mouse as well to stop slowly, maybe the endpoint of the movement should reflect the vector of movement as well? E.g. scrolling to the bottom of the page causing a small bounce back instead of doing nothing is an absolutely information-providing animation you don't even think of as an animation. That's how you know it's good.
But then be against bad animations, not all.
>E.g. scrolling to the bottom of the page causing a small bounce back instead of doing nothing is an absolutely information-providing animation you don't even think of as an animation. That's how you know it's good.
A bounce-back animation is bad design. Bouncing is distracting and annoying. My scroll area should not bounce unless I deliberately order it to bounce. GTK has a somewhat better solution, where it shows a animated shrinking translucent chord of a circle (or some similar shape) at the end of the scroll area. This could be considered a dedicated notification area, but it's not a good one because it overlaps whatever else is in the scroll area. Ideally, the "invalid scroll" notification should be shown in the scrollbar.
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.
Accessibility > Reduce Motion
Hardly any difference. If you haven't seen it before, try an Android phone in your hand and toggle animations 1x/0x and see what a stark difference it is. iOS is still littered with animations all over the place with that toggle enabled.
It just turns the motion into fades of equal duration. Reason 352811 I will never own an iPhone.
As another example, with the "new" navigation gestures switching to the last app and back is just a finger swipe away, following your thumb's speed.
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.
I think exactly that. When you add motion, do it right, but when you don't put time in to do it right, it's clearly the better option to leave it out completely. Without animations, much things feel snappier because you don't have to wait on a shitty animation thats running through.
> 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!
Slot machines has to have something always going on, overly dynamic Apple animations help with that. For regular UI animations, it helps normal users who struggle with sudden changes in screen contents, as well as helping to smooth out framerate and hide delays caused by API calls or backend processing.
Motion is critical for reorientation after transition.
Often with out it your brain has to rescan the entire page on each refresh.
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)
Consider trying to follow along with this app [0] without the transitions. Without them you'd experience much more cognitive load to staying oriented.
[0] https://app.ilograph.com/demo.ilograph.Ilograph/Request
Well, yeah. This app's UI is horrible. It's both cluttered and sparse. But what's worse, it's ANNOYING.
The key here is that animations happen outside the foveal area. Our vision is tuned to be extremely sensitive to motion and changes _outside_ the foveal area. So when something moves at the corner of your vision, it distracts your attention from your current focus.
This makes a lot of "modern" UI literally anti-productive. It actively _slows_ _down_ people and increases cognitive load.
I think this is actually a perfect example. The animations make it more complicated to follow, not less! If it just highlighted the stuff you were hovered over it would be easy to understand, I honestly don't get the motivation behind the animation.
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”
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.
“This isn’t true generally”
Proceeds to give a self only data point
Come on guy. Think a bit.
The OS shouldn't be making many big changes that force me to reorient. When I'm moving between different UIs I often want to compare them; animations make it harder to compare state A to state B. I can detect very fine differences between two images by switching between them within a second, if there's a 1-second animation it not only means it's going to add a second, it adds a bunch of visual noise which might make it impossible to be able to distinguish what's an actual difference and what's just noise introduced by the animation.
Try using a tiling window manager. I generally dislike animation in my UI, but when a window, especially an unexpected one opens up and changes your layout it can take a second or more to reorient and it can really interrupt your flow. Animation would alleviate that.
That said, I still prefer sway over the animated alternatives for other reasons.
Sounds like a tiled window manager is not the best (at least for me).
>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'.
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.
True in 3d CAD when switching between work planes. I can't think of another application.
It is easier for me to play speed chess with smooth animation of each move rather than when a piece instantly teleports from origin to destination, but I have reason to believe that I'm unusually intolerant to frequent activation of my orienting response.
> At the same time, why does everything need motion?
To hide the user interface congestion exacerbated if not caused by the ubiquitous animation.
Imagine reading a book if the letters just sat motionless. You'd need to be constantly studying the page.
[flagged]
[flagged]
I have a lot of thoughts about this:
I think this is a weakly presented argument. The article doesn’t actually present stronger alternatives or even why anything shown is negative to the user. It might be negative but otherwise this is the same vacant critique that is levied by pointing at smear frame or transitional points in media to critique it.
The user also has an untenable maxim. Every frame must make sense? I would posit this is impossible, or I’d ask the author how they’d handle window resizing while keeping every frame perfect.
I also think the author themself finds it easier to point out flawed frames (again without actually explaining why they’re issues) than doing as they say. Tap the header links on their blog and see the animations play after the click is complete. Or go see their own UI projects and see how text and objects don’t stay within their containers. Surely someone saying that this is a tenet that should be followed could demonstrate it themselves.
I think this is just a very hollow critique on their end.
A more competently written article would have focused on why anything shown is bad for the end user, and how they might handle it instead. A good critique should actually include some substance and point to more than just the what, but the why and how.
I think your critique is actually the hollowest thing here.
The article is presenting an idea, not a solution. You've failed to see this and have constructed several strawman arguments in order to critique it.
Most importantly the article does not present itself in a definite sense - it is written with care to say "I think", "Next thought:", "Probably", "So yeah.". This article is a person sharing what they are thinking, and unlike many of my thoughts - it is a fairly complete thought which is clearly sparking many other reasonable people to think along similar lines.
The author doesn't present the solution - but there is no reason they should have to. What an odd and unreasonable bar you set.
I also don't find your attacks on the authors site particularly endearing. The taste gap is well known, and punishing someone for their conceptual contribution outstripping their practical skill is quite... distasteful.
A more competently written critique would have been more charitable and in the spirit of this community.
>> The article is presenting an idea, not a solution.
The article establishes an arbitrary standard, provides examples and criticizes them on the basis that they don't meet that arbitrary standard, and then... nothing.
It is easy to criticize something from the outside. Much harder to dig deep, learn the material and understand why it produces the status quo, and then propose workable solutions. That's where the actual value lies.
There’s an irony in you claiming my comment is uncharitable and claiming the article is a discussion point when you haven’t even taken up the question I posited and framed them as a strawman.
Can it be possible to make everything during a user interaction perfect looking? What does that mean?
That was part of my original comment that you skimmed past rather than engaging with. So if you truly believe this should be a starting point of a discussion, then why not even bother taking that point to build a discussion point off of?
I’d also argue that this is not presented as just an idea. That is disingenuous. The author clearly writes “I call these situations “The technology has outsmarted the programmer” “
That is more than just a discussion point but a levied criticism at the skill of the people making things. In turn therefore they’ve set the framing of skill as part of the discussion and I don’t think it’s unfair to point out their own lack of ability to execute to their high standard.
But let’s go by your standard of saying that we shouldn’t take the authors own execution or their own words into consideration but only focus on the core idea they present.
Then that still leaves defining what they consider every frame being perfect. What are the bounds of that statement?
There is no irony; I'm under no obligation to take up any debate on any particular point you raise.
You're constructing more strawmen.
I’m really shocked you can’t see the sheer hypocrisy on your part here again.
You have literally added nothing to the discussion, other than levying criticism and denigrating any points made just because you either don’t agree or don’t actually have anything material to add.
Anyway, it’s the internet. No point getting annoyed by drive by responses from a stranger. Enjoy your weekend.
You seem confused.
It is you that was levying criticism and denigrating others because you don't actually have anything material to add.
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.
I've seen a few comments along the lines of wishing that the author had included examples of solutions. I wrote a very similar post recently that details both the issues with the animations, very similar to this article, as well as how I improved them.
For anyone curious, https://www.thisischris.dev/projects/project-6/
Ty but the animations don't seem to animate on mobile chrome on Android.
Appreciate heads-up! I just checked Chrome on my Android device and it's all working fine for me. I don't know if I set the page up weirdly but I have to refresh the page sometimes for the videos to show up.
Great article! We’ve become so accustomed to UI jank these days…
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.
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.
Smear frames are not something often applicable in this kind of animation. Smear frames are just about specific to frame-by-frame animation. No smear frames are demonstrated in this article.
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
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.
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.
As a user of software I find myself disabling most transition animations when the OS or application supports it, desktop, mobile and web. Very rarely I find myself turning something back on - either it's actually useful in the situation, or it's done so well that it's pleasant even to an old like me.
Most of the animation examples in the article are there to communicate transitions in the UI (eg the movement of a UI element). Functional animations are genuinely a good practice from an accessibility standpoint and not just flourish. It’s just hard to do well.
I think it would be hilarious if you'd combine that with the clacking sound of a typewriter.
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.
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.
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.
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.
Try "reduce motion"? It's not quite the same thing (prefers cross-fades in many cases), but it might help. Anecdotally some things are noticeably faster, and not having them swing around before settling lets me get a read on their location faster.
Sadly, basically no difference :/ https://news.ycombinator.com/item?id=48520988
Kinda fits with what I remember when I used iOS daily - I suspect it's because there's so much more UI customization compared to Android (where practically everyone uses the stock animation core pieces, of composes stuff from it).
Having been an Android dev who handled this stuff very carefully: yeah it's very error prone to do by hand. You have to keep in mind which animations are generally "desired" (like inertial scrolling and panning) and rebuild the stock stuff by hand to work around it if you have custom views or animations, so they don't jump around weirdly (leaping ahead of where you release, because there's where the inertia would settle).
I kinda wonder if this stuff is part of the reason for the new Jetpack Compose stuff - it makes custom views significantly more difficult, so you're very strongly incentivized to just combine stock components, where this all mostly works correctly by default.
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.
It's jarring to see instant changes that don't make sense. Animations are primarily a way to paper over UI that sucks to begin with.
Many transitions in Android are perfectly fine at 0x animation speed. The majority of transitions that suck without animation suck because the pre-/post-transition layout sucks and the transition between the two states doesn't make sense as a result.
It's the same with several of the transitions in TFA. For example, the address bar placeholder text[1] should just be left-aligned all the time. The save dialog[2] should leave all the basic controls in their original location[3] when switching from the basic mode to the advanced mode. That means the "Where:" label should also remain in the advanced mode, and the controls[4] that pop up to replace it should either be moved to the right or below. The search bar should also be moved down.
These are some really basic details and it is my understanding Apple used to not screw them up nearly as badly.
[1]https://tonsky.me/blog/every-frame-perfect/safari@2x.mp4?t=1...
[2]https://tonsky.me/blog/every-frame-perfect/save@1x.mp4?t=178...
[3]https://imgur.com/ZpHLCsv Artist's rendition. Please excuse the minor jank and criminal amount of empty space; I couldn't be arsed to fiddle with the screenshots to get pixel-perfect positioning and shrink the advanced dialog horizontally. Bikeshedding over where exactly the new controls belong is welcomed but irrelevant to the point I'm making.
[4]Is it just me, or are their icons uselessly, impenetrably, unhelpful?
An app with no animations feels awesome. It's great and it doesn't take my brain any time to process what happened since I already knew what was going to happen when I press the button that makes things happen on purpose.
This resonated with me, but I would have loved to see some positive examples as well. The tone did not read as a rant, but as someone that doesn't know too much about good UI construction, I did not feel like I walked away any closer to understanding what a North Star should be.
I did just this recently. I detailed the imperfections first, which were similar to this in concept, and then walked through the improvements I made.
If you're curious, you can see it here: https://www.thisischris.dev/projects/project-6/
Thanks for highlighting the "one element cross fades into a totally different one" example. That particular type of animation really makes an app feel ungrounded and unreliable to me, it gives a sense that the UI elements aren't really tied closely to the data and are just barely existing. And somehow I see it all the time across tons of apps.
The improved versions where the elements actually transform into each other, sharing the same visual real estate, is so much better.
Ty for the kind words! I completely agree with you too. Compose added a Crossfade modifier that makes it super easy to apply the animation to a content switch but it's often applied in the lazy way you mentioned.
Or if the author mocked out what each of the bad examples should look like if done properly.
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.
I'd slightly rephrase that as "Apple has recently started building pointless animations into their product, instead of sticking to meaningful animations like they were doing since unmemorable times".
Old Apple knew not to overdo things.
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.
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
Excellent article. The examples from Mac OS Tahoe show how sloppy the work is. Just lazy shit done without attention and care. Steve Jobs would have fired a bunch of people. And this stuff matters:
> This creates a false feeling that something subtly changes when you switch between modes. And you know what? I don’t want my UI to give me false feelings.
The animations in iOS 26 and MacOS Tahoe feel wrong. Almost like an uncanny valley. It makes the UI unpleasant to use.
The KDE start menu has always annoyed me (well, since whenever they switched from the Windows 95 inspired one to the XP or Vista inspired one) for this reason. When you switch views, the view switches immediately (which is good) but the indicator animates slowly from one state to the other.
The result is that the indicator is not really indicating what it's supposed to (since it's out of sync with the view): It's indicating the old view when I'm already in the new one, and then it's indicating something between the old and new views, when clearly I'm not between views at all. So it's completely wrong for the entire animation until it finishes.
> 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.
> It's like you read until that point, but then didn't read the justification
My comment starts with "After reading this blog post"; of course I read it, but it left me totally unconvinced, especially because the author doesn’t bother showing good examples: he criticizes these and then leave you with a random raccoon animation and that’s all. For example, I don’t understand what’s wrong with the Youtube animation; it looks perfectly fine to me.
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.
Yes and I disagree. Youtube doesn’t "erode the user’s trust" with an animation that the author of this post finds yanky just because if you take a screenshot in the middle of it you see a frame that no real user sees that doesn’t look good.
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
Or, just stop using so many animations.
In most UIs, it feels like they're animated for the sake of being animated. Very rarely do I say "Ah, I'm glad that was animated, because the transition would be confusing otherwise."
Things like this are part of the reason why operating systems that used to measure in the tens of megabytes now measure in the tens of gigabytes, and require chips 1000x more powerful in order to MAYBE reach the same level of snappiness (although usually not).
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 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?
This is begging for someone to spin up Mac OS X Tiger or Snow Leopard and compare! I recall their butter smooth rollout animations looking pixel perfect
I suspect the specific versions you call out were in that time period for a reason.
Snow Leopard was the first to integrate iOS's CoreAnimation framework. Nearly all animations now are based on that. Before, the CPU manually updated the sizes and positions of things, frame by frame, in a loop. This is how you'd program a Game Engine.
After, with CA, state-change property models are sent to a different process entirely which does its own interpolation to animate the UI at a higher thread-priority than any other process in the operating system. This is fantastic if maintaining 60+ FPS at all times, even on an iPhone 1 or 3G with less power than you'd have in today's AirPod chips, was a central requirement. (And it was, the first iPhones dominated their competitors in terms of input latency and framerate)
But programming CoreAnimation is much more complicated and easy to make mistakes in if you want "every frame perfect". Trust me, I made a lot of the animations that shipped in iOS 7 (the Calendar app is full of them, OS level transitions for the core chome elements of iOS). It took nearly a year of meticulousness to get things looking ok. In the years since I left the company, I've noticed these transitions get more and more janky and buggy and full of artifacts. Clearly, whoever replaced me doesn't have the same eye and sense of craft. Oh well.
I love you. Thanks for chiming in!
I've been learning a bit of Swift / SwiftUI recently while building a macOS app and this seems to be a problem all the way down the tech stack, even for simple apps.
While it's been surprisingly easy to animate things, I've spent way too long trying to synchronize the movement of different components, to make sure things don't jump around, etc. Window content snaps to size while the borders animate, the shadow doesn't refresh alongside the borders, that sort of thing. Maybe I'm missing something in terms of how I should set up my code, or maybe it's a hard problem to solve automagically in a framework.
In some cases I basically gave up on slow animations (which make the issues obvious) and rely on fast movement to hide the imperfections - but it creates a less polished feeling as the article points out.
The root cause of this stuff, from experience, is that animations are hard to retro-fit after the fact. It's a lack of planning.
The UI code needs to be structured with animation in mind, with hooks in the right places. And to do that, you need to know what is likely to be animated together.
But what ends up happening is you encapsulated a few of the moving pieces in abstractions (e.g. "toolbar", "sidebar"), but you want to animate stuff within. You end up copy+pasting animation logic inside each (now leaky) abstraction and duct taping it all together. UI abstractions are hard!
(Yes, on apple platforms there are transition blocks which will capture changes to the entire view hierarchy, but then the battle becomes preventing animations on stuff that shouldn't change!)
Bad things:
- An animation that prevents the next thing for enough milliseconds that it causes input loss. Example - the iPhone calculator that wouldn't accept the next digit until the last press was done animating.
- Animation that moves active elements like buttons out of or into the way as you are clicking/tapping, causing an errant click.
- A lack of animation or visible context change that causes you to not realize the screen has changed. This sometimes gets me when I click another section or chapter in some kind of two-pane interface and the other side updates at a random time.
- Animations that take so long that you can't work at the speed of your hand/eye/brain coordination.
- Animations that feel like you're trapped in a liminal space until they're finished, which I think is basically the subject of the article.
Better things:
- Coordinated animations that accentuate updates, especially when you didn't request them. Reordering a leaderboard, adding a new item in the middle of a list from a distant update, etc.
- Animations that cover for slow processes. If we expect a while (but not too long) before a request and a response, an animation can be better than a spinner or nothing at all. It might help prevent the rapid clicking that some users do. I prefer if it doesn't spend a whole second when the response comes back in a tenth of a second.
- Stylistic animations that don't affect how you work. The genie effect and the bouncing app animation of old Mac OS X come to mind. A key feature is that you usually can turn them off.
One thing I will never understand is why do me need to have animations at all? There is zero value on them. Worse I'm inclined to believe that they introduce a nasty amount of bugs and they also need to be maintained.
Animations give you clues as to what is happening and how to undo it. A great example is the macOS “genie effect” when minimising windows. A first time user who clicked the minimise button on a window and saw it simply disappear would be lost as to where it went or how to get it back. Even as it appeared on the Dock, the lack of animation there as well could be imperceptible or the user might be unable to see what changed.
By having a clear animation which indicates where the window is being moved to, it’s obvious where the window went and thus how to recover it.
Good animations do a lot for how the app feels. Like all code, they need to be kept in sync when related parts of the code change, of course, so yes, they're a non-zero development and maintenance burden.
So what I don't get is the need to have half-assed animations in a half-assed app. You can add them once everything else is perfect.
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.
People should know that most of the Mac examples shown in the article are regressions that happened in Tahoe.
- Sequoia's Notes had perfect sliding animation.
- Safari's URL bar seemed the same. (Though I think it's more a placement issue, not animation issue. They could just put a placeholder at the end of the bar, not at the center.)
- 'Save as' dialog had a problems with sidebar, but not janky as much as Tahoe's.
- Zooming in preview app worked fine.
The entire premise of this article is wrong and derived from a misquote. Kristian Høgsberg, in Wayland stated his goal was a system in which "every frame is perfect, by which I mean that applications will be able to control the rendering enough that we'll never see tearing, lag, redrawing or flicker."
It had nothing to do with "if I take a screenshot of your app at any moment, it must make sense." As others here have pointed out - this entire article is very poorly conceived.
Misquote or not, the article is bang on and I think a better interpretation of that sequence of words anyway.
The entire premise of your comment is wrong and derived from not understanding this quote of the author:
> Wayland is talking about the technical side of things (modern GPU stacks are very complex and Wayland is trying to take control back) but it could be applied to UI too.
Most stupid animations I have seen introduced to UIs are done because they are stupidly effective at impressing business stakeholders, especially non-technical ones.
It never fails to astound me how some people will fawn over "delightful" transitions. I guess I can understand it in the sense that it is an easy thing to help communicate the perception of high quality to the broader business.
Animation is all about trickery, especially real time animation where you have a performance budget, like in video games. You can reveal the trick by doing frame by frame, or other techniques, but it matters less than the overall feel. It is more of an art form than an exact science.
Often the animation itself is the trick. The backend is too slow to deliver data in time, so you start some animation to hide the latency. If you make a screen capture during that time, of course you won't see the data because it is not there yet, that's the trick. Ideally, the back end should keep up, this way, you don't even need an animation, but sometimes, you have to make do with what you have.
I still remember that you could slow down animations in OS X - I think with the shift key. Steve Jobs even did it in presentations because they looked so gorgeous in slowmo. If we‘d still have that I‘m sure they would care more about that every frame.
This explains why I feel compelled to turn off any animation whenever there is a toggle to do so
As great as the spirit of this article is, it only offers problems without solutions.
I’d love to see example of “bad” solutions made “good”.
As a result, I feel like solving this problem is easier said than done. I can’t think of a great way to solve many of the problems presented here. (Admittedly, I’m not a UX designer, so the bar is low for me.)
It feels like this could get significantly worse with Apple introducing folding devices. There's already a good number of iOS form factors that need to be supported, and now you need to be able to transition between form factors too. It feels like the ability to carefully handcraft nice interfaces is going down, as combinations go up. https://news.ycombinator.com/item?id=48461226 https://cupertinolens.com/2026/06/09/wwdc-2026-apple-is-fold...
I think it’s Apple motto since 2011: „Never care about quality again”. I still can't believe Rosetta was delivered and works like that.
The application of "every frame perfect" to the mouse pointer ranges from neutral to actively harmful. It causes roughly 1 frame of delay, which can be enough to bump the display-eye-hand-mouse loop out of whack (this seems to be different from person to person). It also causes pointer stutter when the system is under load side the pointer can't be independently updated.
+1... every frame perfect is less important than lag (ie something should happen at next frame after user action).
Pointer should be async with the rest of desktop anyway, unless the system is broken.
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.
Re: YouTube example, the issue (as I understand it, and I'm what you could describe as the opposite of an expert in that) is that the video and the playlist blend with transparency over one another. Had the playlist appeared sliding from the right side of the screen, it would have worked (I guess).
yes what you described is how it is right now on youtube, the main reason is to make it look more fluid and natural, apple examples shown mostly work because the overall structure is very static and have a lot of negative spacing. More animations tend to negate the principle described if not done with extreme care.
I don't know if I agree with this, especially in the context of animation: https://www.bloopanimation.com/the-art-of-smear-frames/
We do not perceive the world as a series of still frames. Any UI forcing that upon us is unnatural and will break immersion in subtle and unexpected ways. Apple and macOS may have their faults but the UI design is head and shoulders above anything the Wayland team has produced to date.
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.
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.
Curious is there most efficient&precise(SOTA?) way to create animations/transitions(like theorem), I've written some of these and really hard to figure and fix out(e.g like the zoom animation from last section of page).
I don't want animation in my UI at all. I'd much rather have hard cuts between states, as it used to be.
Wasting processing cycles making things look pretty yet it almost always results in a worse situation for the user.
Never use animation just for the sake of it. This article would not have existed had software designers stuck to this rule. All examples in the article use completely unnecessary animation.
Dragning downwards on the iPhone Home Screen to search is a perfect example, the gradual blur animation is never auto playing once activated. Instead, it responds to your drag and you are always in control.
The last one is such an obvious bug when the animation scales the canvas but does not translate the origin to compensate at the same time.
I couldn't understand author's point, because they haven't provided the right way to do each thing, their opinion.
It's easy to criticize.
I scrolled the article and there were frames during the scroll where half a line of text was clipped by the start and bottom of the viewport.
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.
A really infuriating example of this is the Windows Photos app (or whatever it is called this month) where scrolling through a photo album will show every image jumping around as it first shows them at some arbitrary scale, and then fits them to the window.
Lazy, lazy development.
"Job done, boss! Ready to ship to... checks notes... 3 billion users!"
"Did you test it?"
"Test? I thought we had a QA department!"
"Nah, we fired all of them a decade ago. You're the QA now."
What a rare creature, an article without AI mentioned in it! Thanks for sharing
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.
note to self: run Wayland without systemd: https://news.ycombinator.com/item?id=34977129
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..
This blog makes me appreciate my browser's reading mode
Fully agree with OP, bad animations are jarring.
Steve Jobs would have fired a lot of people for this :)
i actually like that the crop snaps after the fact, it reminds me that the crop is in fact active, same with rubber-banding type stuff.
All I can think seeing those examples is how macOS went from beautiful to utterly jank in the last 10 years.
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.
But Niki, nobody cares about animations! Apparently caring about details is labeled "OCD" now, and "just make it good enough, we'll fix this later".
Now I have to get Ubuntu/Wayland/winit/wgpu/rend3/egui/wine to work.
This silly pretentiousness goes a long way to explain why it took so long for Wayland to even be usable.
I get that this is the way of the world, but I still think we'd have been be better off with, you know, real attention paid to classic free/open source ideas (like not breaking backward compatibility.)
Can we get Apple to employ Niki and have him lead design please
Bold words for the site which makes my eyes bleed.
Articles from this site pop up occasionally. Something about the background color causes me to see a medium-sized bright spot in my vision after a few minutes. Due to this, I have to remind myself not to click when I see the URL.
From a game broadly considered to have industry-best animations: https://imgur.com/gallery/donkey-kong-super-smash-bros-ultim...
What's the imperfection? The eyes are standard (and deliberate) cartoon animation. Or is there something else I missed?
The DK games have used that eye popping animation since at least the SNES Donkey Kong Country games.
Thanks, I hate it.
[dead]
[dead]
[dead]
[dead]
The thing about UI animation is that even if no tween frame was ever hinky I'd still turn it off because it's an anti-pattern. It's there to look good on a retail shelf, not to improve day to day usage.
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.
> needs my best judgement for today and short term
But this is how they also fail long-term
Russians have a saying: you can only lean (which is the same word in russian as rely on/upon, thus the physics pun angle) on something that is resisting
Meaning, it is also your job to resist enshittification for the company to succeed
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.
> but my mind doesn't even want to think about what's perfect.
That's the barrier to understanding right there! This also makes it easy to make up 2x cost estimates to justify not improving anything