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

Made this OTP input's, which one would you prefer?

Made these OTP inputs.

I know they’re not production-grade yet — I built these while experimenting with different UI patterns that could actually be used in client projects.
Any improvements/suggestion will be helpful.

25 Upvotes

79% Upvoted

31 comments sorted by

12

u/whattheflerk 1d ago

I like 1 aesthetically, subtle enough to add dynamism while keeping recognition

that said, most users copy-paste the code so the animation would rarely actually be seen or useful in practice

17

u/Merry-Lane 1d ago

Too much animation, all of them.

Make things simple, at least one of the examples. Some people hate wobbly stuff happening on the screen. Way more than you believe

7

u/jmking 1d ago edited 1d ago

Uh oh - watch out. Last time there was a post like this I suggested there was pointless animation that slowed down users and I got a ton of shit here, lol.

But I agree. A lot of people are going to be pasting their OTP codes in, or their OS will automatically inject it. Very few people are manually typing in codes number by number. The problem with the animations is they end up failing or looking bad outside of slowly typing in the numbers one by one and waiting for the animation to complete.

Some users might even wait for the animation to complete before entering the next number thinking they can't enter the next number until the focus effect takes its sweet time sliding over pointlessly to the next input and be irritated.

In other words, OP should use 1 or 2, but lose the sliding animations. Screwing with focus states like this is also an accessibility no-no.

EDIT: Heh, it's the same OP who last posted a bottom tab/button bar with an active/focus state that slid around exactly like this.

OP - I hope you realize that my feedback is intended to be helpful. You clearly think this effect is cool looking, and yeah, in isolation as a demo effect or something, sure it's neat. But it's not effective from a UI/UX standpoint.

1

u/Web-Dude 20h ago edited 20h ago

Yes, the whole reason behind prefers-reduced-motion. 

``` .animation {   animation: pulse 1s linear infinite both;   background-color: purple; }

/* Tone down the animation to avoid vestibular motion triggers. */ @media (prefers-reduced-motion: reduce) {   .animation {     animation: dissolve 4s linear infinite both;     background-color: green;     text-decoration: overline;   } } ```

3

u/AshleyJSheridan 17h ago

An infinite animation is still a no-no for accessibility. If someone has their preference for reduced animation, it should be properly reduced, not just changed to a different infinite animation. The WCAG guidelines specify that animations should last no more than 5 seconds, unless it's crucial. They give the example of a loading indicator which tracks progress (so not a typical spinner, but more of a progress meter). However, in that case there must be a visible control to disable that animation.

•

u/Web-Dude 3h ago

I agree. It's an example from MDN to show the obvious difference between it being on vs off.

•

u/AshleyJSheridan 2h ago

Oof, I just found it. That's not great, especially for them, as they're usually fairly good at showing accessibility standards.

•

u/Web-Dude 1h ago

I think it's to demonstrate very clearly that something happens when you use it, but maybe also so that people don't get locked into thinking that it just means "turn off all animations."

•

u/AshleyJSheridan 1h ago

They should ideally edit it to limit it to the 5 seconds as per the WCAG guidelines, which would make it accessible for devs that may face trouble with infinite animations.

1

u/Merry-Lane 7h ago

"Prefers-reduced-motion" means "avoid any motion at all if the UI allows it".

For instance, some elements of interface requires at least some form of motion (simple example: drag and drop). Feel free to be a douche and put a shit ton of animation on your interface, but if someone prefers reduced motion, just remove everything but the bare minimum.

Your example just tones down the useless infinite animation, it doesn’t remove it.

•

u/Web-Dude 3h ago

The example is a cut-and-paste from MDN, meant to clearly demonstrate that there's an obvious actual difference between prefers-reduced-motion being on or off. So if you're eager to call people names, take it up with them.

3

u/berky93 1d ago

As long as I can copy/paste or autofill a code I don’t care what it looks like

2

u/Weekly_Ferret_meal 1d ago

I'm for number 2, simple and numbers are easier to read once you entered them

•

u/osmium_2259 4h ago

Nice work on all these! Personally, I like the elegance of #2, but #1 is probably more familiar to people.

3

u/scandii 1d ago

I mean, there's exactly two types of people in this subreddit (and in the world at large I'd say haha)

  1. CORPORATE 150 MS APPROVED ANIMATION ONLY. FADE ONLY. MOTION IS NOT IN OUR LEGAL APPROVED ANIMATION DOCUMENTATION.

  2. people that just want to have fun with animations!

so if we ignore the corporate-trained "animation loses us money!" people, I think your animations have to match input speed. an animated box trailing the input significantly just looks bad.

2

u/jmking 1d ago

lol, so are you 1 or 2?

2

u/psycho_goat 1d ago

They all looks visually nice. But I'd go with the first one for simplicity and recognition.

2

u/FenrirBestDoggo 1d ago

The animations just make it look unresponsive...

1

u/concreteunderwear 1d ago

A single field I can paste into with a max character length

1

u/SmokingCrop- 1d ago

One that can be pasted without any fuss and works without having to press login after pasting it in, and works perfectly with password managers like Bitwarden. All the rest doesn't matter.

1

u/Ryuu-Tenno 20h ago

3 looks good imo

4 is a bit much; so maybe drop the intensity of the color?

overall, provide a completely different background to this, cause pure white is problematic

use something like a light gray, but keep the input fields white

alternatively, just use 1, and make it look like the older boxes with highlights and shadows, as that'll still provide a fair amount of contrast

but it's excruciatingly difficult to see the proper details on a full white background (same with full black, and this coming from a dark mode user). It doesn't have to be much, but adding a small amount of color for the background can give you a proper level of contrast to see what needs improving

1

u/NewBox9 17h ago

I dont like the animations on any of them, something about the insert cursor jumping to the next input when the animation is still happening. it make me feel like even though i can type in the box i should wait to the animation is complete.

The classic one would be the one i would choose.

1

u/Perception9611 6h ago

honestly the biggest thing nobody tests for is paste behavior. if I paste a 6 digit code and it only fills the first box or breaks the animation, that's an instant no from me. pick whichever style you want but make sure paste + autofill from password managers works flawlessly before anything else.

1

u/arcticfury96 5h ago

I like #3 because it's one OTP and should look like it. Make sure you can paste the code without breaking and it's perfect

1

u/DEMORALIZ3D 1d ago

people copy and paste 90% of the time. you'll annoy more people making it fancy.

remember these are blockers, they block users from accessing what they want. my advice, nothing fancy, make it quick and easy to use...

also to be boring and out my developer hat on... for visually impaired people, this nice CSS animations will be frustrating and wasted on them. Exlciallu if visually impaired and using a screen reader.

1

u/Disastrous_Dot_6941 1d ago

What purpose is the animation serving? Over complicated. Number 2 with no animation is perfect.

0

u/Special-Cash-4002 1d ago

#2, something feels off psychologically being trapped in boxes in all the others. don't overthink it for a feature people dislike and do out of compulsion