Every Frame Perfect

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

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.

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

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.

This explains why I feel compelled to turn off any animation whenever there is a toggle to do so

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

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.

This explains why I feel compelled to turn off any animation whenever there is a toggle to do so

You might have thought the title was about Wayland and you're right. But this isn't about Wayland.

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.

I think many of these transitions are unnecessary and would feel just as good if they snapped immediately with instantaneous reflow.

Motion is critical for reorientation after transition.

Often with out it your brain has to rescan the entire page on each refresh.

You might have thought the title was about Wayland and you're right. But this isn't about Wayland.

Motion is critical for reorientation after transition.

Often with out it your brain has to rescan the entire page on each refresh.

Outside of dedicated notification areas, a GUI should only change state in response to user action. Because the user requested the state change, they naturally know how it changed. This means any animation is a redundant waste of time.

The notification area doesn't need animations either, because a GUI is only appropriate for displaying non-urgent notifications. If something really needs urgent attention, you need alarms and flashing lights, not an animated "toast".

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)

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.

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.

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.

A while ago I was reading about Wayland and this quote stuck with me:

A stated goal of Wayland is “every frame is perfect”.

And I think this is a goal we should all aspire to. 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.

The rule of thumb is:

If I take a screenshot of your app at any moment, it must make sense

Why care about every frame? It builds trust. Users can’t see the code, so UI is the only way for them to judge the quality of the app. If UI looks good, that means developers had time to polish it, which means that they probably spent a comparable amount of time to iron out the code. It’s a heuristic, but a reasonable one.

Now, what does it mean in practice? I can think of a few things:

No white flashes between screens.
No partially loaded content.
No relayout while content loads.
Internally consistent. If one part of the UI says “1 update available”, another part should not say “Checking for updates...”
Precise animations.

Animations often end up being forgotten. A UI might look great in both start and end states but very janky in between. Like this:

If you feel like there are weird things going on there, there are! Look at slowed down version:

Now let’s apply our rule and take screenshots in the middle of the animation. This doesn’t look right:

Neither does this:

Both of these frames are not perfect.

Let’s look at another example. Safari:

Placeholder text here moves from the center but cursor animates from the left position:

Not the end of the world by any means, but it does create a feeling that these two components are not in sync with each other. Next thought: maybe they weren’t designed together? If so, then they might not work well together. That’s how trust is lost.

This desynchronization can lead to a lot of confusion. For example, in Photos, when switching between Crop and Adjust mode, picture snaps into place immediately but the crop border is animated:

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. I want it to be a precise instrument, not an animated toy.

Sometimes animations are supposed to help you understand a transition, so it’s doubly sad when they make it harder. Follow the magnifying glass:

Same with Youtube. They had the simplest task in the world: move a rectangle from one position to another! Yet they decided to do something very strange:

Can you explain this? Does it make sense?

Probably a technical limitation of the DOM architecture they decided earlier on. I call these situations “The technology has outsmarted the programmer”. But no matter the reason, the result is an imperfect frame.

Sometimes animations are left out as an afterthought. Whatever happens, happens. Then we get this:

The details are fascinating to watch:

So yeah. Please pay attention not only to the start and end states, but also to everything in between. Every frame matters.

I’ll leave you with this unprovoked zoom animation from Preview app. Take care!

Hacker Times

Hacker Times

Every Frame Perfect

Discussion

Discussion