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.
If (and that’s a big if) animation is used in moderation only when it actually communicates something and isn’t an active impedence (as demonstrated in the linked post), I think it has a significant effect for users. It’s just not the effect that many might expect.
Meaningful, unintrusive animations are one of the myriad puzzle pieces that come together to form a positive impression. They’re a sizeable chunk of that last 20% that separates “good” and “excellent” in users’ minds. They’re not strictly necessary, but between two equally good competitors they’ll help one pull ahead of the other, because users come away with a stronger impression of “solidness”. It’s not unlike how people tend to consider heft and resistance to flexing as markers of higher quality in physical products.
The problem is that since a decade or so ago, UI design as a whole has veered heavily in the direction of vibes, slideshow wow factor, and “branding value” (I felt a pang of nausea just writing that) and away from the volumes of well-researched best practices, and regard for good use of animation has been lost along with it. We’re well overdue for a correction that pushes UI design back in the direction of practical usability and away from Dribbble appeal.
This really is what UI polish of any kind is all about. You feel like you can trust it more, it feels more robust and reliable. Animation and gestures are a part of this, but it’s only the last mile after everything already feels robust.
Before you make it more glitzy you have to make it less glitchy.
I am copying this so that I can use it later when the marketing comes in and suggests we devote more dev time to yet another landing page renewal when we are at capacity just handling Bug tickets
That is how "our army of well trained monkeys" can get in to fix the "oops. something went wrong" problem.
#include <rant_about_paternizing_users.h>
woah! you are starting from the point an individual preference is any metric to gneral public preferences and understanding... there's not a SINGLE study cited on the blog!
Isn't this just very basic optical feedback to indicate that a component is clickable at all and that the click was registered?
In a nutshell: put two different frames in sequence, and you have an animation.
Animation is when more than one consecutive step happens on it’s own. I’d argue that even tooltips appearing and disappearing after a timeout doesn’t constitute an animation, because the disappearance isn’t immediately consecutive with the appearance, and (maybe more importantly) the intervening state of the tooltip being shown is meaningful to the user as a distinct state.
It’s a pretty basic animation.
Appreciating delight (for it's own sake) in software design I'd consider a core trait of (old-school?) Apple fans. E.g., lamenting the decline of whimsy in the post-Jobs era.
I don't know of a canonical piece that summarizes this idea, but it's referenced a bit in this short piece https://daringfireball.net/linked/2024/12/05/festivitas
I think there's truth to it being relatively niche, appreciating delight that is, but it's certainly not confined just to designers. E.g., like I'm saying here, a core trait of Apple fans is appreciating these kinds of details.
I absolutely do believe that software can be delightful. Linear comes to mind as an example - there are lots of little nuances to their interactions and it just feels so good to use.
For B2B (especially enterprise B2B), your software is just a tool your customers' employees need for their day jobs. Fancy animations, multi-colored gradients (because gradients mean "AI" now, right), and other gaudy crap does not make it easier for anyone to do their job. It's just noise -- constantly distracting users who are just trying to navigate through dense, text-heavy dashboards.
If you want to design "pretty" and "delightful" experiences, then it doesn't make much sense to join a company that revolves around CRM/ERP workflows. Work for a company whose value is directly tied to users' warm and fuzzy feelings.
I've had the same feeling with more utilitarian interfaces, but it's pretty rare. I don't know why. I expect it's partly because we have different expectations for programs than we do for games, partly because the context and the interactions are pretty different, and partly because most organizations do not have the will or the ability to make interfaces that satisfying. (After all, it's the worst sort of thing for most organizations: something that requires taste, time and experience and cannot be managed, measured or executed by committee.)
I might delight in seeing an animation the first three times, after that I want it off. Don't add extra latency to my process.
I think this is the only justified use of animation in UI, however I wasn't satisfied with the dilemma of increasing perceived transition while increasing perceived UI latency.
I found it's possible to get the best of both for event triggered state changes i.e clicking on stuff, by sticking to ease-out based transitions, where the start of the transition is instant and the end decelerates.
This makes it feel just as snappy as no animation, while still helping to communicate a transition, because we are more sensitive to the latency of the start of the transition when it's an event - since we are anticipating a reaction, which is satisfied as soon as it starts to react.
I disagree with this, as much as I want it to be true. Just ask an Apple/iPhone user to use an Android phone for a week and then ask them how the experience was, they'll tell you something felt off or janky about it, and a lot of it comes down to really well designed animations on iOS for everything you interact with.
Regular consumers may not use the word delight to describe the user experience, but they do notice it when faced with what is (to them) an inferior experience.
To the point people regularly ask for a stronger setting to straight disable animations and not just reduce them.
So now I just have the setting to be super fast, but not disabled. Works perfectly well.
This experience has stopped being the case for quite some time now. Sure, a 60 USD low-end device is no ground for proper comparison with a 1000 dollar one, but androids in a similar category absolutely have similar animations and "niceties". I have actually recently moved from iOS to Android, and I do prefer the latter's visual UX. I will even go as far and say that there are less UI bugs.
(As for "smoothness", sure, apple's SoC game is far above any android manufacturer's, which helps a lot)
If you go in and read TFA you'll see that's one of the main points being made.
Nerdsnipe perpetuated by other engineers/designers admiring it on Twitter. Nothing wrong with that, just shouldn’t pretend that most users care.
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.
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.
That one falls into the category of UX felony as far as I'm concerned. It's not just delay or confusion, but actively misrepresenting a value.
apple have completely lost the plot, and organisations of that size are incapable of producing good user experience w/o a de facto dictatorship person who has an idea what here doing (a la steve jobs)
this is worsened by the the fact that even on hn people have no idea what's they're doing in terms of design most of the time, because they fail to realise that the average person isn't like a fan of their product lol, they just see it as a utility that needs to perform a bare minimum of functions reliably, with a consistent ui, like thats literally it...
every time you want to change something, ask yourself, if I show this to my grandma, and unless her reaction is "omg yes this is a million times better, pls do that" DO NOT CHANGE ANYTHING
I dislike smooth scroll (and many other UI animations), but there are other things that might help, such as:
- Xaw scroll bars; click to scroll so that the clicked position is now at the top of the screen.
- Line numbers.
- Marker for bottom and top of previous scroll position, if what was previously on the screen is still visible.
OTOH this article is basically downstream of Apple’s interface design philosophy.
Anything longer than that I consider too slow.
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.
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.
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.
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.
The android back action is universally supported. Its literally a button, still, to this day, persistent on your screen by the OS.
Also, the "swipe back" action on iOS is more or less fake. Its applied so inconsistently it might as well not exist.
In my head "back" and "undo" are usually the same thing. iOS has a good interface, but this is one glaring blind spot they missed to Android and browsers. It actually makes iOS quiet frustrating to use.
Also, barely related: but the "shaking your device is like shaking your head no" thing is the stupidest thing I've ever heard in my life. I'm sure Apple thinks its very intuitive and good design, but it's really, really not. That's one of the least discoverable things I've ever heard. Apple please don't do that.
My Android devices all have the gesture bar enabled because the old style button bar is an eyesore and easy to trigger accidentally (Android’s swiping from the right to go back is also too easy to trigger as a right-handed person, but that’s another story).
My metal model for the undo/back split actually follows desktop browsers. Cmd-Z isn’t going to undo navigation while Cmd-[ will, and so the two are separate and distinct.
There is no problem with the button changing states as long as it only happens after the current document state was successfully saved and becomes active again when you make changes to the document. That way the button doesn't represent the outcome of some action but the sate of the document - unsaved changes = button enabled, no unsaved changes = button disabled.
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.
And, always provide an accessibility option to turn off all animations.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
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
MacBook: https://drive.google.com/file/d/1UjJnxobPlBh_nv18Ych0XHwHEMw...
Crappy Monitor: https://drive.google.com/file/d/1jtwJKIFvteLOWD1Pzj1mTZjQwVX...
> 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.
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.
Designers either don't use their own products, or have no taste (possibly both).