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

91–100 of 293 posts

Re: Every Frame Perfect

#91

Post by true_religion »

chaboud wrote: post #34
cloogshicer wrote: post #29

Earlier quoted context omitted.

I think that's a false dichotomy. The examples the author gives would not be slower in any way if done correctly.

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

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.

Re: Every Frame Perfect

#94

Post by jstanley »

tsunamifury wrote: post #5
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…

Motion is critical for reorientation after transition. Often with out it your brain has to rescan the entire page on each refresh.

True in 3d CAD when switching between work planes. I can't think of another application.

Re: Every Frame Perfect

#95

Post by hamburglar »

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…

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.

Re: Every Frame Perfect

#96

Post by Lalabadie »

mrob wrote: post #44
Kiro wrote: post #36

Earlier quoted context omitted.

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…

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.

Re: Every Frame Perfect

#97

Post by billyp-rva »

geokon wrote: post #7
tsunamifury wrote: post #5

Earlier quoted context omitted.

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

Re: Every Frame Perfect

#98

Post by Kiro »

cwillu wrote: post #75
lynndotpy wrote: post #62

Earlier quoted context omitted.

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…

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

Re: Every Frame Perfect

#99

Post by tosti »

hamburglar wrote: post #95
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…

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…

True that, but imho the jankiness of the video is clearly visible. It just jumps into place halfway.

Re: Every Frame Perfect

#100

Post by mrob »

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

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.
Post reply on HN