Ошибку валидации размещайте непосредственно рядом с полем, которое нужно исправить, и называйте конкретное действие: например, "Введите адрес электронной почты в формате name@example.com". Показывайте сообщение в подходящий момент, не полагайтесь только на цвет и связывайте текст с полем программно. Перед запуском проверьте поведение формы при вводе, отправке, исправлении ошибки и на мобильном экране.
Проверка перед выводом ошибки у поля
- Понятно, какое именно поле вызвало сообщение.
- Текст объясняет, что исправить, а не просто сообщает о проблеме.
- Момент показа соответствует сценарию заполнения формы.
- Сообщение доступно с клавиатуры и скринридера, а не только визуально.
- После исправления ошибка исчезает или обновляется, а форма сохраняет введённые данные.
Свяжите сообщение с полем, которое нужно исправить
Такое решение подходит для форм с несколькими полями, в которых пользователь может не сразу понять, где допущена ошибка. В дизайн формы сайта включайте сообщение в визуальную группу соответствующего поля: рядом с подписью или под полем, в одном и том же месте по всей форме.
Не выводите сообщение рядом с полем, если проблема относится ко всей форме: например, когда отправка временно недоступна. Для такой ситуации используйте отдельное общее уведомление и, если возможно, укажите причину и дальнейшее действие.
Выберите момент показа ошибки: при вводе или после отправки
До проектирования определите правила валидации формы на сайте: какие значения считаются корректными и в какой момент их проверять. Для этого понадобятся доступ к макетам и логике формы, перечень обязательных полей, согласованные тексты сообщений и возможность проверить состояния на тестовой версии сайта.
UX дизайн форм обычно сочетает несколько моментов проверки:
- При отправке: проверьте все поля и покажите сообщения у тех, которые требуют исправления.
- После взаимодействия с полем: можно проверить его после ухода фокуса, если правило понятно и ранняя подсказка не мешает вводу.
- Во время ввода: используйте для оперативной обратной связи, когда проверка не прерывает набор и не объявляет ошибку после каждого символа.
Не показывайте ошибку пустого обязательного поля до того, как пользователь начал заполнять форму или попытался её отправить: такое сообщение заранее создаёт ощущение неудачи.
Разместите текст так, чтобы он не сдвигал форму неожиданно
Перед пошаговой настройкой проверьте подготовку:
- Для каждого поля определены обычное, ошибочное и исправленное состояния.
- Сообщения проверены на длину и понятность.
- Предусмотрено место для текста ошибки в макете.
- Известно, как форма ведёт себя при нескольких ошибках одновременно.
- Объедините поле и сообщение. Разместите ошибку рядом с соответствующим полем, предпочтительно непосредственно под ним. Визуальная близость должна сохраняться при изменении ширины экрана.
- Зарезервируйте место или задайте предсказуемое расширение. Если высота формы не должна меняться резко, предусмотрите область для сообщения в макете. Если форма растёт по высоте, убедитесь, что соседние поля и кнопки сдвигаются последовательно, без наложения.
- Покажите ошибку без потери введённых данных. После неудачной отправки сохраните корректно заполненные значения. Переводите фокус к первому полю с ошибкой или к сводке ошибок, если это помогает быстро найти проблему.
- Обновите состояние после исправления. Уберите сообщение, когда значение стало корректным, либо сообщите об успешной проверке, если это нужно для понимания процесса. Не оставляйте устаревшую ошибку после изменения поля.
- Проверьте несколько ошибок вместе. Убедитесь, что длинные сообщения не перекрывают другие элементы и не отодвигают кнопку за пределы ожидаемой области без возможности прокрутки.
Подберите формулировку, которая объясняет способ исправления
Проверьте каждое сообщение по списку:
- Указано, что именно не так: "Поле не заполнено".
- Понятно, какое действие нужно выполнить: "Введите номер телефона".
- Для формата приведён ориентир: "Введите дату в формате ДД.ММ.ГГГГ".
- Нет неопределённых фраз вроде "Неверные данные" без пояснения.
- Текст не обвиняет пользователя и не использует внутренние коды ошибки.
- Сообщение не раскрывает чувствительные сведения и не повторяет секретное значение.
- Инструкция соответствует фактическим правилам проверки.
При разработке формы обратной связи проверьте отдельные тексты для обязательного имени, некорректного адреса электронной почты и недоступности отправки. Например: "Проверьте адрес электронной почты" и "Не удалось отправить сообщение. Попробуйте ещё раз".
Сохраните доступность для скринридеров и клавиатурной навигации
Визуальное оформление помогает заметить проблему, а доступность зависит также от разметки и поведения формы. Проверьте, чтобы:
- Ошибка обозначалась не только красным цветом: добавьте текст и, при необходимости, значок.
- Поле имело программно связанную подпись, а сообщение было связано с ним средствами разметки.
- Для ошибочного поля задавалось соответствующее состояние доступности, например
aria-invalid="true". - При появлении сообщения скринридер мог получить его без необходимости искать текст визуально.
- После отправки фокус перемещался предсказуемо и не перескакивал бесконтрольно между ошибками.
- Все поля и действия были доступны с клавиатуры, а фокус оставался заметным.
- Исправление значения обновляло состояние ошибки и его доступное объявление.
Проверьте ошибки на мобильном экране и при разных состояниях формы
Выберите способ показа с учётом длины формы, типа ошибки и устройства:
- Текст под каждым полем. Подходит для локальных ошибок, которые можно исправить сразу. На узком экране проверьте переносы и расстояние до следующего элемента.
- Сводка ошибок в начале формы вместе с сообщениями у полей. Уместна в длинной форме: сводка помогает оценить объём исправлений, а локальные тексты показывают, что сделать у каждого поля.
- Краткое сообщение после ухода с поля. Подходит, когда проверка помогает избежать ошибки при отправке. Не показывайте его до начала взаимодействия с полем.
- Общее уведомление для ошибки отправки. Используйте, если проблема не относится к конкретному полю; сообщите, можно ли повторить действие и сохранены ли введённые данные.
Проверьте ошибки в макете и на реальном устройстве: при увеличенном тексте, открытой экранной клавиатуре, длинных сообщениях и нескольких ошибках одновременно. Так ошибки валидации формы дизайн не только обозначает, но и помогает исправить.
Нюансы отображения ошибок у полей формы
Где лучше размещать текст ошибки?
Обычно - непосредственно под соответствующим полем, чтобы связь была очевидной. Для ошибок всей формы используйте отдельное общее уведомление.
Нужно ли показывать ошибку сразу при вводе?
Не обязательно. Проверяйте поле после взаимодействия с ним или при отправке; мгновенную проверку используйте только тогда, когда она не мешает набору.
Как показывать ошибку обязательного поля?
Покажите её после попытки отправки или после взаимодействия с полем. Формулировка должна прямо объяснять действие, например: "Заполните это поле".
Нужно ли дублировать ошибки в сводке?
Для длинной формы сводка может помочь увидеть все проблемы, но она не заменяет сообщения рядом с полями. Ссылки в сводке можно связать с соответствующими полями.
Можно ли обозначать ошибку только цветом?
Нет: добавьте текстовое сообщение, чтобы проблему можно было понять без различения цвета. Также проверьте, что ошибочное состояние доступно скринридеру.
Что делать, если форма не отправилась из-за технической проблемы?
Покажите общее уведомление, не привязанное к отдельному полю. Объясните, можно ли повторить отправку и сохранились ли введённые данные.
Нужно ли очищать поле с ошибкой после неудачной отправки?
Не очищайте корректно введённые данные без необходимости. Для чувствительных значений учитывайте требования безопасности и объясняйте, если их нужно ввести повторно.
Автор: Ирина Белова