One-time code forms are often split-up into multiple inputs, one per digit. From a UX perspective, what's the benefit of doing that? Why not just use one input?
For example: https://www.chakra-ui.com/docs/components/pin-input
Discussion
Loading...
@matuzo I think the initial idea was to have each digit visible separately, so it is easier to verify and not make a mistake.
Bad implementations use several inputs; good implementations use just one input that looks like several.
A better UX would be to have a single input with a monospace font and a large letter spacing, so there is no illusion that there are multiple inputs.
@matuzo I prefer single input fields. Often the multi input fields have some UX glitches. I haven’t seen any user research on whether users would find one or many inputs easier - I imagine it’s just a design thing that caught on.
A lot of banks and financial institutions use this pattern,but also scramble things up.
For example, they'll ask for digits 4, 1 and 3 from a PIN, plus characters 2, 8 and 13 from your password.
In my opinion this fails WCAG SC 3.3.8 https://www.w3.org/TR/WCAG22/#accessible-authentication-minimum but I'm not aware of anyone having challenged it.
@se_davidobrien WHAT!? That almost worse than CAPTCHA.
It requires awful mental gymnastics, and the use of 14 fingers (or however many characters in your password).
If you have a cognitive impairment, it must be practically impossible without writing it down - which shows how entirely counter-productive it is.
@matuzo I don't have a (strong) opinion yet. I would also start implementing such a component with a single input (like, single native copy-paste, value, and more).
I actually might implement it soon - currently working on a component library.
Which approach would you recommend/prefer?
@matuzo Like many other UI elements, one gets used to them. But, if it weren't for copy/paste, they are a nightmare for keyboard users. If you're manually entering characters and happen to make a mistake, it's bloody annoying to go back and delete characters since it requires you to tab back. And, if you aren't careful, the automatic cursor movement to the next field poses a larger problem. You often have to delete the entire thing and type it again to get it right.
@matuzo In addition, well-labeled multiple inputs like on the Apple ID website, give the digit number expected in the label. So they say something like „digit 1", „digit 5" or such. Helps with orientation.
@marcozehe Makes sense but is it better than a single input field?
@matuzo I actually haven't given it much thought. I usually let Apple Passwords or 1Password fill out the OTP codes, or if they are being sent via email or SMS, Apple's autocomplete feature. Both cope well with both types of entry. And I no longer strictly wear an accessibility hat, so don't think about it too much any more.
@marcozehe Thanks for your input! :)
@matuzo when you have multiple digits it's hard to see how many there are (also why credit card numbers are divided into groups of 4)
bonfire.cafe
A space for Bonfire maintainers and contributors to communicate
Automatic federation enabled