Help with payment gateway input fields

ui
design
usability

#1

Hi Guys.
Im working on a project in the online payment space and need feedback regarding the UX of some design choices.
I have 2 options here in respect to how i intend to implement the input fields.

What are you thoughts?
Option A takes the traditional form approach. Label on top, input field below while option B makes use of common area & closure visual cues. The major downside for Option B is the input fields arent well defined.
I’ll like to know your thoughts


#2

I prefer A. I don’t have any good reason. I just picked what I liked.


#3

I prefer A because it’s what I’m used to seeing.


#4

I’m seeing adaptive placeholders (B) more and more and I think the UX is great but if being picky, since fields with text inside are less noticeable, going to have to go with A.


#5

@Rei_Hino - I think I have an idea, but I want to be sure. What’s an adaptive placeholder?


#6

An adaptive placeholder has placeholder text that moves up when your cursor is placed inside the field Example


#7

Option A seems better


#8

Hi everyone. Pardon the late reply. Thanks a lot for your input. Very appreciated.
@Rei_Hino, Hi. The second image wasnt intended to illustrate an adaptive placeholder. Its actually a static input label.
I noticed it being used in several applications lately. take a look at https://paystack.com/demo. Attempt the demo.
@Piper_Wilson. You have ideas? :slight_smile:


#9

I also prefer A.


#10

For usability reasons I would offer payment methods that allow the customer to pay without having to enter their payment information such as PayPal, Google Pay, Apple Pay, Amazon Merchant, etc.


#11

Card Pin in option B seems to fall out of pattern as it is outside the frame. Is it intentional?

I like the idea of grouping the elements in Option B. It looks similar to the Material Design guidelines example:

But making input fields to be clearly discoverable is kind of challenge. The solution can be through putting the default focus to the first input field, blinking input cursor, and the clearly differentiated focus state of the selected filed as in the image above.

Maybe you could also consider separating the fields with horizontal lines instead of frames, smth like: 1_vLI1f7vekckEEqQgnySJ2Q


#12

Oh, I did not notice this to be a very old post! :smile:
@ojanti Did you make a decision about this screen design?