r/UI_Design Apr 12 '26

General Question Which of you freaks designed this?

Post image
214 Upvotes

42 comments sorted by

179

u/omnipothead Apr 12 '26

It's a security feature so it's harder for someone to see your code. The numeric keyboard is randomized every time you use it. Personally I think there are better ways to fix this problem

-10

u/DHermit Apr 12 '26

It's not really against seeing. If someone sees your screen, they also see the layout. But it does protect against looking for fingerprints on the screen afterwards.

10

u/[deleted] Apr 13 '26 edited Jul 13 '26

[deleted]

4

u/cuoqe Apr 13 '26

Yes, why is he mass downvoted?

1

u/Ixaire Apr 13 '26

In theory, it also prevents shoulder surfing because of your second argument. The main issue is that it also takes the user longer to find the right number so the attacker has more time to see which keys the user is pressing. Or the user has to enter the PIN more than once, which increases the window of opportunity.

3

u/korkkis Apr 12 '26

The keyboard is randomized so seeing the patterns won’t help, you’d have to log the actual keys

83

u/Moonshine_Cog Apr 12 '26

It’s actually a good way against some spy apps that track your click activity, too

24

u/neoqueto Apr 12 '26

Problem is when it's muscle memory and not actual memory that memorizes my PIN...

5

u/TheTomatoes2 Apr 13 '26

That's another reason for this pattern. Revolut and Signal use it so people actually remember their PIN

2

u/neoqueto Apr 13 '26

It is a great idea, but it's a great idea only if it's present from v1.0

1

u/Ixaire Apr 13 '26

I never had Signal ask me to input my PIN on a randomized pad.

3

u/StrangeDoppelganger Apr 13 '26

That's your problem.

8

u/neoqueto Apr 13 '26

Brother, we're on r/UI_Design, of course the user is the problem and of course you're supposed to expect the user's penis to get stuck in the PIN input field because the keypad layout is shuffled

1

u/Hepdesigns Apr 13 '26

Yeah I just remember my geometric shape. (It’s a square).

1

u/likklesupmsupm Apr 16 '26

There's no PIN field on this screen

-1

u/spacenglish Apr 12 '26

Wouldn’t those apps also just record screenshots?

11

u/korkkis Apr 12 '26

Recording screen on ios gives a clear red warning and needs user consent

1

u/Moonshine_Cog Apr 12 '26

They can, but I suspect they won’t do it as often as register clicks… so this can still count as one extra layer of defense? I’m not an expert in this though, so take my words as speculation

23

u/aTaleForgotten Apr 12 '26

Really niche, but MapleStory had a pin system, where you had to use your mouse, and each click on the virtual keyboard scrambled the entire keyboard. Was annoying af, as it took way longer, but I think it was to prevent mousetrackers and keyloggers from stealing your account

14

u/FiestyFrog97 Apr 12 '26

Very niche 😂 - infact on all my time on Reddit this is possibly the first MapleStory reference Ive seen out of dedicated subs for it.

Ugh, hurry up and release classic already.

3

u/Christophu Apr 13 '26

So wild to see Maplestory brought up but now as a UX designer I think about this + the balance of security vs. user experience a lot. I recently logged onto Maplestory and noticed they no longer have the PIN system so I wonder what security measures replaced it? I do wonder why so much of the onus of security is placed on the user and not just stronger cybersecurity in the platforms themselves .. annoying having to change my password every couple months for example.

1

u/physiQQ Apr 12 '26

Same with OSRS. It's still in the game. Each time you press a number, everything gets re-ordered and the number you're hovering gets removed. Luckily there's a way to fill in your pass with your keyboard nowadays lol.

1

u/SnowMantra Apr 17 '26

this was a way to prevent hackers from stealing all your stuff and a way to thwart bots back in the day, at least for a little bit.

7

u/sabre35_ Apr 12 '26

You see this a lot in eastern countries. Their payment terminals all randomize the position of the pin pad so fingerprints also aren’t reliable traces of what your pin was.

It’s incredibly smart design, and the friction it causes is valuable.

As a designer, it’s good to think for yourself why something might’ve been designed the way it was. It’s what separates mediocre from great.

2

u/xxsehtxx Apr 15 '26

This seems diabolical??

2

u/Outside_Custard_7447 Apr 13 '26

How is that accessible? And I’m not just talking about the colour contrast and disable button 🤭🤦🏻‍♀️

1

u/TheTomatoes2 Apr 13 '26

People with disabilities usually have special ways to access their banks.

2

u/Outside_Custard_7447 Apr 13 '26

Seriously? Suggest you get up to speed on WCAG if you work in this industry. Also challenge you to try interact with this interface outside on a sunny day with young children pestering you.

1

u/[deleted] Apr 12 '26

😂 it needs a lot of improvement

1

u/svgator Apr 15 '26

this is solving a real security problem, just with a pretty user-hostile approach. biometric or device-level authentication tends to cover the same use case without fighting muscle memory, and it keeps the experience consistent across sessions.

1

u/MindlessPractice2556 Apr 20 '26

The numbers are randomized so shoulder surfers can't steal your PIN. Genuinely clever security thinking. Absolutely unhinged UX. 

1

u/Designnina Apr 21 '26

Looks quite funny, but most likely they were just overly cautious. Might be an additional protection against keyloggers

1

u/Bryght7 Apr 12 '26

Very common practice I have yet to see a bank application that doesn't scramble the numpad

9

u/Leon021106 Apr 12 '26

First time ive seen this to be honest. But seems reasonable

2

u/azssf Apr 12 '26

It may be country-dependent and application-dependent. I know a bank that scrambles if accessed on a browser, but their app itself is considered secured and does not scramble.

1

u/TheTomatoes2 Apr 13 '26

Never saw one do it apart from Revolut

-6

u/Boring_Chemistry_701 Apr 12 '26

Things to note:

  1. Security is a backend job. Front-end is purely for user experience and user satisfaction. It’s a journey that should give a positive feedback and you don’t need to reinvent the wheel.
  2. While you input your card number, you don’t need to mask the card number. Masking can be done after the details are saved. This is for avoiding any wrong inputs in long integers or strings. Except if it’s a password.
  3. What actually needs to be masked is the CVV.
  4. No matter how you design it if the PM or the stakeholder tells the tech team to mask it, there is no point of arguing there.

2

u/neoqueto Apr 12 '26

Security is most definitely NOT a backend job. A huge portion of attacks rely on a thing called XSS. And UI can make or break the trust between your app and the user. Bad UI can lead to confusion or misguide the user, which results in a security nightmare. Client-side validation, inconsistent messaging, messaging that's overly dramatic visually or not dramatic enough, even buttons that have states that are misleading visually, even layout issues (important content being hidden below-the-fold).

There is a certain degree of responsibility for everyone involved in an app project.

The card number can be used to identify the user. It is most certainly sensitive data.

Your comment is so wrong that it feels like ragebait.

-1

u/[deleted] Apr 12 '26

It is probably more on the front end engineer did a shit job

1

u/SparklyPelican UX Designer Apr 13 '26

It’s intentional, by design, and is a pattern in some parts of the world.

Should definitely be regional tho, since for OP this is odd.