Are forms with infield top aligned labels better than left aligned forms that provide a clear scan line?

Question

This article came out a couple of days ago about infield top aligned labels.

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

I like the infield top aligned label part, I can see how that might be helpful as opposed to the traditional labels and their placements. But I'm wondering about making the form a grid where some inputs line up horizontally rather than vertically. Traditionally, clear scan lines "allows people to respond quickly to questions and complete their task with a minimum number of diversions" and "increase completion rates by keeping people on track and ensuring that they see and respond to all questions a form asks them" (Luke Wroblewski - Web Form Design). But is this only with the traditional labels? This type of labelling is more compact without the white space so perhaps that helps? I think probably not. But that leads to my question:

Currently, Google is just pointing me to this article, so I suspect this is a new design but has anyone already done this and tested it against the traditional left aligned input forms? Is it faster? How are the conversion rates?

Answer 1

I will say even better approach is of material as it combines both of the rejected approaches in the article and tops the proposed one.

Let me show how (one has to read the article mentioned in question to understand even better):

First, Quickest scan but with label disappearing problem:

Second, label stays visible but takes longer to scan:

Material, The label moves up while typing:

or

Thus, the form remain as quick as the first option discussed here while labels are also visible thus topping the solution discussed in the article.

Answer 2

I don't think you can answer this question unless you look at the entire form and also the individual form fields themselves. The reason for this is that there are at least two different types of scanning patterns that the users will adopt during the process of completing a form.

The first of these is the scanning of the entire form, which requires them to process the overall form itself and determine which fields they need to enter (i.e. mandatory) and which fields they want to enter (i.e. optional but they want to provide details for).

The second of these is the scanning of the individual form fields, which requires them to process the actual input field itself and determine the information that they need to provide (e.g. address input type, date input type, etc).

If the form is simple in terms of the number and types of input fields, then I think both types of label alignment will be equally easy to process. The tricky part of the analysis comes from when the number and type of input fields are high and varied respectively. I think the most reliable result comes from actual testing of user eye-tracking and mouse-tracking data to obtain a reliable analysis of the scan and input pattern.

Other complication factors in the design include the length of the label itself or the length of the input field that makes it difficult to create optimal alignment and spacing.