https://link.medium.com/ZYkUGXQnU6

Simple rules that will help you design forms users will like to complete

orms have existed for a significant amount of time, greatly simplifying the task of drafting complaints and various other legal pleadings. With the advance of information and its processing, means to gather the data are also evolving. As printed forms were here for years we can learn a few tips from their design.

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. Text field component design should provide a clear affordance for interaction, making the fields discoverable in layouts, efficient to fill in, and accessible.

Here are key elements of the basic Text field:1. Container — interactable input area 2. Input text — entered into the text field 3. Label Text — tell users what information belongs in a given form field 4. Placeholder text — is a description or example of the information required that is replaced with input text after users provide it 5. Helper or Validation text(optional) — provides additional context or validation message 6. Leading icon(optional) — describe the type of input a text field requires 7. Trailing icon(optional) — additional control for entered text, like clear, hide/show, etc

Most of them are based on basic text fields that were modified to better handle specific types of information, like the credit card numbers. Here are just a few examples of input types that are most commonly used throughout UIs we creating:

(We specifically are not talking about few input types like checkboxes and radio buttons as we will cover them later in the series)

Providing the right type of the text field for requested data will help users enter information in the right format and avoid mistakes, making the process as easy and efficient as possible.

Text fields have to change their appearance based on state and user interactions

This can be done by providing visual cues that will communicate the state of the text field. Input text fields can have one of the following states: inactive, hover, disabled, focused, validation, error. All states should be clearly differentiated from one another, and consistent throughout the whole form and application. Better to follow best practices to not challenge formed user mental models.

Usually, you will have three main options for label positioning: top, left, and right-aligned. The best style for you will depend on key goals and sizes of the form, components library, and platform you design for. All of them have some advantages and disadvantages.

Underline input popularized with original Material design guidelines are not the best option. There were already revised based on the large Evolution of Material Design’s study that I recommend you to check out. Interestingly enough the same study showed that users prefer inputs with rounded corners.

A good choice when the data requested is unfamiliar for users

• Advantages: Easily scalable labels, good use of vertical space
• Disadvantages: Excesisbe and variable distance between labels and corresponding inputs increase completion time

Have nearly twice faster completion time vs left-aligned labels

• Advantages: Text field labels and input are closely positioned that limits number of eye movements resulting in fast completion time
• Disadvantages: Harder to quickly scan the form and understand what all information is required