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