animations & perception of sluggishness · riki's house

hey! looks like you have JavaScript disabled.
I respect that decision, but you may find the experience of browsing the treehouse… not great.
for example, links to branches may not work properly. I cannot do anything about this; it's due to how the <details> element works.
(a <details> will not expand itself automatically to reveal the linked element to you.)
I did my best to at least keep the site readable in this state, but you can only do so much with plain HTML and CSS.

Pinky promise this website does not contain any malicious code such as trackers or cryptocurrency miners.
if you don't believe me, you're free to inspect the source yourself! all the scripts are written lovingly in vanilla JS (not minified!) by yours truly ❤️

and if this box is annoying, feel free to block it with uBlock Origin or something. I have no way of remembering you closed it, and don't wanna add a database to this website. simplicity rules!

there’s a thing I always do with my computing devices: I make the animations faster than default.
2024-12-09
- on Android, you can do that by going to the Developer Settings (Settings → System.) I have my Transition animation, Window animation, and Animator duration scales set to .5x.
  2024-12-09
- on GNOME, you can do that by installing Just Perfection.
  2024-12-09
  - here’s where in the config panel you can find the relevant setting, as of writing this:
    
    2024-12-09
  - there’s actually a lot more this extension offers, but I’m not gonna get into that right now.
    2024-12-09
- and this post was prompted by me turning off animations in Windows today after I got pissed off by the taskbar context menu taking too long to open up.
  2024-12-09
I’m a pretty fast computer user. I can move my mouse around quite quickly, and the quicker something appears in my view, the better I can navigate the UI.
2024-12-09
- unlike a lot of power users, I’m not really keyboard-heavy; I know my way around keyboard shortcuts, but I do a lot of UI interactions using the mouse anyways.
  2024-12-09
  - it’s entirely possible that’s due to the most annoying of these—business software—not really supporting keyboard shortcuts quite well, or the keyboard shortcuts being really obscure to find.
    2024-12-09
- so when I have things that take a lot of time to pop up, I get mad. because I can most definitely click around faster than your darn animations.
  2024-12-09
  - I was curious about how fast I can actually click around, and found a website that seems to test this stuff and aggregates results for public viewing.
    2024-12-09
    they have a reaction time test, on which I scored 181ms.
    2024-12-09
    and they also have an aim trainer, on which I scored 364ms.
    2024-12-09
    looking at the statistics they managed to collect, I score pretty well in terms of reaction time, and pretty average in terms of aiming speed.
    2024-12-09
    take these with a grain of salt though, because they do not correlate these stats with anything (e.g. demographics), and the aim trainer is apparently “new.”
    2024-12-09
    for the record, as of doing these tests I’m a 20 year old white male that has been using computers for practically his entire life. I did these tests on GNOME with very fast monitors (160Hz) and a wireless gaming mouse. bet I’d do a bit worse at work, where my monitors are 60Hz, but probably not in a significant way.
    2024-12-09
  - that said, I don’t think either of these tests measure real world use cases very accurately, because they operate on random positions and timings. in real life, the position and timing of UI elements is a lot more predictable.
    2024-12-09
let’s consider the place where I’m annoyed by animations the most: context menus and hamburger menus.
2024-12-09
- with these, designers sometimes put in a slide-in animation to make the experience feel a little bit more polished. I don’t think that’s very good UX design.
  2024-12-09
  - most importantly, your click target shifts while the animation is playing out, so it’s hard to visually judge where your cursor should land.
    2024-12-09
  - on top of this, moving click targets cannot be interacted with until they stop moving (i.e. there’s no logical solution to this problem, nor does any software I know of solve it.)
    2024-12-09
- if you’re gonna play a slide-in animation that ends before I move my mouse to the right spot, you’re gonna piss me off.
  2024-12-09
- if you want to do a context-menu animation, here’s an example of one I consider good: Chrome fades in the context menu in a very subtle way, to make it feel just a bit more polished, but without moving the click target. you can in fact select elements while the animation is playing out.
  2024-12-09
  - another cool thing with context menus (on Linux at least) is that they are open on the right mouse button being pressed, not released. this allows you to press the mouse button, hover over the option you’re interested in, and release to activate the option immediately.
    2024-12-09
    macOS apparently does this too.
    
    Menus appear on mouse-down so you can select menu items by depressing the right mouse button, sweeping down through the menu to your desired menu item, then releasing the mouse button.
    
    2024-12-09
- libadwaita does not have animations for hamburger menus (which GNOME uses quite pervasively), and thank goodness for that.
  2024-12-09
with all that said, I think the golden formula for animations is to optimise for the lowest end of users’ mouse travel time rather than raw reaction times.
2024-12-09
- if an animation takes longer to finish playing out than it takes for you to move your mouse over to the nearest click target that appears as part of the animation, you have failed.
  2024-12-09
  - best if the animation does not result in click targets moving, and if it’s easy to predict where the click target will be once you click.
    2024-12-09
…it’s not like my rambling’s gonna make Google Calendar any less annoying to use, though.
2024-12-09