4 ms·

How important are animations in a UI? I typically find them annoying (because you have to wait for them).

chriskrycho 4y ago
Poor animation design has exactly the problem you describe. Animation in general is a very useful affordance, though: it allows you to convey the relationships between the various nodes and modes in your UI. That ranges from being able to do more than hard toggles on colors of buttons for different modes to actually being able to do push/pop on “stacks” within the UI, which is a concept mobile UIs in particular make heavy use of. Overuse of animation can be an accessibility problem, but having no animations or transitions can actually also be an accessibility problem because it can make it hard for people to build a mental model of what happened when navigation occurred.
- berkes 4y ago
  I'd go so far as to state that anyone who 'hates animations' uses them daily. The ones you don't notice are most often good - yet they are there. You'll notice degrading UX when they aren't. The ones you notice are quite likely bad, but that doesn't make the majority of aniation bad. Anything, from a blinking cursor, to the highlight effect on your smartphone keyboard to the check-uncheck of a checkbox is animated. Subtle, but crucial.
  - wtetzner 4y ago
    I don't think these are the kinds of animations being referred to. They're instantaneous state changes. E.g., for the highlight effect you can just change the key image on press. It doesn't need multiple frames of animation. So while it is technically an animation, I don't think it really requires any special GUI toolkit support to implement.
ativzzz 4y ago
Simple sliding animations for going back/forward in mobile screens add so much more confirmation to what exactly is happening when you click an element. Or when you tap a button. That feedback you get when you interact with an element is often some kind of animation.
golergka 4y ago
In game development, extremely important. And to increase complexity, they can also “delay” state updates from the actual state to what is presented to the user. The player's gold purse might already have that 10gp, but the gold counter at the top should only be updated when the gold icon completes it flight from the center of the screen. Also, this icon? It was originally rendered in the game layer underneath the ui, and has to change layers (which usually have very different layout algorithms) and un-chain itself from the camera movement during this animation, completely unnoticed by the player.
pjmlp 4y ago
In modern UIs, even screen transitions rely on animations.
- wtetzner 4y ago
  Sure, but I guess my point was, do they really need to? How much does it add? I'm not necessarily saying they don't matter, more that I'd like to find out how much they actually matter, vs how much people think they matter.
viraptor 4y ago
The basic stuff is incredibly important, but there's also lots of fluff in many applications which is why you find it annoying. My two go-to examples: - The shopping app I use has some kind of points system and some items give you "boost". I hate the concept and don't even care what it does because adding those items animates a bar filling up and take extra 4s while I'm trying to do this as quickly as possible. This is a terrible use of animations. - Any app where you can rearrange a list needs an animation for when you hold an item and try to move it. Specifically, other entries shouldn't instantaneously jump around when you cross some threshold. There's lots of subtle ways to achieve this, but one of my favorites is greying out the old space and springing items up/down as you move the chosen one around. This animation is almost required, because the experience is jarring otherwise.
- wtetzner 4y ago
  But this feels like something that can be handled with instantaneous state changes. I feel like pretty much any GUI implementation could handle it. I assumed the kind of animation support referred to was timed animations, which need multiple frames to complete.

Poor animation design has exactly the problem you describe. Animation in general is a very useful affordance, though: it allows you to convey the relationships between the various nodes and modes in your UI. That ranges from being able to do more than hard toggles on colors of buttons for different modes to actually being able to do push/pop on “stacks” within the UI, which is a concept mobile UIs in particular make heavy use of. Overuse of animation can be an accessibility problem, but having no animations or transitions can actually also be an accessibility problem because it can make it hard for people to build a mental model of what happened when navigation occurred.

berkes 4y ago
I'd go so far as to state that anyone who 'hates animations' uses them daily. The ones you don't notice are most often good - yet they are there. You'll notice degrading UX when they aren't. The ones you notice are quite likely bad, but that doesn't make the majority of aniation bad. Anything, from a blinking cursor, to the highlight effect on your smartphone keyboard to the check-uncheck of a checkbox is animated. Subtle, but crucial.
- wtetzner 4y ago
  I don't think these are the kinds of animations being referred to. They're instantaneous state changes. E.g., for the highlight effect you can just change the key image on press. It doesn't need multiple frames of animation. So while it is technically an animation, I don't think it really requires any special GUI toolkit support to implement.

ativzzz 4y ago

Simple sliding animations for going back/forward in mobile screens add so much more confirmation to what exactly is happening when you click an element. Or when you tap a button. That feedback you get when you interact with an element is often some kind of animation.

golergka 4y ago

In game development, extremely important. And to increase complexity, they can also “delay” state updates from the actual state to what is presented to the user. The player's gold purse might already have that 10gp, but the gold counter at the top should only be updated when the gold icon completes it flight from the center of the screen. Also, this icon? It was originally rendered in the game layer underneath the ui, and has to change layers (which usually have very different layout algorithms) and un-chain itself from the camera movement during this animation, completely unnoticed by the player.

pjmlp 4y ago

In modern UIs, even screen transitions rely on animations.

wtetzner 4y ago
Sure, but I guess my point was, do they really need to? How much does it add? I'm not necessarily saying they don't matter, more that I'd like to find out how much they actually matter, vs how much people think they matter.

viraptor 4y ago

The basic stuff is incredibly important, but there's also lots of fluff in many applications which is why you find it annoying. My two go-to examples: - The shopping app I use has some kind of points system and some items give you "boost". I hate the concept and don't even care what it does because adding those items animates a bar filling up and take extra 4s while I'm trying to do this as quickly as possible. This is a terrible use of animations. - Any app where you can rearrange a list needs an animation for when you hold an item and try to move it. Specifically, other entries shouldn't instantaneously jump around when you cross some threshold. There's lots of subtle ways to achieve this, but one of my favorites is greying out the old space and springing items up/down as you move the chosen one around. This animation is almost required, because the experience is jarring otherwise.

wtetzner 4y ago
But this feels like something that can be handled with instantaneous state changes. I feel like pretty much any GUI implementation could handle it. I assumed the kind of animation support referred to was timed animations, which need multiple frames to complete.