3

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?

1 Answer 1

4

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:

enter image description here


enter image description here

For Small Screens:

enter image description here


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

1
  • Up-voted for points about combining Name fields into Full name (unfortunately, my form is for searching a database where names are split so I can't apply it). For Date of birth, GDS has found that using separate text fields (with type=number) has been most successful - designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth
    – Jon Kyte
    Apr 19, 2017 at 13:19

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.