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.
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.
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.
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.
> 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.
Pretty sure this is due to the fact that being able to disable animations is usually done as an accessibility concern - for people who are motion sensitive it could be problematic to have loading bars etc.
I agree that the categorization of animations could be helpful. Or at least being able to limit it by app.
The end result is that all animations provided by the OS are running at twice the speed and it feels snappy while still allowing animations to do their job at hinting information.
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)
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.
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.
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.
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.
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).
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.
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.
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.
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.
For that, we use a helpful little tool called Lofelt. You can import a sound file and it’ll generate a custom haptic pattern to match it. With a little cleanup and an AHAP file for Xcode, we were ready to go.
It seems Lofelt is shutting down. I’m surprised Apple hasn’t released some kind of “Haptic Studio” app as a part of Xcode’s tools.
I'm a little surprised that this uses a long-press instead of having the user draw a checkbox with their finger. It seems like the natural way to handle a simple shape like this one that came into popularity because of how easy it is to draw.
Was this idea considered? If so, why wasn't it done this way?
I'm guessing they went for the long-pressing because it's an incredibly easy action to take. The hit region is massive, so you just place your thumb on the screen and hold.
Having to draw a checkbox with your finger requires you to hold the phone and then flick a checkmark shape with your thumb (a difficult task), or else use your other hand to draw. If you're right-handed, you're probably holding the phone in your right hand to begin with, so now you have to switch hands to hold it in your left and draw with your dominant, right hand.
Very rarely is there a single checkbox on a screen by itself with no other inputs or info. This seems unusable in most situations where I would be using checkboxes. Also didn't show the reverse at all. Checkboxes are uncheckable too which will require more animations. Doesn't seem like just reversing these animations would work well.
Please read the article. The designer explains the use case. It is not a template to use anywhere. It is designed specifically for a habit-tracking app. It doesn't matter at all if it is unusable in most situations where you would be using checkboxes.
Are you saying the designer didn't design the case where you can uncheck the checkbox because "reasons"? Why wouldn't you be able to undo your action in a habit-tracking app, specifically?
You chose to nitpick a possible implication of my comment with ”Are you saying…”. That’s silly. So let me actually say something about that point so we can have a conversation on stuff that I said, not about your imagination.
I believe it makes no sense to design an animation to uncheck a checkbox in a habit-tracking app. The only occasion when this will be used is when a user accidentally marks something as done (with a long-press, which makes it even more unlikely). It is definitely important to allow that. But there is no reason at all for that action to also have an animation. There is nothing to celebrate in that fixing action.
I think it would be even ok to hide that action of unchecking behind a “Edit”, so it doesn’t add noise by showing something that will not be considered to be used 99,9% of the times.
You can unmark the habit as completed, but you don't interact with "the big checkbox" to do that. Shortly after you interact with the satisfying checkbox described in the article, it disappears to show you a visual representation of a mountain that you're building and climbing by doing your habit. To mark a completed day as incomplete, you enter a different UI that has a calendar-style view, and tap on the completed day.
I found the result itself disappointing as well. It's way too big and flashy for such a simple and common interaction.
The checkbox shouldn't be any bigger than the "boring" version, and any animation simple and last no more than 0.2 seconds. I really don't like the sound effect used here. If your UI elements are going to make noise when interacted with, I prefer something far more brief and tactile.
It's exactly the right amount of big and flashy for a once-a-day interaction that's supposed to motivate and reward you to do a difficult IRL thing, just so you can come check the checkbox and release a bit of happy reward chemicals in your brain.
I can see that. It could be useful for something like a daily diet or exercise tracker. I still don't care for the specific sound presented here, but for this use case I'm not opposed to something this long and flashy.
watchOS has really satisfying sounds and animations that trigger when you fill your fitness rings and meet goals.
Exactly this. Context is everything. This checkbox would be terrible for most use cases of the checkbox, but seems like it would work well in this example.
That being said, I think the approach could be really useful for a lot of interfaces. UX design often overlooks the little details that happen when a user interacts with something. A little extra zing can go a long way.
Yeah but there's nothing satisfying about watching a video when the satisfaction is supposed to come from the actual interaction.
I assume though it is only available in a mobile app. Would be good if there was a website you could easily create interactive simulations from apps (e.g. it would somehow replicate what the app showed and what sounds it made in response to mouse interactions on a web page - seems technically feasible with some sort of smart recording facility).
(PS yes I know of https://www.browserstack.com/, but haven't used it, and having to install the app and go through everything necessary just to experience what's being described in the article would still be annoying).
And after wasting enough time to find out what it actually looks like, it left me with this opinion: The "Simple Checkbox" they started with is 10,000 times better - although it seems silly to me to have one checkbox be the only thing on the screen (usually they occur on the left of items in a list).
This article was one of the most unsatisfying things to read in a while. There's so much misdirection and fluffing up of simple concepts that by the end I just want it to be over.
I really liked the creativity of the idea, but I agree with you. I had to skim through the article since it's just marketing and repeats the same thing over and over again. Even the video at the end was just a rehash of everything you had just read and seen. (I don't blame them for writing it this way, though, as it likely improves SEO.)
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
The biggest disappointment is that the “unchecked” state to trigger the checkbox is a low-contrast circle with tiny “READ” text inside it. Poor discoverability, poor accessibility, very un-satisfying.
This person is clearly a talented designer and animator, but this is a bad piece of UI and would deliver a bad UX.
As a user of this app, I disagree. During app onboarding, you _create_ the unchecked checkbox by typing the name yourself. And usually you're only building a single habit at a time, so you already know what the text will be before you reopen the app to mark the habit as done.
This article doesn't describe a good checkbox to place in a list of preferences in just any old app. It describes a _destination_ checkbox, to be checked once per day, that is supposed to gamify habit-building and make tracking that habit's progress _add_ to the experience, rather than feel like an additional chore.
A checkbox is a thing to toggle off/on to select a state.
As I understand your description of the app it toggles itself off and the user toggles it on. That's not a checkbox but a button. If the user can toggle it off that's more like an undo-operation, still not a checkbox.
Of course in the sense of "checked as done for the day" it is a "check"box. But it is a little unexpected without contex when reading about a "checkbox".
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'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.
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.
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.
Yeah, I think that bounce at the end could use a bit of tightening up. I would have made it quicker but with less horizontal movement, so it feels more elastic.
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.
IMO, it works because the button moves much less than the menu itself, which is a large block of color that slides out. My eye is drawn to the larger visual change.
I think it's perfect. It's hard to miss the giant white sidebar that pops up. Actually, I think it's safe to say nobody is going to miss it. Keeping immediate attention on the hamburger icon that now switched to an 'x' gives users information on how to close the sidebar if they wish (as opposed to swiping it left or something). If the "distracting" animation we're omitted, the site could have a different problem that users didn't see the 'x' and now don't know how to close the sidebar. I think this site found a perfect balance on usability.
Thank you for this, bookmarked. However, I like the original example because the spinning animation on the hamburger menu almost looks like it's directly causing the side nav to appear, as if it were a hand crank. The spinning matches up perfectly.
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. :)
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.
Yep that hover animation alters user perception of it's fundamental state, from a button to link. Not saying experimentation is bad, but in general that kind of incongruence is a big no-no for production UX.
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.
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."
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.)
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.
I agree. It might be because having it go clockwise would make the sun appear to be setting? I do agree with the other point about having the wheel just go in one direction as well.
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.
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.
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
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 get the idea, and I tend to agree with it, but I believe that in this particular case, he pushed things too far: the resulting checkbox is borderline baroque.
[EDIT: I failed at skimming and completely missed the context that this design is for a habit tracker app, where making a checkbox the center of attention is a good idea. The comment seems popular, so I'm leaving it intact below. Pretend I was talking about your least-favorite UI instead.]
I feel bad saying this since the author is very excited and clearly put a lot of work into the "satisfying" checkbox. But...
This is why we can't have nice software UIs.
The process here seems to be to take a simple, utilitarian UI element -- a means to an end -- and turn it into the center of attention:
1. Make it big.
2. Make it flashy.
3. Make it slow.
4. Make it loud.
5. Make it literally vibrate.
These are not the characteristics of a satisfying tool; they are the characteristics of a toy for toddlers. On a deeper level, this is the sort of thinking that comes from looking at the interface instead of past it. That is an understandable perspective for a designer, but indulging in that perspective results in interfaces that just get in the way.
It's also a very artificial approach. A "satisfying ka-thunk", in particular, it satisfying in part because it's the sounds of a weighty metal mechanism operating smoothly. "Weighty", "metal", and "smoothly" are all things we associate with high quality. Aping some superficial indicators of high quality is usually not very satisfying on its own.
I had the exact same reaction. This needs to be about 3 times faster in order for me to not to be annoyed by it, and that's why gamifying things that aren't games is usually obnoxious. If this is an interface for an actual game, meant to entertain, fine. If this was in some productivity software, it would annoy me at first, and then really piss me off after the 10th time I saw it or had to get past it to do what I want.
It reminds of Apple's Siri and its grating cuteness in failure modes. Or of the Wordpress login box that gives me a cute shaking animation if the input is wrong.
> this is not the characteristics of a satisfying tool
You should take it into context: it's used inside a habit app, where seeing checkmarks is center to the UX. You might not be a user but I can tell you seeing checkmarks is crucial to keep the users engaged, and so making the checkmarks the center of attention can be very helpful. I personally really liked it. Learning apps (Duolingo, Coursera) should all adopt this approach (or at least allow users to opt into it).
Even in context, consider a user may want to check multiple habits off at one time (I've done 3 things, now recording those in the app), and stopping for each one to see this LONG animation would be problematic for me. (caveat - I'm not familiar enough with the app to know if it plays each time or what.)
If it does play a lot, it'd be annoying enough that I'd be looking for a new app or looking to see if there is an accessibility setting to remove animations.
I don't think you get the point of this app or the check box. This is for an app that is meant to foster habits and the checkbox animation is an infrequent reward for completing a habit forming task. Secondarily the goal was also to win over the Apple user demographic and win a design award.
You're thinking of user interface in an app that you have some intrinsic motivation to use, and the UI in that case is just a means to an end.
It seems I skimmed poorly and got everything but the important part of the background. I went from the article title to "(Not Boring) suite of everyday apps" to "Designing for Feel" and somehow missed "habit tracker app" and "habit" being mentioned multiple times. This kind of design does make much more sense in that context. Thank you for the correction.
(All I can offer in my defense is that about half the article sure sounds like it could have been a design doc for making bad modern UIs, but that's the fault of other UI designers, not this article or author.)
> Jason Yuan has promoted the idea of “fidgetability” where, similar to a key fob or lighter, digital actions can be designed to feel satisfying.
I love fidgeting. I used to have a switch tumbler in my pocket just to turn it off / on when I didn't have anything to do with my hands. I think I would've enjoyed a checkbox that allowed you to drag it slightly to check it instead of just tapping. You can't add "fidgetability" with just flashy animations and sfx. You need something to do with your thumb: turn it on and off, feel the thing respond, turn it half way, try to keep it there before it snaps into place, that kind of thing.
I read an article some time ago that argued phones are the worst tools for our hands. While everything else is designed to use the entire hand or at least a few fingers while providing subtle feedback on every action that requires us to exercise multiple muscles to control properly, the phone only requires your thumb.
My airpods have been ran over by a car, and they've been through a full laundry machine wash cycle and they still work, but I don't play with the lid because I'm afraid I'l break the hinge.
Mine have been through a full launndry cycle as well and still work. Don't worry the hinge is very solid, I'm regularly putting quite a lot of stress on it :D
I have a couple of hobbies or whatever you like to call them where it's a bit of a cliché that people mistake 'necessary and dispensable' for indispensable. There are activities that you need to have done, but as you grow you should not be doing them all the time. Maybe once in a while, just to keep the myelin warm, but not in public, unless you're mentoring someone at the time.
Some days I look around and wonder how many activities in software development are better off being embraced tightly and then bid a fond farewell, and instead we cargo cult them.
Edit to add: Not unlike having a childhood. Without a proper one you're a mess. But not letting it go makes you into a bigger mess.
Frankly, I like it. It is different than what you usually see and it gives a feeling. I wished software was more exciting for the end user. Today it is just consistent, super easy to approach, standardized, flat and cold.
Are there different "best practices" for games? This breaks almost every guideline for effective UI elements that I've been exposed to. Really don't like it.
In theory... the most satisfying checkbox would take your inner most desire, that you've been trying for the longest time... and when you check the box, it completes the desire. Visually it doesn't matter as much as the function. Like checking something off your bucket list is more satisfying than checking something off the grocery list. I don't know if the visual component is as important as what is actually functionally done. "beware the pleasures of the eyes"
As I get older, I am more and more skeptical of people trying to influence my emotions.
The most satisfying is the checkbox on the site that says “opt in to your UBI”. Happy for it to be the default browser input
checkbox with Times New Roman text.
I will agree that the change of not having a automatic stream of income, to having a stream of income, is quite a successful, satisfying feeling. I've not yet done enough simulations and calculations on whether or not UBI or what else is best. At least UBI would be more efficiently spent gov dollars than any other program. Every dollar the government spends is probably about as 10% as effective as just giving the money directly to people, but then it creates jobs, culture, etc. Like I said, I dunno what the perfect mix would be, will do some simulations one day to design the perfect societal/governance policies.. or maybe AI will beat me to it. Optimizing for happiness while reducing unhappiness, without scapegoating... what were we talking about? kinda went on a rant there.
271 comments
[ 2.4 ms ] story [ 402 ms ] threadhttps://news.ycombinator.com/item?id=28489791 - Checkboxland
https://news.ycombinator.com/item?id=28826018 - I keep making things out of checkboxes
Hiding "no animations" for power users under accessibility is a great way to go.
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.
Pretty sure this is due to the fact that being able to disable animations is usually done as an accessibility concern - for people who are motion sensitive it could be problematic to have loading bars etc.
I agree that the categorization of animations could be helpful. Or at least being able to limit it by app.
Turn on developer options on the phone (you find the OS build info in the settings and tap it something like 8 times).
Go into the new developer menu and go to the drawing section.
Set the following 3 items to 0.5
Window animation scale, Transition animation scale, animator duration scale
The end result is that all animations provided by the OS are running at twice the speed and it feels snappy while still allowing animations to do their job at hinting information.
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)
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.
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.
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.
It's infuriating.
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 seems Lofelt is shutting down. I’m surprised Apple hasn’t released some kind of “Haptic Studio” app as a part of Xcode’s tools.
Was this idea considered? If so, why wasn't it done this way?
Having to draw a checkbox with your finger requires you to hold the phone and then flick a checkmark shape with your thumb (a difficult task), or else use your other hand to draw. If you're right-handed, you're probably holding the phone in your right hand to begin with, so now you have to switch hands to hold it in your left and draw with your dominant, right hand.
Engineer: "This would take one week to build. Recommend using native toggle control."
Other designers: "Wow, I love it! But, this isn't consistent with our design system."
Project manager: "I see you've been working on this checkbox animation the entire sprint, what's up?"
Users: [ignores painstakingly crafted checkbox presentation entirely]
... but we can't argue with DATA!
This can become a real problem in game development these days, especially in the mobile/F2P world.
A focus on analytics can lead to ignoring something that should be obvious but can't be backed up by data - e.g. 'the weapons don't feel fun'
I believe it makes no sense to design an animation to uncheck a checkbox in a habit-tracking app. The only occasion when this will be used is when a user accidentally marks something as done (with a long-press, which makes it even more unlikely). It is definitely important to allow that. But there is no reason at all for that action to also have an animation. There is nothing to celebrate in that fixing action.
I think it would be even ok to hide that action of unchecking behind a “Edit”, so it doesn’t add noise by showing something that will not be considered to be used 99,9% of the times.
The checkbox shouldn't be any bigger than the "boring" version, and any animation simple and last no more than 0.2 seconds. I really don't like the sound effect used here. If your UI elements are going to make noise when interacted with, I prefer something far more brief and tactile.
watchOS has really satisfying sounds and animations that trigger when you fill your fitness rings and meet goals.
That being said, I think the approach could be really useful for a lot of interfaces. UX design often overlooks the little details that happen when a user interacts with something. A little extra zing can go a long way.
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!
This person is clearly a talented designer and animator, but this is a bad piece of UI and would deliver a bad UX.
This article doesn't describe a good checkbox to place in a list of preferences in just any old app. It describes a _destination_ checkbox, to be checked once per day, that is supposed to gamify habit-building and make tracking that habit's progress _add_ to the experience, rather than feel like an additional chore.
As I understand your description of the app it toggles itself off and the user toggles it on. That's not a checkbox but a button. If the user can toggle it off that's more like an undo-operation, still not a checkbox.
Of course in the sense of "checked as done for the day" it is a "check"box. But it is a little unexpected without contex when reading about a "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.
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/
There's no framework involved by the way, it's just some CSS transforms. :)
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/
http://www.paulgraham.com/design.html
http://www.paulgraham.com/desres.html
Look here for basics https://youtu.be/c7HXLl8YREM
> 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.
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.)
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.
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.
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...
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.
Minimalism can sometimes also be very satisfying.
I'd toss the 3D and the explosion-like fx.
I feel bad saying this since the author is very excited and clearly put a lot of work into the "satisfying" checkbox. But...
This is why we can't have nice software UIs.
The process here seems to be to take a simple, utilitarian UI element -- a means to an end -- and turn it into the center of attention:
1. Make it big.
2. Make it flashy.
3. Make it slow.
4. Make it loud.
5. Make it literally vibrate.
These are not the characteristics of a satisfying tool; they are the characteristics of a toy for toddlers. On a deeper level, this is the sort of thinking that comes from looking at the interface instead of past it. That is an understandable perspective for a designer, but indulging in that perspective results in interfaces that just get in the way.
It's also a very artificial approach. A "satisfying ka-thunk", in particular, it satisfying in part because it's the sounds of a weighty metal mechanism operating smoothly. "Weighty", "metal", and "smoothly" are all things we associate with high quality. Aping some superficial indicators of high quality is usually not very satisfying on its own.
It reminds of Apple's Siri and its grating cuteness in failure modes. Or of the Wordpress login box that gives me a cute shaking animation if the input is wrong.
You should take it into context: it's used inside a habit app, where seeing checkmarks is center to the UX. You might not be a user but I can tell you seeing checkmarks is crucial to keep the users engaged, and so making the checkmarks the center of attention can be very helpful. I personally really liked it. Learning apps (Duolingo, Coursera) should all adopt this approach (or at least allow users to opt into it).
If it does play a lot, it'd be annoying enough that I'd be looking for a new app or looking to see if there is an accessibility setting to remove animations.
You're thinking of user interface in an app that you have some intrinsic motivation to use, and the UI in that case is just a means to an end.
(All I can offer in my defense is that about half the article sure sounds like it could have been a design doc for making bad modern UIs, but that's the fault of other UI designers, not this article or author.)
> Jason Yuan has promoted the idea of “fidgetability” where, similar to a key fob or lighter, digital actions can be designed to feel satisfying.
I love fidgeting. I used to have a switch tumbler in my pocket just to turn it off / on when I didn't have anything to do with my hands. I think I would've enjoyed a checkbox that allowed you to drag it slightly to check it instead of just tapping. You can't add "fidgetability" with just flashy animations and sfx. You need something to do with your thumb: turn it on and off, feel the thing respond, turn it half way, try to keep it there before it snaps into place, that kind of thing.
I read an article some time ago that argued phones are the worst tools for our hands. While everything else is designed to use the entire hand or at least a few fingers while providing subtle feedback on every action that requires us to exercise multiple muscles to control properly, the phone only requires your thumb.
Some days I look around and wonder how many activities in software development are better off being embraced tightly and then bid a fond farewell, and instead we cargo cult them.
Edit to add: Not unlike having a childhood. Without a proper one you're a mess. But not letting it go makes you into a bigger mess.
https://i.imgur.com/2bEWKNS.png
* A/B testing of animations
* Realtime analytics and heatmap for when and where the user clicks
* Captcha to defeat click-bots
* Updates for new animations, later on it's also customizable
* Ad in the middle of the animation
* Emotional input from the user