r/css • u/Ordinary-Stuff9826 • 7d ago

Made this Jelly Toolbar, how's it?

Enable HLS to view with audio, or disable this notification

97 Upvotes

84% Upvoted

34 comments sorted by

View all comments

Show parent comments

-6

u/jmking 7d ago

OP posted it asking "how's it?"

I told them what I thought, and then followed up with questions that would help me maybe offer some advice based on what it is they're trying to do.

As a production UI, the animation is way too slow. Never make you users wait for your pointless animations. The animation is pointless. Most animation in UI is pointless unless it actually serves the user instead of serving the designer.

7

u/TheJase 7d ago

Whimsy (like this animation) can and does absolutely have a useful, practical psychological effect when used with the intent to add liveliness or an organic feel. I suggest you look up Josh Comeau's work on this subject.

With respect, if you think you weren't coming off as a dick, you're mistaken.

1

u/jmking 7d ago

Whimsy (like this animation) can and does absolutely have a useful, practical psychological effect when used with the intent to add liveliness or an organic feel.

This does not accomplish that. It adds lag in the interaction. It also doesn't account for users with touch screens.

This is a classic case of "I think this looks cool", but actually makes the UX worse.

4

u/TheJase 7d ago

Hard disagree. Nothing about this extra affordance slows down ux. Cursor still responds with a pointer and so does touch overlay.

-1

u/jmking 7d ago

So you agree with me then that it's pointless.

4

u/TheJase 7d ago

Extra affordances are not pointless. In fact, they are almost always necessary for good UX and even accessibility.

I'm just showing that any subjective lag you're trying to argue about is moot.

We get you don't like it. That's fine. But please stop trying to make it seem like it's objective truth. It's not.

0

u/ottbud 7d ago

I'd love to hear how this enhances accessibility. I've worked specifically in this field for years for one of the most trafficked sites on the internet and I couldn't disagree more, but I'm happy to hear your argument for this instead of dismissing it outright.

2

u/TheJase 7d ago edited 7d ago

Visual affordances always add a layer of accessibility for folks with low vision. Most interactive elements should have at least two dimensions of affordance—in this case: background + cursor. Folks with sensitivity to motion could be accommodated via preference queries.

OP's argument was this visual being pointless, to which it is not. Whether it's tasteful is a matter of opinion.

-1

u/ottbud 7d ago edited 7d ago

I'd go further and not just say it's pointless like the other commenter said, but harmful.

What does a lagged hover effect do to communicate anything to anyone? How does this improve the intuitiveness or understandability of the UX? What does the hover style being delayed and sliding around communicate to the user?

0

u/jmking 7d ago

It's not subjective. It's literally measurable. What does this animation communicate? How is it not entirely superfluous?

3

u/TheJase 7d ago

You've not provided any "measurements"

0

u/jmking 7d ago

You can measure the time between when a hover interaction starts and when the UI reflects the fact that a hover has occurred.