Подробное руководство по дизайну уведомлений

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

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

Точно так же дизайнеры продуктов склонны думать о небольших, но важных улучшениях UX в последнюю очередь. Как и в случае с пустыми состояниями, дизайнеры склонны оставлять дизайн уведомлений — предупреждений, сообщений об ошибках, подтверждений, объявлений и подтверждений — до самого конца. Проблема может внезапно всплыть, когда разработчик спросит: « Как мы обрабатываем ошибки? «Поскольку это второстепенный подход, этот подход часто приводит к небрежному «франкен-дизайну», который вредит UX.

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

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

• Тип передаваемой информации
• Срочность информации — нужно ли ее увидеть немедленно
• Требуется ли действие пользователя в результате информации

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

Терминология, используемая для уведомлений, как правило, одинакова, но немного отличается от команды к команде и от проекта к проекту. На дизайнера возложена обязанность определить терминологию системы уведомлений — что называется, что — а также синхронизировать всех по обоснованию их использования: что, где и как .

Лучшее удобство использования благодаря лучшему дизайну уведомлений

Уведомления играют важную роль в удобстве использования продукта. « Видимость состояния системы » занимает первое место в списке «10 эвристик юзабилити для дизайна пользовательского интерфейса» от Nielsen Norman Group. Правило гласит, что « система должна всегда информировать пользователей о том, что происходит, посредством соответствующей обратной связи в разумные сроки. ”

Система уведомлений является настолько важной частью UX цифрового продукта, что без нее продукт будет выглядеть так, как будто что-то упущено. Если нет «видимости состояния системы» и обратной связи, это сродни вождению автомобиля без приборной панели.

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

Точно так же это работает и с цифровым продуктом. Когда речь идет об удобстве использования, наглядность состояния системы и обратная связь имеют основополагающее значение, а удобство использования — это основа отличного взаимодействия с пользователем.

Создание полезной системы уведомлений

Чтобы хорошо спроектировать структуру уведомлений, может быть полезно думать об уведомлениях с точки зрения «мощности сигнала». Какие периферийные сообщения требуют большего или меньшего внимания? Например, взаимодействия, которые потенциально могут быть деструктивными, требуют «более громких» уведомлений, а неразрушающие взаимодействия — «более тихих».

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

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

После определения атрибутов уведомлений пришло время создать таксономию различных уведомлений, которые составят структуру. Следующий список ни в коем случае не является исчерпывающим — типы уведомлений будут различаться в зависимости от продукта, вариантов использования и других переменных. ( Обратите внимание : как уже упоминалось, разные команды используют разные термины. Например, мы называем «подтверждением» уведомление, которое требует одобрения пользователя для продолжения деструктивного взаимодействия. Некоторые команды могут использовать «подтверждение» в качестве термина для сообщение об успехе.)

Высокое внимание

• Оповещения (требуется немедленное внимание)
• Ошибки (требуются немедленные действия)
• Исключения (системные аномалии, что-то не сработало)
• Подтверждения (потенциально деструктивные действия, для продолжения которых требуется подтверждение пользователя)

Среднее внимание

• Предупреждения (немедленных действий не требуется)
• Благодарности (отзывы о действиях пользователей)
• Сообщения об успехе

Низкое внимание

• Информационные сообщения (они же пассивные уведомления, что-то готово к просмотру)
• Значки (обычно на значках, обозначающие что-то новое с момента последнего взаимодействия)
• Индикаторы состояния (системная обратная связь)

Разработка отличного UX для уведомлений

Чтобы разработать продукт с отличным UX, дизайнеры должны составить список всех вариантов использования, в которых уведомления могут быть полезны. Рекомендуется, чтобы этот процесс выполнялся в сотрудничестве с разработчиком, так как в большинстве случаев он может быть беспристрастным и способным помочь устранить крайние случаи, которые разработчик, возможно, не учел.

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

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

• Что вызовет уведомление?
• Какой тип обратной связи передается?
• Где будет появляться уведомление и как?
• Какое уведомление потребует немедленного взаимодействия?
• Является ли уведомление постоянным или непостоянным?

Затем необходимо определить цветовое кодирование и значки и включить их в дизайн-систему (или руководство по стилю). Проходя этот процесс, дизайнеры должны учитывать каждый случай, когда появится уведомление, и убедиться, что они правильно отображаются на всех фонах.

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

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

Дополнительные вопросы, которые следует задать, когда дело доходит до определения поведения уведомлений :

• Если оповещение или предупреждение должны быть постоянными, как дизайнеры гарантируют, что люди по-прежнему будут иметь к ним доступ после того, как они уйдут с начального экрана?
• Нужно ли включать значок предупреждения со значком там, где можно увидеть архив уведомлений?
• Если уведомление непостоянно, через сколько времени оно исчезнет, ​​и должна ли быть возможность отклонить его до того, как оно исчезнет?

Для мобильных приложений не только уведомления внутри приложения, но и push-уведомления (системного уровня, вне приложения) также должны быть тщательно разработаны. В основном это прерывания, поэтому очень важно просмотреть копию уведомления и узнать, как и когда запрашивать разрешение на их отправку. Если их использовать слишком часто, они могут отбить у людей охоту пользоваться приложением. Слишком много несущественных уведомлений может расстроить пользователей, которые затем могут отключить уведомления или вообще перестать использовать приложение.

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

Для мобильных push-уведомлений лучшая практика UX — откладывать уведомления любого рода (запрашивать доступ к местоположению человека, отправлять push-уведомления и т. д.) до тех пор, пока у людей не будет возможности немного изучить приложение.

Рекомендации по уведомлениям для отличного UX

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

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

Лучшие практики для сообщений об ошибках

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

Резюме

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

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

Краткий обзор правильного дизайна уведомлений:

• Начните дизайн уведомлений заранее, а не задним числом.
• Классифицируйте уведомления по трем уровням внимания: высокий, средний и низкий.
• Цветовой код, назначение значков и определение мест размещения.
• Классифицируйте их по типу: постоянные или непостоянные, всплывающие окна, баннеры, диалоговые окна и т. д.
• Включите их в дизайн-систему.

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

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Как работать удаленно, когда это важнее всего
• Как легко перейти на удаленную работу
• Лучшие практики и ошибки в дизайне мобильных приложений
• Полное руководство по дизайну веб-сайта электронной коммерции
• Сбой чата — когда чат-бот терпит неудачу