Related form fields next to each other

Question

It seems the best practise when it comes to forms is to lay the fields out in a one column layout - should this be true for fields that are related to each other?

For example, would a suitable exception to this be First name / last name and date of birth? As they are commonly expressed on a single line, e.g:

[First name] [Last name]
[Gender]
[Job title]
[E-mail]
[DOB - Day][DOB - Month][DOB - Year]

Or would it still be optimal to do:

[First name]
[Last name]
[Gender]
[Job title]
[E-mail]
[DOB - Day]
[DOB - Month]
[DOB - Year]

And is there any research behind which ever is best?

Answer 1

First, I agree with you on the single column layout since the Mobile First Approach helps in many ways [Why Should I Design for Mobile First].

On grouping related fields horizontally I think it will be a matter of:

• Affordance
• Consistent user experience across devices

Examples:

---

For Small Screens:

---

The fields you mentioned above Firstname and Lastname can become Fullname. And DOB can be a single field with supportive html5 patterns and placeholders.