treehouse/content/design/animations.tree

%% title = "animations & perception of sluggishness"

% id = "01JEPBVCJXC6NBJZ90JBHNYKGR"
- there's a thing I always do with my computing devices: I make the animations faster than default.

    % id = "01JEPBVCJXHYN9XG5A4NJBAN7Y"
    - 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.

    % id = "01JEPBVCJXMC2Q0ZDE64YT991T"
    + on GNOME, you can do that by installing [Just Perfection](https://extensions.gnome.org/extension/3843/just-perfection/). 

        % id = "01JEPBVCJXYWY1Q5372NBJREXD"
        - here's where in the config panel you can find the relevant setting, as of writing this:

        ![screenshot of the Just Perfection config window. the setting is in the tab Customize, called "Animation". I have mine set to "Fast".][pic:01JEP22ZMYPEKG4XEHM1S9JVN0]

        % id = "01JEPBVCJXG0NK1HMV35R6FSKX"
        - there's actually a lot more this extension offers, but I'm not gonna get into that right now.

    % id = "01JEPBXKRXZGNCVZVWZJS8V24J"
    - 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.

% id = "01JEPBVCJXXGB6TRZ5CWTVR10H"
- 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.

    % id = "01JEPBVCJXDMFC63Y5PETSP8M5"
    + 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.

        % id = "01JEPBVCJX15EQ226Y52PWR60A"
        - 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.

    % id = "01JEPBVCJXBS2Z74TM9HABQB0S"
    - so when I have things that take a lot of time to pop up, [I get _mad_](https://www.youtube.com/watch?v=zBoKUMcV8E8){.secret title="I'm a CD player."}.
    because I can most definitely click around faster than your darn animations.

        % id = "01JEPBVCJX5TGKKCYMZPTTWTAX"
        - I was curious about how fast I can _actually_ click around, and found [a website](https://humanbenchmark.com/) that seems to test this stuff and aggregates results for public viewing.

            % id = "01JEPBVCJXYQVZKKEWS6FZ11VT"
            - they have a [reaction time test](https://humanbenchmark.com/tests/reactiontime/), on which I scored 181ms.

            % id = "01JEPBVCJXM73225F7APYDJN9N"
            - and they also have an [aim trainer](https://humanbenchmark.com/tests/aim), on which I scored 364ms.

            % id = "01JEPBVCJXJ87A3KDJM4MK2JJ7"
            - 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.
            
                % id = "01JEPBVCJXJTZYE51PVYEDG0DV"
                - 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."

                % id = "01JEPBVCJXMZ1TA3WSA7YFJD5T"
                - 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.

        % id = "01JEPBVCJXJ4N584G1GVZEZSVS"
        - 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.

% id = "01JEPBVCJXYBP8GGPR3J3NPX28"
- let's consider the place where I'm annoyed by animations the most: _context menus and hamburger menus_.

    % id = "01JEPBVCJXRV79YY4ATRWXA3NX"
    - 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.

        % id = "01JEPBVCJX1EN50GHY1DJ3DSC9"
        - most importantly, your click target _shifts_ while the animation is playing out, so it's hard to visually judge where your cursor should land.

        % id = "01JEPBVCJXTNWKSAZDG2JT8R0A"
        - 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.)

    % id = "01JEPBVCJXZHCJMYVV0CE0G1AC"
    - 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.

    % id = "01JEPBVCJXYBJ8THFE67MH84JJ"
    + 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.

        % id = "01JEPBVCJXPAFX07YCDQ5J3SPY"
        - 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.

            % id = "01JEPBVCJXYQGWQ9HRBTEP4DGJ"
            - [macOS apparently does this too.](https://blog.xoria.org/macos-tips/#assorted-tips)

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

    % id = "01JEPBVCJX5E0HXPGEB2TQNPVC"
    - libadwaita does not have animations for hamburger menus (which GNOME uses quite pervasively), and _thank goodness for that_.

% id = "01JEPBVCJX1M4Q738AGT1JMK2G"
- 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.

    % id = "01JEPBVCJX3HJ3PHF0G3344PPS"
    - 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.

        % id = "01JEPBVCJXPNFV2PB292G1XXVP"
        - 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.

% id = "01JEPC3S1C73S4VD6Z1ZFF425F"
- ...it's not like my rambling's gonna make Google Calendar any less annoying to use, though.