Design of text fields on site pages (text field design)
Text fields on web pages are probably one of the most commonly used interface components. They are used to fill out contact forms, enter payment details, create an account (online registration), lead generation, login forms, etc., that is, they solve the problem of organizing interaction with site visitors.
The purpose of this article is to highlight some of the key guidelines that will help you get the right fit for your text box design. We are considering exclusively the issue of layout, there will not be any additional tutorials on layout here. The publication is an adapted translation of this note.
State of the text box
Text field elements can be displayed in the following states: base, hover, active, inactive, error. Each of these situations must be accompanied by appropriate visual cues so that the user can easily identify them. This approach greatly simplifies the usability of your product.
Basic
This is the default display of the text box, i.e. while the person has not yet begun to interact with it, but it is already ready to work.
Inactive
This state prevents people from interacting with the text box. This is often due to the failure to meet certain requirements on the web page.
On hover
A hover response indicates that the current text field is interactive or clickable. When you hover over it, the frame color most often changes or its thickness increases. When the user removes the cursor, the object returns to its base position.
If you are interested in the implementation, check out the article on CSS hover effects for buttons, links, blocks, and more.
Active
The text field enters this state when the user clicks on it with the mouse pointer and the cursor appears in it. This will enable you to enter text in this field.
Text labels / field names (text label)
For text objects, the text field has a special parameter, placeholder, that allows you to display specific text in them. It can be used in order to indicate what kind of information a person needs to enter in a specific field. Some developers use it to place Text Labels.
The problem here is that as soon as the user starts interacting with the field (entering information), the stub disappears. This is not very convenient, because if he forgets about the purpose of the element, he will have to make it inactive in order to see the placeholder again.
Don t use uppercase
When creating labels, you should not select capital letters, as they are difficult to read quickly due to the lack of height difference.
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, such alignment creates a continuous flow of information, which is more difficult for a person to perceive. Instead of browsing a web page from bottom to top, he has to read it in “zigzags”, which is not so convenient and more tedious. 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 “Index”, 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.
Feedback icons
User feedback icons are mainly used to indicate the status of a form s submission (that is, whether it was successful or not). Some developers believe that red messages will suffice to indicate erroneous status, as it maintains a minimalist appearance. However, people with color blindness may not even notice the difference between a regular message and one that indicates a mistake. Therefore, in order to maximize coverage of your entire audience, it is better to additionally add some kind of icon / indicator.
Automatic formatting
Auto-formatting in the text field helps group related information into smaller entities, which in turn makes it easier to process and understand. You can use formatting to enter currency, dates, and phone numbers.
Compare, for example, the phone formats: 4408764359 and (440) 876-4359. Without automatic processing, fields are long strings of numbers that are difficult to understand, and this increases the likelihood of entering incorrect data. The laws of visual perception work here.
Total. These simple rules for styling text boxes on web pages and applications will help you make the most effective interface for any form you use in your projects. If you want to add something to the article, share your tips in the comments.