Понятная подсказка к полю коротко объясняет, какие данные нужны, в каком формате их вводить и что произойдёт после отправки формы. Отделяйте подсказку от подписи поля и сообщения об ошибке, размещайте текст рядом с полем и проверяйте, что он доступен при навигации с клавиатуры и экранным диктором.
Опорные правила понятной онлайн-формы
- Подпись называет поле, подсказка поясняет ввод, сообщение об ошибке помогает исправить конкретную проблему.
- Пишите прямо: указывайте нужные данные, формат и причину обязательности, если она не очевидна.
- Не полагайтесь только на пример внутри поля: он может исчезнуть при вводе и быть недостаточно заметным.
- Сообщайте об ошибке рядом с полем и сохраняйте уже введённые данные.
- Проверяйте форму с клавиатуры, экранным диктором и людьми, которые будут ею пользоваться.
Как отличить подпись поля от подсказки и сообщения об ошибке
Различайте три назначения текста. Подпись постоянно обозначает, что нужно указать: «Адрес электронной почты». Подсказка уточняет ввод: «Используйте адрес, к которому у вас есть доступ». Сообщение об ошибке появляется после неудачной проверки: «Проверьте адрес: в нём не хватает символа @».
Такой подход подходит для любых форм, особенно для заявок, регистрации, записи на услуги и отправки документов. Не добавляйте пояснение, если поле и так однозначно, а правило не требует уточнения: лишний текст увеличивает нагрузку и может отвлекать. При разработке доступных сайтов важно также не подменять видимое название поля техническим доступным именем, которое сообщает пользователю диктора другое.
Какие слова помогают понять, что именно вводить
Перед созданием доступных онлайн-форм подготовьте требования к полям и проверьте их вместе с разработчиком или редактором:
- перечень данных, которые действительно необходимы для обработки заявки;
- правила формата для дат, телефонов, адресов и номеров документов;
- сведения о том, какие поля обязательны и почему;
- доступ к тестовой версии формы и возможность проверить её с клавиатуры;
- способ проверить тексты с пользователями и исправить найденные препятствия.
Заменяйте расплывчатые слова конкретными. Вместо «Введите корректные данные» напишите, что именно требуется и как проверить результат. Не просите лишние сведения: если поле не нужно для цели формы, безопаснее убрать его, чем объяснять, зачем оно якобы необходимо.
Как объяснить формат даты, телефона и других данных
Перед пошаговой работой учтите риски и ограничения:
- Пример формата может быть воспринят как единственно допустимый, хотя система принимает несколько вариантов.
- Маска ввода способна мешать пользователю исправить значение или переместить курсор.
- Обязательное поле без понятного объяснения может заставить человека раскрыть лишние данные.
- Подсказка, которая видна, но не связана с полем программно, может быть недоступна экранному диктору.
- Определите, какие данные необходимы. Уточните назначение поля и исключите сбор сведений, не нужных для этой задачи. Если формат зависит от региона или ситуации, не задавайте необоснованно узкое правило.
- Сформулируйте ожидаемый ввод. Напишите простыми словами, что указать: например, «Дата рождения» или «Телефон для связи». Если важен формат, поясните его отдельной короткой фразой.
- Добавьте уместный пример. Используйте пример, который показывает порядок частей, например: «ДД.ММ.ГГГГ». Убедитесь, что он соответствует реальному поведению поля и не заменяет его подпись.
- Проверьте правила ввода. Сопоставьте подсказку с тем, что принимает система. Если допустимы разные варианты записи, не отклоняйте их без необходимости и не заставляйте пользователя угадывать формат.
- Подготовьте объяснения ошибок. Для каждой проверки сформулируйте сообщение, которое называет проблему и предлагает исправление. Например, вместо «Некорректная дата» — «Укажите дату в формате ДД.ММ.ГГГГ».
Где разместить подсказку, чтобы её заметили и прочитали
Проверьте форму по списку. Подсказка должна оставаться различимой и доступной не только при наведении мыши или фокусе на поле.
- Подпись расположена рядом с соответствующим полем и визуально с ним связана.
- Подсказка находится возле поля, до момента, когда пользователю нужно принять решение о вводе.
- Важные условия не спрятаны только в placeholder, всплывающей подсказке или цветовой маркировке.
- Текст подсказки доступен при перемещении по форме с клавиатуры и экранным диктором.
- Видимое название и доступное имя поля не противоречат друг другу.
- Понятно, какие поля обязательны; это сообщено не только цветом или символом без пояснения.
- Подсказки и сообщения об ошибках различимы на экране и не перекрывают другие элементы.
При аудите доступности сайта проверяйте не только наличие текста, но и его связь с полем, порядок чтения и сохранение видимости на мобильном экране.
Как сообщать об ошибках без обвинений и потери введённых данных
Избегайте формулировок и решений, которые перекладывают ответственность на пользователя или затрудняют исправление:
- «Вы ввели неправильно» — замените на нейтральное описание проблемы и способ исправления.
- «Ошибка» без уточнения — укажите, какое поле требует внимания и что нужно изменить.
- Подсветка только красным цветом — добавьте текстовое сообщение, понятное без различения цвета.
- Сообщение в начале формы без указания поля — свяжите его с конкретным местом и при необходимости дайте ссылку перехода к нему.
- Удаление всех данных после отправки — сохраняйте введённое, чтобы человеку не пришлось повторять работу.
- Отклонение допустимого варианта написания без объяснения — принимайте разумные варианты или ясно сообщайте требование заранее.
- Непонятное требование к обязательному полю — объясните его необходимость или пересмотрите, действительно ли поле нужно.
Если ошибка связана с чувствительными данными, не показывайте их полностью в сообщении. Сообщайте только ту информацию, которая помогает исправить ввод и не раскрывает лишнего.
Как проверить форму с клавиатуры, экранным диктором и пользователями
Для проверки используйте несколько дополняющих друг друга способов:
- Навигация с клавиатуры. Пройдите форму без мыши: проверьте порядок перехода, видимость фокуса, доступность подсказок и возможность исправить ошибку.
- Экранный диктор. Прослушайте названия полей, подсказки, обязательность и сообщения об ошибках. Убедитесь, что человеку понятно, к какому полю относится каждый текст.
- Проверка сценариев ввода. Попробуйте обычный и ошибочный ввод, пропуск обязательного поля и исправление данных. Проверьте, что форма объясняет проблему и не стирает уже введённое.
- Проверка с пользователями. Попросите людей выполнить типичные задачи и наблюдайте, где они останавливаются или понимают текст иначе, чем задумано. Используйте выводы для адаптации сайта для людей с инвалидностью, а не только для косметической правки формулировок.
UX-оптимизация форм на сайте требует повторной проверки после изменения текста, правил валидации или верстки: исправление в одном месте может нарушить доступность в другом.
Разбор сложных случаев при создании подсказок
Можно ли использовать пример внутри поля вместо подписи?
Нет, пример не должен заменять подпись: после ввода он может исчезнуть, и назначение поля станет неясным. Оставьте постоянное название и при необходимости добавьте отдельный пример.
Нужно ли писать подсказку к каждому полю?
Нет. Добавляйте пояснение, если оно помогает выбрать данные, понять формат или избежать предсказуемой ошибки; очевидные поля не стоит перегружать лишним текстом.
Как обозначить обязательное поле?
Используйте понятный текст или согласованное обозначение с пояснением, что оно значит. Не полагайтесь только на цвет, а обязательность передавайте и программно.
Что делать, если разные форматы телефона допустимы?
Принимайте доступные варианты, если они подходят для задачи, и нормализуйте их на стороне системы. Если ограничение необходимо, сообщите его до ввода и объясните ожидаемый формат.
Достаточно ли проверить форму автоматическим тестом?
Нет. Автоматические проверки полезны, но не показывают, всегда ли подсказка понятна, в правильном ли порядке её слышит экранный диктор и можно ли без затруднений исправить ошибку.
Должно ли сообщение об ошибке повторять подсказку?
Не обязательно. Сообщение должно указывать на конкретную проблему и следующий шаг, а не повторять общее правило без объяснения, что именно не прошло проверку.