Vertical alignment of marks

Horizontally aligned labels save space and more text fits on the screen (the visitor will need to scroll less). It is often used in mobile apps and online forms.

However, this alignment creates a continuous flow of information, which is more difficult for a person to perceive. Instead of looking up a web page, he has to read it in zigzags, which is less convenient and more tiring. The exception to the rule is the UX design of the Airbnb landing page, but it’s not about the text field, but about the layout as a whole.

Visual limitations

They help the user to perceive information on an intuitive level and greatly facilitate its interpretation. For example, if only a few characters are required for the fields “Month” or “Zip”, then they should not be as long as “Name” (otherwise people might be confused).

Error message

Some developers use tooltips to report incorrectly entered data. Often in this case, an exclamation mark appears next to the input field, and when you hover over it, the desired error message pops up.

This solution is not the best from a UX point of view, as the user will have to work harder to fix the problem. Please note that some people may not even know that you need to hover over the icon that appears in order to see the error message.