The most satisfying checkbox
andy.works
andy.works
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.
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/
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.
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.
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...
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.
I don't necessarily think we should never try for something better but it should be based on data. It should also recognise the physical metaphor that these controls were based on for a reason. Ask a question on a paper form and a checkbox is simple for cognitive load. That's why I get annoyed at these flat designs where buttons don't look like buttons and tabs don't look like tabs so you end up having to explore to use something that would be 100 times easier in a paper form. Using hover for feedback is perverse both because it requires you interact with controls to work out whether you can interact with them and secondly that it doesn't work instinctively (or at all) on touch devices.
I hear you on the misuse of statistics, but unless you're running multivariate experiments, this isn't much of an issue. Yes, if you can't even describe an experiment in a table/matrix, then it's probably too complicated and the results difficult to parse. I think most A/B tests don’t fall into this category and are far simpler.
Let me try to offer a practical A/B test for this checkbox.
Hypothesis: We believe that making the checkbox animated and reactive will result in people creating more to-do list items right after using the checkbox because they love it so much.
Test: To verify that we will deploy the new checkbox to half the users, and half the users get the normal one. Run this for a duration of two weeks.
Metric: We will measure the amount of to-do list items created right after someone completes a to-do list item.
Criteria: We are right if people with the new checkbox create 1.2x more to-do list items than the ones with the old one.
--
The above is not a difficult experiment to create or analyze.
Your design sensibilities are somehow inverted.
The iPhone and its UI might be the best example of the last 20 years - very few things even come close. But - there are many more examples of bad designs created by people who were not as visionary or excellent as they thought they were.
That's why as a user I don't discount Google's approach - it will never reach the highs or lows of a visionary design, but for most things, the middle-of-the-road approach is probably best.
I haven't used iOS but have used MacOS and although I would argue that MacOS to me is not a good UI (you have to learn what most things do before you can do them), the consistency is somewhat comforting.
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 :)
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.
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.
There's nothing wrong with the humble checkbox. It is simple, utilitarian, and easy to understand.
The "most satisfying checkbox" which you have crafted (that which I am still unsure is satire or earnest) is convoluted, needlessly complex, and a visual disaster.
OTOH, it IS very satisfying to realize you don't really need to do whatever requires those interactions in the first place.
If this really is your thing, then by all means do your art. But for so many people paying attention to this as if it were important, please consider that it really really may not be.
Disregarding that your app is about providing a specific function and user engagement metrics are meaningless, you implement the fancy animation. Your users are now collectively spending 1,400,000 hours per year waiting for an animation to finish.
Please don't be that person. Your users' time is more valuable than your desire for UI whimsy.
To re-quote a popular thing from the 90's: "If I wanted your app to make a sound, I'd rub my finger on the screen".
Yes, there are ways to make interactions feel more satisfying. They are subtle. This one is the equivalent of 144pt Comic Sans Titles animated in rainbow colors. Just, please don't.
The most satisfying checkbox for me has at most four frames of animation: checked, unchecked, clicked on and will toggle upon release, and (optionally) grayed out. It should respond immediately to mouse/finger presses/releases.
Even in game controls, unless charging (e.g. Guile's Sonic Boom) or intentional control jank (the whip in Castlevania) are part of the game's mechanics, the character should respond immediately and unceremoniously to inputs. Save the "juice" for the after effect (e.g., when a punch or shot connects). Mario's feet leave the ground the frame after the jump button is pressed. This makes the player's actions feel directly analogous to the characters, like the player is the character.
Even the Castlevania whip follows this rule in a sense. Belmont winds up as soon as the button is pressed but it takes a few frames for the whip to crack. If you were holding a whip in your hand, there would be a split-second delay between your swing and when the whip cracks. So the Castlevania whip controls loosely simulate your actions if you were using a real whip.
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.
We already distilled the complexity. It’s beautiful for the simplicity. A checkbox with an “experience” is the tacky chromed out Harley cruiser next to the essential cafe racer that is… well, a check box.
Less is more.
There's a good argument to be made for a special checkbox / button that you press infrequently as a reward for completing an activity for a habit you are building.
Regardless, I love reading all of the comments here because it does what we aim to do which is to bring ideas like "feel" to the forefront and talk more critically about the apps, services, and ui patterns that shape our daily experiences.
We tend to fall into thinking about software in purely functional terms—speed and power—with metrics we can optimize. Yet software is also very personal. It shapes our daily experience as much or more than many of the physical products we use or the spaces we occupy. Great Design (of any kind) reaches beyond meeting functional needs and satisfies deeper needs that enrich our daily lives. If we can appreciate the bevel on a phone or the satisfying feel of a car accelerator, we ought to expect more the software we spend hours in every day.
Please, just stay away from my car accelerator.
I don't see how you would think someone would try that with something as essential and utilitarian as a car accelerator.
Minimalism can sometimes also be very satisfying.
I'd toss the 3D and the explosion-like fx.
I'm not sure I'd ever do any of this to a normal checkbox, but it's an essential skill in game development.
Like the obsession around inbox zero, if it's still a thing. (I remember, my then-business-partner discovered it during the early days of our first startup. He freaked out that I had tens of thousands of unread emails. I saw inbox zero-ing as an unproductive obsession. Though we had very different roles, me working mostly on the technology.)
For my personal email, inbox-zero generally means actually reading most emails I get, because I aggressively unsubscribe/mark spam/auto-delete emails I don't want to get. My work email gets a lot more emails I don't need to look at, so there is a lot of automatic filtering and "mark all as read".
My main practical use-case is that I will leave emails unread intentionally if I can't deal with them at the moment. If I had thousands (or even dozens) of unread emails I'd have to track those separately.
I love the mission statement, but this would be rejected 100% for the slow animation. Just absolutely no.
UX is hard! you can put a TON of well-intentioned work into a feature and miss the mark completely. That might even be the norm.
Wonder if he's read older authors like Jef Raskin and Jakob Neilsen. Even Tufte. This feels like a reversion to the Flash era.
That said, as a portfolio piece, I'd lean towards a hire. The willingness to question basic assumptions (or default UI) is really nice to see
* 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
https://news.ycombinator.com/item?id=28489791 - Checkboxland
https://news.ycombinator.com/item?id=28826018 - I keep making things out of checkboxes
You could actually feel the moment the strike connects or if your character has jumped. It felt different. Over time, you would know how to react based on that feeling.
It was a genious design.
For some that will be grand, for me, I'd much rather they kept unobtrusively discrete and let me get on with the creativity.
http://galgot.free.fr/bookfiles/Bouton/index.html
No idea what level of satisfaction it gives :)
I'm not too fond of these over the top animations, to me they feel like time wasters on a micro scale.
(Please don’t do this in OS controls and productivity apps. ;))
Would it make a difference if the interaction was procedurally generated, offering an unexpected reward at your fingertips each day?
Google Doodles <MEETS> Checkboxes
That said this would be fun in a game.
TL;DR: Put the checkbox front and center at the top of the page, directly the "amazing" effect with no foreplay.
I’ve been trying to limit the days on which I eat unhealthy foods to Fridays and Saturdays (yay, it’s Friday!). I’m good at sticking to plans like that without help from an app, but when I gave “Habits” a quick spin, I admired its mission to provide a playful, game-like alternative in the sea of habit tracking apps.
Once a day (except Fri & Sat) it sends me a notification. Tapping it launches the app straight to that “checkbox”. While the description in the post may make it seem like this is too long of an interaction, I promise you that it really isn’t, and that the haptics and animation are indeed a satisfying experience. So satisfying in fact that I stuck with the app even though I’m certain I’d follow through on my challenge without it.
(That certainty, btw, comes from how I personally have set up habits like this for over a decade, with help from a mental trick somewhat adjacent to a mind palace/loci[1] to track and reward follow-through. I bring this up because I have often thought that it might be possible to bring the power of these rewarding mental models to a broader audience via an app. And to some extent that’s what Habit accomplishes via its unique approach. The haptics and emotional resonance of the “checkbox” are a little Pavlovian mental & sensory reward for completing one’s goal. And they lead the user to a playful/gamified representation of their progress through their habit, in the form of a small, abstract 3D scene that gradually builds as you continue sticking to your goal. If I’m in a rush, I ignore that scene. But I always enjoy tapping the notification and checking off the day’s accomplishment.)
As a designer, I could maybe quibble over details of the interaction or visual style (which is customizable btw via a season of themes — another unique component) but as a a user I’m simply excited to have this app as part of my routine, thankful that someone is daring a different approach to app design, and curious to see if there will be more apps that might introduce a wider audience to the mental hacks I’ve found useful for a long time.
If you’ve read this far, I’d encourage you to check out some of the other posts on Andy.works, incl. a great retrospective on Paper’s creation[2], as well as background on the developer’s philosophy behind the “Not Boring” suite of apps[3]. Lastly, here’s the App Store link if you want to give the interaction a try (I promise I have no affiliation): https://apps.apple.com/us/app/not-boring-habits/id1593891243
[1] https://en.wikipedia.org/wiki/Method_of_loci [2] https://www.andy.works/words/paper-at-10 [3] https://www.andy.works/words/here-we-go
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.
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'
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.
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".
With this "checkbox" 1) filling the entire screen, 2) activating on long press instead of displaying pressed state and activating on release, this is not possible.
Also, a checkbox does not close the window/screen you are in. It may enable display/ungraying other widgets, but a checkbox itself does not navigate away: that is done by a secondary widget. Also, you could always uncheck a checkbox. Therefore, you could argue that this widget isn't actually a "checkbox" at all but just a widget that displays an image of one. It could just as well show a thumbs up or the text "Well done" to mean the same thing.