[HN Gopher] The Most Satisfying Checkbox
___________________________________________________________________
The Most Satisfying Checkbox
Author : feross
Score : 339 points
Date : 2022-06-17 17:01 UTC (5 hours ago)
(HTM) web link (www.andy.works)
(TXT) w3m dump (www.andy.works)
| Pulcinella wrote:
| _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.
| bryans wrote:
| Let's say you have a todo app with a million users checking an
| average of five boxes per day. Currently, you have a simple color
| shift animation which lasts 200ms and _doesn 't_ prevent the user
| from interacting with other elements. Then a designer suggests a
| fancy animation popover which takes 3s and blocks interaction,
| because they read some article about gamification and how it'll
| increase user engagement.
|
| 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.
| wizofaus wrote:
| I certainly wouldn't want every checkbox like that, but at least
| it might be the start of a rebellion against the idea that
| interfaces should be as "flat" as possible with no real
| indication or feedback as to which controls are interactive. Even
| the "add comment" button on HN barely looks clickable, and
| certainly not something that will publish this comment somewhere
| that makes it readable by 1000s...
| rkagerer wrote:
| I like the simple one better.
| ntoskrnl wrote:
| This reminds me of the "Juice It or Lose It" talk.
| https://www.youtube.com/watch?v=Fy0aCDmgnxg
|
| I'm not sure I'd ever do any of this to a normal checkbox, but
| it's an essential skill in game development.
| wgx wrote:
| 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.
| [deleted]
| Kerrick wrote:
| 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.
| someweirdperson wrote:
| 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".
| kwhitefoot wrote:
| Well, viewing that was a waste of time. Where is the example of
| this wonderful life changing object?
| [deleted]
| muhammadusman wrote:
| I like it a lot, apart from getting my habit checked off, I like
| the feeling that it gives me when I hold down and complete my
| habit for the day
| layer8 wrote:
| For increased satisfaction they should throw confetti or show
| fireworks like the YouTube upvote button does.
|
| (Please don't do this in OS controls and productivity apps. ;))
| ww520 wrote:
| The most satisfying checkbox is - don't make me think.
| EVa5I7bHFq9mnYK wrote:
| I'm sorry ... but where is the checkbox?
| bitwize wrote:
| I know! Let's make it EVEN MORE satisfying, perhaps some confetti
| and cheering Alegria people!
|
| 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.
| alexfringes wrote:
| As a user of this app and long-time admirer of the developer
| behind it (co-creator of the fantastic Paper drawing app for
| iPad), maybe it would help the conversation if I illustrate my
| daily encounter with this UI.
|
| 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
| sam0x17 wrote:
| Bit of what in music we would call a drop denial --- was really
| hoping to be able to click such a "satisfying" checkbox by the
| end of the article
| herunan wrote:
| I find satisfying things that would be close to real life in a
| raw way. So for instance, a button that looks, feels and sounds
| like a button. For a todo list, I'd love to be able to cross it
| out and see, feel, and hear that.
| Findecanor wrote:
| Most widget sets/libraries implement the principle that it should
| be possible to cancel an action that you have started but not
| completed. For their checkboxes, this would be pressing on the
| box but dragging the finger/pointer _away_ from the checkbox and
| release elsewhere.
|
| 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.
| Pulcinella wrote:
| Have you used it? The long press is progressive, not binary.
| I.e to cancel just lift your finger and the animation cancels.
| The animation consists of filling the circle for a couple of
| seconds so you have plenty of time to just lift your finger.
| btbuildem wrote:
| Wow, the author managed to take away any effect the "super" check
| box may have had by completely deconstructing it over the course
| the article, teasing and selling it endlessly (even in the final
| video).
|
| TL;DR: Put the checkbox front and center at the top of the page,
| directly the "amazing" effect with no foreplay.
| TheDudeMan wrote:
| Thanks, I hate it.
| notriddle wrote:
| 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?
| IshKebab wrote:
| This is a perfect HN Poe's law. Well done.
| allenu wrote:
| 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.
| StevenWaterman wrote:
| They explicitly call out that the hit box is actually the
| entire screen - which explains the need for anti-accidental-
| press guards
| Aardwolf wrote:
| For me the most satisfying needs immediate response, and
| unfortunately the "charge up" animation does not do that
| zerop wrote:
| Have the memories of that Green color checkbox from Symantec and
| Norton Software which used to come after scanning.. Remember the
| tag line - "Relax, you are Safe".. What an (aweful) era..
| karaterobot wrote:
| Product Manager: "We don't have metrics telling us users would
| pay for a more satisfying checkbox."
|
| 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]
| bluescrn wrote:
| > "We don't have metrics telling us users would pay for a more
| satisfying checkbox."
|
| 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 '
| [deleted]
| notjustanymike wrote:
| Engagement: Inexplicably goes up 32%
| ntoskrnl wrote:
| Turns out one customer's two-year-old got ahold of his phone
| and spent 3 hours toggling that checkbox.
|
| ... but we can't argue with DATA!
| ravenstine wrote:
| POINTY HAIRED BOSS: Excellent! Outstanding! I think I deserve
| a raise this quarter.
| spandrew wrote:
| 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.
| luuio wrote:
| 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.
| spandrew wrote:
| Yea excellent example. Much more satisfying!
| wly_cdgr wrote:
| Gross. This is such a vulgar take on game feel
| 88840-8855 wrote:
| 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.
| groby_b wrote:
| That is an absolutely horrifying interaction.
|
| 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.
| FrankTheDank wrote:
| 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.
| soneca wrote:
| 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.
| slingnow wrote:
| 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?
| soneca wrote:
| 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.
| Kerrick wrote:
| 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.
| duxup wrote:
| I'm kinda disappointed I can't try it...
| potatosalad1 wrote:
| Only tangentially related, but some months back Amazon added an
| animation to make their user icon wave at you on page load and it
| makes me grimace every time. Given that I use Amazon begrudgingly
| while hating the company and what it stands for it feels like
| it's mocking me.
| joebob42 wrote:
| I'm kind of surprised by all the negative responses. This is
| obviously a bad idea for a normal ui, but for the use case of "my
| app is literally just a checkbox and I want it to feel like an
| event to check it" this seems cool. And that use case really does
| feel appropriate for a habit tracker app.
| [deleted]
| heystefan wrote:
| * Michael Scott "Thank you!" GIF *
| ffhhj wrote:
| BigCo version on top of this:
|
| * 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
| ProfessorLayton wrote:
| 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.
| bspammer wrote:
| 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.
| art3m wrote:
| I love Japanese interfaces for this, their work with sound and
| animations may look weird and outdated, but it's so good to use
| them
| recroad wrote:
| 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.
| eurasiantiger wrote:
| 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.
| recroad wrote:
| I don't think they are. They pay lip service to it but I
| don't see any data, experiments or even hypotheses.
|
| 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.
| slingnow wrote:
| 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.
| bityard wrote:
| Well that certainly sums up my impression of most
| application/desktop UIs I've come across in the last few years.
| allenu wrote:
| 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.)
| Wowfunhappy wrote:
| 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.
|
| 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.
| hetspookjee wrote:
| What a great list. Please share more if you have any! Just
| started since recently with tailwind and there's an entire
| world opening up.
| Wowfunhappy wrote:
| 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. :)
| agumonkey wrote:
| very reminiscent of 2future flash designer
| easrng wrote:
| Try https://shapeshifter.design/, it's good for making icons
| morph like dark/light and hamburger/close.
| CTmystery wrote:
| 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.
| bavila wrote:
| The way the button text moves on hover is also distracting
| and annoying.
| secondcoming wrote:
| And they won't let you into their page unless your device is
| in portrait mode
| rr888 wrote:
| hover sucks for touchscreens
| nomilk wrote:
| Paul Graham's essay on design says good design is slightly
| humorous. I find the red button slightly funny, yet have no
| idea why.
| Wowfunhappy wrote:
| 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.
|
| 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_/ht
| tp://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/
| latchkey wrote:
| > _Paul Graham 's essay on design_
|
| http://www.paulgraham.com/design.html
|
| http://www.paulgraham.com/desres.html
| nomilk wrote:
| See also: _Taste for Makers_ :
| http://www.paulgraham.com/taste.html (under section 'Good
| design is often slightly funny')
| talos2110 wrote:
| It's because the animation timing and easing, methinks.
|
| Look here for basics https://youtu.be/c7HXLl8YREM
| layer8 wrote:
| > https://www.joshwcomeau.com/animation/3d-button
|
| The springy release animation on that one would drive me crazy.
| countmora wrote:
| The tile animation on your website is also really well done!
| qbit42 wrote:
| The sun/moon button is unreasonably satisfying!
| asadlionpk wrote:
| Is it due to the sound it makes?
| frosted-flakes wrote:
| The sound is unreasonably irritating. Basic actions like
| clicking should not play sounds out of my speakers.
| Wowfunhappy wrote:
| The sound is a huge piece, but it wouldn't be as good
| without the visuals, they go together!
| lostlogin wrote:
| > https://citymapper.com/
|
| 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.
| autoexec wrote:
| 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.
| Wowfunhappy wrote:
| 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.)
| deergomoo wrote:
| 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.
| bbx wrote:
| You might enjoy my sun/moon icon then :-) https://jgthms.com/
| Wowfunhappy wrote:
| 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.
| elil17 wrote:
| Yes, I agree. That would give it the sense of time as
| opposed to having it just feel like a toggle.
| allenu wrote:
| 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.
| bbx wrote:
| I never thought about that. Let me fix it.
| alpaca128 wrote:
| 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.
| Wowfunhappy wrote:
| 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."
| bombcar wrote:
| 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.
| chrismorgan wrote:
| 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.
| Wowfunhappy wrote:
| 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.
| jolmg wrote:
| > arguably the menu should appear immediately
|
| 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.
| [deleted]
| layer8 wrote:
| 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.
| Wowfunhappy wrote:
| 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.
| droptablemain wrote:
| Not everything must be gamified and "improved."
|
| 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.
| xbkingx wrote:
| What? You don't want to watch the full box set of Star Trek TNG
| between when you push a button and the animation ends? That
| ruins my plans of designing a scrollbar that plays 45 random
| tracks from you music library between lines scrolled.
|
| OTOH, it IS very satisfying to realize you don't really need to
| do whatever requires those interactions in the first place.
| ur-whale wrote:
| 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.
|
| Minimalism can sometimes also be very satisfying.
|
| I'd toss the 3D and the explosion-like fx.
| phailhaus wrote:
| 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.
| slingnow wrote:
| You interpreted an achingly long post desperately justifying
| the need for this checkbox as being done "for funsies"?
| phailhaus wrote:
| Yes. It's the best kind of post, where you go deep into a
| rabbit hole of a silly question like "what is the most
| satisfying checkbox?"
| eurasiantiger wrote:
| The "ker-chunk" reminded me of Diablo III's character UIs, but
| the sound itself is nowhere near.
| jaytaylor wrote:
| Tangentially related:
|
| https://news.ycombinator.com/item?id=28489791 - Checkboxland
|
| https://news.ycombinator.com/item?id=28826018 - I keep making
| things out of checkboxes
| korijn wrote:
| This feels like a showcase of the author's technical prowess with
| some graphic software, more than anything else.
| molbioguy wrote:
| 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.
| ChrisMarshallNY wrote:
| 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
|
| I generally end up taking "The Road Most Traveled By":
| https://littlegreenviper.com/miscellany/the-road-most-travel...
| ozim wrote:
| I think "Things are cliche for a reason." is really important
| quote there.
| danschumann wrote:
| 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.
| colpabar wrote:
| fyi - there is no checkbox to click on the page, so prepare to be
| disappointed.
| 1270018080 wrote:
| They know enough about checkboxes to know this would torture
| the reader.
| triyambakam wrote:
| And I found it disappointing how far down into the article I
| had to scroll just to see the result.
| babypuncher wrote:
| 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.
| Kerrick wrote:
| 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.
| ARandumGuy wrote:
| 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.
| babypuncher wrote:
| 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.
| modeless wrote:
| Seriously, without an actual implementation this is the least
| satisfying checkbox I've ever wanted to check.
| Kerrick wrote:
| There is actual implementation in the app
| (https://apps.apple.com/us/app/not-boring-
| habits/id1593891243). And there is a video of it in the
| linked blog post.
| wizofaus wrote:
| 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).
| [deleted]
| nocman wrote:
| 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).
| djtriptych wrote:
| yeah honestly as someone who approves/denies features from time
| to time...
|
| 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
| AdamH12113 wrote:
| [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.
| flipgimble wrote:
| 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.
| arbirk wrote:
| The title should have been "Most satisfying checkmark". I was
| expecting an UI element too.
| AdamH12113 wrote:
| 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.)
| [deleted]
| bitexploder wrote:
| Design is often solutions looking for problems (that probably
| don't exist). But it is very humanistic to overly design things
| and give them character.
| [deleted]
| rootlocus wrote:
| From the article:
|
| > 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.
| WanderPanda wrote:
| Thats why I love the AirPods case. It is soo satisfying to
| play around with the lid, even after two years of doing so
| rootlocus wrote:
| 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.
| tracyhenry wrote:
| > 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).
| Zababa wrote:
| I use loop habit tracker, and the checkboxes are regular
| checkboxes: https://loophabits.org/screenshots/1.png.
| LocalPCGuy wrote:
| 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.
| tracyhenry wrote:
| That's why I said "opt into it". Plenty of video games also
| put on animations by default and allow you to "opt out"
| easily.
| [deleted]
| Minor49er wrote:
| I came here looking to suggest a "ker-chunk", and am pleasantly
| surprised that a "ka-thunk" has already been mentioned
| hinkley wrote:
| I have a couple of hobbies or whatever you like to call them
| where it's a bit of a cliche 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.
| wmeredith wrote:
| 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.
| mulmen wrote:
| The most satisfying checkbox is one that visibly registers my
| input in less than 100ms and never forgets.
| sohdas wrote:
| I think people are criticizing this checkbox in a vacuum. This is
| a mobile app that I personally use to track a small number of
| habits a day, it's not like I'm filling out a form on a PC.
| Within the context, it's definitely an appropriate design
| patrulek wrote:
| I would never want to interact with this checkbox, it feels too
| sluggish. But i wouldnt mind if it was non-interactive in-game
| action status, like level accomplished or something.
| bombcar wrote:
| 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.
| barrysteve wrote:
| 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.
| soneca wrote:
| 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.
| jaywalk wrote:
| 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.
| yunwal wrote:
| 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.
| numinoid wrote:
| 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.
| unethical_ban wrote:
| 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.
| bombela wrote:
| 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?
| _manifold wrote:
| > 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.
| Shared404 wrote:
| > 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.
| saratogacx wrote:
| Here's a tactic I've taken with android phones for the last
| 7 years and it's been a huge help.
|
| 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.
| frob wrote:
| It's like I have a new phone. Thank you so very much for
| this tip.
| somat wrote:
| 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.
| joebob42 wrote:
| 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).
|
| It's infuriating.
| jstummbillig wrote:
| 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.
| icyfox wrote:
| 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.
| triyambakam wrote:
| Is it restricted to just one habit though?
| icyfox wrote:
| No - but how many habits are you trying to form at one
| time?
| My100thaccount wrote:
| Just checked my habit tracking app, and it's a dozen, 10
| of which I haven't given up on yet.
| mrtksn wrote:
| 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.
| Vanclief wrote:
| 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.
|
| (Or maybe I am just not human enough)
| My100thaccount wrote:
| 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.
| endemic wrote:
| As a web developer, https://developer.mozilla.org/en-
| US/docs/Web/CSS/@media/pref... is pretty cool, but
| discoverability is a problem I think.
| throwaway81523 wrote:
| It's more about what the checkbox does, than how it looks:
|
| https://i.imgur.com/2bEWKNS.png
___________________________________________________________________
(page generated 2022-06-17 23:00 UTC)