9 ms·

Purposeful animations

546 points by jakelazaroff 1y ago

rietta 1y ago
Yells at cloud with visions of Windows 98 menu slide out animations stuttering on the barely good enough for the new OS pc! ;-p
tyleo 1y ago
I feel like web design animations are more similar to PowerPoint than folks want to admit. What I mean by that is that quick cross-fades can be used 99% of the time to tidy the look of UI but you rarely need to do anything beyond that.
willio58 1y ago
YES. I love the examples here. The best one to me is the row background color transition on hover. It's painful, it feels like the UI is sluggish, when it reality it was someone going a little too hard on animation for no reason. Too often we think more animations = better.
emseetech 1y ago
Personally I would even speed up these animations. 300ms is too high. I prefer animations that are almost imperceptible. You might even only notice them if you take them away. Anything longer than that I consider too slow.
- chrismorgan 1y ago
  I used to go for 250ms, now I go for 200ms. I find that about the sweet spot for UI transitions where it helps you to understand what’s changing and how and why. And if it doesn’t meet those criteria, don’t transition it. 200ms is also nice and short to write in CSS, .2s. I contemplated shorter, but I found that by 150ms a transition can start to feel like it’s a mistake, a brief rendering glitch, especially if the first few frames of the animation are dropped, as can be common (.2s is already down to only ~10 intermediate frames). It’s too short to get the benefits of an animating transition, but too long to be or look or feel instant.
  - cousin_it 1y ago
    I think if the animation "helps you understand what's changing and why", sometimes that's a sign that the change could be redesigned - moved to a different part of the screen, for example - so that it becomes clearer without needing to be animated. For example, if pressing a "Save" button makes a "Save successful" toast appear on top of the screen, it's tempting to animate it in, so that the user notices it. But it's better to replace the button text with "Saved" and gray it out, which achieves the same goal and feels great without any animation.
    - Larrikin 1y ago
      The toast doesn't block the user from saving again in quick succession
    - cosmic_cheese 1y ago
      In general I think toasts are a borderline antipattern, particularly those presented as a chance for the user to undo some action that they accidentally triggered (doubling the panic since now the undo has become a time bomb). Just don’t make the consequencial action so easy to trigger in the first place and where relevant (on iOS or desktop) support the standard undo stack.
      - const_cast 1y ago
        Toasts on large displays are definitely an anti-pattern, they're just too far from where the action that triggered them actually happened. On mobile it's a bit different, because often you don't have the space to put an "undo" button or status text right next to the thing you just did. So you put it at the bottom or something in a toast. Still not good, but more justifiable. Also iOS does not have reliable undo actions. Android does, but on iOS there isn't an equivalent. No back button. Well, maybe a back button but definitely not required and not enforced in any way.
        cosmic_cheese 1y ago
        Still iffy on mobile because the way the device is being held can’t be assumed. The area the toast appears is very easily hidden by a hovering thumb for instance, especially for people with larger hands. Undo and back are conceptually similar but different. On iOS, consistently anywhere you can enter text you can give your phone a quick shake (similar to a person shaking their head “no”) and it’ll offer to undo the last edit. Many apps like Reminders use this for actions like item completion too. There’s a native undo stack you can use to leverage this as a third party dev. There’s also a gesture that can trigger this but I have yet to commit that to memory. Android does not have an undo gesture. Some skins (like Samsung’s) implement something similar but it’s not consistent and it’s limited to text editing. For going back, all apps built with native iOS UI toolkits have a swipe gesture that goes back to the previous screen. Cross platform apps built with other frameworks are notoriously bad about not implementing this, though. It’s true that there’s no cross-app back gesture, but swiping back and forth on the home bar is a rough approximation.
- adzm 1y ago
  First thing I do on any android phone is enable developer mode and double the speed of animations. Drives me crazy when I see one running them at normal speed!
  - Krssst 1y ago
    There's an accessibility setting to disable animations altogether. It's paradise.
danielvaughn 1y ago
Every time I see animation discussed by designers, they're thinking about it in terms of polish and "delight", and then balancing those things with perceptual latency. It's not entirely incorrect, but a couple of minor nits: 1. Delight is overblown, in my opinion. I think most of the people truly delighted by fancy animation are just other designers. 2. It's more useful to think about state when deciding when to animate. Could the user have trouble perceiving the change in state that just occurred? If so, then use an animation to help them visualize what happened. I believe this is the primary reason to use an animation - all others are vanity.
- xg15 1y ago
  Fully agreeing with this. I was also surprised that the appearance change of a button on mousedown is considered an animation here. ("Another purposeful animation is this subtle scale down effect when pressing a button.") Isn't this just very basic optical feedback to indicate that a component is clickable at all and that the click was registered?
  - dfxm12 1y ago
    It fits both the dictionary and colloquial definitions of animation. If there is any domain specific jargon, surely that applies too. I can't understand why this wouldn't be considered an animation...
    - addaon 1y ago
      I can see either side of it, but in my mind animation (in this context) means the generation and timed display of synthetic tween states to smooth the transition between the display of actual states. The mouse-down case is (in this context) an immediate change from the up- to down- states, without additional frames in between, so is not an animation by this particular domain-specific definition.
      - trogdc 1y ago
        The example on the site does have tween frames: `transition-duration: .15s`
mholt 1y ago
Apple could learn a thing or two from this. Too often I'm waiting for their silly animations to finish. Just a moment ago I swiped to scroll the view to the bottom, then immediately tapped the button when it came into view, but I had to tap it multiple times until the bouncing stopped. That's just one example because it just happened, but this happens ALL the time. I know Apple can do better. My Android phone felt so much more responsive (the 120hz screen helped, I'm sure), simply because the animations were snappier. Other examples that come to mind real quick: - Swiping up to switch apps. That one is awfully slow. (Actually, most gesture-based activities are painfully slow!) - Dismissing notifications (esp. on Mac) - Opening the drawer thing - Revealing the dock - Sometimes I see animations stacked upon each other. One animation has to fully complete, then another one, THEN I can finally use my computer again. It's ironic that I have to go to Accessibility settings and disable these things to make my device accessible.
- gcau 1y ago
  Whenever my apple wallet connects to my phone, It plays a totally useless animation that feels like it takes forever, and covers the entire screen. In that time, you cant see or do anything on the phone. So annoying, and for no reason. Just give me a little haptic when it connects.
  - GuinansEyebrows 1y ago
    same when attaching a locked phone to a magsafe charger. it seems like a small thing but i actually interact with my locked phone enough for that to get on my nerves. i'd prefer the haptic feedback but i would even settle for being able to swipe it away - nope. not an option.
  - ninkendo 1y ago
    This enrages me so fucking much. When does my wallet slide slightly from the magnetic center and then back into place most often? When I’m getting it out of my pocket. When am I trying to just use my goddamn phone the most? When I get it out of my pocket. So, it ends up being that ~50% of the time I need to use my phone, I have to wait for that goddamn 3 second animation first. If some engineer introduced a 3 second regression in the time for Face ID to unlock your phone 50% of the time, it would be noticed and fixed immediately. But call that 3 second regression a “surprise and delight animation” and suddenly Apple designers love it and force it on you.
wonger_ 1y ago
Clickbaity title; more like "things to consider when designing animations." I appreciate subtle animations like the button press. Visual feedback gives me confidence in UI actions and makes things less jarring. Same idea with CSS smooth scroll. But a lot of this feels subjective. Anybody have user studies on the effectiveness of UI animation? Also, I think a lot of people would be happier if web apps exposed settings like zero animation / mild animation/ full animation. Power users could speed up their workflows by turning off animations. Kinda like my phone UI settings.
- mickael-kerjean 1y ago
  > Also, I think a lot of people would be happier if web apps exposed settings like zero animation This exists as a browser setting, it's called "prefers-reduced-motion", an example usage in my code: https://github.com/mickael-kerjean/filestash/blob/master/public/assets/lib/animate.js#L21-L28 https://github.com/mickael-kerjean/filestash/blob/master/pub...
  - hexo 1y ago
    That is very not-enough, as it is literally "prefers reduced" but i need (not prefer) zero animation. And yet with this present several years already websites just happily ignore the setting. So i believe this should be honored by browsers which should just stop animating transitions. But then there is the other elephant in the room (JS anims).
- bee_rider 1y ago
  It might be kind of interesting to see a well-done usability study around animations. I tend to assume they are pretty useless, but I guess I can see some point in drawing the eye from a button you press, to some UI component that it generates. OTOH, it isn’t clear what the baseline should be. The easy way to do an incorrect study would just be to toggle off animations and have the very dynamic design with components popping into existence without any hints. But, that’s flawed, a UI made from the ground up with the assumption of “no animations” should just be less dynamic, rendering the whole concern moot…
fallinditch 1y ago
Good post with useful info. The author doesn't discuss it but I like the momentum inertia (aka spring animation) of the dropdown example - a nice touch.
modernerd 1y ago
I wish more designers thought this way. I have a blog post draft called, “5 principals of interactive animation” aping the “12 principles of animation” from the 80's that I thought every would-be UX designer might learn from. It mirrors a lot from this post! 1. Purpose over ornament. 2. The more often, the less. 3. Timing shapes perception. 4. Motion adapts to state. 5. Silence is an option.
webdevver 1y ago
old school bios/DOS interfaces are kings of usability to this day imo. sub 1ms latency, arguably even a little too quick - sometimes it feels like the interface changed right before my input.
xnx 1y ago
Android 16 just introduced a stupid animation when unlocking your phone. Rather than show you what you want to see as fast as possible, the designers decided you would have to sit through watching their fade in animation dozens of times a day. Designers either don't use their own products, or have no taste (possibly both).
- Krssst 1y ago
  You can disable animations in Android in the accessibility settings. Not just make faster but completely disable. That's one of the reasons I'll never go to iOS. I can't stand losing time on pointless UI stuff. Wasting my time isn't delighting at all.
  - xnx 1y ago
    Great tip. I had the "Remove animations" setting feature enabled. Hopefully it's just a temporary bug that this doesn't disable the lockscreen animation.
GuinansEyebrows 1y ago
not to nitpick because i mostly agree, but the second example (scaling a button on press/hold) is so ugly and weird that it comes across more like a glitch than an intentional animation. maybe it doesn't fit as well into a (post-)flat UI world but i always liked the bevel-shade-inversion technique of old MS Windows buttons to simulate pressing them "down".
wjrb 1y ago
Absolutely right. I even find that 300ms in UI animations is still too long, but like TFA says, it depends on how often that piece of UI is used. Great Raycast example.
- deleted 1y ago
  [deleted]
w4rh4wk5 1y ago
My rule of thumb: if the user has to wait for the animation to play out, before they can continue, remove it. And, always provide an accessibility option to turn off all animations.
- pverheggen 1y ago
  Worth noting, the prefers-reduced-motion media query is great for this: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
  - w4rh4wk5 1y ago
    Interesting. Apparently browsers (at least Firefox) uses the OS' setting for this. I still have animations enabled in Windows 10 due to how windows are rendered when they are opened, but the content isn't painted yet. However, there seems to be way to set this manually in Firefox. [1] Go to about:config and add `ui.prefersReducedMotion` set to `1`. Can be verified with https://animate.style https://animate.style [1] https://stackoverflow.com/a/59709067 https://stackoverflow.com/a/59709067
busymom0 1y ago
This recently happened to me when I was using an online website for preparing for a drivers license test. After finishing a 20 question practice test, the site would show a cool confetti animation on top of everything. While cool, it would prevent any clicks from registering on the entire site for the entire 5 second duration of the animation. I emailed the company to add `pointer-events: none;` to the confetti `div`. That fixed the problem. Since the website had been around for a very long time, I wonder how many millions of seconds had been wasted on this animation to complete.
kavaruka 1y ago
The "perception of speed" argument reminded me of when I was asked to add spinners and animations to a web app I was building, because without them the UI would have felt too fast and fake.
croisillon 1y ago
oh the policing of blog titles now, can't wait for an AI to neutralize any post that would otherwise stand out unfairly on HN's first page
lagniappe 1y ago
Frontend design is looking more and more like a jobs program at worst, and at best cost allocation justification. I already foresee a lot of people jumping on me for this, so do your worst, nerds.
- luqtas 1y ago
  > Frontend design ... UI frontend design* maybe they never tried a TUI
  - lagniappe 1y ago
    TUI is the superior choice.
ryanisnan 1y ago
Am I the only one who dislikes off-angle animations?
- zhainya 1y ago
  No, you're not.
outlore 1y ago
One thought about this section: > To give you an example, a faster-spinning spinner makes the app seem to load faster, even though the load time is the same. This improves perceived performance. Perhaps due to poor design by companies that abuse the fast loading spinner when, in fact, nothing is happening, I instinctively trusted the slower spinner more.
- hatthew 1y ago
  The only thing that I trust is loading bars that make nonlinear progress, clearly indicating that there's specific steps and/or measurable progress happening.
- sprobertson 1y ago
  my first instinct was "the slow one is struggling so it must be doing some heavy work"
stack_framer 1y ago
Here's a subtle problem: An animation that looks "delightful" on the screens you have, might look pretty bad on a screen you don't have. For example, the author's animation for scaling a button looks fine on my M1 MacBook Pro, but jittery and sluggish on the crappy IBM ThinkVision monitor attached to my MacBook. See for yourself: MacBook: https://drive.google.com/file/d/1UjJnxobPlBh_nv18Ych0XHwHEMwE6JnR/view?usp=sharing https://drive.google.com/file/d/1UjJnxobPlBh_nv18Ych0XHwHEMw... Crappy Monitor: https://drive.google.com/file/d/1jtwJKIFvteLOWD1Pzj1mTZjQwVXuQQhK/view?usp=sharing https://drive.google.com/file/d/1jtwJKIFvteLOWD1Pzj1mTZjQwVX...
- esafak 1y ago
  Are you using your IBM at its native resolution?
  - Jaxan 1y ago
    Does it matter? Some users will perceive it this way (or better or worse).
    - esafak 1y ago
      It matters if you want to attribute the problem to the correct source.
modeless 1y ago
Android has really failed at this. Android apps are full of animations that serve no purpose or are even misleading, and slow down the experience. It's cargo cult copying from iOS. And the animations are janky, too. Luckily Android has a developer option to double the speed of animations system-wide. It's the first thing I turn on every time I get a new phone. I find that double speed is about right. Designers tend to make every animation at least half as fast as it should be, to make sure you notice their effort.
- cosmic_cheese 1y ago
  One that gets me routinely is Android's two-stage quick control/notification drawer, which is further complicated by gesture-expandable notifications. It feels like a poorly thought out bodge to fit everything into a single screen. It’s annoying to me even as a software developer and must be terribly confusing to someone not well versed in the arcane incantations of mobile operating systems.
  - const_cast 1y ago
    The two-swipe controls are truly evil and I can't believe it hasn't been fixed yet. The first screen shows you next to nothing if you have no notifications, which I never do. Its a lot of work to get to quick control. The 4 they let you see on the first swipe is just not enough. But wait, there's more! Even after the second swipe you have to swipe back and forth to get to all the controls. But wait, there's more! In landscape mode the interface goes from difficult to downright infuriating.
  - modeless 1y ago
    Those interactions are kind of annoying but not because of animations.
    - cosmic_cheese 1y ago
      I would say that the interaction is enabled by the animation. Without the animation it would be even more nonsensical than it already is and probably wouldn’t have been implemented.
phkahler 1y ago
>> This animation explains how Product Intelligence (Linear’s feature) works. We could have used a static asset, but the animated version helps the user understand what this feature does, straight in the initial viewport of the page. That might be the designers intent, but that's not what it does for me at all. First, the animation shown is on some weird 3D angle which is not part of any sane UI. Why is that? Not to convey anything about the actual experience of the app shown. That 3d look certainly does not "help the user understand what this feature does" The fade-in of the animation seems to draw me in to that area of the page which I assume is the intent. The 3D perspective helps me understand that the text in that box is not part of the page I'm reading, but a view of something else - their product. But it doesn't really help me to understand the product.
dclowd9901 1y ago
> Another purposeful animation is this subtle scale down effect when pressing a button. It’s a small thing, but it helps the interface feel more alive and responsive. If you haven't watched the Half Life documentary, I can't recommend it enough. In it Gabe Newell talks about the way he wanted the game to be different from games that came before it in that you could interact with things around you so you felt like you were actually in with and interacting with this world. He then related it to a psychological concept (maybe associated with self realization or external validation) and how as humans we crave the kind of physical objective feedback as recognition of our existence and how important and valuable that is. Really a neat idea and whether or not the science is sound, there is something immensely satisfying about interacting with virtual objects and having them respond in a physical manner that replicates physical reality.
ivanjermakov 1y ago
I have a problem with animation every time it induces latency. It's okay to animate some action that would take that much time anyway, but waiting for purely cosmetic animation to finish feels sluggish and not enjoyable.
- layer8 1y ago
  Yes, animations are fine for things like progress bars, where they visualize something happening without interfering with user actions. But otherwise, animations should be avoided, or limited to something like 100ms.
OvbiousError 1y ago
The one that bites me daily is in keeper. The web UI opens with icons collapsed, expanding after ?500ms?, right about when I want to click on a category to expand it, thus collapsing it again.
ratmeadow 1y ago
One thing that instantly ruins my day is animation where the element state is inconsistent during the animation. For example - I think it's on Windows where I keep running into this - on notification popups from some apps, you can't click "X" to close until sufficient time has passed after the popup animation. If you try to close it in that time, it instead acts as if you clicked the notification to open it. Super annoying. Another, on Mac, when switching desktops, sometimes an app will show on the screen briefly before flashing to another app. The animation is slow enough that it often tricks me into thinking it's ok to do stuff and then nope the app changes. Even worse, I think it occurs randomly. Note to designers: if you do choose to include an animation, it better be the most rock solid implementation ever or I will immediately think you're a twat and your app is a buggy pile of crap.
grokx 1y ago
If only UX/UI people spent their time optimizing their code rather than polishing their animations. Sorry for this rant, but hell, the web, the apps, everything is so sloooow and bloated. Make it instant! I just want to do my things, not to wait for drawings to draw!
hollowturtle 1y ago
While animations in general may add juice they can also hide better ux, like the feedback button, it's one more click(actually two as it seems not to automatically focus on the textarea once opened) to send feedback. But the more years come by the more it looks being a choice to not have a great ux, in the case of the feedback button one might want to be sure the user intention is to send some
mrob 1y ago
UI animations actually do have one valid use: clarifying UI state changes to third parties. When you're the only person using the computer, UI animations are pure time-wasting anti-features. You obviously know how the UI state changed because you're the one who requested the change. If the UI state changed without your explicit request, that's a bug that needs fixing. But somebody viewing your screen remotely can't see which keys you're pressing, and they don't know what you intend to click on before you've actually clicked it, so to them UI state changes can be surprising. Animations can help them follow what's happening. Of course, animations should be disabled by default, because most computer use is not performed for an audience, but having the option to enable them is occasionally useful.
- bobbylarrybobby 1y ago
  > You obviously know how the UI state changed because you're the one who requested the change. We must be using different devices because mine often fail to register my intent and in that case the failure to animate is often the only signal I have (that doesn't take more than a few seconds to register)
  - mrob 1y ago
    I use keyboard and mouse. Unlike touchscreens, these always work reliably. And if you're using animations as indications of correctly functioning hardware, why not just use useful work as the indication instead?
    - bobbylarrybobby 1y ago
      Useful work takes longer to do than the animation that indicates the work has been queued.
      - mrob 1y ago
        None of the animations described in the article are of this type. Opening a text input area or changing desktop should be instant on all modern hardware. If you genuinely have something that can't be accomplished within one frame it's acceptable to display a progress bar, but I don't consider progress bars to be a "UI animations".
calrain 1y ago
I'm a big believer that animations need to validate what you already know, they aren't the information itself. This means, if you turned animations off you would still work as fast and understand the flow the same as if animations were enabled. For me, the purpose of animations is to soften the UX journey, and to confirm what I already knew, by giving me small indications that yes, the UI is truly in the state I expect it to be. Such as fast highlighting of on hover items, so I don't have to correlate the mouse position to the control. I love that example of tool tip popups taking 0ms once you have popped up one, that is a clear signal that the UX understands you are trying to learn more about the controls you're hovering over. That's a perfect representation of how animations signal understanding of your UX journey.
MathMonkeyMan 1y ago
Thoughtful article. I read the introduction several times, picking it apart in my head. > When done right, animations make an interface feel predictable, [...] Predictable how? If you anticipate the animation, then you will have predicted it. But you also could anticipate the lack of an animation, and you will have predicated that. > When done right, animations make an interface feel [...] faster, Do they make the interface feel faster because no transition ever occurs in less time than the animation? Or is it that literal motion on the screen tricks us into thinking something is "going fast"? A nearly instantaneous, unanimated change in view must feel faster than an animation, no? > When done right, animations make an interface [...] more enjoyable to use. [...] This is true sometimes. It's particularly true when you're interacting with controls that have a "real physical world" analogy, like buttons, sliders, and page flips. On the other hand, if I click a button and a bunch of sparkles happen, that's not enjoyable to me. > When done right, animations [...] help you and your product stand out. If your product has animations and competing products do not, then yours stands out insofar that it has animations. > But they can also do the opposite. [...] Correct! > So how do you know when and how to animate to improve the experience? > Step one is making sure your animations have a purpose. Or... don't use animations unless the app involves animation. Or do, there's nothing I can do about it.
vm012 1y ago
I think motion blur could enhance UI animations by making fast transitions feel smoother, even with the low number of frames the animation has to be rendered with. I wonder if this idea has been explored in mainstream UI frameworks, and if not, why - is it too computationally expensive, technically infeasible, or just a bad idea.
sigseg1v 1y ago
Whoever designed the keyboard animation for Walmart self checkouts should take note. Every time you want to type in a product by name, you must endure a 2 second slide-in of the keyboard before you can start typing on it. It's so slow that I feel that I could have completed the search and started on the next item before it's even done animating, if there was a way to disable it. I sincerely hope employees don't have to use systems like this all day that reduce their throughout by more than half.
- malux85 1y ago
  I remember early in my career I was working for a consultancy and the user was complaining that the search results were slow, our tech manager just LOVED this problem, in his mind he would get to go down the search engine rabbit hole - analyse the search query, maybe theres a more advanced indexing algorithm that he could find to speed it up, this could take weeks of benchmarking and comparing and prototyping and everything, what a wonderful rabbit-hole where the first prize is a happy client because of his algorithmic genius! But me, being a bit more pragmatic, instantly benchmarked it, saw the search backend was responding quickly and it was just the animating menu that showed the results that was slow to animate. I changed 1.6 second animation to a 0.2 second animation, a change that look maybe 5 minutes to benchmark, find the code, and then change it, The tech manager refused to accept that the solution was that simple, and only confonted with irrefutable evidence (direct client feedback AND benchmarks that showed that the search backend was already fast) that he accepted.
chromanoid 1y ago
At least on desktop screens I think chronostasis might make animations seem more sluggish depending on where you looked before. I wonder if this leads experienced users of the app in question to not like any animations, because they know click paths better and place their focus in an anticipatory manner. Maybe one could measure click speed and reduce animation times based on that.
btbuildem 1y ago
Instead of trying to decide one animation speed for all things, the UI should be adaptive. The author stumbles onto this and walks right past it: whatever raycast is, they use it a lot, and find the animation (any animation) annoying. The UI should learn the user's patterns: when they're new and unfamiliar, the animations are slower and more deliberate, instructional (initially including more information re: expected workflow). As the user "walks" a certain path again and again, every time more smoothly and confidently, the suggestions / assists / animations diminish, shorten, and disappear. For a pro user with muscle memory and memorized keystroke sequences, the UI does its best to just get out of the way.
pmontra 1y ago
> How often users will see an animation is a key factor in deciding whether to animate or not. That's the reason why I removed every animation in GNOME on my desktop. I also removed anything that morphs the screen into something else. For example, I don't use the activities screen. I jump to the other virtual desktops with hotkeys.
wg002 1y ago
[dead]
AfterHIA 1y ago
Ethics and design guy here-- I think this is one of the most, "purposeful" articles I've seen in forever if you don't mind the pun. (I'm from Utah). I'm asking myself the question of fundamentally why UI designers are making decisions to include the, "tasteful delay" and its ultimately as the article points out prioritizing, "delightful presentations" for, "tools that ultimately serve the users purposes most effectively." I don't think I have to preach to a converted choir here about that but I'm reminded of Thorstein Veblen's famous book and I wonder; at a deeper level isn't misanthropic to reduce software to, "tools?" Lumiere created motion pictures and we told stories. We invented the interactive motion picture and we jerry-rigged into an automated office suite. Outside of the very sexy Alan Kay-Dan Ingalls fringe computer interfaces of all stripes descended from that very idiosyncratic paradigm. I wonder what crazy shit Ted Nelson is building with Claude right now. Sweet fuck. https://moglen.law.columbia.edu/LCS/theoryleisureclass.pdf https://moglen.law.columbia.edu/LCS/theoryleisureclass.pdf
eviks 1y ago
> But they can also do the opposite. They can make an interface feel unpredictable, slow, and annoying. Indeed, just like the immediately following example, which slows down page scrolling, breaking predictability and consistency of one of the most frequently used and fundamental page operations And its purpose is, of course, only fulfilled in the imagination of the designer > This animation explains how Product Intelligence (Linear’s feature) works. We could have used a static asset, but the animated version helps the user understand what this feature does, straight in the initial viewport of the page. It doesn't really do that: first, it's happening partially out of focus because I read top to bottom, so I'm still reading your title and leading paragraph, or did you want me to be distracted and skip the text? So I see the same thing on first focus: static image. And I can't rewind it to watch again since I missed it the first time. Then it has a very weird angle which makes all the text harder to read, my guess is to help see the 3D nature of the animation when to show the arrival of the product as a separate overlay? So this would likely not exist in a static image and be an improvement.
Jotalea 1y ago
I personally LOVE when the software I use has smooth animations. Telegram, Hyprland, GNOME, iOS, those are some examples of it. but apparently, I am the only person that cares about animations at all. I made a mockup of an app with quite a lot of animations, and asked random people what did they think about it. not a single person mentioned animations.
cainxinth 1y ago
If I could make one plea to people who program these systems, please take all necessary steps to prevent the following from occurring: I find the button I need to press. I press it. The button animates to show it recognizes my action, but nothing else happens. I press it again and it works normally. I really hate that.

546 points by jakelazaroff 1y ago

Yells at cloud with visions of Windows 98 menu slide out animations stuttering on the barely good enough for the new OS pc! ;-p

tyleo 1y ago

I feel like web design animations are more similar to PowerPoint than folks want to admit. What I mean by that is that quick cross-fades can be used 99% of the time to tidy the look of UI but you rarely need to do anything beyond that.

willio58 1y ago

YES. I love the examples here. The best one to me is the row background color transition on hover. It's painful, it feels like the UI is sluggish, when it reality it was someone going a little too hard on animation for no reason. Too often we think more animations = better.

emseetech 1y ago

Personally I would even speed up these animations. 300ms is too high. I prefer animations that are almost imperceptible. You might even only notice them if you take them away. Anything longer than that I consider too slow.

chrismorgan 1y ago
I used to go for 250ms, now I go for 200ms. I find that about the sweet spot for UI transitions where it helps you to understand what’s changing and how and why. And if it doesn’t meet those criteria, don’t transition it. 200ms is also nice and short to write in CSS, .2s. I contemplated shorter, but I found that by 150ms a transition can start to feel like it’s a mistake, a brief rendering glitch, especially if the first few frames of the animation are dropped, as can be common (.2s is already down to only ~10 intermediate frames). It’s too short to get the benefits of an animating transition, but too long to be or look or feel instant.
- cousin_it 1y ago
  I think if the animation "helps you understand what's changing and why", sometimes that's a sign that the change could be redesigned - moved to a different part of the screen, for example - so that it becomes clearer without needing to be animated. For example, if pressing a "Save" button makes a "Save successful" toast appear on top of the screen, it's tempting to animate it in, so that the user notices it. But it's better to replace the button text with "Saved" and gray it out, which achieves the same goal and feels great without any animation.
  - Larrikin 1y ago
    The toast doesn't block the user from saving again in quick succession
  - cosmic_cheese 1y ago
    In general I think toasts are a borderline antipattern, particularly those presented as a chance for the user to undo some action that they accidentally triggered (doubling the panic since now the undo has become a time bomb). Just don’t make the consequencial action so easy to trigger in the first place and where relevant (on iOS or desktop) support the standard undo stack.
    - const_cast 1y ago
      Toasts on large displays are definitely an anti-pattern, they're just too far from where the action that triggered them actually happened. On mobile it's a bit different, because often you don't have the space to put an "undo" button or status text right next to the thing you just did. So you put it at the bottom or something in a toast. Still not good, but more justifiable. Also iOS does not have reliable undo actions. Android does, but on iOS there isn't an equivalent. No back button. Well, maybe a back button but definitely not required and not enforced in any way.
      - cosmic_cheese 1y ago
        Still iffy on mobile because the way the device is being held can’t be assumed. The area the toast appears is very easily hidden by a hovering thumb for instance, especially for people with larger hands. Undo and back are conceptually similar but different. On iOS, consistently anywhere you can enter text you can give your phone a quick shake (similar to a person shaking their head “no”) and it’ll offer to undo the last edit. Many apps like Reminders use this for actions like item completion too. There’s a native undo stack you can use to leverage this as a third party dev. There’s also a gesture that can trigger this but I have yet to commit that to memory. Android does not have an undo gesture. Some skins (like Samsung’s) implement something similar but it’s not consistent and it’s limited to text editing. For going back, all apps built with native iOS UI toolkits have a swipe gesture that goes back to the previous screen. Cross platform apps built with other frameworks are notoriously bad about not implementing this, though. It’s true that there’s no cross-app back gesture, but swiping back and forth on the home bar is a rough approximation.
adzm 1y ago
First thing I do on any android phone is enable developer mode and double the speed of animations. Drives me crazy when I see one running them at normal speed!
- Krssst 1y ago
  There's an accessibility setting to disable animations altogether. It's paradise.

danielvaughn 1y ago

Every time I see animation discussed by designers, they're thinking about it in terms of polish and "delight", and then balancing those things with perceptual latency. It's not entirely incorrect, but a couple of minor nits: 1. Delight is overblown, in my opinion. I think most of the people truly delighted by fancy animation are just other designers. 2. It's more useful to think about state when deciding when to animate. Could the user have trouble perceiving the change in state that just occurred? If so, then use an animation to help them visualize what happened. I believe this is the primary reason to use an animation - all others are vanity.

xg15 1y ago
Fully agreeing with this. I was also surprised that the appearance change of a button on mousedown is considered an animation here. ("Another purposeful animation is this subtle scale down effect when pressing a button.") Isn't this just very basic optical feedback to indicate that a component is clickable at all and that the click was registered?
- dfxm12 1y ago
  It fits both the dictionary and colloquial definitions of animation. If there is any domain specific jargon, surely that applies too. I can't understand why this wouldn't be considered an animation...
  - addaon 1y ago
    I can see either side of it, but in my mind animation (in this context) means the generation and timed display of synthetic tween states to smooth the transition between the display of actual states. The mouse-down case is (in this context) an immediate change from the up- to down- states, without additional frames in between, so is not an animation by this particular domain-specific definition.
    - trogdc 1y ago
      The example on the site does have tween frames: `transition-duration: .15s`

mholt 1y ago

Apple could learn a thing or two from this. Too often I'm waiting for their silly animations to finish. Just a moment ago I swiped to scroll the view to the bottom, then immediately tapped the button when it came into view, but I had to tap it multiple times until the bouncing stopped. That's just one example because it just happened, but this happens ALL the time. I know Apple can do better. My Android phone felt so much more responsive (the 120hz screen helped, I'm sure), simply because the animations were snappier. Other examples that come to mind real quick: - Swiping up to switch apps. That one is awfully slow. (Actually, most gesture-based activities are painfully slow!) - Dismissing notifications (esp. on Mac) - Opening the drawer thing - Revealing the dock - Sometimes I see animations stacked upon each other. One animation has to fully complete, then another one, THEN I can finally use my computer again. It's ironic that I have to go to Accessibility settings and disable these things to make my device accessible.

gcau 1y ago
Whenever my apple wallet connects to my phone, It plays a totally useless animation that feels like it takes forever, and covers the entire screen. In that time, you cant see or do anything on the phone. So annoying, and for no reason. Just give me a little haptic when it connects.
- GuinansEyebrows 1y ago
  same when attaching a locked phone to a magsafe charger. it seems like a small thing but i actually interact with my locked phone enough for that to get on my nerves. i'd prefer the haptic feedback but i would even settle for being able to swipe it away - nope. not an option.
- ninkendo 1y ago
  This enrages me so fucking much. When does my wallet slide slightly from the magnetic center and then back into place most often? When I’m getting it out of my pocket. When am I trying to just use my goddamn phone the most? When I get it out of my pocket. So, it ends up being that ~50% of the time I need to use my phone, I have to wait for that goddamn 3 second animation first. If some engineer introduced a 3 second regression in the time for Face ID to unlock your phone 50% of the time, it would be noticed and fixed immediately. But call that 3 second regression a “surprise and delight animation” and suddenly Apple designers love it and force it on you.

wonger_ 1y ago

Clickbaity title; more like "things to consider when designing animations." I appreciate subtle animations like the button press. Visual feedback gives me confidence in UI actions and makes things less jarring. Same idea with CSS smooth scroll. But a lot of this feels subjective. Anybody have user studies on the effectiveness of UI animation? Also, I think a lot of people would be happier if web apps exposed settings like zero animation / mild animation/ full animation. Power users could speed up their workflows by turning off animations. Kinda like my phone UI settings.

mickael-kerjean 1y ago
> Also, I think a lot of people would be happier if web apps exposed settings like zero animation This exists as a browser setting, it's called "prefers-reduced-motion", an example usage in my code: https://github.com/mickael-kerjean/filestash/blob/master/public/assets/lib/animate.js#L21-L28 https://github.com/mickael-kerjean/filestash/blob/master/pub...
- hexo 1y ago
  That is very not-enough, as it is literally "prefers reduced" but i need (not prefer) zero animation. And yet with this present several years already websites just happily ignore the setting. So i believe this should be honored by browsers which should just stop animating transitions. But then there is the other elephant in the room (JS anims).
bee_rider 1y ago
It might be kind of interesting to see a well-done usability study around animations. I tend to assume they are pretty useless, but I guess I can see some point in drawing the eye from a button you press, to some UI component that it generates. OTOH, it isn’t clear what the baseline should be. The easy way to do an incorrect study would just be to toggle off animations and have the very dynamic design with components popping into existence without any hints. But, that’s flawed, a UI made from the ground up with the assumption of “no animations” should just be less dynamic, rendering the whole concern moot…

fallinditch 1y ago

Good post with useful info. The author doesn't discuss it but I like the momentum inertia (aka spring animation) of the dropdown example - a nice touch.

modernerd 1y ago

I wish more designers thought this way. I have a blog post draft called, “5 principals of interactive animation” aping the “12 principles of animation” from the 80's that I thought every would-be UX designer might learn from. It mirrors a lot from this post! 1. Purpose over ornament. 2. The more often, the less. 3. Timing shapes perception. 4. Motion adapts to state. 5. Silence is an option.

webdevver 1y ago

old school bios/DOS interfaces are kings of usability to this day imo. sub 1ms latency, arguably even a little too quick - sometimes it feels like the interface changed right before my input.

xnx 1y ago

Android 16 just introduced a stupid animation when unlocking your phone. Rather than show you what you want to see as fast as possible, the designers decided you would have to sit through watching their fade in animation dozens of times a day. Designers either don't use their own products, or have no taste (possibly both).

Krssst 1y ago
You can disable animations in Android in the accessibility settings. Not just make faster but completely disable. That's one of the reasons I'll never go to iOS. I can't stand losing time on pointless UI stuff. Wasting my time isn't delighting at all.
- xnx 1y ago
  Great tip. I had the "Remove animations" setting feature enabled. Hopefully it's just a temporary bug that this doesn't disable the lockscreen animation.

GuinansEyebrows 1y ago

not to nitpick because i mostly agree, but the second example (scaling a button on press/hold) is so ugly and weird that it comes across more like a glitch than an intentional animation. maybe it doesn't fit as well into a (post-)flat UI world but i always liked the bevel-shade-inversion technique of old MS Windows buttons to simulate pressing them "down".

wjrb 1y ago

Absolutely right. I even find that 300ms in UI animations is still too long, but like TFA says, it depends on how often that piece of UI is used. Great Raycast example.

deleted 1y ago
[deleted]

w4rh4wk5 1y ago

My rule of thumb: if the user has to wait for the animation to play out, before they can continue, remove it. And, always provide an accessibility option to turn off all animations.

pverheggen 1y ago
Worth noting, the prefers-reduced-motion media query is great for this: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
- w4rh4wk5 1y ago
  Interesting. Apparently browsers (at least Firefox) uses the OS' setting for this. I still have animations enabled in Windows 10 due to how windows are rendered when they are opened, but the content isn't painted yet. However, there seems to be way to set this manually in Firefox. [1] Go to about:config and add `ui.prefersReducedMotion` set to `1`. Can be verified with https://animate.style https://animate.style [1] https://stackoverflow.com/a/59709067 https://stackoverflow.com/a/59709067

busymom0 1y ago

This recently happened to me when I was using an online website for preparing for a drivers license test. After finishing a 20 question practice test, the site would show a cool confetti animation on top of everything. While cool, it would prevent any clicks from registering on the entire site for the entire 5 second duration of the animation. I emailed the company to add `pointer-events: none;` to the confetti `div`. That fixed the problem. Since the website had been around for a very long time, I wonder how many millions of seconds had been wasted on this animation to complete.

kavaruka 1y ago

The "perception of speed" argument reminded me of when I was asked to add spinners and animations to a web app I was building, because without them the UI would have felt too fast and fake.

croisillon 1y ago

oh the policing of blog titles now, can't wait for an AI to neutralize any post that would otherwise stand out unfairly on HN's first page

lagniappe 1y ago

Frontend design is looking more and more like a jobs program at worst, and at best cost allocation justification. I already foresee a lot of people jumping on me for this, so do your worst, nerds.

luqtas 1y ago
> Frontend design ... UI frontend design* maybe they never tried a TUI
- lagniappe 1y ago
  TUI is the superior choice.

ryanisnan 1y ago

Am I the only one who dislikes off-angle animations?

zhainya 1y ago
No, you're not.

outlore 1y ago

One thought about this section: > To give you an example, a faster-spinning spinner makes the app seem to load faster, even though the load time is the same. This improves perceived performance. Perhaps due to poor design by companies that abuse the fast loading spinner when, in fact, nothing is happening, I instinctively trusted the slower spinner more.

hatthew 1y ago
The only thing that I trust is loading bars that make nonlinear progress, clearly indicating that there's specific steps and/or measurable progress happening.
sprobertson 1y ago
my first instinct was "the slow one is struggling so it must be doing some heavy work"

stack_framer 1y ago

Here's a subtle problem: An animation that looks "delightful" on the screens you have, might look pretty bad on a screen you don't have. For example, the author's animation for scaling a button looks fine on my M1 MacBook Pro, but jittery and sluggish on the crappy IBM ThinkVision monitor attached to my MacBook. See for yourself: MacBook: https://drive.google.com/file/d/1UjJnxobPlBh_nv18Ych0XHwHEMwE6JnR/view?usp=sharing https://drive.google.com/file/d/1UjJnxobPlBh_nv18Ych0XHwHEMw... Crappy Monitor: https://drive.google.com/file/d/1jtwJKIFvteLOWD1Pzj1mTZjQwVXuQQhK/view?usp=sharing https://drive.google.com/file/d/1jtwJKIFvteLOWD1Pzj1mTZjQwVX...

esafak 1y ago
Are you using your IBM at its native resolution?
- Jaxan 1y ago
  Does it matter? Some users will perceive it this way (or better or worse).
  - esafak 1y ago
    It matters if you want to attribute the problem to the correct source.

modeless 1y ago

Android has really failed at this. Android apps are full of animations that serve no purpose or are even misleading, and slow down the experience. It's cargo cult copying from iOS. And the animations are janky, too. Luckily Android has a developer option to double the speed of animations system-wide. It's the first thing I turn on every time I get a new phone. I find that double speed is about right. Designers tend to make every animation at least half as fast as it should be, to make sure you notice their effort.

cosmic_cheese 1y ago
One that gets me routinely is Android's two-stage quick control/notification drawer, which is further complicated by gesture-expandable notifications. It feels like a poorly thought out bodge to fit everything into a single screen. It’s annoying to me even as a software developer and must be terribly confusing to someone not well versed in the arcane incantations of mobile operating systems.
- const_cast 1y ago
  The two-swipe controls are truly evil and I can't believe it hasn't been fixed yet. The first screen shows you next to nothing if you have no notifications, which I never do. Its a lot of work to get to quick control. The 4 they let you see on the first swipe is just not enough. But wait, there's more! Even after the second swipe you have to swipe back and forth to get to all the controls. But wait, there's more! In landscape mode the interface goes from difficult to downright infuriating.
- modeless 1y ago
  Those interactions are kind of annoying but not because of animations.
  - cosmic_cheese 1y ago
    I would say that the interaction is enabled by the animation. Without the animation it would be even more nonsensical than it already is and probably wouldn’t have been implemented.

phkahler 1y ago

>> This animation explains how Product Intelligence (Linear’s feature) works. We could have used a static asset, but the animated version helps the user understand what this feature does, straight in the initial viewport of the page. That might be the designers intent, but that's not what it does for me at all. First, the animation shown is on some weird 3D angle which is not part of any sane UI. Why is that? Not to convey anything about the actual experience of the app shown. That 3d look certainly does not "help the user understand what this feature does" The fade-in of the animation seems to draw me in to that area of the page which I assume is the intent. The 3D perspective helps me understand that the text in that box is not part of the page I'm reading, but a view of something else - their product. But it doesn't really help me to understand the product.

dclowd9901 1y ago

> Another purposeful animation is this subtle scale down effect when pressing a button. It’s a small thing, but it helps the interface feel more alive and responsive. If you haven't watched the Half Life documentary, I can't recommend it enough. In it Gabe Newell talks about the way he wanted the game to be different from games that came before it in that you could interact with things around you so you felt like you were actually in with and interacting with this world. He then related it to a psychological concept (maybe associated with self realization or external validation) and how as humans we crave the kind of physical objective feedback as recognition of our existence and how important and valuable that is. Really a neat idea and whether or not the science is sound, there is something immensely satisfying about interacting with virtual objects and having them respond in a physical manner that replicates physical reality.

ivanjermakov 1y ago

I have a problem with animation every time it induces latency. It's okay to animate some action that would take that much time anyway, but waiting for purely cosmetic animation to finish feels sluggish and not enjoyable.

layer8 1y ago
Yes, animations are fine for things like progress bars, where they visualize something happening without interfering with user actions. But otherwise, animations should be avoided, or limited to something like 100ms.

OvbiousError 1y ago

The one that bites me daily is in keeper. The web UI opens with icons collapsed, expanding after ?500ms?, right about when I want to click on a category to expand it, thus collapsing it again.

ratmeadow 1y ago

One thing that instantly ruins my day is animation where the element state is inconsistent during the animation. For example - I think it's on Windows where I keep running into this - on notification popups from some apps, you can't click "X" to close until sufficient time has passed after the popup animation. If you try to close it in that time, it instead acts as if you clicked the notification to open it. Super annoying. Another, on Mac, when switching desktops, sometimes an app will show on the screen briefly before flashing to another app. The animation is slow enough that it often tricks me into thinking it's ok to do stuff and then nope the app changes. Even worse, I think it occurs randomly. Note to designers: if you do choose to include an animation, it better be the most rock solid implementation ever or I will immediately think you're a twat and your app is a buggy pile of crap.

grokx 1y ago

If only UX/UI people spent their time optimizing their code rather than polishing their animations. Sorry for this rant, but hell, the web, the apps, everything is so sloooow and bloated. Make it instant! I just want to do my things, not to wait for drawings to draw!

hollowturtle 1y ago

While animations in general may add juice they can also hide better ux, like the feedback button, it's one more click(actually two as it seems not to automatically focus on the textarea once opened) to send feedback. But the more years come by the more it looks being a choice to not have a great ux, in the case of the feedback button one might want to be sure the user intention is to send some

mrob 1y ago

UI animations actually do have one valid use: clarifying UI state changes to third parties. When you're the only person using the computer, UI animations are pure time-wasting anti-features. You obviously know how the UI state changed because you're the one who requested the change. If the UI state changed without your explicit request, that's a bug that needs fixing. But somebody viewing your screen remotely can't see which keys you're pressing, and they don't know what you intend to click on before you've actually clicked it, so to them UI state changes can be surprising. Animations can help them follow what's happening. Of course, animations should be disabled by default, because most computer use is not performed for an audience, but having the option to enable them is occasionally useful.

bobbylarrybobby 1y ago
> You obviously know how the UI state changed because you're the one who requested the change. We must be using different devices because mine often fail to register my intent and in that case the failure to animate is often the only signal I have (that doesn't take more than a few seconds to register)
- mrob 1y ago
  I use keyboard and mouse. Unlike touchscreens, these always work reliably. And if you're using animations as indications of correctly functioning hardware, why not just use useful work as the indication instead?
  - bobbylarrybobby 1y ago
    Useful work takes longer to do than the animation that indicates the work has been queued.
    - mrob 1y ago
      None of the animations described in the article are of this type. Opening a text input area or changing desktop should be instant on all modern hardware. If you genuinely have something that can't be accomplished within one frame it's acceptable to display a progress bar, but I don't consider progress bars to be a "UI animations".

calrain 1y ago

I'm a big believer that animations need to validate what you already know, they aren't the information itself. This means, if you turned animations off you would still work as fast and understand the flow the same as if animations were enabled. For me, the purpose of animations is to soften the UX journey, and to confirm what I already knew, by giving me small indications that yes, the UI is truly in the state I expect it to be. Such as fast highlighting of on hover items, so I don't have to correlate the mouse position to the control. I love that example of tool tip popups taking 0ms once you have popped up one, that is a clear signal that the UX understands you are trying to learn more about the controls you're hovering over. That's a perfect representation of how animations signal understanding of your UX journey.

MathMonkeyMan 1y ago

Thoughtful article. I read the introduction several times, picking it apart in my head. > When done right, animations make an interface feel predictable, [...] Predictable how? If you anticipate the animation, then you will have predicted it. But you also could anticipate the lack of an animation, and you will have predicated that. > When done right, animations make an interface feel [...] faster, Do they make the interface feel faster because no transition ever occurs in less time than the animation? Or is it that literal motion on the screen tricks us into thinking something is "going fast"? A nearly instantaneous, unanimated change in view must feel faster than an animation, no? > When done right, animations make an interface [...] more enjoyable to use. [...] This is true sometimes. It's particularly true when you're interacting with controls that have a "real physical world" analogy, like buttons, sliders, and page flips. On the other hand, if I click a button and a bunch of sparkles happen, that's not enjoyable to me. > When done right, animations [...] help you and your product stand out. If your product has animations and competing products do not, then yours stands out insofar that it has animations. > But they can also do the opposite. [...] Correct! > So how do you know when and how to animate to improve the experience? > Step one is making sure your animations have a purpose. Or... don't use animations unless the app involves animation. Or do, there's nothing I can do about it.

vm012 1y ago

I think motion blur could enhance UI animations by making fast transitions feel smoother, even with the low number of frames the animation has to be rendered with. I wonder if this idea has been explored in mainstream UI frameworks, and if not, why - is it too computationally expensive, technically infeasible, or just a bad idea.

sigseg1v 1y ago

Whoever designed the keyboard animation for Walmart self checkouts should take note. Every time you want to type in a product by name, you must endure a 2 second slide-in of the keyboard before you can start typing on it. It's so slow that I feel that I could have completed the search and started on the next item before it's even done animating, if there was a way to disable it. I sincerely hope employees don't have to use systems like this all day that reduce their throughout by more than half.

malux85 1y ago
I remember early in my career I was working for a consultancy and the user was complaining that the search results were slow, our tech manager just LOVED this problem, in his mind he would get to go down the search engine rabbit hole - analyse the search query, maybe theres a more advanced indexing algorithm that he could find to speed it up, this could take weeks of benchmarking and comparing and prototyping and everything, what a wonderful rabbit-hole where the first prize is a happy client because of his algorithmic genius! But me, being a bit more pragmatic, instantly benchmarked it, saw the search backend was responding quickly and it was just the animating menu that showed the results that was slow to animate. I changed 1.6 second animation to a 0.2 second animation, a change that look maybe 5 minutes to benchmark, find the code, and then change it, The tech manager refused to accept that the solution was that simple, and only confonted with irrefutable evidence (direct client feedback AND benchmarks that showed that the search backend was already fast) that he accepted.

chromanoid 1y ago

At least on desktop screens I think chronostasis might make animations seem more sluggish depending on where you looked before. I wonder if this leads experienced users of the app in question to not like any animations, because they know click paths better and place their focus in an anticipatory manner. Maybe one could measure click speed and reduce animation times based on that.

btbuildem 1y ago

Instead of trying to decide one animation speed for all things, the UI should be adaptive. The author stumbles onto this and walks right past it: whatever raycast is, they use it a lot, and find the animation (any animation) annoying. The UI should learn the user's patterns: when they're new and unfamiliar, the animations are slower and more deliberate, instructional (initially including more information re: expected workflow). As the user "walks" a certain path again and again, every time more smoothly and confidently, the suggestions / assists / animations diminish, shorten, and disappear. For a pro user with muscle memory and memorized keystroke sequences, the UI does its best to just get out of the way.

pmontra 1y ago

> How often users will see an animation is a key factor in deciding whether to animate or not. That's the reason why I removed every animation in GNOME on my desktop. I also removed anything that morphs the screen into something else. For example, I don't use the activities screen. I jump to the other virtual desktops with hotkeys.

wg002 1y ago

[dead]

AfterHIA 1y ago

Ethics and design guy here-- I think this is one of the most, "purposeful" articles I've seen in forever if you don't mind the pun. (I'm from Utah). I'm asking myself the question of fundamentally why UI designers are making decisions to include the, "tasteful delay" and its ultimately as the article points out prioritizing, "delightful presentations" for, "tools that ultimately serve the users purposes most effectively." I don't think I have to preach to a converted choir here about that but I'm reminded of Thorstein Veblen's famous book and I wonder; at a deeper level isn't misanthropic to reduce software to, "tools?" Lumiere created motion pictures and we told stories. We invented the interactive motion picture and we jerry-rigged into an automated office suite. Outside of the very sexy Alan Kay-Dan Ingalls fringe computer interfaces of all stripes descended from that very idiosyncratic paradigm. I wonder what crazy shit Ted Nelson is building with Claude right now. Sweet fuck. https://moglen.law.columbia.edu/LCS/theoryleisureclass.pdf https://moglen.law.columbia.edu/LCS/theoryleisureclass.pdf

eviks 1y ago

> But they can also do the opposite. They can make an interface feel unpredictable, slow, and annoying. Indeed, just like the immediately following example, which slows down page scrolling, breaking predictability and consistency of one of the most frequently used and fundamental page operations And its purpose is, of course, only fulfilled in the imagination of the designer > This animation explains how Product Intelligence (Linear’s feature) works. We could have used a static asset, but the animated version helps the user understand what this feature does, straight in the initial viewport of the page. It doesn't really do that: first, it's happening partially out of focus because I read top to bottom, so I'm still reading your title and leading paragraph, or did you want me to be distracted and skip the text? So I see the same thing on first focus: static image. And I can't rewind it to watch again since I missed it the first time. Then it has a very weird angle which makes all the text harder to read, my guess is to help see the 3D nature of the animation when to show the arrival of the product as a separate overlay? So this would likely not exist in a static image and be an improvement.

Jotalea 1y ago

I personally LOVE when the software I use has smooth animations. Telegram, Hyprland, GNOME, iOS, those are some examples of it. but apparently, I am the only person that cares about animations at all. I made a mockup of an app with quite a lot of animations, and asked random people what did they think about it. not a single person mentioned animations.

cainxinth 1y ago

If I could make one plea to people who program these systems, please take all necessary steps to prevent the following from occurring: I find the button I need to press. I press it. The button animates to show it recognizes my action, but nothing else happens. I press it again and it works normally. I really hate that.