In my previous email, I asked what type of content you would like to see. Several of you mentioned that reviews of poorly designed UIs would be awesome.

So, here we are. Today, we will review this payment form.

By the way, this is from one of the most popular banks in Armenia.

Disclaimer:

This form is designed for card payments at a local bank, which is why it does not include fields for country or VAT. It is not a subscription form for a SaaS or something like that.

Let's go over problems

I provided reasoning behind each problem according to UI/UX rules.

Hierarchy

There is no proper text hierarchy, which means that the form title, amount of money, and input labels all have the same size. It's the same if I say that the name on the card is as important as the amount of money I should pay.

The same applies to other parts of the form. Take, for instance, the price label. Even though the price is highlighted, it still looks like it's yet another input (a weird one, I know), because spacing also matters. You should use white space to separate things that are related to each other.

Data (amount to be paid, recipient, etc.) is one part. Form is another.

Language

Using "yours" in this case is redundant. It's highly unlikely that users won't understand that they need to input their card data.

The hints about 16 digits and security code are unnecessary as well. Cards always have 16 digits, plus we will give a hint in a placeholder. Regarding the security code, it's more common to show an icon as a hint. All of the form inputs are very well known.

But I think I should have kept the hint about the name, as it was in the original design. As far as I know, this value doesn't affect how payments are processed (in other words, users can enter any name). We should clarify whether this is truly the case. I didn't include this information, but it could be an important part that needs more research.

Inputs

First, inputs have big labels, as we talked about before. They also have a light blue background, which isn't very common. It might be nice if the whole page is blue or something. For example, you could use some shades of grey.

Then, the size of the security code input is too wide. There is a rule that input size provides an extra clue of what kind of data is expected. If it's a security code, it will always have 3 digits. If it's a year - 4 digits. Do not stretch the width so much.

The next one, which shows "11 November 2028" as an expiration date, is wrong. We strive to align the real world with the digital world experience, so when you look at cards, you'll see 11/28.

Remember, there are two things about matching:

1. Match between real world and digital world (buttons, inputs, knobs, sliders, etc. resemble real-world items)
2. Common patterns that appear on the Internet (see Jakob's law)

So we should use both, but if there is an established pattern which does not resemble the real world, we should use this pattern and not reinvent the wheel.

Other issues

I also put some other details on the picture.

1. The payment methods were located below the fold and positioned too far from the card form. These hints indicate which cards are supported.
2. The label about session expiration is not aligned, and it's hard to notice it.
3. The pay button should contain the amount to be paid. That's a very good pattern, since sometimes you have dozens of additional services, taxes, VAT, etc. Yes, the total can and should be shown somewhere, but it's reassuring to put the final price in the button text.

​

Solution

I checked out several similar forms. They look slightly different, but the principles that I talked about (hierarchy, input size, matching, alignment, hints) were the same.

Here is what I come up with, with additional notes.

It takes way less space and fits the screen perfectly (up to 600px of height).

I separated the data part (price and who do we pay) from the form. In this case there is not much data, but if there were, I would use a two-column layout: data on the left side, the form on the right side.

By the way, showing the currency as text (AMD) is better than the currency symbol. Because it's easier to google what the currency is, it's simply easier to type it (instead of trying to understand the symbol, ֏, in this case)

Before/After

Remember that the left picture is shrunk. It's way bigger on the real screen.

If you want me to review your UI, just reply to this email.

Have a productive week! ♥️