Формы / Инпуты

A form is a conversation. And like any conversation, it should be represented by a logical communication between two parties — user and your app.

Forms should never consist of more than one column. One of the problems with form fields in multiple columns is that your users are likely to interpret the fields inconsistently.

Try to minimize the number of fields as much as possible. This makes your form less loaded, especially when you request a lot of information from your users.

Try to avoid optional fields in forms.

Autofocusing a field gives the users an indication and a starting point to quickly begin to fill out the form.

App users appreciate apps that provide an appropriate keyboard for text entry.

Labels are not help texts. You should use succinct, short and descriptive labels (a word or two) so users can quickly scan your form.

forms are completed faster if the labels are on top of the fields. They are good if you want users to eye-scan the form as fast as possible. However, further research mentioned found no difference between labels above the fields and right-aligned labels.

Accompanying text should be used only where it really needed. As a rule of thumb, do not exceed 100 words of explanation.

Concise help text next to input fields is most useful when.

Unfamiliar Data

You ask user for the unfamiliar data (User might ask “What’s this?”)

Specific Data

People might question why you are asking for specific data (User might wonder “Why are you asking me this?”)

For example, when scheduling dates, users appreciate context like a monthly calendar to identify days of the week, eliminating the need to leave the app to check the smartphone’s calendar. It also reduces the risk of the user becoming distracted by another task.

The primary principle of good form validation is this: “Talk to the user! Tell when them what is wrong!” Generally speaking there are four important elements that good form validation consists of:

Right time of informing about errors (or success)
Right place for validation output
Right color for the message
Clear language for your message

And all these moments have one major goal — avoid confusion.

When you’re wondering what place to choose for your validation messages, follow this rule of thumb — always place the message in the context of action.

Проверка полей

Проверка правильности вводимых данных осуществляется по мере заполнения формы. В то же время система должна деликатно молчать, пока пользователь вводит значение, и сообщить об ошибке только после того, как человек закончил ввод (перевел фокус в другое место или нажал на кнопку отправки формы). Когда пользователь возвращается к полю ввода для исправления ошибки, проверка осуществляется непрерывно по мере ввода.

Сообщения об ошибках должны содержать рекомендации по их устранению.

В случае, если пользователь нажимает на неактивную кнопку, должен происходить возврат к первому неверно заполненному полю.

4. Подсказки и помощь

Пользователь должен всегда понимать, каких конкретно данных от него ждут и зачем. Поэтому в сложных формах все неочевидные поля нужно снабжать соответствующими комментариями.

Если форма содержит поля для указания персональной информации, например номера телефона или адреса, необходимо добавлять пояснение о том, как эта информация будет использована.

Грамотная верстка

Пользователь должен быстро оценить объем, логическую структуру формы и последовательность заполнения полей. Для этого элементы формы располагаются на одной прямой и группируются по смыслу.

Подписи следует размещать слева от полей ввода. При ограниченной ширине блока, например в мобильной версии, допускается размещение подписей над полями.

Область с формой необходимо четко отделять от других элементов страницы.

Правильный фокус

Поле, с которым взаимодействует пользователь, следует подсвечивать. При загрузке страницы фокус должен быть сразу установлен в первое поле ввода.

https://www.artlebedev.ru/technogrette/etc/forms/

https://vc.ru/flood/24647-designing-efficient-forms

parse-разбирать, blithely-беспечно, prefilled-предварительно заполненый, prominence-известность, sight-взгляд, Accompanying-сопровождающий, Concise-краткое, concern-беспокойство, reassure-успокаивать, scheduling-планирование, eliminating-устранение, restrictions-ограничения, overwhelm-подавлять, reveal-выявить, major downside- главный недостаток,