Hacker News Reader

Comment by bobbylarrybobby | Hacker News Reader

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.

View on HN

> 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.

> 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.

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.

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.

> 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.

Completely agree. And in 99% of cases, an instant indicator is enough and you don't need an animation.

The few places where animation makes sense are places where it is natural. For example, smooth scrolling and scroll acceleration in touch interfaces have to be animated to work, and they actually improve usability by allowing the user to work less.

I think most modern user interfaces are designed to look great for people who aren't actually using them, i.e. in demos and in stores where you pick up a phone to look at. In that case flat UIs with smooth transitions and shadows will, to the naive eye, look way more polished than UIs with proper contrast and no animations. This is also the reason that TVs come with ridiculous default settings for sharpening, contrast and frame interpolation, not because it actually is better, but because it looks better in the store and therefore sells better.

But UIs that you use every day shouldn't look great, they should allow you to get actions done as quickly as you can think of them, and effectively serve as an extension of your thought process.

Feedback affects latency when working fast. Feedback is in the critical path because the user can't look away until they've confirmed they made their input correctly. To do otherwise risks desynchronizing their mental state from the computer's state.

Thank you for this. I didnt know I wanted disabled animations until I tried it just now.

I would always do that on my previous (slower) Android phones, but it's NOT because they added to the usability, just that they slowed down the interaction significantly when the GPU etc. were not capable enough. On my latest Pixel, I don't do that anymore and just enjoy the animations because they don't slow down my daily interactions anymore. So your point does not actually convey that Animations are useless. They just have a toll on performance, yes. They always will. (I work in an industry where we spend a lot of time perfecting 3D geometry animations, because our users prefer it).

Wow just did what you suggested and indeed it feels much faster. I was sceptical at first but this is actually better.

>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.

Isn't shadowed and flat sort of the opposite of each other?

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.

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.

Isn't that the effect you get when you have a large diffuse light source directly above?

If you have a diffuse light source, let's say 8dp, directly above the component and the component is also 8dp above the background, then it'll look right for one component.

To account for the lack of parallex effect in the shadow when there are multiple components, you will then need a telephoto lens zoomed through the light source from a huge distance. I think we'll need a ring light.

Not with a "flat piece of paper of zero height"

Exactly. "Environmental cue" my ass :)

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?

> 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.

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.

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.

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.

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.

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?"

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.

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

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.

the color choice is the problem, not the toggle.

If you had red or green, which one is on?

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

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

> But I constantly see checkboxs without the question label.

Properly so.

Imagine every real-world appliance power toggle was labelled "Power?".

Real world appliances dont use checkboxes to power toggle

Checkbox is nearest in equivalence.

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.

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.

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.

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.

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.

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.

Adding extra differentiators also helps people with other kinds of vision problems. The benefits of accessibility often go beyond the initial target audience.

But, making UIs tuned for colorblind people make it easier also for others - colors should be distinguishable easily.

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.

lets ask someone who's colorblind

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.

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.

>>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

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

Reply on news.ycombinator.com