5

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?

5
  • Usability standards change much slower than visual styles. 8-year-old research is still valid.
    – dnbrv
    Apr 30, 2015 at 16:03
  • @dnbrv - I'd mostly agree with that, but that research was done with labels outside of the fields. If you look at the examples in the article of Facebook, Square and Treehouse it does seem easier to digest than the same layout with the old label styling. Like I said, I doubt it makes a difference, but if there is research out there that isn't 8-years-old and covers this particular type of form I'd be interested in seeing it.
    – Fletchling
    Apr 30, 2015 at 16:13
  • 1
    UX Movement is known for publishing some controversial patterns. They usually don't substantiate their suggestions with user research. They surely make the case for that pattern, but they compare it only to inline labels, which have horrible usability to begin with. The argument would have been more valid if the new pattern was compared to the current best practice of labels above fields.
    – dnbrv
    Apr 30, 2015 at 16:16
  • @dnbrv - "They usually don't substantiate their suggestions with user research...The argument would have been more valid if the new pattern was compared to the current best practice of labels above fields. " - Exactly. That's what sparked the question. :) Since they didn't bring it up I was curious.
    – Fletchling
    Apr 30, 2015 at 16:19
  • This is a great question. I'd guess that formal testing will still show left-aligned forms to be more usable. That said, designers don't always need to choose the most usable solution and I like the inside-top approach for many situations because it provides layout benefits, although likely at the cost of some small usability delta. I'm not entering an answer because you're asking specifically for studies (which I'd also like to see)
    – tohster
    May 2, 2015 at 0:14

2 Answers 2

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: enter image description here

Second, label stays visible but takes longer to scan: enter image description here

Material, The label moves up while typing:

enter image description here

or

enter image description here

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.