Do top, or left aligned field labels perform better at form completion?

Question

I have designed these two forms and would like to know which would be more effective at conversion i.e form filling up.

Here's the first one which I feel is more effective reason being the separate rectangle containers break the eye motion and when the eye focuses on the next element it will read from left to right, which would help users just fill up a form one step by step.

Here's another form that was made. The form fields differ but this is what is used by Android.

Which would perform better? Type of user: 20-30's, mid level income, constantly in touch with farmers, has a vehicle for commute given by the company, uses phone mostly for calling and texting people. Smart phone can be in the price range of $100 to $150. Make Samsung, OPPO, Motorola.

My consensus is to user would read the text in the first image and see the text in grey realise that needs to be filled and fills it up. This goes against the top down approach of how mobile users read forms. But it really helps the user focus on the one field they're filling and that I think is worth the trade offs of material designed form field.

Answer 1

There are many articles which recommend TOP ALIGNED over LEFT ALIGNED.

It’s clear that top aligned and infield labels aren’t the quickest and easiest to scan, but what’s a better approach? The better approach is infield top aligned labels.

http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

The following article shows eye tracking patterns and comes to the same conclusion that TOP ALIGNED labels are more scannable:

Label position—Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field.

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

Label on top of the field

Advantages

• On small screens, when focus is in-field, label can still be seen (despite zoom).
• User may be able to see the label and the field within one glance.
• Label length can be longer than field length.
• Allows for different label lengths when form is translated into other languages.
• Form is narrower compared to having labels beside fields. Longer labels that wrap are easier to read, as there is a consistent left edge for the eye to return to.
• Labels are in close proximity to their corresponding fields, so it is easy to see which goes with which.
• Label is visible even as its corresponding field is being filled out, so the user doesn’t have to remember what the label was, and can cope with interruptions.
• At any time, users can compare their answers to the labels.
• Easy to implement well.
• In HTML, does not require the use of the placeholder attribute as a proxy for label, helping maintain accessibility.
• It’s easy for users to see where they have to enter information.
• Works regardless of field type (e.g. text box, radio buttons, check boxes or drop downs).
• Works with touch interfaces.

Disadvantages

• Form is twice as long compared to forms with labels beside fields.
• Labels are harder to scan, as they are separated by fields.

https://www.sitepoint.com/definitive-guide-form-label-positioning/