Эффективный дизайн текстовых полей в формах и приложениях (элемент text - field)

С формами для заполнения на сайтах и в приложениях наверняка все сталкивались. Они существенно упрощают процесс получения необходимой информации.

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

СТРУКТУРА ТЕКСТОВОГО ПОЛЯ (TEXT FIELD)

С помощью этого UI-элемента пользователи могут вводить разную текстовую информацию в формах сайтов/приложений и в диалоговых окнах. Абсолютно все детали текстового поля должны быть максимально понятны — это будет способствовать его правильному заполнению.

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

А именно: Контейнер – область, предназначенная для ввода текста. Непосредственно сам вводимый текст (Input text). Метка (Label) – подсказывает какую именно инфу нужно указывать в этом поле. Плейсхолдер (Placeholder) – пример или очень краткое описание того, что нужно вводить. Пропадает, когда пользователь начинает печатать какой-то текст. Вспомогательное или проверочное сообщение (Validation text) – дополнительные подсказки, срабатывающие при взаимодействии с полем, например, показатель надежности выбранного пароля. Иконка в начале контейнера (Leading icon) – может указывать на тип текста, который нужно вводить (пароль, телефон и т.п.). Иконка после текста (Trailing icon) – дополнительный элемент управления, с помощью которого можно, например, очистить поле, спрятать/показывать напечатанные символы и т.д.

ТИПЫ ТЕКСТОВЫХ ПОЛЕЙ

Большая часть вариантов, представленных на картинке ниже, основана на базовом элементе Text field, который разработчики видоизменяют для лучшей обработки тех или иных типов данных: даты, номеров телефона, чисел, кредитных карт, паролей и т.п.

Вот парочка самых популярных типов полей ввода:

ЗАВИСИМОСТЬ ДИЗАЙНА ПОЛЯ ОТ ДЕЙСТВИЙ ПОЛЬЗОВАТЕЛЯ

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

ВЫБОР ЛУЧШЕГО СТИЛЯ ОФОРМЛЕНИЯ

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

ВЫРАВНИВАНИЕ МЕТОК

1. ПО ЛЕВОМУ КРАЮ

Хорошее решение, если запрашиваемая в форме инфа пользователю не особо знакома.

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

2. ПО ПРАВОМУ КРАЮ

Как показывает практика, такие формы заполняются в 2раза быстрее чем в первом варианте.

• Плюсы: все элементы расположены близко друг к другу, что облегчает и ускоряет процесс ориентирования на странице.
• Минусы: такая форма не особо хорошо «визуально сканируется» при первом просмотре, поэтому тут сложнее понять, какую информацию нужно указывать.

3. СВЕРХУ НАД ПОЛЕМ ВВОДА

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

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

ПЛЕЙСХОЛДЕРЫ — НЕ АЛЬТЕРНАТИВА МЕТОК

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

ПРИМЕНЯЙТЕ ВСТРОЕННУЮ ПРОВЕРКУ

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

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

СКРЫВАЙТЕ НЕРЕЛЕВАНТНЫЕ ПОЛЯ

Чтобы лишний раз не перегружать размышлениями ваших посетителей есть смысл реализовать постепенный ввод данных и показывать их только, когда они действительно нужны (вместо отображения всех элементов сразу).

Мы уже точно рассмотрели все важные моменты и нюансы при проектировании и реализации текстовых полей (Text field) на сайтах и в мобильных приложениях. Если правильно использовать все эти рекомендации, то получится сделать процесс заполнения данных в формах максимально быстрым и комфортным. Это в свою очередь повысит лояльность вашей аудитории.