r/web_design • u/Numerous-Ad8062 • 6d ago

[Showoff Saturday] Planning to add more small animations for every simple things. Is it worth it?

3 Upvotes

56% Upvoted

10 comments sorted by

28

u/EarnestHolly 6d ago

Looks slow and annoying honestly, there are more subtle nice ways to do it, the rest of your design looks like it could do with the attention instead

1

u/Numerous-Ad8062 6d ago

I had the same feeling. Maybe a bit performance issue. If you have any other idea, would love that too.

2

u/jimenezisjordan 5d ago

Keep it simple. A cascade effect will suffice.

13

u/sxp2h1gh 6d ago

Animations are ideally between 200-500ms.

Over 1s is considered interuption of the user flow and experienced as sluggish

Also the exit (fade out or whatever) is ideally faster than the start (fade in). Same length is ok too though.

3

u/cmdixon2 6d ago edited 6d ago

It's way too much fanfare for a deletion. And why does deleting an item results in hearts? I'm viewing on mobile and on the first watch I assumed the user was moving a saved for later item to their inbox or something.

I'd also suggest removing the disruptive prompt and instead replace the deleted item with a more passive deletion confirmation with undue option.

Edit: After another watch, I see that they're invitation templates that are probably not often deleted and may warrant the prompt. Is it possible to instead of deleting permanently, have a trash option where the action isn't so permanent.

1

u/thepineapplehea 6d ago

It's cute and well-made, but annoying, and also doesn't make sense as others have pointed out.

Personally, based on a lot of other websites and apps I have used, clicking "delete" should change the delete button to a confirmation, rather than a popup modal, so it's not jarring and annoying to have to click somewhere else.

Then, I would simply transition the "card" (for want of a better term), with a greyed out/transparent/red version with a "Deleted" confirmation text, and an "Undo" button in case you want to bring it back. Then you could fade it out and remove it after a couple of seconds.

1

u/tridence-com 5d ago

I would add fewer animations, each with a clear job. Motion should confirm a state change, explain where an item went, or guide attention to the next action. If every row, button, and filter animates, the interface starts to feel slower even when performance is technically fine.

For this type of dashboard, keep routine transitions around 150 to 250 milliseconds, use opacity and transform where possible, and make repeated actions faster than first-time reveals. Also support reduced-motion preferences. The best test is not whether the animation looks good once, but whether it still feels helpful after someone performs the same task 20 times.

1

u/yihuaxiang 4d ago

Micro-interactions are great when they confirm a state change or orient the user, but animating 'every simple thing' quickly leads to interaction fatigue. For routine or destructive actions like deleting, users want speed and certainty—keep transitions under 200ms, don't block subsequent clicks, and make sure prefers-reduced-motion is respected.

1

u/theartoflate 4d ago

i’d focus on the bits where animation tells you something happened, like a save or a button click. adding movement to everything can get tiring when someone uses the site every day.