10 ms·

> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position,

• arghwhat 3y ago
  The animation clarifies the change. A user, heck even I could be confused by an instantaneous touch toggle. Why? Because my finger covers it during the press, so I would not see the change happen - if my mindset was "change that setting", I might rapidly tap it again, thinking the press didn't register. Such confusion does not occur with a (fast) animated transition. The map example is much more important. With animation, your eyes and brain recognizes a single image sliding around, giving you automatic positional awareness. Without, you eyes and brain recognize a slideshow of independent images, and makes recognizing and navigating the map a conscious effort. By no means an impossible effort, but an entirely unnecessary one detrimental to the user experience. At the same time, navigation UIs that react as navigation-less updates also tend to have the double-whammy of bad UX in the form of blocking and discarding user input during updates. Bad UIs are not bad because animations are bad, they're bad because they were made poorly.
  • y42 3y ago
    >> The animation clarifies the change Isn't that a problem that UI designes (sorry for generalisation) created by themself? Let's stick to the toggle element. It replaces the classic checkbox. A "checked checkbox" leaves no doubt. A toggle box does.
    • pazimzadeh 3y ago
      few things in the world are perceived as instantaneous, except maybe lightning. until recently people were not used to interacting with instantaneous objects. even a checkbox, in its original incarnation with pen and paper, would take a second to be filled. as long as the animation is interruptible, and the underlying change happens quickly (whatever the toggle is controlling) then animating the transition is usually better. I really like that their animation is interruptible.
    • klausa 3y ago
      >A "checked checkbox" leaves no doubt. It's absolutely not that simple. I actually think that the toggle design is _very_ clever, explicitly because it sidesteps a lot of cultural baggage that comes with existing symbols, and creates its own, fairly unambiguous one. Do you use "checkmark" to indicate that a choice is selected? In some cultures that indicates "wrong" answer. https://en.wikipedia.org/wiki/Check_mark https://en.wikipedia.org/wiki/Check_mark Sure, just use "x" then, right? In _different_ cultures, that one indicates "no, I do not agree". https://en.wikipedia.org/wiki/X_mark https://en.wikipedia.org/wiki/X_mark
      • vidarh 3y ago
        This is a problem if using "tri-state" checkboxes. Don't. They're confusing. It is not a realistic problem for two-state checkboxes. I'm from nordic country, and yes, I too have seen the "checkmark" to indicate mistake on school work as listed on the Wikipedia page and attributed to Sweden and Finland. I've however also seen that on my son's school work in the UK. And I've seen it used for correct. And for just "I've checked this". It is not culturally consistent, and usually appears to be more indicative of a personal marking style. And almost only in that kind of context. Outside of that context, a checkmark is still mostly used as a positive confirmation across the Nordic countries too. You may want to make sure that the wording of the label does not give room for thinking you can tick it to answer "no", but that equally applies for a checkmark. To make sure I wasn't overlooking some difference between Norway (where I grew up) and Sweden, I just checked aftonbladet.se - one of Swedens largest newspaper, and their signup page for example uses checkmarks to positively indicate the presence of features in their Swedish ad copy. On a form it certainly is consistently meant to indicate "selected", just as an "x" is, in those countries as well unless the form explicitly says otherwise or indicates you can use both. The only confusion arises if both are valid states because you've used a tri-state checkbox. So don't. They're confusing everywhere. Maybe it's not universal, but the use of checkmarks outside boxes to indicate "wrong" in some contexts is entirely irrelevant to the interpretation of checkmarks in boxes on a form where the options are not-marked vs marked. Sure, if you are designing a UI where you are displaying corrections to something, don't display a checkmark - probably irrespective of whether you include a box - without some additional indicator of whether it means right or wrong.
• oneeyedpigeon 3y ago
  Contrary to what some of the replies imply (that a smooth animation is always better than a discrete one), I have a solid example where animation definitely harms the UX. One of the language apps (either Hemingway or grammarly) had this issue stepping through search results. As you moved, it would change the colour of the matching text, but slowly and subtly, via animation. That makes it much, much harder to actually spot where, in a wall of text, the match actually is. An instant change is far more visible.
• ernstgnzlz 3y ago
  > Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. For UI elements that try to replicate the physical world, such as toggles, switches, even some buttons, I find it that the animation makes the UI easier for the brain to understand.
• Kiro 3y ago
  On mobile your finger is often obscuring the button you press and an animation is necessary feedback. This is especially important for things that are not booleans, for example a button to increase a value and you end up in "wait, did I change it to 5 now or was it 5 before with my press not registering?" (actual example from yesterday in a famous D&D helper app).
  • James_K 3y ago
    Surely this only happens because someone wasn't looking at the screen while they were making the input. They could just as easily miss whatever animation is attached to the number changing. The real solution here is to provide some kind of haptic feedback (phone vibration) or to play a sound.
    • Kiro 3y ago
      Big disagree on that. Sound and haptic feedback are clearly inferior solutions to the obvious one: an animation.
      • James_K 3y ago
        Can you back up this opinion with any kind of coherent argument? Because the problem is "people can't see the screen" so I feel like displaying something on the screen might not solve it. By contrast, you would definitely know if the phone buzzed when you clicked a button. Anyone who's ever used one of the iPhones with fake home buttons on them can attest to this fact.
  • layer8 3y ago
    If the animation is so slow that it is still visible after your finger isn't obscuring the button anymore, I'd argue it has to be really slow and is not snappy anymore. It also doesn't behave like anything physical, because physical buttons/sliders only move while you're touching them. The gold standard used to be to make buttons large enough so they are never fully obscured (for toggles, the label can be included to be part of the button) and to highlight them when pressed and remove the highlight when released. (Like keys on a virtual keyboard mostly still behave.) That way, you have a clear indication of when you press something, and it coincides with what your finger is doing, and doesn’t lag behind.
• valenterry 3y ago
  Not really. A toggle is inspired by (and associated with) real-life knobs. When you imagine the manual gears in old cars, then when you move then knob it often moves non-linear in terms of visuals (because of the angle). That being said, those toggles are imho the wrong choice. Checkboxes (that actually have a check-mark) are nicer because they show a clear "yes" and "no" so I don't have to guess which position means what when it comes to a toggle.
• usrusr 3y ago
  On a touch sreen, chances are the finger obscures the state change, or much of it. When you are not super focused ("I don't trust this thing!"), it's easy to miss the difference between before and after states. The animation serves as a low-threshold confirmation that the pixels are not just decoration and that the touch event has actually been registered. Requiring the user to mentally diff before and after states would be like a sailor only confirming captain's orders when explicitly asked "did you understand me?" instead of an unsolicited aye. Where the "on-state not as clear as with a checkbox" critique gets a resounding comeback is when slider-looking on/off states are introduced only because of fashion, but in a process where the language used in animations (e.g. screen mockup bitmaps) is completely unaware of animations and therefore they only happen if toolkit sliders match exactly. Yeah, don't ask...
  • solardev 3y ago
    Or you could just use a checkbox
    • iainmerrick 3y ago
      Preferably both. Make it a checkbox for clarity, and animate it for input feedback.
    • usrusr 3y ago
      Tends do get completely obscured and you're back to mental diffing. I know, I know, nothing a bigger checkbox could not solve, but they look weird when you only make them bigger horizontally.
      • layer8 3y ago
        Checkboxes can usually be toggled by clicking/tapping on the label. That may not resolve all criticism, but I'm just saying.
        • usrusr 3y ago
          True. Ideally you put some "event received" indication across the whole trigger area, e.g. that little Android ripple animation. Certainly does not hurt to do the same (whole area clickable, and with visual feedback) even when your designer insisted on fashionable slider-toggles. Subtle things like that greatly reduce the mental background load for the user, but that's impossible to quantify. Chances are you don't consciously notice when it's missing even when in theory you are fully aware of the concept.
• agumonkey 3y ago
  Before css animations landed I was utterly convinced animations could help the brain track relationship between items between views, but it turns out mentally it's not really that useful. To the point that I started missing win31 era pivot table like UIs. There's still some case of adding a few short animations (microinteractions in todays parlance) to give a bit of polish and indicate concurrency or liveness.
• gleenn 3y ago
  While in small doses it's a bit nice to affirm to the user they didn't blink while the state changed, it adds significant complexity. Nearly every one of the animations in that website flicker and the map rendering actually has a bug where it doesn't stop jittering back and forth very visibly indefinitely. Definitely makes me not want to implement stuff like this.
  • recursive 3y ago
    You were so close to reading the part where it explains why that's happening and how to fix it.
    • gleenn 3y ago
      Why do absolutely all of them flicker?
  • BriggyDwiggs42 3y ago
    The jittering was an anti demo i think
• zbrozek 3y ago
  I miss old school checkboxes for UI toggles. They're crisp and clear and don't entice bored people to animate them.
  • anon373839 3y ago
    Checkboxes and switches serve different functions and shouldn't be used interchangeably: https://www.nngroup.com/articles/toggle-switch-guidelines/ https://www.nngroup.com/articles/toggle-switch-guidelines/
    • layer8 3y ago
      This is a rationalization after the fact. Checkboxes used to be used in contexts where they are effective immediately too, and nobody was confused by that. The real reason switches were introduced was to be able to line them up on the right side in iPhone OS Settings, whereas checkboxes would have to be on the left side, costing too much extra margin space on the then-small iPhone screen.
      • anon373839 3y ago
        Did you read the linked article? I think toggle switches are a superior metaphor for controls that move a system between two states. Checkboxes are superior for opt-in items that can be skipped over. Consider the “kitchen lights” illustration here: https://learn.microsoft.com/en-us/windows/apps/design/controls/toggles https://learn.microsoft.com/en-us/windows/apps/design/contro... Do you really think a checkbox has the right affordances for this action?
  • srg0 3y ago
    I beg to differ. Quick search shows that people animate checkboxes too: https://stackoverflow.com/questions/44876144/how-to-style-this-css-animation-checkbox https://stackoverflow.com/questions/44876144/how-to-style-th...
  • max_k 3y ago
    Me too, agree with you and GP. And I can't keep wondering why this opinion is so unpopular. Today's UIs are bloated with unnecessary animations (which adds latency). But worse than animations is that UIs are horribly inconsistent; took me a while to figure out those toggles should be clicked, not dragged; or: what is even clickable, how do I scroll, ...? I could go on forever, and probably so can you. Why do only old nerds complain about this, when today's UIs are so "easy" that every toddler can use the smartphone? Are we just living in the past, getting old; are we the problem, why is our opinion unpopular?
• saretup 3y ago
  > It looks worse vs the original instant response I think that’s an unpopular opinion. The instant response looks janky, exponential smoothing looks well polished as long as it’s not too slow.
  • starspangled 3y ago
    It didn't improve it for me. I don't want a switch animation that looks (like the designer thought) a physical switch might move. I want a widget to indicate and change some option. It's not a great type of widget for that anyway, as others said. But either way the animation adds nothing except time the designer could have used to think about a better interface. The snappy "instant" and simple UIs for Windows 95/2000 era were the best, IMO. It might take a bit to get used to non-animated updates it if you have never experienced it before and seem a bit janky, but it doesn't take long and at least for me feels much nicer. Quarter of a century of "UX experts" and useless animations and transparency and complicating things has resulted in an objectively worse experience. It's slow, clunky, inconsistent, constantly changing, and doesn't even look good. The technical parts of the drawing, scaling, font rendering, color management, etc are much better of course, but not the overall experience. UI design was of huge importance to the industry (Apple and Microsoft) when GUIs were first coming in, many people were still getting into the world of computers, and many of those who were using them were not comfortable with them. Improving the experience could be worth a fortune in new market. That's why usability, intuitiveness, and consistency were priorities and it was taken seriously as a discipline, there was research, and changes were made with (at least in part) quantitative data and study. That field of UI design has basically died in the industry now. At least, it is much smaller and less impactful than it was. Most of it seems to have shifted to getting people to look at and interact with things that they otherwise would not have. I guess shiny new things would help with that, maybe that explains the baffling direction things have gone in. EDIT: BTW., don't take this as criticism of the linked post. Back when I did a bit of graphics programming I loved tinkering around to make things visually pleasing and behave in interesting ways. The post is fun and interesting, and presented in a way that itself is a nice experience and must have taken a lot of work. And I don't think the author was passing it off as an end to end guideline for a user interface design. And I do accept that a lot of people do like more visually interesting and diverse interfaces. They're wrong, of course, but entitled to their opinion (/s)
• Animats 3y ago
  > the major flaw of these sliders: you can't easily tell whether it's off or on That's the whole point. That's why the primary use of sliders on desktop is opt-out of something no user really wants. This is often combined with scroll windows with some sliders offscreen and invisible scroll bars.
• indigane 3y ago
  I'm working on a Git GUI for myself, in which one of my top priorities is making it more understandable than Git's own UI. I usually dislike animations. I used to disable transitions whereever possible, as they made the UIs feel sluggish. And I still do. But working on the project made me for the first time really appreciate in practice how much amimations help with understanding. I paid a high price in complexity to add transitions whenever the state of the visual graph changes, and suddenly it was really obvious what was happening. Commits and whole branches were sliding into their new position, and I would go "a-ha! I see" instead of "wtf just happened, what am I looking at now?". EDIT: Fair warning, it's heavily WIP https://gitlab.com/indigane/visual-git https://gitlab.com/indigane/visual-git
  • dclowd9901 3y ago
    I think this is the trick. Animations as a visual tool for teaching the outcomes of complex behaviors are a very valid usage of animation. There’s that one site that pops up on here occasionally with the fabulous educational topics and tons of animations to relate concepts that I think really drives that point home. Minimizing animations are nice for showing you where things “went” when you minimize them. But apart from that, most other UI annimations are just eye candy.
• chefandy 3y ago
  > Like in this case, what exactly is "going on" that requires this visual delay? Nothing. It's a technical demonstration. The delay is also overemphasized to make the difference more apparent. > The this is the fanciness that detracts from solving the major flaw of these sliders: you can't easily tell whether it's off or on That's because they don't represent anything. Toggles don't always represent on or off, either-- they could represent a binary choice between any number of things. > Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. > It looks worse vs the original instant response, why does the user need to care about intermediate movement of this binary toggle? Putting aside the functionality that animations can add, because others have addressed it, even "feel" does matter to most users. Many people would choose soft-close cabinets over regular spring loaded hinges even if noise wasn't a concern. You'd never see them in a commercial kitchen, though-- people just move too fast and that extra bit just gets in the way. It would be rather absurd for someone in a professional kitchen to assume home cooks have the same requirements and use cases for cabinets that line cooks do. Similarly, people who spend most of their days doing technical things using technical tools made by and for technical people interpret interfaces differently than most people. To developers, UIs are a little part of an application to expose the functionality to users, and the less distance between the application and the user, the better. But more often than not, that approach yields results far more useful to someone with a working mental model of how software operates under the hood. To most people,the UI is the application, and the application is an appliance. Having smooth interactions that 'feel' nice to use are much more desirable. As someone with a good amount of professional experience both as a developer and a designer, I'm consistently surprised by how quick so many developers are to assume their personal usage habits, osmosis-gained knowledge from projects, and folk wisdom about design trumps the expertise of seasoned credentialed professionals in the field. The reason most end-user-facing FOSS projects (that don't have foundation-funded UI teams like Blender or Mozilla) are used almost exclusively by other developers is because non-technical users usually find the experience unpalatable at best, and unusable at worst.
  • anon373839 3y ago
    > I'm consistently surprised by how quick so many developers are to assume their personal usage habits To be fair, developers coming from math and CS backgrounds may not have had any HCI/UX/design training. For those who have, "You are not the user" [1] was drilled in as a foundational concept. [1] https://www.nngroup.com/articles/false-consensus/ https://www.nngroup.com/articles/false-consensus/
• adrianmonk 3y ago
  Here's one practical benefit: the UI should make it obvious that your click did successfully register, and an animation does that because it's eye-catching. But the other side of the coin is that, because it is eye-catching, animation can be distracting or annoying. Adding animation to your UI is like adding salt to your cooking: it's going to be pretty bland without it, but you can also ruin things by going overboard.
  • chefandy 3y ago
    Most people that complain about these things don't even realize how much of it is integrated into their daily lives and workflows because it's too natural to notice. You don't need experience to see when someone's done a shitty job, though; just like any other tool, inexperienced people often see poor outcomes as an indictment of a technique, tool, or approach when the practitioner is to blame.
    • alpaca128 3y ago
      I think that's a bit of an exaggeration. Yes, animations are useful sometimes, but in at least 90% of cases they make the experience worse. If animations were so important and integrated everywhere then why didn't I notice any change when enabling "reduce animations" on all my devices, other than everything being suddenly faster? > inexperienced people often see poor outcomes as an indictment of a technique, tool, or approach when the practitioner is to blame. Or they simply realized that so many practitioners are to blame that the distinction barely matters anymore.
      • chefandy 3y ago
        > Yes, animations are useful sometimes, but in at least 90% of cases they make the experience worse. If animations were so important and integrated everywhere then why didn't I notice any change when enabling "reduce animations" on all my devices, other than everything being suddenly faster? You're confidently saying it makes the experience worse but you said you didn't notice a difference when it went away? There's a lot of data out there that says otherwise. Once again, developers use of interfaces differs from regular users as much as professional cooks use of kitchen equipment differs from home cooks. It's very different. > Or they simply realized that so many practitioners are to blame that the distinction barely matters anymore. Sorry, no. Most shitty software design is done by developers that assemble interfaces based on their whim, most of the rest are done by developers trying to mimic what they think a designer might do (which most developers mistake for design,) and the small remainder are from either incompetent designers or genuine misfires. Ask any group of professional photographers how many have tried Gimp in an attempt to avoid Adobe's fees-- almost all of them will say they have. Ask how many actually use it? I'd be shocked to find a single one. Aside from the substandard graphic design tools for things like typography (which are totally reasonably not a focus for the project, especially when Inkscape is solid there,) Gimp is a competent photo editor. Who uses Gimp? Developers that need a photo editor. Developers making software that other developers like to use is not an indicator that they know how to make software that's tolerable for other people.
• ramesh31 3y ago
  Animation should enhance and enrich the UI, not make it "look fancy". Apple gets this perfectly. The squeeze animation on iOS's volume bar is a great example. Providing feedback to the user in response to an action, in a manner that is expected and makes sense, can massively increase UX.
  • eviks 3y ago
    Apple is missing a few bites from its perfection: They use these sliders, realize they could be ambiguous, so add an accessibility setting for the on/off labels. Then they have these fancy animations where holding a slider even elongates the button "providing feedback", but this is just wasted since your finger is covering the button, and fingers have no eyes! But still, it's a slider, so you'd expect that if you slide your finger over it, it will move. Not so fast, this only works if your started sliding from the slider, not from a side outside it (which would still work in the "real" world.). But if you start at the slider, then there is no point in sliding, there is simply not enough width for that! Also if slider's button is to the left and you swipe from right to left, the sliders moves right! Take that, immediate fedback in the opposite direction, massive UX boost in a manner that's unexpected and doesn't make sense! (because it's not a real slider, just a check box of a different form)
  • youssefabdelm 3y ago
    Exactly, to the OP of parent comment, this talk is a great overview of exactly this point: https://developer.apple.com/videos/play/wwdc2018/803 https://developer.apple.com/videos/play/wwdc2018/803
• bobbylarrybobby 3y ago
  Computer UIs need animations for the same reason they need shadows, gradients, and momentum: because these are aspects of the physical world that we already know how to interpert, so can be used "for free" to aid our understanding of the UI. Not using animations would likely be more taxing on our visual processing because nothing in the world moves discontinuously, so that would be a new thing to learn when using a computer. The primary reasons not to use an animation should be technical: you can't have it run in a short enough time and still look good, not drop frames, conserve battery life, etc.
  • croes 3y ago
    Then a toogle button is a bad example. It's a replacement for checkbox and adds ambivalence that the checkbox doesn't have. Can you tell me which position of the toggle means on? Purple or green.
    • chii 3y ago
      the color choice is the problem, not the toggle. If you had red or green, which one is on?
      • daniel_iversen 3y ago
        If you were colorblind that could be harder to answer (plus, it seems like a lot of designs have color "themes"). Checkbox is probably best.
      • waveBidder 3y ago
        lets ask someone who's colorblind
        • bongodongobob 3y ago
          Red green colorblind checking in. In the case of a toggle, left is off, right is on. Up is on, down is off. Red tends to have less chroma, so dark is off, light is on if there aren't any other cues.
• dgellow 3y ago
  “Accessibility > Reduce animations” is the magic trick to make modern UIs feel snappier and less distracting. I wish web UIs would respect it.
  • morsch 3y ago
    I was wondering if they even could. The answer is yes: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... My first thought was that the OS accessibility settings must not be available to websites without a permission toggle because the ad industry is just going to weaponize it and use it against people.
  • greyhat 3y ago
    I use this on iOS and it still leaves a lot of animations that could be sped up.
• jkaptur 3y ago
  I think the map example is better. Without the animation, you have to figure out visually how far the map moved.
• ustad 3y ago
  Remember that time when the ios calculator was messing up with simple arithmetic due to the animations?