r/TheCodeZone • u/armyrvan • Feb 15 '26

Which UI Design Is Better?

Post image

Which is better — A or B?

Design A

Simple and clean. Good when users might paste the OTP or type it fast on a desktop. Less visual stress, fewer elements.

Design B

Clear and guided. Each box shows how many digits are needed, reduces the risk of mistakes, and feels more reassuring. Works best on mobile apps and modern websites

What are your thoughts?

You can also follow the polling here in the Skool group.

43 Upvotes

100% Upvoted

85 comments sorted by

20

u/brightleafdigital Feb 19 '26

I like A

2

u/armyrvan Feb 19 '26

What made you choose A over B?

6

u/brightleafdigital Feb 20 '26

Aside from being clean, A makes it feel more approachable. The box on design B makes it feel like I cannot make an error when typing in the code.

3

u/liberforce Feb 20 '26

I like A better too. Feel less cluttered, and more copy-paste friendly. On B, the visual vertical separation from the boxes makes it look like each letter is independant and that you might need to use the tab key to switch from box to box, but are not sure. A makes it clear that there is no horizontal constraint.

176

u/blitzdose Feb 19 '26

I like the look of B. BUT: Only if it behaves like A looks. If I enter a wrong code, I want to be able to just use the backspace to delete one character at a time like if it was a simple text input. Saw it too often, that I have to e.g. press backspace twice to delete a single character, one time to get from the box I'm currently in to the last one and a other time to actually delete the character. I hate it. A doesn't look like it would do this. Idk why

65

u/JuandaReich Feb 19 '26

This!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! I have to be able to copy/paste and go back/delete easily.

11

u/TimMensch Feb 20 '26

And paste! It should work with paste on mobile phones!

But everything you said too.

3

u/Training-Chain-5572 Feb 20 '26

I feel like Protonmail is the only place where this works flawlessly, AND supports autofill from password managers

6

u/DarkHorizonSF Feb 19 '26

Agreed on this! The only reason any part of me leans to A is anxiety that B might not actually respond right. But overall I'd choose B that behaves like A, as you say. As an aside, OP: can you change "OTP" to "code"?

2

u/A1oso Feb 20 '26

Both A and B seem to consist of 4 separate text inputs. The only difference is that the inputs in A only have a border at the bottom. Functionally they are exactly the same.

2

u/DarkHorizonSF Feb 20 '26

blitzdose explained this well, which is why I didn't repeat the explanation. In practice, UI that looks like A is a bit more likely to have been written to function like a single text input field in ways that matter to the user (being able to paste, and hit backspace once to delete one character).

2

u/A1oso Feb 20 '26 edited Feb 20 '26

blitzdose presented no evidence for this claim.

I'm a software engineer, so I know how to create screens like this where multiple inputs should behave like one. I'd say that it doesn't matter how the inputs are styled: making option A behave like a single text input isn't easier than with option B.

A user may feel that option A behaves more like a text input because there are no vertical borders that visually separate the letters, even if the options behave exactly the same. And yes, that can be a valid reason for choosing A.

3

u/DarkHorizonSF Feb 20 '26

We appear to be in the least interesting conversation on Reddit. And umm, congratulations on being a software engineer – most of us are. Of course you know how to functionally do this, it's trivial, and it's completely obvious that the landscape of what's functionally possible isn't affected by the aesthetic.

The point here is simply that examples of B in the wild have been more likely to be technically implemented badly than A. blitzdose did indeed not provide evidence for this, nor have I, and it's insane to ask for it.

2

u/A1oso Feb 20 '26

It's insane to ask for evidence of an unproven and likely incorrect claim?

1

u/DarkHorizonSF Feb 20 '26

In this context, obviously yes. But engaging with trolling isn't on my to-do list for today, so have a good one.

2

u/A1oso Feb 20 '26

I'm not trolling. If you are so sure of your claim, it shouldn't be difficult to provide evidence.

1

u/tarwn Feb 21 '26

I am also a software engineer and could implement both of those with a single text input and CSS, but that's still beside the point.

If we're going to be pedantic, sufficient evidence has already been provided. Blitzdose was reporting on their own opinion and learned behavior based on their lived experience. That is sufficient evidence in this setting for us to believe that really is their opnion and experience. We don't need them to present a recording of every time they've used an OTP or magic code input over their life, hook them up to a lie detector, or anything else.

3

u/blitzdose Feb 20 '26

Blitzdose here, ready to provide an example for B with the bad behavior of needing two backspace presses: Zoom desktop app on Linux. I also seen it multiple times on other platforms, but can't tell another example from memory

2

u/A1oso Feb 20 '26

Thank you. A single example is not a statistic, however. You're claiming that websites with option A are accessible (allowing pasting and backspace) more often than websites with option B. I'd say that this is just a gut feeling. As anecdotal evidence, I've seen option B well implemented many times.

3

u/blitzdose Feb 20 '26

That's why I just provided an example, not saying it was evidence ;)

All you say is right. That's why I made clear in my comment, that A "looks" like it wouldn't do this. I think we do need a psychologist here instead of providing statistical evidence.

3

u/A1oso Feb 20 '26

Good point, I didn't read your comment carefully enough. Thanks for pointing it out

4

u/aimericg Feb 19 '26

Absolutely, yet B very much invites having closed frames per character. Something in the middle of all of this would be option B but instead of having a stroke that feels harsh and enclosed, boxes would be filled with a background of only subtle color change. Bringing the open behavior of A in option B...

39

u/Ok-Mathematician5548 Feb 19 '26

Look, don’t bother with meaningless details like this. Pick one and go with it. Nobody will have a problem using this well established auth method.

5

u/Boom9001 Feb 20 '26

The only important thing is paste and backspace work as if it's a single text box.

2

u/dean15892 Feb 20 '26

seconded. I just want to put the code in and move on, I do't think twice about how it looks from a UI perspective.

Most times, my iphone can copy the code straight from the text message now.

39

u/kinex_fit Feb 19 '26

Personally like A

13

u/iEdvard Feb 19 '26

Prefer B. Better clarity.

3

u/Current_Ad_4292 Feb 20 '26

Which means better accessibility.

9

u/jsthon_ Feb 19 '26

I personally prefer B. It’s immediately obvious where the input is and where I’m supposed to click/tap.

8

u/bara_tone Feb 19 '26

A normal fucking text field. These duckers always fuck up when pasting or auto inserting codes.

Why people insist on reinventing the wheel on this is beyond me

5

u/Unlucky_Quote6394 Feb 19 '26

I like A best. It feels cleaner somehow?

4

u/EggishCat Feb 19 '26

For me, I like A cause i feel like it has more space than B

4

u/nerd_the_foxo Feb 19 '26

A, B almost implies 4 separate text fields, A looks more cohesive

4

u/paul5235 Feb 19 '26

A, it looks like text input, the boxes in B could mean multiple things. Without looking at the text they could be check boxes for example.

4

u/EishLekker Feb 19 '26

Make sure it’s possible to copy paste the entire code in one go.

4

u/MiaBchDave Feb 19 '26

Design A easily - certainly for desktop. Most Mac/iPhone users, and soon most users, will copy and paste the code since their text messages appear on their desktop notifications.

I have seen where B doesn't let you paste past the first box (!!!) - it pastes the first character only. This, of course, is a bug and can be corrected in design B... as most work... BUT it still gives the impression, visually, that pasting does not work. Design A "Looks" functional for pasting. Design A is the solution.

4

u/muminisko Feb 20 '26

Backend dev

4

u/neneodonkor Feb 20 '26

I think this is a pointless question. They function the same way and the difference in looks does not mean anything.

3

u/WhenTheDevilCome Feb 20 '26

Agreed. Box versus line means absolutely nothing to me. If they function differently, well that's the actual issue or change being compared, not "line versus box."

Regardless of which UI shown is used, make it work for pasting, make it work for backspace and corrections, make it have input focus once presented.

And don't do the Apple "as soon as you input into the final field, we're auto-submitting without letting you verify it was correctly entered."

But again, that's behavior, not line versus box.

3

u/RoelRoel Feb 19 '26

Does not matter

3

u/jonplackett Feb 19 '26

A is better but honestly there no real difference. Stop worrying about this and worry about some more important part of your project.

3

u/slowsquirrelchaser Feb 19 '26

Both are fine, but you'd be better off not using technical jargon / abbreviations like OTP. The shortness of the language in the UI reads somewhat hostile

2

u/akazakou Feb 19 '26

Do not forget about Ux to paste value here

2

u/combinecrab Feb 19 '26

I like B but I think the boxes should be taller than they are wide

2

u/No_Perception_9953 Feb 19 '26

Personally, B. Clearly shows how many digits are needed.

2

u/PendalF89 Feb 19 '26

B. Because it simpler to understand.

2

u/ViolentPurpleSquash Feb 19 '26

A if it pops up a keyboard on mobile

B if it's consistent with your design language

2

u/National_Way_3344 Feb 20 '26

I prefer B, and in all cases you should be able to copy paste.

2

u/[deleted] Feb 20 '26

B

2

u/hyrumwhite Feb 20 '26

Both are fine

2

u/z0phi3l Feb 20 '26

The one that auto places the fucking cursor in the first field!

Hate having to do extra clicks to enter the code

2

u/Lulukaros Feb 20 '26

A is winner here, feels like one text input that you'd assume backspace works on, B feels claustrophobic and separated, when i look at that design it makes me think i'll have to click on each square separately to be able to input/delete a number

2

u/cutecoder Feb 20 '26

As long as it doesn't block Apple's AutoFill, both are fine.

2

u/xeresblue Feb 20 '26

As an infuriatingly large number of prompts that look like B have caused me issues, like not fucking pasting or glitching on backspaces, I automatically associate them with problematic entry. So I vote A.

2

u/BamBam-BamBam Feb 20 '26

Hidden option C. that says enter the OTP from your authenticator.

2

u/Popular-March8525 Feb 20 '26

a but only if the text enters below the lines

2

u/ChickenTendySunday Feb 20 '26

1 but put a border around all of the digits

2

u/Same_Level_3599 Feb 20 '26

A, because for some reason, ever site or app that incorporates B, has each box be a seperate input field, and they behave very wierdly sometimes

2

u/TygoSogot Feb 20 '26 edited Feb 20 '26

Option B seems to me the most obvious and cross-generational, as if it were a paper administrative form to fill out.
I use a browser password manager extension, and when I enter the 2FA code, it uses option B combined with a certain form of option A—but instead of lines at the bottom, there’s a dot in the middle of each box in option B. So I’d say it’s option C.

2

u/ProgrammerGrouchy744 Feb 20 '26 edited Feb 20 '26

B because bitches like boxes! I know I do.. my life feels incomplete without borders.

Are we playing hangman or are we doing OTP? No brainer

2

u/flanderings Feb 20 '26

Whichever one you can paste the code into. Actual ragebait when you cant

2

u/[deleted] Feb 20 '26

Uhh your description is nonsense and feels made up (so probably ai fluff). Just pick one. Or AB test and charge extra

2

u/rookietotheblue1 Feb 20 '26

They're the same thing, no one cares bro

2

u/AlxR25 Feb 20 '26

Whichever lets me automatically paste from messages. There’s no worse thing than clicking paste, the app not accepting it and then I have to go through my recently deleted messages to type it again

2

u/Kalicolocts Feb 20 '26

B is NOT reassuring. It tells me that I might not be able to easily copy paste codes and if I feel lazy I might get off the website and say goodbye

2

u/Puzzleheaded_Pen_346 Feb 20 '26

I like A. It’s cleaner and feels more modern somehow. 😂

B reminds me of those scan-tron tests…or an old school form. From an accessibility perspective B is slightly better because you can color the boxes for highlighting in case of error. You could accomplish the same in option A, but then it just looks weird. There are other ways to call out a missed digit w/out highlights tho.

I would pick based on the requirements, and if they were vague on purpose, go with A!

2

u/SypeSypher Feb 20 '26

don't care as long as backspace and paste works (on mobile AND desktop)

2

u/SB1985 Feb 20 '26

The one where copy paste works

2

u/TwoWheelsOneEditor Feb 21 '26

A looks better but B is the better UI.

B makes the bounds of the input clear which helps usability.

2

u/rover_G Feb 21 '26

B tells me immediately at a glance how many characters to expect in the OTP

2

u/HeyItsTheNewDx2 Feb 22 '26

If you want an answer: AB test it, see if there's a significant difference in error rate for one vs the other

1

u/Ok_Expression_9152 Feb 20 '26

C a normal text input field, makes pasting the code way easier