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.