перевод статьи https://uxplanet.org/10-rules-for-efficient-form-design-e13dc1fb0e03
Формы — один из наиболее важных типов взаимодействия пользователей в Интернете и в приложениях. Они используются повсюду — для регистрации, обслуживания подписки, обратной связи с клиентами, оформления заказа, для инициирования транзакций между пользователями и компаниями или в качестве ввода данных для поиска или обмена информацией. Разработчикам следует уделять особое внимание улучшению своих форм и повышению их удобства использования, поскольку тщательный дизайн форм оказывает огромное влияние на скорость, с которой пользователи могут точно заполнить форму.
В этой статье вы увидите практические рекомендации, основанные на тестировании удобства использования, полевых испытаниях, отслеживании глаз и реальных жалобах недовольных пользователей. Используйте эти рекомендации в качестве отправной точки для дизайна формы.
1. Упорядочивайте форму логически и спрашивайте только то, что требуется
Форма — это разговор . И, как любой разговор, он должен представлять собой логическое общение между двумя сторонами — пользователем и вашим приложением. Вам следует:
- Сохраняйте вопросы в интуитивно понятной последовательности — их следует задавать логически с точки зрения пользователя , а не логики приложения или базы данных — это сделает поток от одного набора вопросов к другому более похожим на разговор.
- Варианты заказа в интуитивно понятной последовательности (например, дни недели в последовательности понедельник, вторник и т. д.). Если осмысленная последовательность невозможна, вам следует расположить их в алфавитном порядке.
- Всегда задавайтесь вопросом, почему и как используется информация, которую вы запрашиваете у своих пользователей. Имейте в виду, что устранение ненужных вопросов сокращает усилия пользователя и увеличивает процент завершения ответов .
2. Представление полей в виде одного столбца
Одна из проблем с полями формы в нескольких столбцах заключается в том, что ваши пользователи могут интерпретировать поля непоследовательно. Если форма имеет горизонтально смежные поля, пользователю приходится сканировать по Z-образцам, что замедляет скорость понимания и затрудняет четкий путь к завершению. Но если форма находится в одном столбце, путь к завершению — это прямая линия вниз по странице. Таким образом, не разделяйте форму более чем на один столбец и задавайте только один вопрос в каждой строке.

3. Минимизируйте количество полей ввода и усилия пользователя при вводе текста.
Минимизация количества полей ввода делает вашу форму менее загруженной, особенно когда вы запрашиваете у пользователей много информации.

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

4. Сопоставьте поля с размером ввода
Исследование юзабилити института Бэймарда показало, что если поле слишком длинное или слишком короткое, пользователи начинают задаваться вопросом, правильно ли они поняли метку. Это особенно актуально для полей с необычными данными или технической меткой, такой как CVV (код проверки карты).

Чтобы добиться хорошего удобства использования, вам следует отрегулировать ширину поля так, чтобы оно вмещало все символы ввода ( пользователи должны видеть всю введенную информацию ), но не больше.
5. Разместите метки над соответствующими полями ввода.
Насколько легко пользователям сканировать вашу форму? Если вашу форму сложно сканировать, пользователям потребуется больше времени для ее заполнения. Чтобы избежать этого, сделайте ваши поля быстрыми для сканирования, когда пользователи впервые видят их и после того, как они их заполнят. В статье Маттео Пензо о размещении меток говорится, что формы сканируются быстрее, если метки находятся поверх полей.

Метки с выравниванием по верху хороши, если вы хотите, чтобы пользователи как можно быстрее просматривали форму (обратите внимание: я не говорю « заполнить» форму, просто « просканировать» ее). Еще одно преимущество меток с выравниванием по верхнему краю — они не занимают слишком много горизонтального пространства (по сравнению с метками, выравниваемыми по левому или правому краю), что облегчает размещение меток разного размера и локализованных версий в пользовательском интерфейсе (это особенно хорошо для мобильные экраны с ограниченным пространством).
6. Используйте щадящее форматирование
Некоторые задачи действительно требуют от пользователей ввода очень точной информации, но принуждение людей предоставлять эту информацию в определенном формате может противоречить хорошим принципам юзабилити. Если вы просите пользователей вводить числовую информацию (например, номер телефона) в форму, будьте гибкими и создавайте экраны, которые могут интерпретировать несколько входных форматов и отображать эту информацию таким образом, чтобы ее можно было легко сканировать (людям, а не машинам). чтобы не допустить ошибок.

7. Не используйте текст-заполнитель в качестве метки поля ввода.
Текст-заполнитель, расположенный внутри поля формы, обычно выполняет роль дополнительной подсказки, описания или примера информации, необходимой для конкретного поля. Эти подсказки обычно исчезают, когда пользователь вводит данные в поле.

Некоторые дизайнеры заменяют метки полей формы текстом-заполнителем внутри поля, чтобы уменьшить беспорядок на странице или сократить длину формы. Хотя этот подход хорошо работает для простых форм (например, формы входа в систему, содержащей два поля), он является плохой заменой метки поля, когда от пользователей требуется больше информации. Почему это решение плохо для обычных форм:
- Как только пользователь нажимает на текстовое поле, метка исчезает, и, таким образом, пользователь не может дважды проверить, действительно ли написанное им/ей должно было быть написано.la
- Когда пользователи видят что-то написанное внутри текстового поля, они могут предположить, что оно уже заполнено заранее, и проигнорировать это.
Если вы по-прежнему хотите использовать текст-заполнитель для своих полей, используйте текст-заполнитель в качествеплавающая метка.Текст-заполнитель отображается по умолчанию, но как только вы коснетесь поля ввода и введете текст, текст-заполнитель исчезнет, а выровненная по верхнему краю метка анимируется.

8. Различайте необязательные и обязательные поля
Во-первых, как я уже говорил, старайтесь избегать необязательных полей в формах. Но если вы их используете, то должны хотя бы четко различать, какие поля ввода являются необязательными. Ограничьте форму только одним или двумя необязательными полями и четко пометьте их как необязательные — принято использовать подсказку «необязательно», поскольку она предпочтительнее для длинных форм.

9. Избегайте кнопки «Сброс»
Кнопка «Сброс» — чистое зло. Риск случайного удаления перевешивает маловероятную необходимость «начинать заново» в веб-форме. На самом деле эта кнопка почти никогда не помогает пользователям, а зачастую вредит им. Интернет был бы более счастливым местом, если бы практически все кнопки сброса были удалены.

10. Предоставляйте хорошо заметные и конкретные сообщения об ошибках.
В идеальном мире пользователи заполнят форму необходимой информацией и успешно завершат свою работу. В реальном мире пользователи часто допускают ошибки. Именно здесь в игру вступают помощь и проверка формы. Одна из 10 эвристик юзабилити советует, что важно сообщать пользователям об ошибках изящно, действенно и ясно. Таким образом, обработка ошибок в вашем приложении должна иметь следующие свойства:
- Подходящее время для информирования об успешном/неуспешном предоставлении данных — сразу после того, как пользователь отправил информацию, поскольку пользователям не нравится, когда они проходят процесс заполнения формы только для того, чтобы при отправке узнать, что они сделали ошибка.

Сообщения об ошибках должны быть заметны с первого взгляда — используйте цвет, значки и текст, чтобы выделить проблемную область. Расположение рядом с полем ошибочного ввода повышает производительность, чем сообщения об ошибках вверху и внизу формы.
ИзображениеFacebook использует цвет, значки и текст, чтобы выделить проблемную область в форме регистрации. Если ответы требуются в определенном формате, укажите это заранее, указав установленное правило (спецификацию формата) без дополнительного примера.
ИзображениеИзображение предоставлено: Материальный дизайн После возникновения ошибки никогда не очищайте уже заполненные поля!
Заключение
- Пользователи могут неохотно заполнять формы, поэтому вам следует максимально упростить этот процесс. Нам нужно, чтобы форма отражала нашу силу, а не слабость . Незначительные изменения, такие как группирование полей и указание того, какая информация содержится в каждом поле, могут значительно повысить удобство использования формы. А улучшенная форма приводит к более быстрому заполнению, меньшему количеству попыток отправки формы и меньшему количеству движений глаз.