Лучшие практики UX-дизайна подсказок в полях формы

Как правильно отображать текстовые подсказки

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

Дизайнерам сложно сочетать подсказки с названием поля, сообщением об ошибке и макетом формы. Где лучше всего размещать текстовую подсказку? Что делать, если у вас много текста в подсказке? Как подсказки влияют на название поля и сообщение об ошибке?

Эта статья решает четыре проблемы UX-дизайна подсказок:

1. Слишком много текста в подсказке
2. Воздействие на сообщения об ошибках
3. Воздействие на названия полей
4. Неправильное применение подсказки-заполнителя

Слишком много текста в подсказке

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

Даже если вы увеличите размер нижнего отступа для смещённого поля, это всё равно вызовет проблемы с макетом — приведёт к появлению больших вертикальных интервалов между полями. Макет не только будет выглядеть странно, но и пользователи при сканировании полей будут переводить взгляд по более длинной траектории.

Ваша текстовая подсказка не должна превышать ширину полей. Другими словами, края поля — границы для подсказки. Выход за пределы нарушит структуру формы.

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

Пользователям придётся взаимодействовать с иконкой подсказки, чтобы она появилась, но это оптимальный вариант. Когда вы заставляете людей читать слишком много текста, они могут пропустить его и сразу приступить к заполнению поля. Отображение текстовой подсказки только по запросу пользователей увеличивает вероятность того, что они прочитают его полностью.

Воздействие на сообщения об ошибках

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

Если отобразить и подсказку, и сообщение об ошибке вместе, это приведёт к путанице. Это указывает на одновременно два состояния — ошибочное и по умолчанию. Однако это не имеет смысла с позиции системной логики. Если поле находится в состоянии ошибки, в это же время оно не может быть в состоянии по умолчанию, потому что норма — это отсутствие ошибки.

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

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

Воздействие на названия полей

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

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

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

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

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

Неправильное применение подсказки-заполнителя

Частая ошибка — обращаться с текстовой подсказкой как с подсказкой-заполнителем. Это затрудняет чтение текста, потому что он исчезает при фокусировке на поле. Пользователи, которые склонны выбирать поля до прочтения подсказок-заполнителей, могут пропустить текстовую подсказку.

Ещё одна проблема заключается в том, что подсказка-заполнитель может выглядеть как введённые данные. Из-за этого пользователи могут принять поле за заполненное, когда это не так. Кроме того, сложно отображать длинную текстовую подсказку, когда её нельзя перенести. Край поля обрежет её конец.

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

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

Когда использовать текстовые подсказки

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

Используйте текст с подсказками, когда вам нужно:

1. Разъяснить пользователю вопросы конфиденциальности и безопасности.
2. Проинформировать его о том, почему вы запрашиваете конфиденциальные личные данные.
3. Запросить у людей необычные данные, которые требуют разъяснений.

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

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

Перевод статьи The Best UX Design for Form Field Help Text из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!