How To Position Form Field Labels

The position of the label in a form (contact forms, registration forms, e-commerce forms) is very important for usability reasons. The best place to position a label is above the form field.

In mobile designs it is more preferable to position the label above the form field, when in portrait mode,  so that the input have the maximum size. If the label is next to the input, the width will be reduced and the user will not be able to see his own typo. For landscape mode, when the height is small, you can use labels next to inputs. Another use for this exception is when the form is really big, and the user can scan better the labels.

Labels placed inline, like a placeholder, is the worst position from a usability perspective. While the appearance of the form is lighter, the users will have difficulties filling the form,  because each field loses its context the second the user starts typing. This isn’t an issue only for filling the form, but for correcting the validation errors as well since the labels are missing. For small forms, where the form fields are known by the user, this kind of approach can be useful from a appearance perspective.

So, when creating a form, based on what should the user fill, how many times the form is encountered, how big the form is, what is your overall design, you should follow some usability rules for positioning the labels.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s