Almost every service developed for the mass user involves entering information to perform various actions. Even simple registration in an application can cause users problems and rejection in the process. It can alienate them at the very first stage – and this is loss of clients. To prevent this, we need to consider carefully which input fields we use. Besides, we need to pay attention to how we explain to users what the system wants from them, using field labels.
Structure of input fields
First, let's look at the simplest input field and what it consists of.
It looks a little empty, doesn't it? Something is missing. It is clear that no one uses such a simple field format (I hope), but still. Let's try to improve this version by adding labels.
Now the input field looks more familiar. By adding text labels, we explain to users what exactly the system wants from them, what data to enter, and what will happen when they click the button. Users also understand what data they need to enter in the field. But it can get even better: let's try adding something else.
This one looks much better! In this case, we've added a placeholder inside the input field to show the users what exactly they need to enter in the field. Also, we often use masks in this field (masks are a special field format that creates a template for entering information), since it makes it easier for users to enter data, for example, if they need to write their phone number. If you don't include masks or placeholders, the user might make a mistake and enter the information in the field incorrectly. Placeholders neutralize the problem if the user is distracted while filling out the form, while masks allow you to remove typos by using data validation.
In addition to a placeholder, in the example above we've added a small hint under the field to give additional information to the user. Now let's look at the final, most sophisticated version, where some optional elements are added.
First, note that we have changed the label on the button: now it is not "send" but "register". This is a minor change, but it is really useful. For example, if your registration form consists of stages, you can write "Next" on the button, so that the users understand that they are moving on. Another case is when you need to enter a phone number – then it will be a good idea to put on the button not just "enter", but something like "get an SMS code".
In addition to changing the button text, in the previous example we've added a help icon (2) near the field. In a large registration form, it can help the user get clues about the required data. It is also good practice to add an erasing icon (4), so that you can delete all the entered data with one click and start over. Both elements are optional. The main thing is not to make the design too cluttered.
How to make a better label
When adding a label, you should adhere to several rules:
1. Make the label as short as possible: the fewer words, the faster the user will understand what is required. Avoid complex phrases like "How are you addressed?" instead of "Your name".
2. Labels should always be visible to users, so that they don't have to search for them.
3. Avoid cases when the label is too short or moved along the rows.
Bonus: in development of mobile applications, floating labels are often used, which means they shift when the cursor clicks on the field and a placeholder replaces them. This is, of course, more difficult to develop, but it is a very user-friendly solution and it reduces unnecessary details in the interface.
When the input field is not active, a label takes the place of a placeholder. When you press the cursor on the label field, the label rises to the top and is replaced by the placeholder.
Conclusion
There is no service that can do without input fields. Thus, it is good that today we have learned:
- What input fields are and what they are used for
- What elements the input field consists of: those mandatory and optional
- How to make a label correctly and formulate the text so that the users understand what you need from them
- What mistakes you should avoid when creating field labels
- What for you can use placeholders, hint texts, and the text on the button, as well as how to use them properly