Hello. I recall reading that in modern web form design, it is considered better to place the field label above the form field, as opposed to placing the label on the left and the field on the right.
For example…
Old Approach
New Approach
Do you agree with this?
Will users get frustrated having to scroll more on a form where the labels are on top of the fields?
here is also an interesting opinion
I wouldn’t say it’s better to put the labels above rather than on the left of the field. Both are easily read and understood (for those who read left to right).
The new approach of putting the labels above the field (which may not be that new) is more of a flexibility issue as opposed to a bad UX issue.
There are so many varying screen sizes out there, it’s difficult to design perfectly for each unique resolution.
Enter responsive design (which again is not that new).
We can design our content to adjust according to set breakpoints. The old approach of putting labels at the left could be just fine in a desktop sized view port, but as you go down in size to a mobile screen size, you’d be hard pressed to fit all the labels and the input fields on the same line.
You may not account for a certain screen size that causes the form labels and fields to line break in an unexpected way that makes it unreadable for visitors.
Also, even if you were able to fit the labels on the same line as input fields on every small screen, you would guarantee that the input fields would not stretch across the entire screen and thus giving a smaller tap target for visitors to input their information.
Another negative effect is that when visitors do put their info in these now shorter input fields, they may not be able to see the entirety of what they wrote in the box, meaning it would be more difficult for them to check back for errors and / or misspellings.
All that to say I agree that that the new approach is a better approach specifically for smaller screens. Although, the old approach can work just fine on larger screens (especially with longer forms),
Hope this helps.
But do people mind having to scroll more because the form is now “taller”?
I like the label on top approach, but I just fear that people - especially on mobile devices - might get annoyed with the form becoming longer.
Related to this, in cases where you have a couple of short fields, can you put them side by side to save space when you have labels on the top?
See below…
What do the people using this form expect from it?
Is it an order form or an application form? Then people will expect to have multiple fields of information to fill out.
Is it a general contact or feedback form? Then people won’t bother to hate you (they are too lazy for that too) they will just leave for having too many fields to fill out.
UX Myth #1398 - People don’t scroll
Google, Facebook, Instagram, Yahoo, Amazon…the biggest sites on the web all require scrolling and people don’t have a problem with that.
At least what I’ve noticed is that people actually prefer scrolling to clicking pagination links and waiting for the next page to load - especially on mobile devices.
The side-by-side approach can be good on desktop screen sizes but won’t do much good on mobile. It’s usually best just to have one column on a smaller, narrower screen.
There is no evidence (that I know of) that people abandon forms solely because they can’t see the entire form on screen at once.
Here’s Walmart’s order form as an example:
Form labels on top and I had to scroll down to finish. I’m ordering something that requires shipping information. Not a problem.
Just make sure that it’s expected that the form will require a lot of information and check to see if maybe you can eliminate some unnecessary fields if possible.
Hope this helps!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
