Поместите важную информацию в правильный контекст.
Пунктов проверки: 6 · Групп: 2
Содержание чек-листа
Прогресс проверки
01
Структура и значение
Сравните информацию и представление в контексте использования.
02
Взаимодействие и удобство использования
Попробуйте выполнить операцию, измените статус и продолжайте работу.
Прогресс автоматически сохраняется в этом браузере.
РЕКОМЕНДАЦИИ
Как проверять
01
Проверьте, актуально ли сообщение после обработки.
Выполните рекомендуемое действие, а затем вернитесь на экран. Баннер необходимо обновить или исчезнуть, когда проблема будет решена; Не позволяйте старой информации продолжать беспокоить пользователей.
ПРИМЕРЫ
Примеры использования
Необходимо добавить информацию об аккаунте
Баннер «Полная информация для продолжения» имеет кнопку для перехода к нужному недостающему разделу; После добавления баннер больше не появляется.
Варианты и сценарии использования
Уровень важности сообщения
Различайте информацию, предупреждение, ошибку и успех подписями или значками в дополнение к цвету.
Посмотрите на баннер без цветов: должно быть понятно, требует он внимания или лишь сообщает информацию.
Пример Сообщение «Оплата не завершена» содержит предупреждающий значок и действие для проверки.
Есть обновления
Изменения сохранены.
Есть обновления
Пожалуйста, проверьте информацию.
Структура сообщения
Сначала сообщите о событии, затем кратко объясните его последствия и нужные действия.
Проверьте длинный текст и меняющиеся показатели: важные действия не должны скрываться на мобильном экране.
Пример «Сеанс скоро завершится. Сохраните черновик перед повторным входом».
Есть обновления
Просмотрите изменения перед продолжением.
Пожалуйста, проверьте информацию.
Просмотрите изменения перед продолжением.
Связанное действие
Предлагайте действие, решающее конкретную ситуацию; если сообщение необязательно, можно добавить закрытие.
Выполните действие и вернитесь: после решения проблемы баннер ошибки должен исчезнуть.
Пример Кнопка «Подключиться снова» в сообщении о потере соединения восстанавливает подключение, а не ведёт на главную.
Есть обновления
Просмотрите изменения перед продолжением.
Пожалуйста, проверьте информацию.
Просмотрите изменения перед продолжением.
Контраст с окружающей страницей
Сообщение должно быть достаточно заметным, не заслоняя основное содержание страницы.
Разместите баннер на цветном фоне и в тёмной теме: текст, ссылки и кнопки должны оставаться читаемыми.
Пример У предупреждающего баннера есть обводка и значок; описание сохраняет удобный размер текста.
Есть обновления
Есть обновления
Значки с понятным смыслом
Значок показывает тип сообщения, а текстовая подпись остаётся главным источником информации.
Скройте значок и перечитайте сообщение: его смысл должен оставаться понятным.
Пример Значок замка сопровождает текст «У вас нет прав на редактирование».
Изменения сохранены.
Есть обновления
Расположение уведомления
Размещайте сообщение рядом с затронутой областью; уведомление обо всём сеансе можно показать вверху страницы.
Прокрутите страницу и откройте клавиатуру: баннер не должен перекрывать нужное действие.
Пример Ошибка фильтра находится рядом с результатами, а сообщение об обслуживании сервиса — вверху страницы.
