Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
UX-шаблоны7 минут чтения·Updated октябрь 2026 г.·Команда ExodeUI

Как разработать сообщения об ошибках, которые уменьшат разочарование

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

Кратко и определение

Главное

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

Рекомендации

Nielsen Norman Group резюмирует эффективные сообщения об ошибках как хорошо заметные, конструктивные и уважительные к усилиям пользователя. На практике это означает:

  • Разместите сообщение рядом с полем или элементом с проблемой.
  • Используйте простой и конкретный язык: «Этот номер короче на одну цифру», а не «Неверный ввод».
  • Предложите исправление: какой формат ожидается, что попробовать дальше.
  • Сохраняйте то, что напечатали люди, чтобы они могли редактировать это, а не начинать заново.
  • Не обвиняйте: избегайте таких слов, как «недействительный», «незаконный» или «неправильный».
Поле номера карты со встроенной ошибкой, в которой говорится, что номер короче на одну цифру и сохраняются введенные цифры, рядом с контрольным списком рекомендаций по сообщениям об ошибках.
Конкретная встроенная ошибка сохраняет ввод и сообщает, как ее исправить.

Тайминг

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

Ошибки, не относящиеся к формам

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

Доступность

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

Движение в состояниях ошибки

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

Ключевые принципы

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

Частые вопросы

Источники

  1. Error-Message Guidelines — Nielsen Norman Group
  2. Indicators, Validations, and Notifications — Nielsen Norman Group

Связанные руководства и примеры

Проектируйте состояние ошибки, а не только счастливый путь

Откройте примеры ExodeUI с состояниями ошибок и успехов в ваших переключателях кода и адаптируйте их.

Откройте примеры
Попробовать бесплатно