1

In these kind of forms, the problem is that, FirstName and LastName Labels are small in size as compared to "Explain your previous project details". So while user is filling up the form he might get confused whether he is filling the details for FirstName or LastName. One solution would be making the labels right align. But I dont want to make the labels right align. Here I need another good idea to align them properly.

enter image description here

3

I would suggest a vertical layout which has been discussed here and here. In addition, I would not recommend using a text input for a fairly descriptive field like Explain your previous project details

Top-aligned labels tend to reduce completion times (how long it takes to complete a form) the most for familiar data (i.e. address, credit card, etc.) because they only require a single eye fixation to take in both input label & field. Top-aligned labels also work well for forms that require localization or long labels as there is plenty of horizontal real estate to expand/contract the label without negatively impacting the overall page layout. Top-aligned labels, however, do take up a lot of vertical real estate.

Also, something similar is discussed in other questions on this very forum as well.

2

Align them vertically, which is fast in scanning and reduce the alignment problem you've mentioned. But there is disadvantage of vertical scroll if you have too many fields, which can be further get solved with proper categorisation and planning like:

  • show only mandatory fields
  • combine fields if possible, like First and last name can be pronounced as full name.
  • reduce the length of label, you may also use placeholder. "Explain your previous project details" could be "Previous project details" and in placeholder, you can write a more descriptive messge.

To get more information around form design,I suggest Luke W's article: http://static.lukew.com/webforms_lukew.pdf

  • 1
    Also, in fields like First and Last name, they can be positioned one on the side of the other horizontally with half their length. – Yoav Moran Nov 2 '16 at 6:51
0

According to this answer :

Right-aligned labels have a lighter cognitive workload for users

But if you must use left align labels, you may try the following :

  • If the label is too long, create two or more lines for that label
  • Use meaningful abbreviations
0

Here is one way ( A material design implementation ) :

enter image description here

It is a little hard to grasp just by looking at it, but basically the placeholder fields move out of the way and become the input field titles, here is a Codepen Example so you can experience it:

Angular Material Text Field example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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