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

121–130 of 293 posts

Re: Every Frame Perfect

#121

Post by pillmillipedes »

tom_ wrote: post #115
mrob wrote: post #100

Earlier quoted context omitted.

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

Re: Every Frame Perfect

#122

Post by rcxdude »

Lalabadie wrote: post #96
mrob wrote: post #44

Earlier quoted context omitted.

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…

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

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.

Re: Every Frame Perfect

#123

Post by Tyr42 »

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.

Re: Every Frame Perfect

#124

Post by jstanley »

billyp-rva wrote: post #97
geokon wrote: post #7

Earlier quoted context omitted.

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

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

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.

Re: Every Frame Perfect

#125

Post by mananaysiempre »

Lalabadie wrote: post #96
mrob wrote: post #44

Earlier quoted context omitted.

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…

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

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

Re: Every Frame Perfect

#126

Post by hk__2 »

embedding-shape wrote: post #45
hk__2 wrote: post #37

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

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

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

Re: Every Frame Perfect

#127

Post by hk__2 »

alluro2 wrote: post #52
hk__2 wrote: post #37

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

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.

Re: Every Frame Perfect

#128

Post by jchw »

jakelazaroff wrote: post #120
jchw wrote: post #80

Earlier quoted context omitted.

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…

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.

Re: Every Frame Perfect

#130

Post by mrandish »

fasterik wrote: post #116
mrandish wrote: post #102

Earlier quoted context omitted.

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…

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

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

Post reply on HN