В КУРСЕ?

Разбираемся в теме

Кнопка нажата, а что произошло? Как объяснять состояние веб-формы

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

Нажатие и завершение являются разными событиями

Нажатая кнопка показывает, что человек выразил намерение. Она сама по себе не подтверждает, что система выполнила действие. В учебной форме сохранения списка можно выделить готовность к отправке, обработку и подтверждённый результат. Пока идёт обработка, сообщение должно описывать ожидание. Подтверждение сохранения появляется, когда у системы есть соответствующее основание. Если ответ не получен, нельзя автоматически объявлять ни успех, ни неудачу. Неизвестный исход требует отдельного понятного объяснения и подходящего способа проверки результата.

Сообщение отвечает на конкретный вопрос пользователя

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

Изменение должно быть доступно разным пользователям

Серая кнопка или маленькая зелёная отметка могут остаться незамеченными и не объяснять смысл изменения. Нужен понятный текст, а для пользователей экранных дикторов важна возможность получить сообщение о статусе через вспомогательные технологии. При обновлении части страницы следует учитывать это отдельно: визуальное появление текста ещё не гарантирует, что его объявит диктор. При этом каждое незначительное изменение не стоит превращать в навязчивое уведомление. Задача состоит в передаче важного состояния с достаточным контекстом, без лишних прерываний работы.

Попробуйте на практике

Создайте бумажные карточки состояний вымышленной формы для личного списка книг. Никакие реальные формы заполнять и отправлять не нужно.

  1. Нарисуйте четыре карточки: данные готовы к сохранению, идёт обработка, сохранение подтверждено, результат пока неизвестен. На каждой оставьте место для короткого сообщения и следующего действия.
  2. Для ожидания напишите сообщение о текущей обработке. Для успеха назовите сохранённый объект. Проверьте, что эти тексты не обещают публикацию списка или отправку постороннему человеку.
  3. Для неизвестного исхода опишите неопределённость честно и предложите проверку существующего результата. Не называйте отсутствие ответа доказанной ошибкой и не требуйте немедленно повторять действие без проверки.
  4. Прочитайте только тексты карточек, закрыв рисунки и цветовые пометки. Убедитесь, что состояние понятно без цвета. Отдельно отметьте необходимость проверки сообщений с экранным диктором при реальной разработке.

Как проверить результат. У каждой карточки есть ясный смысл, соответствующий известному состоянию. Нажатие не выдано за завершение, неопределённость не скрыта, а важная информация понятна без опоры только на цвет или значок.

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

Достаточно ли вращающегося индикатора?

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

Нужно ли для каждого сообщения открывать отдельное окно?

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

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

Зарегистрируйтесь, чтобы уточнить возможность доступа к этому материалу

Зарегистрироваться
← К списку материалов