Im trying to figure out where I should draw the li...

# compose

[Zoltan Demant]

Im trying to figure out where I should draw the line when it comes to animations in design system components.

+ On one hand, I do like the idea that if my button handles some animation, now all my buttons look extra fabulous.
- On the other hand, if the simplest Text composable animates its color, theres a ton of stuff happening almost all the time.

When is too much, too much? Please let me know if you have tried one or both alternatives, how did it go?

[mattinger]

Why not make it an option when declaring the button? If you give the calling site the option to animate it or not, it lets your designers have the choice of what looks right from a user standpoint. In this case, it could either be a flag, or maybe it’s own separate composable if there’s a ton of conditional logic to be had.

[mattinger]

My own personal opinion is that animation for the sake of animation is distracting and resource consuming. There’s situations where it makes sense (material ripples, bottom sheets, drawers, etc…). But in a lot of cases it’s nothing but window dressing that can
a) distract the user
b) consume resources
c) be entirely useless to users in various accessibility modes (screen reader, etc..)

[Zoltan Demant]

Thanks for the feedback @mattinger! Would you feel the same way if the animations mentioned are small delights, i.e. the button might animate its change of color, appearance/disappearance of a loading indicator, etc. I can see that this might be too much (and unneccesary work) for a simple Text composable.

[stantronic]

Its hard to give any definite rules of thumb without assessing the impact on the screen as a whole. The text one does seem like a special use-case - i would make that a special composable for where it is needed, but I think animations on buttons / moving items etc. should be standard unless the profiler is complaining about performance, in which case disablling it through a parameter might be the best way forward. Ideally if an animation can be separated out, almost as a component itself which can be injected then that makes for a more maintainable set up/

[mattinger]

My general opinion is that an animation should serve some purpose to the user. In the case of a loading button, it indicates that the application is doing background work. Material ripples/button color animations usually indicate to the user that a button is changing state (from say idle to pressed, etc….). If it’s not conveying some useful information to the user it’s just window dressing.

[mattinger]

Also, FYI: Slot based UIs are your friend. It’s part of the reason the compose button is so flexible as opposed to the xml based one which is property based, not slot based.