5 ms·

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 kno

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.
      - vidarh 3y ago
        While that seems to be more common by a fairly large factor, in a quick search of images of toggle buttons there were at least two examples of left being on already in the top 10 for me. I also found a few that had both variants in the same image, and a few examples where from the image alone I couldn't tell if my life depended on it whether they are in the left or right position, and what that means because there's no shading or geometrical hint as to which part is meant to be the actual toggle. I wish you were right and that this was consistent, and when I read it I did that image search because I hoped you were and that I somehow just hadn't realist. But sadly it's not consistent. That said, the same image search also demonstrated people managing to mess up the equivalent of a checkbox too (by changing the label, so it's not clear if it needs to be "ticked" to disable the state currently indicated by the label) so it's clear the problem isn't just checkbox vs. toggle.
      - rypskar 3y ago
        >>Up is on, down is off That depends on where you are from, in some regions light switches are on when up and in other places they are off when up
  - slimsag 3y ago
    I am profusely colorblind, and it's infuriating when people only use colors to indicate something. Please for the love of god give me a checkbox over a red/green slider toggle. Shapes, please, shapes.
    - bongodongobob 3y ago
      I'm colorblind too but I don't pretend that it's a big deal, because it's not even a daily occurrence where I'm completely stumped by color and am blocked from doing something. Yeah, charts and graphs can be annoying sometimes, but I don't expect 90% of the world to bend around me because my sight is sub par. I loathe colorblind people who act like it's a disability. It's a slight inconvenience sometimes.
      - eru 3y ago
        Adding extra differentiators also helps people with other kinds of vision problems. The benefits of accessibility often go beyond the initial target audience.
      - slimsag 3y ago
        300 million people with some form of color blindness, and for a minority of those it's much worse than others. It's great your vision doesn't affect you most days, I hope you live a happy life. For me, it's pretty annoying having to screenshot applications every few days, to be able to drag it into a color picker to be able to see what is actually on the screen. It's pretty annoying being in a Zoom call, in a tense customer call trying to debug something, and then having to screenshot a Grafana dashboard and drag it into a photo editor on the fly to understand what a customer is telling me - or have to divert the already tense conversation to 'sorry can you tell me what I'm looking at, my vision is fucked?' It's pretty annoying always being that inconvenience-to-others person asking for a link to the google slides, because I can't tell what is being shown on that pie chart. And I get it, I'm in a minority of minorities here. And it's not like 'wow colorblindness has ruined my life now I can't cook or clean myself!' - so I understand where you are coming from with 'it's not a real disability' But like, I'm not asking for you to go and construct a concrete pathway up a mountain here. I'm just asking that maybe when you are quickly adding 'a slider that indicates on/off using nothing other than color' to your shitty web app, that maybe you could just go with a checkbox instead? Or keep the slider and all the colors, but just add `on` and `off` labels to it too? Or add a hover text that says it's 'enabled'? Or at least steal Apple's slider colors instead of coming up with your own low-contrast ones? And yeah, I get it - we live in a world of 'omg wow I got glasses for christmas and now I can finally see color through my tears again!!!' social media garbage content. I just want to be able to know what a button is going to do when I click it.
  - function_seven 3y ago
    Depends on what it’s controlling. The tune of my car? Red = performance, green = eco-mode. The valve on a pipe? Red means “stop” (off) and green means “go” (on). What about a heater? Does red mean hot? Or stopped? Sibling comments cover colorblind users, but those concerns also apply to most e-ink users as well.
    - idiotsecant 3y ago
      In fact red and green are generally not used for flow in a pipe because they have specific meaning for electrical equipment - green denotes an open circuit and red an energized one. This can be extremely confusing with something like an MOV so convention us to avoid red and green on valve position, pipe fill, etc.
  - smaccona 3y ago
    Am I wrong in thinking that checkboxes/tickboxes/whatever-one-calls-them are ubiquitously understandable across cultures from both an interpretation and interaction perspective? If so, it wouldn’t be the first time I’ve made this assumption/mistake so I’d be happy to hear about it! If not (and I am right in thinking these are globally understood), then there’s a clear advantage of the checkbox over the switch in that it doesn’t depend on any color recognition to convey the current state. This is a huge win - I have definitely encountered UI controls where the current state was not at all apparent. I happen to use an iPhone, and haven’t personally had any issues interpreting the “switch” state nor the checkbox, but what if you’re color blind or from a culture where the color doesn’t necessarily mean what you think it does? Edit: clarify intent
    - jalfresi 3y ago
      Checkboxes also have a fundamental dependency on the label to assist them with their affordance: a label for a checkbox should almost always be in the form of a yes/no question: “are you hungry? [ ]” The “checked” box is an affirmative, empty is a negative. A checkbox without a label is useless because it has no context. But I constantly see checkboxs without the question label. Think back to all those control panels and settings windows youve seen where the label for a checkbox is something like “animations [ ]”. Does that mean they are on by default? Does checking the checkbox switch them on or off? Now compare with this “animations? [ ]” checking the checkbox has now become an answer to a question
      - chrisjj 3y ago
        > But I constantly see checkboxs without the question label. Properly so. Imagine every real-world appliance power toggle was labelled "Power?".
        jalfresi 3y ago
        Real world appliances dont use checkboxes to power toggle
        3y ago
  - krzyk 3y ago
    Not color choice, but existence of color. Some people have trouble distinguishing between red and green. Black and white is easy - checkbox is understandable quicker than a toggle.
jalfresi 3y ago
Im not sure I agree with this, and its quite a common argument for animations in UIs. The fundamental weakness in this argument is that animations are not interactive. They have a beginning, middle and end. Any attempt to interact with the UI during this sequence would disrupt the animation. This is why animation makes UIs feel slow; clicking the widgets requires a period of time to transition from state A to state B via animation. The irony is that this is used to indicate a transition, to emulate what happens “in the real world sliders dont teleport to the next state”, but this often always misses the fact that I didnt slide the slider to its new state: i clicked a mouse button. That is an immediate state transition. So all animations like the above do is slow the feedback of the state transition in a misguided attempt to emulate a real world slider when i never interacted with the UI in any way that resembles a slider.
- pupileater 3y ago
  This is why we design animations in immediate actions to be below 100ms, any more than that and we start to feel "computer's reaction is slow maybe it's doing some calculations in the background?"
  - mrob 3y ago
    100ms is more than enough to break the joyful feeling of the computer becoming part of my own body, like a hand tool or a bicycle. Humans are adapted to tool use, and don't need to consciously think of the position of tools they're using. But this effect only works if the tool moves like an ordinary physical object. If you move a pencil, it just moves. It doesn't move and then move again because a designer wanted to play an additional animation after your movement. Until we have direct neural interfaces, all UI animation playback is unrealistic, because it's adding to the physical movement of your fingers, not replacing it.
wolpoli 3y ago
> Computer UIs need animations for the same reason they need shadows, gradients, and momentum: The thing about design principles is that the designer picks the one that justifies their decision, which is more like fashion than anything. For example: Windows 8 swept away shadow, and semi-transparent material in the name of flat design, making it resemble Windows 2.0. Windows 10 brought back shadow. Windows 11 brought back Semi-transparent material and also rounded corners buttons from Windows 2.0. Gradients have been banished and missing for a decade, but I am waiting for a come-back. > 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. The above could also apply to more than just shadows, gradients, and momentum. Skeuomorphic icons help users understand functions but we have shape & outlines resembling hieroglyphs. I doubt we are getting skeuomorphic icons back ever because font icons are just too awesome for designers. Most real world buttons are elevated off the surface to let us know it is pressable, but digital buttons now just have a white or colored pill shape around it. I can't recall the last time I saw a pill shaped button in the real world.
- faceplanted 3y ago
  > Most real world buttons are elevated off the surface to let us know it is pressable, but digital buttons now just have a white or colored pill shape around it. I can't recall the last time I saw a pill shaped button in the real world. Well not really, real world buttons are elevated off the surface because of the practicalities of producing buttons and attaching them to a surface, some of the material has to be above the surface and some below for it to clamp on. Buttons are also usually produced as separate components and thus tend to be round or square because it's more mechanically simple and suits the most use cases, labels can be put around the button. Computers have completely different mechanics, all buttons can be a bespoke size and shape, and they're inherently not tactile, the pill shape is just the easiest way to allow a button with variable width for variable font sized text, because it's easier to put the text on the button itself digitally than irl.
  - aembleton 3y ago
    In the real world, toggle switches cannot jump instantly from one state to another but on a computer they can because of completely different mechanics. Either we want to resemble the real world or we don't or it depends on what is currently fashionable.
dietr1ch 3y ago
Well, some constructs need animation, but others can work out just fine without animation. When typing, I want the characters to show right away, and instead of using a switch, I could use a checkmark that I wouldn't mind getting checked too fast assuming that the context isn't full of checkmarks. I think that we have tools in the UX toolbox that are less reliant on animations than others, but yeah, if you can get animations to be neat, yet fast it's great unless battery life is also a big concern. TBH, animations only began to be acceptable to me once I got a high refresh rate screen and a fast computer, before that I knew they were speed bumps for my old hardware and maybe hated them a bit more than they deserved.
- deleted 3y ago
  [deleted]
dgellow 3y ago
Try to disable/reduce animations in your OS via accessibility settings, you will see that you really don’t lose much.
King-Aaron 3y ago
I have a different definition of what a "need" is.
coldtea 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 More like "for the same reason a fish needs a bicycle". >Not using animations would likely be more taxing on our visual processing And yet, Windows 2000 era UI was far more intuitive, consistent, and self-discoverable than today's animated, shadowed, gradient-filled, blurry transulcent, momentum-having flat crap.
- eru 3y ago
  Isn't shadowed and flat sort of the opposite of each other?
  - coldtea 3y ago
    Amazingly, not in 2024. They put shadows on otherwise flat layers - for gratuitous effect, but also to get back some separation after they've flattenned everything.
    - wolpoli 3y ago
      The shadow is around flat piece of paper of zero height, levitating off the background, casting shadow 360 degrees all around. No physical lighting set up could produce this effect.
      - coldtea 3y ago
        Exactly. "Environmental cue" my ass :)
      - ygra 3y ago
        Isn't that the effect you get when you have a large diffuse light source directly above?
        coldtea 3y ago
ulrikrasmussen 3y ago
Got any research to back up that claim? I always go to the developer settings and turn off all animations on my Android phones, and it makes a monumental difference in usability, exclusively for the better. I did it on my moms phone as well, and she instantly felt it got faster, so this is not just because I am a technical person. Some UI designers think animations are good, but they are not. They are a clutch that designers who don't know how to design good UIs rely on to indicate what is going on. We have never had faster computers than we do now, but we are collectively spending thousands of hours a day waiting for pointless animations to finish.
- geysersam 3y ago
  Wow just did what you suggested and indeed it feels much faster. I was sceptical at first but this is actually better.
- arcastroe 3y ago
  Thank you for this. I didnt know I wanted disabled animations until I tried it just now.
- alpaca128 3y ago
  > Some UI designers think animations are good, but they are not Imho animations are not a problem in cases where they do not affect latency. For example a visual click feedback to tell the user that it was registered & is being processed makes sense, especially for situations where the task may take a while. For example Mac OS' "eject drive" button would benefit from this, it has zero visual click feedback while ejecting the drive can take a whole minute for some reason. Yet at the same time Apple simply refuses to remove the 1 second long workspace switch animation even if blocked in the accessibility settings, they only swap the swiping animation with a fading animation. The problem is that often designers simply don't put any thought into it other than "make it smooth and look nice". In cases where the animation affects latency between user input and reaction to it there is no animation speed that's fast enough. It will always feel like wading through a swamp.
  - ulrikrasmussen 3y ago
eviks 3y ago
This appealing fallacy is part of the reason, but way too broad in general (and is also not reflected in the flat design land of today, but even before that almost nothing was really skeumorphically close to reality), so let's try to apply it to this specific case: you usually click on a slider, not drag it. So in this case, there is nothing "physical" on the user's intuition side that corresponds to the slider sliding. But that's exactly my question - what's the point of emphasizing the sliding? And taken your physical connection into account, the UI element should become a button And if you expect users to slide, then the slider should reflect the speed of your mouse like a physical control commongly would, not that of some random algorithm, no?
- jotaen 3y ago
  > what's the point of emphasizing the sliding? Because the “knob” changes position. Like in the real world, objects can’t disappear in one place, and then instantly appear in another. Animating a UI state change in terms of a move transition can help people to understand how both end-states are logically connected to each other. The animation resembles the mechanics of the slider knob being a “perpetual entity” that can move between two positions, rather than the slider control as a whole being some sort of static icon that is instantly swapped out for another static icon once I click on it. Whether or not animations are necessary might still be arguable. I suppose it depends on the complexity of the UI control, on personal preference, and certainly also on the general level of technical familiarity of the end-user.
  - alpaca128 3y ago
    I don't know about you but I probably wouldn't notice if my light switch suddenly moved to the opposite position instantly instead of in 50ms or something. And animations wouldn't be quite as annoying if they actually were that fast.
    - jotaen 3y ago
      You might not consciously observe how your light switch transitions to the opposite position, but I’d argue that most people still have an immediate and intuitive understanding of how both end-states of a light switch are related to them applying physical force onto the switch. The toggle transition is supposed to resemble this notion, and aims to allow the user to build up an analogous mental model of cause and effect. To me, this sounds like a valid and worthwhile idea in general. That animations are not always appropriate or fitting, or that they sometimes are laggy and sluggish, is a different story.

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.
    - vidarh 3y ago
      While that seems to be more common by a fairly large factor, in a quick search of images of toggle buttons there were at least two examples of left being on already in the top 10 for me. I also found a few that had both variants in the same image, and a few examples where from the image alone I couldn't tell if my life depended on it whether they are in the left or right position, and what that means because there's no shading or geometrical hint as to which part is meant to be the actual toggle. I wish you were right and that this was consistent, and when I read it I did that image search because I hoped you were and that I somehow just hadn't realist. But sadly it's not consistent. That said, the same image search also demonstrated people managing to mess up the equivalent of a checkbox too (by changing the label, so it's not clear if it needs to be "ticked" to disable the state currently indicated by the label) so it's clear the problem isn't just checkbox vs. toggle.
    - rypskar 3y ago
      >>Up is on, down is off That depends on where you are from, in some regions light switches are on when up and in other places they are off when up
- slimsag 3y ago
  I am profusely colorblind, and it's infuriating when people only use colors to indicate something. Please for the love of god give me a checkbox over a red/green slider toggle. Shapes, please, shapes.
  - bongodongobob 3y ago
    I'm colorblind too but I don't pretend that it's a big deal, because it's not even a daily occurrence where I'm completely stumped by color and am blocked from doing something. Yeah, charts and graphs can be annoying sometimes, but I don't expect 90% of the world to bend around me because my sight is sub par. I loathe colorblind people who act like it's a disability. It's a slight inconvenience sometimes.
    - eru 3y ago
      Adding extra differentiators also helps people with other kinds of vision problems. The benefits of accessibility often go beyond the initial target audience.
    - slimsag 3y ago
      300 million people with some form of color blindness, and for a minority of those it's much worse than others. It's great your vision doesn't affect you most days, I hope you live a happy life. For me, it's pretty annoying having to screenshot applications every few days, to be able to drag it into a color picker to be able to see what is actually on the screen. It's pretty annoying being in a Zoom call, in a tense customer call trying to debug something, and then having to screenshot a Grafana dashboard and drag it into a photo editor on the fly to understand what a customer is telling me - or have to divert the already tense conversation to 'sorry can you tell me what I'm looking at, my vision is fucked?' It's pretty annoying always being that inconvenience-to-others person asking for a link to the google slides, because I can't tell what is being shown on that pie chart. And I get it, I'm in a minority of minorities here. And it's not like 'wow colorblindness has ruined my life now I can't cook or clean myself!' - so I understand where you are coming from with 'it's not a real disability' But like, I'm not asking for you to go and construct a concrete pathway up a mountain here. I'm just asking that maybe when you are quickly adding 'a slider that indicates on/off using nothing other than color' to your shitty web app, that maybe you could just go with a checkbox instead? Or keep the slider and all the colors, but just add `on` and `off` labels to it too? Or add a hover text that says it's 'enabled'? Or at least steal Apple's slider colors instead of coming up with your own low-contrast ones? And yeah, I get it - we live in a world of 'omg wow I got glasses for christmas and now I can finally see color through my tears again!!!' social media garbage content. I just want to be able to know what a button is going to do when I click it.
- function_seven 3y ago
  Depends on what it’s controlling. The tune of my car? Red = performance, green = eco-mode. The valve on a pipe? Red means “stop” (off) and green means “go” (on). What about a heater? Does red mean hot? Or stopped? Sibling comments cover colorblind users, but those concerns also apply to most e-ink users as well.
  - idiotsecant 3y ago
    In fact red and green are generally not used for flow in a pipe because they have specific meaning for electrical equipment - green denotes an open circuit and red an energized one. This can be extremely confusing with something like an MOV so convention us to avoid red and green on valve position, pipe fill, etc.
- smaccona 3y ago
  Am I wrong in thinking that checkboxes/tickboxes/whatever-one-calls-them are ubiquitously understandable across cultures from both an interpretation and interaction perspective? If so, it wouldn’t be the first time I’ve made this assumption/mistake so I’d be happy to hear about it! If not (and I am right in thinking these are globally understood), then there’s a clear advantage of the checkbox over the switch in that it doesn’t depend on any color recognition to convey the current state. This is a huge win - I have definitely encountered UI controls where the current state was not at all apparent. I happen to use an iPhone, and haven’t personally had any issues interpreting the “switch” state nor the checkbox, but what if you’re color blind or from a culture where the color doesn’t necessarily mean what you think it does? Edit: clarify intent
  - jalfresi 3y ago
    Checkboxes also have a fundamental dependency on the label to assist them with their affordance: a label for a checkbox should almost always be in the form of a yes/no question: “are you hungry? [ ]” The “checked” box is an affirmative, empty is a negative. A checkbox without a label is useless because it has no context. But I constantly see checkboxs without the question label. Think back to all those control panels and settings windows youve seen where the label for a checkbox is something like “animations [ ]”. Does that mean they are on by default? Does checking the checkbox switch them on or off? Now compare with this “animations? [ ]” checking the checkbox has now become an answer to a question
    - chrisjj 3y ago
      > But I constantly see checkboxs without the question label. Properly so. Imagine every real-world appliance power toggle was labelled "Power?".
      - jalfresi 3y ago
        Real world appliances dont use checkboxes to power toggle
        3y ago
- krzyk 3y ago
  Not color choice, but existence of color. Some people have trouble distinguishing between red and green. Black and white is easy - checkbox is understandable quicker than a toggle.

jalfresi 3y ago

Im not sure I agree with this, and its quite a common argument for animations in UIs. The fundamental weakness in this argument is that animations are not interactive. They have a beginning, middle and end. Any attempt to interact with the UI during this sequence would disrupt the animation. This is why animation makes UIs feel slow; clicking the widgets requires a period of time to transition from state A to state B via animation. The irony is that this is used to indicate a transition, to emulate what happens “in the real world sliders dont teleport to the next state”, but this often always misses the fact that I didnt slide the slider to its new state: i clicked a mouse button. That is an immediate state transition. So all animations like the above do is slow the feedback of the state transition in a misguided attempt to emulate a real world slider when i never interacted with the UI in any way that resembles a slider.

pupileater 3y ago
This is why we design animations in immediate actions to be below 100ms, any more than that and we start to feel "computer's reaction is slow maybe it's doing some calculations in the background?"
- mrob 3y ago
  100ms is more than enough to break the joyful feeling of the computer becoming part of my own body, like a hand tool or a bicycle. Humans are adapted to tool use, and don't need to consciously think of the position of tools they're using. But this effect only works if the tool moves like an ordinary physical object. If you move a pencil, it just moves. It doesn't move and then move again because a designer wanted to play an additional animation after your movement. Until we have direct neural interfaces, all UI animation playback is unrealistic, because it's adding to the physical movement of your fingers, not replacing it.

wolpoli 3y ago

> Computer UIs need animations for the same reason they need shadows, gradients, and momentum: The thing about design principles is that the designer picks the one that justifies their decision, which is more like fashion than anything. For example: Windows 8 swept away shadow, and semi-transparent material in the name of flat design, making it resemble Windows 2.0. Windows 10 brought back shadow. Windows 11 brought back Semi-transparent material and also rounded corners buttons from Windows 2.0. Gradients have been banished and missing for a decade, but I am waiting for a come-back. > 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. The above could also apply to more than just shadows, gradients, and momentum. Skeuomorphic icons help users understand functions but we have shape & outlines resembling hieroglyphs. I doubt we are getting skeuomorphic icons back ever because font icons are just too awesome for designers. Most real world buttons are elevated off the surface to let us know it is pressable, but digital buttons now just have a white or colored pill shape around it. I can't recall the last time I saw a pill shaped button in the real world.

faceplanted 3y ago
> Most real world buttons are elevated off the surface to let us know it is pressable, but digital buttons now just have a white or colored pill shape around it. I can't recall the last time I saw a pill shaped button in the real world. Well not really, real world buttons are elevated off the surface because of the practicalities of producing buttons and attaching them to a surface, some of the material has to be above the surface and some below for it to clamp on. Buttons are also usually produced as separate components and thus tend to be round or square because it's more mechanically simple and suits the most use cases, labels can be put around the button. Computers have completely different mechanics, all buttons can be a bespoke size and shape, and they're inherently not tactile, the pill shape is just the easiest way to allow a button with variable width for variable font sized text, because it's easier to put the text on the button itself digitally than irl.
- aembleton 3y ago
  In the real world, toggle switches cannot jump instantly from one state to another but on a computer they can because of completely different mechanics. Either we want to resemble the real world or we don't or it depends on what is currently fashionable.

dietr1ch 3y ago

Well, some constructs need animation, but others can work out just fine without animation. When typing, I want the characters to show right away, and instead of using a switch, I could use a checkmark that I wouldn't mind getting checked too fast assuming that the context isn't full of checkmarks. I think that we have tools in the UX toolbox that are less reliant on animations than others, but yeah, if you can get animations to be neat, yet fast it's great unless battery life is also a big concern. TBH, animations only began to be acceptable to me once I got a high refresh rate screen and a fast computer, before that I knew they were speed bumps for my old hardware and maybe hated them a bit more than they deserved.

deleted 3y ago
[deleted]

dgellow 3y ago

Try to disable/reduce animations in your OS via accessibility settings, you will see that you really don’t lose much.

King-Aaron 3y ago

I have a different definition of what a "need" is.

coldtea 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 More like "for the same reason a fish needs a bicycle". >Not using animations would likely be more taxing on our visual processing And yet, Windows 2000 era UI was far more intuitive, consistent, and self-discoverable than today's animated, shadowed, gradient-filled, blurry transulcent, momentum-having flat crap.

eru 3y ago
Isn't shadowed and flat sort of the opposite of each other?
- coldtea 3y ago
  Amazingly, not in 2024. They put shadows on otherwise flat layers - for gratuitous effect, but also to get back some separation after they've flattenned everything.
  - wolpoli 3y ago
    The shadow is around flat piece of paper of zero height, levitating off the background, casting shadow 360 degrees all around. No physical lighting set up could produce this effect.
    - coldtea 3y ago
      Exactly. "Environmental cue" my ass :)
    - ygra 3y ago
      Isn't that the effect you get when you have a large diffuse light source directly above?
      - coldtea 3y ago

ulrikrasmussen 3y ago

Got any research to back up that claim? I always go to the developer settings and turn off all animations on my Android phones, and it makes a monumental difference in usability, exclusively for the better. I did it on my moms phone as well, and she instantly felt it got faster, so this is not just because I am a technical person. Some UI designers think animations are good, but they are not. They are a clutch that designers who don't know how to design good UIs rely on to indicate what is going on. We have never had faster computers than we do now, but we are collectively spending thousands of hours a day waiting for pointless animations to finish.

geysersam 3y ago
Wow just did what you suggested and indeed it feels much faster. I was sceptical at first but this is actually better.
arcastroe 3y ago
Thank you for this. I didnt know I wanted disabled animations until I tried it just now.
alpaca128 3y ago
> Some UI designers think animations are good, but they are not Imho animations are not a problem in cases where they do not affect latency. For example a visual click feedback to tell the user that it was registered & is being processed makes sense, especially for situations where the task may take a while. For example Mac OS' "eject drive" button would benefit from this, it has zero visual click feedback while ejecting the drive can take a whole minute for some reason. Yet at the same time Apple simply refuses to remove the 1 second long workspace switch animation even if blocked in the accessibility settings, they only swap the swiping animation with a fading animation. The problem is that often designers simply don't put any thought into it other than "make it smooth and look nice". In cases where the animation affects latency between user input and reaction to it there is no animation speed that's fast enough. It will always feel like wading through a swamp.
- ulrikrasmussen 3y ago

eviks 3y ago

This appealing fallacy is part of the reason, but way too broad in general (and is also not reflected in the flat design land of today, but even before that almost nothing was really skeumorphically close to reality), so let's try to apply it to this specific case: you usually click on a slider, not drag it. So in this case, there is nothing "physical" on the user's intuition side that corresponds to the slider sliding. But that's exactly my question - what's the point of emphasizing the sliding? And taken your physical connection into account, the UI element should become a button And if you expect users to slide, then the slider should reflect the speed of your mouse like a physical control commongly would, not that of some random algorithm, no?

jotaen 3y ago
> what's the point of emphasizing the sliding? Because the “knob” changes position. Like in the real world, objects can’t disappear in one place, and then instantly appear in another. Animating a UI state change in terms of a move transition can help people to understand how both end-states are logically connected to each other. The animation resembles the mechanics of the slider knob being a “perpetual entity” that can move between two positions, rather than the slider control as a whole being some sort of static icon that is instantly swapped out for another static icon once I click on it. Whether or not animations are necessary might still be arguable. I suppose it depends on the complexity of the UI control, on personal preference, and certainly also on the general level of technical familiarity of the end-user.
- alpaca128 3y ago
  I don't know about you but I probably wouldn't notice if my light switch suddenly moved to the opposite position instantly instead of in 50ms or something. And animations wouldn't be quite as annoying if they actually were that fast.
  - jotaen 3y ago
    You might not consciously observe how your light switch transitions to the opposite position, but I’d argue that most people still have an immediate and intuitive understanding of how both end-states of a light switch are related to them applying physical force onto the switch. The toggle transition is supposed to resemble this notion, and aims to allow the user to build up an analogous mental model of cause and effect. To me, this sounds like a valid and worthwhile idea in general. That animations are not always appropriate or fitting, or that they sometimes are laggy and sluggish, is a different story.