6

Is there any conclusive research about having multiple form fields in one row in specific cases? Research about filling in speed (or preferably on conversion rate).

I am specifically thinking of the person's name, where it's necessary (due to the underlying system) to capture the data across 3 fields.

Putting them all one one line (on larger screens) visually shows the link between the data, and takes less space.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

But all the studies I've seen show scanning vertically to be faster.

mockup

download bmml source

Is there anything conclusive?

2
  • 3
    All the studies wern't conclusive enough? Are you trying to backup a preconception rather than find the true answer?
    – JamesRyan
    Nov 27, 2013 at 18:00
  • 2
    @JamesRyan The studies in Wroblewski's book aren't for this specific case. They cover multi-column forms and the speed of completion, and where they did put fields side by side, it was often address fields. I have a hypothesis that aligning name fields should reduce cognitive load, and I would like to find data that proves or disproves this. One set of studies isn't enough to declare something true/false
    – PeterB
    Nov 28, 2013 at 8:09

2 Answers 2

2

Best practice is to allow users to scan vertical and (just as important) implement single vertical line alignment of the user input fields. Labels can be put to the left of the user input, but should be right aligned, making just one visual line for the user to follow.

enter image description here

Labels right aligned to fields are easier for users to scan because there isn’t large whitespace between the label and field. The close proximity helps users clearly see which label goes to which field making the link between a label and field clearer. Users can fill out the form with speed and ease without second guessing themselves. The eye movements here are not only shorter, but users won’t need to rescan a label to see which field it belongs to.

Reference: UXMovement. Form label proximity: Right Aligned Label is Easier to scan

2
  • This doesn't address the original question. Dec 29, 2013 at 19:43
  • @KevinBorders You're encouraged to add an answer of the original question that does ;-) Dec 29, 2013 at 19:49
1

The answer will likely depend on the context of your form. "Takes less space" only matters if something important is being pushed off of the screen. A/B testing is probably your best bet.

For name inputs, it is usually best to have one field for "Full Name" and split the name on the back end using a name parsing library like http://jasonpriem.org/human-name-parse.

2
  • +1 Great that you take on the challenge. But I'd disagree on the full name reasoning. How about if you have three names, or four? Dec 29, 2013 at 20:05
  • It depends on why you need the names. This would still be fine for a shipping address, but could create problems for something like a credit card application where accuracy is really important. Dec 29, 2013 at 20:09

Your Answer

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

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