I'm a full-stack developer that is passionate about good user interfaces. In my newsletter, I talk mainly about UI/UX stuff. You could expect an email or two in a month, I'm not aiming to spam you with non-useful info.
UI/UX Review of a bank app
|
I apologize for being absent. For the past ~2 months, I've collected quite a lot of topics for newsletter issues; hopefully, you will like them. Today I want to share with you a screenshot from my bank app and make a quick review of the problems it has. In my humble opinion, of course. Here we go. There are quite a few problems: 1. Separated from each other, the expiration date, card number, and security code are all part of the card credentials. The thing is, if you need to see card number, chances are you also need CCV and expiration date. It would be better to group them. Here is an example of another app. Note that these are not inputs, just text labels that resemble cards. That's why there are no labels. 2. What’s the difference between “History” and “Online transactions”? In fact, "Online transactions" shows incomplete transactions, while "History" shows completed ones. For most users, this is excessive information, which can be hidden under the "status" label or similar. 3. There is an inconsistent space between labels and values. A small detail, yet it shows the overall quality of the product. 4. Displaying two balances is confusing since not everyone knows the difference, and likely most people need only one of them. Every time I use the app I try to remember which one is "the true one". 5. Having information about Google Play is good. However, the card information occupies more than half of the screen. What do you need more on a daily basis — a list of transactions or information about Google Pay? That's it for today, Cheers! |
Victor Ponamariov
I'm a full-stack developer that is passionate about good user interfaces. In my newsletter, I talk mainly about UI/UX stuff. You could expect an email or two in a month, I'm not aiming to spam you with non-useful info.
Today we'll cover another CSS media query: prefers-reduced-motion, and how to load (or avoid loading) styles based on user preferences — this is genuinely cool stuff! I've just posted the same article on LinkedIn, for my first time. Accessibility concern There’s a condition called VIMS: Visually induced motion sickness (VIMS)—a subcategory of motion sickness that specifically relates to nausea, oculomotor strain, and disorientation from the perception of motion while remaining still. To...
After a rough patch, I’m getting back to writing. More practical stuff that you can apply directly in your projects. One topic that looks really good is how to use modern CSS to support UI/UX and accessibility. Preference Media Queries Preference Media Queries allow you to adapt your UI based on the user's system-level settings and personal preferences — like reduced motion, high contrast, or dark mode. They're mostly used to improve accessibility and user experience. Let's cover one of them....
I've been skimming through my list of topics to cover and found an interesting CSS property that’s especially useful when you need to highlight a specific phrase inside a block of text. Normally, when a text block breaks into multiple lines, the browser treats the whole element as a single box — which often results in broken or inconsistent styling. So this code: Results in the following styling: To fix that, all you need is: box-decoration-break: clone; It tells the browser to treat each...