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'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 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.
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.
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.
Bah, each time someone say this they "forgot" that one side effect of 'every frame is perfect' is that it can increase latency..
Perfection or latency? That should be the user's choice not the developer's..
I 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".
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.
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 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.
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
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?
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.
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.
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?
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.
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 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.
Feels like UI elements have a lot of abstractions that are not perfect for motions.
With every hack you work around the layout engine that gives you this simplicity of defining layouts.
Some libraries allow you to define keyframes for the motions in between, but it still isn't perfect, especially if you look at the youtube sample where one element overlaps the other and the animation would take up too much time or look odd if this wasn't the case.
Even if you perfect all of this, would you really want to spend more processing power and script weight on these aspects?
I feel like most UIs have severe latency issues out of the box, anything that doesn't address the elephant in the room adds insult to injury.
I 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.
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.
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.
> 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.
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 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.
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.
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.
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.
94 comments
[ 3.2 ms ] story [ 88.2 ms ] threadI just look at the largest tech companies in the world that with their unlimited finances cannot produce software that isn't glitchy like this.
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.
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 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.
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".
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?
That's the barrier to understanding right there! This also makes it easy to make up 2x cost estimates to justify not improving anything
I have mine at 0.5x and that feels sufficient, still fast but I can see apps opening and closing etc.
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?
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.
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 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.
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.
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.
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.
For example?
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.