Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Every Frame Perfect

tonsky.me

Post reply on HN
Print view View original

181–190 of 293 posts

Re: Every Frame Perfect

#181

Post by bwhmather »

bee_rider wrote: post #148
ikesau wrote: post #4

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 a…

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 te…

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.

Re: Every Frame Perfect

#182

Post by seemack »

Tyr42 wrote: post #123
seemack wrote: post #118

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.

Re: Every Frame Perfect

#183

Post by seemack »

akersten wrote: post #119
seemack wrote: post #113

Earlier quoted context omitted.

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 othe…

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.

Re: Every Frame Perfect

#184

Post by Groxx »

Kiro wrote: post #36
ikesau wrote: post #4

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 a…

Play any game with good UI and you will see animations used everywhere. Instant transitions are only good in theory.

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.

Re: Every Frame Perfect

#185

Post by Groxx »

Kiro wrote: post #98
cwillu wrote: post #75

Earlier quoted context omitted.

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

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)

Re: Every Frame Perfect

#186

Post by ChrisMarshallNY »

fasterik wrote: post #55

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 ap…

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

Re: Every Frame Perfect

#187

Post by Groxx »

embedding-shape wrote: post #33
satvikpendem wrote: post #20

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…

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…

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.

Re: Every Frame Perfect

#189

Post by namuol »

akersten wrote: post #82
namuol wrote: post #72

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.

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.

Re: Every Frame Perfect

#190

Post by bigtones »

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.

Post reply on HN