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