4 тона предупреждающих сообщений и уведомлений
Дизайн интуитивно понятной обратной связи
Взаимодействие пользователей с интерфейсами происходит посредством ввода и вывода информации. Когда человек вводит данные в систему через форму или нажимает на кнопку — это входящий сигнал. Когда система отображает сообщения и уведомления в ответ на действия пользователя — это сигнал выхода данных.
Взаимодействие с пользователем не ограничивается отображением информации, поскольку есть разные типы сообщений. Человеку необходимо понимать тон каждого из них, чтобы он мог реагировать соответствующим образом. Без передачи тона сообщения пользователь может не заметить и проигнорировать сообщение, принимая его за обычный текст на экране.
Тон сообщений
Есть четыре типа тональности предупреждающих сообщений. Каждый из них соответствует цвету иконки, которую пользователи обычно ассоциируют с сообщением.
Чтобы передать тон сообщения, добавляйте иконки соответствующего цвета. Их отсутствие приведёт к тому, что пользователи неправильно интерпретируют или проигнорируют получаемые ими уведомления.
Предостерегающий тон
Используйте предостерегающий тон в случаях, если отсутствие надлежащих мер со стороны пользователя приведёт к опасным последствиям, таким как потеря данных или невозможность использования приложения. Этот тип сообщения требует пристального внимания и незамедлительной реакции.
Иконка для этого тона — восклицательный знак. Поместите его в красный треугольник, чтобы добавить контрастности. Острые углы фигуры придадут иконке рельефности в отличие от обычного круга.
Предупреждающий тон
Предупреждающий тон похож на предостерегающий, но имеет более низкую степень серьёзности. Другими словами, он предназначен для сообщений, призывающих пользователей быть осторожными в определенном контексте. Например, если подписка на услугу скоро закончится, можно уведомить пользователей об этом и предложить им продлить её, если они захотят.
В данном случае следует применять предупреждающий тон, а не предостерегающий, потому что прекращение подписки не приведёт к опасным последствиям. Пользователь сможет снова оформить подписку, если это потребуется.
Иконка для этого тона также включает восклицательный знак, но на фоне круга жёлтого цвета. В этом случае нет необходимости создавать сильный контраст, потому что эта иконка не заслуживает такого же пристального внимания, как иконка предостерегающего сообщения, и формы круга будет вполне достаточно.
Тон успешного завершения
Когда действия пользователя приводят к завершению задачи, уместно показать ему сообщение с тоном успешного завершения. Такая положительная обратная связь придаст пользователю уверенности в том, что его действия привели к желаемому результату.
Иконка для этого тона — галочка на зелёном фоне. Вместо формы круга используйте щит, чтобы передать настроение доверия и безопасности.
Информирующий тон
Информирующий тон не обладает ни негативной, ни положительной тональностью. Он нейтрален и содержит подсказки, которые помогут пользователям в решении их задач.
Иконка для этого тона — буква "i" на синем фоне. Вы можете использовать стандартную форму круга или документа, чтобы передать настроение информирования.
Цвет фона для сообщения
Некоторые дизайнеры совершают ошибку, делая окно сообщения полностью цветным. Когда вы окрашиваете весь компонент, он может отвлекать и быть трудным для восприятия. Лучше ограничиться цветной иконкой.
На цветном фоне сложно обеспечить контрастность текста. Для каждого цвета фона вам придётся использовать светлый и тёмный текст, чтобы сделать его читабельным, что приведёт к непоследовательности в дизайне интерфейса.
Именно цвет в иконке передает тон сообщения. Она должна выделяться на фоне текста, чтобы пользователи знали, как реагировать, до того, как они прочтут сообщение. Цветной фон окна сообщения сделает иконку менее заметной.
Чтобы распознать тон сообщения, пользователям необязательно сначала читать его. Тон должен стоять на первом месте, потому что он определяет уровень внимания и важности, который заслуживает сообщение. Иконки — это визуальные подсказки, которые указывают на это.
Вместо цветного фона используйте нейтральный, противоположный основному цвету вашего текущего дизайна. Например, если в вашем интерфейсе используется светлая тема, сделайте фон предупреждающего сообщения тёмным, а текст — светлым.
Если интерфейс находится в тёмном режиме, используйте светлый фон с тёмным текстом. Благодаря противоположной полярности предупреждающее сообщение легче заметить и прочитать, независимо от того, насколько экран перегружен контентом.
Ключевые выводы
Пользователь взаимодействует с интерфейсом с помощью предупреждающих сообщений и уведомлений. Каждое из них имеет определённую тональность за счёт использования соответствующих цветных иконок. Тон указывает людям на то, как они должны реагировать и насколько большое значение должны придавать предупреждающему сообщению.
Оповещения, цвет фона которых противоположен основному цвету интерфейса, легче заметить. Избегайте использования цветного фона, так как он делает текст непоследовательным и трудным для восприятия.
Перевод статьи The 4 Tones of Alert Messages and Notifications из блога UX Movement
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!