I'm a sucker for good little microinteractions. The author's checkbox may not be one of those, as it seems a bit overdone, but I'd have to try it to be sure. It's easy to go too far.
To each their own. I find the hover states on the jam3 site unintuitive, like the clickable area is moving out from under me, forcing me to track it before perfoming the actual click. Reminds me of a flash ad where the target moves as your mouse gets closer.
The hamburglar icon is a perfect example - the whimsey happens after the action is performed (arguably the menu should appear immediately instead of pop out, but it's pretty quick) instead of delaying the action until the animation completes.
The animation is highly distracting. It draws the attention to the button instead of to the menu the user now wants to use. The animation creates a “wow” effect on first use, but that’s exactly the kind of visual affordance you don’t want on a UI element for routine use.
It’s pretty slow. The movement in isn’t too slow (though it’d be better faster), but I find the little bounce at the end to be slow and disconcerting (that’s not the way a physical spring would go). I’d be inclined to almost double the speed, halve the bounce and speed it up even more.
More interesting is something exposed in the dev tools. I managed to die.
The red button shows how important depth is for UI controls. There would never be any doubt that it’s an interactive element.
I wish the flat design trend we’re only now starting to drag ourselves out of only extended to materials. I’ve no problem with getting rid of the OS X Aqua/Windows Aero-style gloss that was everywhere and starting to look dated, but we lost a ton of usability by making interactive elements indistinguishable from labels.
The red button is also lacking some really subtle queues if the press is cancelled. On mobile, touch the button and drag-scroll, and the button should not remain down. On desktop, ctrl-click and the button should not press, or click down on your mouse and press [ESC], and the button should cancel (I think - I am not on my desktop).
Most controls have a bunch of really subtle and unobvious platform dependant behaviour. Often control replacements/skins lose subtle behaviours.
In my opinion the timing of a very quick tap on the button feels off on my iPad - although I’m unsure if that could be improved with CSS or JavaScript.
Very nice example of texture animation driven by css transitions. I'm a game dev. After Unity began to support css transitions, I found myself doing more and more flipbook stuff to really give existing UI elements that extra punch. A recent example: https://vimeo.com/718225603
The citymapper hamburger icon definitely has a humorous element too!
I'm not sure I agree with the quote though. It so happens that the websites I linked all had an element of playfulness, but I don't think that's required.
IMO, there's nothing playful or "humorous" about this animation. I would describe it instead as "elegant"—it gives the site an extra level of sophistication.
It's really great that unlike Jam3, your site and the first example still work perfectly fine without javascript enabled! It's amazing how many people will spend a lot of time on little details and animations while neglecting to make sure the site degrades gracefully and is still useful without a bunch of remotely hosted JS.
I actually spent a significant amount of time making my site work without Javascript. My noscript.css is only ten lines, but it adds an extra pathway into the code. I've broken several times while making other changes, and it took a while to fix. It's easy to make motherfuckingwebsite.com work without Javascript, but start adding fanciness and it becomes difficult quickly.
I do it anyway because it's my personal site, and so I set out with certain rules for myself. In addition to working without Javascript in modern browsers, my site also supports IE 11 and Safari 6 (when Javascript is enabled). There is no build system, and all the code is handwritten (with a handful of very tiny third-party libraries like Waypoints).
Philosophically, I believe this is the right way to make a website. Realistically, I would never do any of it on a professional project. No one ever actually sees it.
(I'd like to make a distinction between support for unusually-configured software and support for weak hardware. I think it's broadly unethical to ignore performance because you're lucky enough to afford a fast computer. Manufacturing chips is bad for the planet, and the new ones might as well be no faster than the old ones if the code is going to be slower.)
Some combination of taps on the green one next to it (might be a double tap on the green) and taps on the hamburger break the hamburger in iOS. I guess that the price for having a fun button.
You might be interested in checking out the playdate[0]. It's a handheld game console that's absolutely chock full of these sorts of things and it's absolutely delightful.
For example to unlock it you need to press the unlock button twice. If you press it once one eye opens, if you press it twice both eyes open and the thing unlocks. If you press once and wait a bit a thought bubble pops up telling you you need to press it twice.
I don’t know why, but I wish this rotated clockwise for both sun → moon and moon → sun. The fact that it’s a wheel, but switches direction, is deeply unsatisfying to me for some reason.
One more I initially resisted sharing because I worked on it: https://2019-annual-report.fnih.org/ The hover states on "Understanding", "Breakthroughs", "Solutions".
There's no framework involved by the way, it's just some CSS transforms. :)
Wow, the hover states in the second link are incredible. They feel "just right".
> I also happen to be quite proud of the hover states on my own site
Those are nice as well, though I'm not sure why the button animation is so delayed. It felt like I missed the button with the cursor until it suddenly started wiggling.
This might be something I need to rethink—the entire card is a link, not just the tiny button. I don't expect most users to hover for long enough to see the wiggle; it's meant to say: "alright, you've been thinking about this for a while now, come on and click already."
The animations on things like this can be cute and fun the first time, but man they can get annoying if they're constant and can't be skipped. Hearthstone is an example of this; there's tons of cute animations for the various cards, but they can take way too long.
Hiding "no animations" for power users under accessibility is a great way to go.
Once a day for a few things that you are tracking (and really want to improve) doesn't seem to fall into my "constant" definition. Hearthstone would have dozens (hundreds?) of those animations on every single game you play. Here, it's three or four times a day? For things that you really feel satisfied to accomplish?
I liked the end result a lot. The whole animation seems very appropriate in this case to me. The rant that I see in your comment (and every other comment here by the time I am writing this) seems very out of place. Everyone is complaining about things that are not what this designer did.
I'm doing online shopping once a week. At some point they added a 3 second animation of "boost" in points to some products. I see it once a week and I hate it with passion. It slows down what I'm trying to do, even if I achieve something I maybe even could care about... but I hate the interference so much I refuse to check what the "boosting" is even about.
The point is - it doesn't matter how infrequent it is. If you don't allow disabling it, it's going to piss someone off.
If a service uses any amount of animation, then i'm instantly searching for an alternative. Excessive animation like this and i'm lost customer right away.
Depends on how frequently you're interacting with this widget. The annoyance of animations comes from the integral of all time you have to spend watching them; if they're in the critical path of a workflow that you do multiple times a day they get very annoying very quickly.
I've only glanced at this app, but the goal seems to be forming a habit of doing things once a day. If you're only interacting once every 24 hours, I'd take a 1second animation with some charm over a static checkbox.
Yes please. Let me turn that off. It is now becoming harder and harder to turn all those time wasting animations everywhere
Android for example has clearly a bunch of bugs where some stupid slow animations cannot be tured off. Yes even with turning off animations in accessibility and via the developper options.
On iOS, it doesn't seem to be possible to turn any of them off. You can merely "reduce motion". But it still wastes up to second in the worst case.
What about gtk3 or 4. Now there is some crap animation everywhere in gtk applications and I don't know how to turn that off.
Computers are so fast. Most software is already bad enough that it manages to slow down our beautiful hardware. Let's not make it even slower with animations.
Sure have optional animations if that helps newcomers understand better the flow of your application. But make it optional please. Pretty please?
> Android for example has clearly a bunch of bugs where some stupid slow animations cannot be tured off. Yes even with turning off animations in accessibility and via the developper options.
I recently found out about Android's animation disable feature and holy hell it made my phone feel so much more snappy and responsive to input. But as you mentioned there are too many bugs - one of the more annoying ones is that loading wheels (which I would prefer to keep because you have to wait anyway) are not animated. I'm tempted to use it anyway. Hopefully in the future Android will add some sort of categorization/prioritization for animations so things can be tweaked more.
I may be in the minority here but I am kind of annoyed with how "juicing" the interface/experience seems to be kind of bleeding over into general applications from the game development scene. It does make sense for games and some apps but in general I don't need animations and tweens attached to every button on my phone.
The key thing I think is you have to keep the user in control.
I have the same rant about excessive animation in the user interface, and on reflection it is not exactly the animation that is the problem, sure, it is the exasperating factor, but the underlying problem is that you have removed the users control in favor of the animation, however, that being said, keeping the user in control requires an interruptible animation system, which requires more moving part and is harder to get right... probably for the best to just leave off the animation entirely.
My impression is that Android implements animations by reducing the animation frames but not the frame per second rate.
So if an animation is a long rotation (like a loading indicator) it turns into a high frequency strobe light
(Most loading animations are replaced by a static image, but not all)
Hearthstone is such a catastrophe on this. There are multiple fun strategies that are literally rendered unviable because the animations slow you down too much and it's not possible to execute them well within the turn timer (for e.g. infinite pirates or brann in battlegrounds).
Actually I think they can stay fun indefinitely if they are fidgetable and to be fidgetable you can make those animations rendering and acting differently according to the user input.
Back in the day, the lock screen of the iPhones hand a physics based bounciness. When you slide the lock screen from the top it would slightly bounce at the bottom and if you accelerate the lock screen it would bounce more. I fidgeted with that all the time, I was sad when they removed that.
UIs become so boring, I hope and expect to get some skeuomorphism back. Our current devices are so capable that this time the skeuomorphic designs can be much more convincing.
Totally agree, I even think that adding all this is not making the product better but actually worse.
I agree that making actions feel more rewarding is great, so adding some sound and maybe a bit of more design to the check box is great. One of the things I enjoy the most about my mechanical keyboard is the click that each keystroke makes.
But going all the way to create a 3D animation, that now takes seconds to go from unchecked to checked actually feels like making a daily process more time consuming and annoying.
Starcraft did it better, everything responds 'instantly' or very quickly and persist clicking is rewarded with fun animations and pop culture voice lines. Hearthstone could take all your inputs first and queue up animations second.
Yes. I don't want to have to hold down a button just to check a box if it's something I need to do with any kind of regularity. Just give me a damn checkbox. If it's something big and rare, this cutesy stuff is fine.
I think the point of the app is that this is something big and rare. You're developing a daily habit, so you're pressing this once a day, which is pretty rare in the scheme of digital interactions.
There was a game called Battle Chess 3000 or something, on Windows 95. It had aliens and robots who would kill each other in funny ways when pieces were taken. The moves sometimes took 20 seconds or more to show. Fortunately, the developers included a "skip animations" option to move things along.
Just a matter of degree, which becomes obvious when you imagine the extreme: HS without any animations would be very unfun.
So the answer is somewhere in between and the optimal UX might only be achieved by adjusting for individual players, for example depending on their speed or for how they have played the game.
Slay the Spire, a deck building rogue like has very sparse animations and a "fast mode" which I enabled almost immediately. Then again, it's not a multiplayer game and has no loot, which may have influenced the decision in Hearthstone.
Agreed, for best user experience animations are generally capped at 500ms. Dealing with something like this checkbox where you interact with it more than once would kill the novelty real quick.
They do that to keep you playing longer. I wonder if OP would describe the loot opening dance in games like hearthstone and Overwatch as rewarding game feel, rather than an intentional time sink.
Remember, for a user centric app, the goal is for the user to use it AS LITTLE AS POSSIBLE. Not because it is frustrating to use but because it is efficient and you respect their time. Optimising for stickiness is user hostile.
It's pretty cool! As experiments I really love andy.works' work. I appreciate what he's trying to accomplish. And I think he's on to something with the idea. But the execution is always a little off to me.
I just don't find this checkbox all that satisfying. Why? The thing I find satisfying about checkboxes is the same as any switch – the click. On/off. It's snappy. I don't think about it. Click... click... click click!
So this grandiose check animation is taking something inherently snappy and prolonging it to its own defeat. Even the sound effect is like an ethereal chime or something, rather than a snap. The scale is super big for the actual space of the phone. The animation too long. I also don't like the angle of the 3D checkmark itself. It's not really oblique, not really at any sort of satisfying geometric angle? I can live with that though.
Anyway really cool work. Wish it were more satisfying.
I share exactly your sentiment. The snappy on/off is what makes the checkbox satisfying for me. The "ding" whenever you check an item off the list in Wunderlist comes to mind.
I've learned to design UX that "gets out of the way." I have written some pretty cool UI elements that I've ended up, not using.
Here's an example; It's a cool "popup prize-wheel spinner" for iOS, and I have tried using it a few times, but we always decide that it's too intrusive: https://github.com/RiftValleySoftware/RVS_Spinner
This post is everything that’s wrong with UX. Somewhere along the way they forgot about simplicity of implementation, mental models, repeat user experience, and most of all, stopped listening to what the user wanted and instead designed things in an ivory tower for award shows.
Aren’t those points exactly what the post and the award-winning app is about? Certainly the users’ needs are why this exists, and while not exactly simple to implement, implementation serves design serves user needs.
Only somewhat related to the article, but It's amazing to me how much audio + animation adds to the user experience for games, and even some apps.
Not a checkmark at all, but the way games like Smash Bros Ultimate makes pressing around menus sound totally exciting and satisfying. The sound, the lightning/sparks, and how it all rumbles slightly on press. Yes I know Smash has some UX issues, but overall the craftsmanship for simple things is amazing.
Someone had to design and prototype that, similar to the author of this article. I'm not sure this particular example is great tbh, but I am sure there's a lot of "pointless" exploration needs to happen before landing on something great.
As long as we're talking about the switch, I love the design of the actual switch OS. It's so minimalist and snappy, everything feels clicky and does what I expect. There's nothing extra added in just for the sake of it.
Holding down B to exit menus in SSBU is awful! But I actually like the interaction of entering menus that uses the same pattern. I think it’s because I don’t mind the anticipation of moving forward, but hate the drag of not being allowed to go back.
What do you mean "Not being allowed to go back"? You hold 'B' and it plays a sound and vibrates the controller to reinforce that something is happening. It's allowing you to go back while also preventing you from going back (and losing all your configuration) accidentally.
I think this is great. I'm going to take this in the spirit of the post and assume this is all for funsies and to be silly. But I think there are a couple of things missing from making this Most Satisfying:
* The sounds is not satisfying enough! It's too..."wahhhhhh" and not enough "ker-chunk!" like the writeup described. I think I get what he's going for, but it's not quite there. I want the same feeling I get when I flip a nice heavy switch. Some heft, some weight, some judder as it slams into place. I'm thinking of the feeling in the game Fez when you turn a wheel.
* The pattern of "hold and release to activate" is hard to get right and I still haven't seen it done well. Your animation must be nonlinear, because people are going to just tap. That's so little time that it's not enough to see anything happen. That initial animation has to pop out really fast and then slow down, to indicate to the user that they needed to hold it for a little bit longer for it to activate.
It's discoverable enough because the next thing after tapping that most people try is dragging. And any dragging across any part of the screen activates the animation for the length of the drag.
It's plenty discoverable because they've made the whole screen control the animation
"Most people" is the key word here. If discoverability hinges on hoping on what they'll try next, then that's not good. And more likely than not they're going to tap again, because why would you drag a checkbox?
If you make the animation nonlinear and pop out quickly, we don't need to hope: they'll see it immediately! It works 100% of the time, rather than only on the x% that try dragging next.
The article is not talking about a regular checkbox that you would use on some web form. It's a special checkbox that you click infrequently, as a reward when you do something for a habit you are building.
A lot of commenters seem to have overlooked this... C'mon people, use your brain.
I don't think one can honestly give a harsh critique without trying it, in this case. It's a very specific use case. I haven't tried it myself, so I don't actually know if it is any good. But the vision they had when designing it does seem good for this use case. I'm a sucker for the feeling I get when I cross something off a list with pen and paper. I may actually download the app just to try it :)
Readit News
But, some other examples that I love:
• https://www.joshwcomeau.com/animation/3d-button The red "push me" button is great, but also check out the sun/moon icon near the top right!
• https://www.jam3.com/#contact The hover states on the buttons.
• https://citymapper.com The top-left hamburger icon.
(I also happen to be quite proud of the hover states on my own site: https://jonathanalland.com/)
Making this type of stuff is definitely what I miss most about working in web design.
I like that the rotation makes it seem like a rack and pinion mechanism, moving the menu in and out.
https://en.wikipedia.org/wiki/Rack_and_pinion
The double bounce at the end seems like a needless delay, though. Access to the menu would be quicker without it.
More interesting is something exposed in the dev tools. I managed to die.
[1] https://jonsuh.com/hamburgers/
I wish the flat design trend we’re only now starting to drag ourselves out of only extended to materials. I’ve no problem with getting rid of the OS X Aqua/Windows Aero-style gloss that was everywhere and starting to look dated, but we lost a ton of usability by making interactive elements indistinguishable from labels.
Most controls have a bunch of really subtle and unobvious platform dependant behaviour. Often control replacements/skins lose subtle behaviours.
In my opinion the timing of a very quick tap on the button feels off on my iPad - although I’m unsure if that could be improved with CSS or JavaScript.
Heads up, you can add `if_` after the date in a web archive link to show it without the header. I.e. https://web.archive.org/web/20210301032806if_/https://riotga...
http://www.paulgraham.com/design.html
http://www.paulgraham.com/desres.html
Look here for basics https://youtu.be/c7HXLl8YREM
I'm not sure I agree with the quote though. It so happens that the websites I linked all had an element of playfulness, but I don't think that's required.
Here's a site I worked on. Check out the hover animation for the four tiles underneath "Our Innovative and Customer-Driven Businesses": https://web.archive.org/web/20190610202159if_/http://2018ar....
IMO, there's nothing playful or "humorous" about this animation. I would describe it instead as "elegant"—it gives the site an extra level of sophistication.
Another (very small) example might be the "Apply Now" button on https://www.airforce.com/
The springy release animation on that one would drive me crazy.
I do it anyway because it's my personal site, and so I set out with certain rules for myself. In addition to working without Javascript in modern browsers, my site also supports IE 11 and Safari 6 (when Javascript is enabled). There is no build system, and all the code is handwritten (with a handful of very tiny third-party libraries like Waypoints).
Philosophically, I believe this is the right way to make a website. Realistically, I would never do any of it on a professional project. No one ever actually sees it.
(I'd like to make a distinction between support for unusually-configured software and support for weak hardware. I think it's broadly unethical to ignore performance because you're lucky enough to afford a fast computer. Manufacturing chips is bad for the planet, and the new ones might as well be no faster than the old ones if the code is going to be slower.)
That is a neat button.
Some combination of taps on the green one next to it (might be a double tap on the green) and taps on the hamburger break the hamburger in iOS. I guess that the price for having a fun button.
For example to unlock it you need to press the unlock button twice. If you press it once one eye opens, if you press it twice both eyes open and the thing unlocks. If you press once and wait a bit a thought bubble pops up telling you you need to press it twice.
There's no framework involved by the way, it's just some CSS transforms. :)
> I also happen to be quite proud of the hover states on my own site
Those are nice as well, though I'm not sure why the button animation is so delayed. It felt like I missed the button with the cursor until it suddenly started wiggling.
Hiding "no animations" for power users under accessibility is a great way to go.
I liked the end result a lot. The whole animation seems very appropriate in this case to me. The rant that I see in your comment (and every other comment here by the time I am writing this) seems very out of place. Everyone is complaining about things that are not what this designer did.
The point is - it doesn't matter how infrequent it is. If you don't allow disabling it, it's going to piss someone off.
> Here, it's three or four times a day?
Hell no. I'm not 6.
I've only glanced at this app, but the goal seems to be forming a habit of doing things once a day. If you're only interacting once every 24 hours, I'd take a 1second animation with some charm over a static checkbox.
Android for example has clearly a bunch of bugs where some stupid slow animations cannot be tured off. Yes even with turning off animations in accessibility and via the developper options.
On iOS, it doesn't seem to be possible to turn any of them off. You can merely "reduce motion". But it still wastes up to second in the worst case.
What about gtk3 or 4. Now there is some crap animation everywhere in gtk applications and I don't know how to turn that off.
Computers are so fast. Most software is already bad enough that it manages to slow down our beautiful hardware. Let's not make it even slower with animations.
Sure have optional animations if that helps newcomers understand better the flow of your application. But make it optional please. Pretty please?
I recently found out about Android's animation disable feature and holy hell it made my phone feel so much more snappy and responsive to input. But as you mentioned there are too many bugs - one of the more annoying ones is that loading wheels (which I would prefer to keep because you have to wait anyway) are not animated. I'm tempted to use it anyway. Hopefully in the future Android will add some sort of categorization/prioritization for animations so things can be tweaked more.
I may be in the minority here but I am kind of annoyed with how "juicing" the interface/experience seems to be kind of bleeding over into general applications from the game development scene. It does make sense for games and some apps but in general I don't need animations and tweens attached to every button on my phone.
I have the same rant about excessive animation in the user interface, and on reflection it is not exactly the animation that is the problem, sure, it is the exasperating factor, but the underlying problem is that you have removed the users control in favor of the animation, however, that being said, keeping the user in control requires an interruptible animation system, which requires more moving part and is harder to get right... probably for the best to just leave off the animation entirely.
So if an animation is a long rotation (like a loading indicator) it turns into a high frequency strobe light (Most loading animations are replaced by a static image, but not all)
It's infuriating.
Back in the day, the lock screen of the iPhones hand a physics based bounciness. When you slide the lock screen from the top it would slightly bounce at the bottom and if you accelerate the lock screen it would bounce more. I fidgeted with that all the time, I was sad when they removed that.
UIs become so boring, I hope and expect to get some skeuomorphism back. Our current devices are so capable that this time the skeuomorphic designs can be much more convincing.
I agree that making actions feel more rewarding is great, so adding some sound and maybe a bit of more design to the check box is great. One of the things I enjoy the most about my mechanical keyboard is the click that each keystroke makes.
But going all the way to create a 3D animation, that now takes seconds to go from unchecked to checked actually feels like making a daily process more time consuming and annoying.
(Or maybe I am just not human enough)
So the answer is somewhere in between and the optimal UX might only be achieved by adjusting for individual players, for example depending on their speed or for how they have played the game.
Remember, for a user centric app, the goal is for the user to use it AS LITTLE AS POSSIBLE. Not because it is frustrating to use but because it is efficient and you respect their time. Optimising for stickiness is user hostile.
I just don't find this checkbox all that satisfying. Why? The thing I find satisfying about checkboxes is the same as any switch – the click. On/off. It's snappy. I don't think about it. Click... click... click click!
So this grandiose check animation is taking something inherently snappy and prolonging it to its own defeat. Even the sound effect is like an ethereal chime or something, rather than a snap. The scale is super big for the actual space of the phone. The animation too long. I also don't like the angle of the 3D checkmark itself. It's not really oblique, not really at any sort of satisfying geometric angle? I can live with that though.
Anyway really cool work. Wish it were more satisfying.
Here's an example; It's a cool "popup prize-wheel spinner" for iOS, and I have tried using it a few times, but we always decide that it's too intrusive: https://github.com/RiftValleySoftware/RVS_Spinner
I generally end up taking "The Road Most Traveled By": https://littlegreenviper.com/miscellany/the-road-most-travel...
https://en.wikipedia.org/wiki/Desire_path
Thanks!
What data did they use to determine that users needed this?
How are they verifying that what they built is better than investing nothing into this?
I am personally far more interested in those kinds of UX questions than a shiny checkbox.
Not a checkmark at all, but the way games like Smash Bros Ultimate makes pressing around menus sound totally exciting and satisfying. The sound, the lightning/sparks, and how it all rumbles slightly on press. Yes I know Smash has some UX issues, but overall the craftsmanship for simple things is amazing.
Someone had to design and prototype that, similar to the author of this article. I'm not sure this particular example is great tbh, but I am sure there's a lot of "pointless" exploration needs to happen before landing on something great.
* The sounds is not satisfying enough! It's too..."wahhhhhh" and not enough "ker-chunk!" like the writeup described. I think I get what he's going for, but it's not quite there. I want the same feeling I get when I flip a nice heavy switch. Some heft, some weight, some judder as it slams into place. I'm thinking of the feeling in the game Fez when you turn a wheel.
* The pattern of "hold and release to activate" is hard to get right and I still haven't seen it done well. Your animation must be nonlinear, because people are going to just tap. That's so little time that it's not enough to see anything happen. That initial animation has to pop out really fast and then slow down, to indicate to the user that they needed to hold it for a little bit longer for it to activate.
It's discoverable enough because the next thing after tapping that most people try is dragging. And any dragging across any part of the screen activates the animation for the length of the drag.
It's plenty discoverable because they've made the whole screen control the animation
If you make the animation nonlinear and pop out quickly, we don't need to hope: they'll see it immediately! It works 100% of the time, rather than only on the x% that try dragging next.
A lot of commenters seem to have overlooked this... C'mon people, use your brain.
I don't think one can honestly give a harsh critique without trying it, in this case. It's a very specific use case. I haven't tried it myself, so I don't actually know if it is any good. But the vision they had when designing it does seem good for this use case. I'm a sucker for the feeling I get when I cross something off a list with pen and paper. I may actually download the app just to try it :)