Как же я устал от всех этих push-уведомлений Санлайта, Sokolov, Joom и прочих магазинов за последние 3 недели… Я больше не могу. Удаляю их все. Все 154 приложения.

«Зачем ты их скачивал?» – спросите вы. «Чтобы сделать для вас новую статью про проектирование уведомлений в iOS» – отвечу я. Как всегда, детально и с примерами.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.

Структура статьи

В этой статье мы разобьём уведомления в iOS на составные части и обсудим моменты, которые стоит учитывать, проектируя каждую из них.

Так как я продолжаю работу над базой знаний по UX/UI в e-commerce, в конце статьи будет много идей по применению уведомлений интернет-магазинами.

Запрос доступа
Заголовок уведомления
Текст уведомления
Использование emoji
Медиа-контент
Кнопки действий
Бейдж в иконке приложения
Время и частота отправки
Применение в e-commerce

1. Запрос доступа

В нужное время

Запрашивайте доступ к уведомлениям тогда, когда для этого есть контекст, а не при первом запуске приложения. Клиент в этот момент еще не понимает, в чем его ценность.

Без конкурирующих запросов

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

Сопровождается пояснением

Запрашивая доступ к уведомлениям, поясните, зачем вам это требуется, что будет получать пользователь. Это повысит шансы на то, что он предоставит вам доступ.

Визуализация пояснения

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

Визуализация соответствует тексту

Если вы сопровождаете пояснение изображением, оно должно соответствовать информации, которую вы доносите до пользователя в тексте.

Визуализация актуальна

Если у приложения меняется иконка или название, не забудьте обновить и экран запроса доступа к уведомлениям, если он содержит эти элементы.

Экран с пояснением – до запроса

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

Highlight ощутимой ценности

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

Примеры использования

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

Заявленный контент vs. реальность

Будьте честными с клиентом: расскажите в рамках экрана с пояснением о всех типах уведомлений, которые он будет получать, предоставив вам доступ.

Призыв к действию

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

Локализация

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

Без жаргонизмов

Не все ваши пользователи могут знать, что такое push/пуши. Поэтому от этих терминов лучше отказаться, чтобы не вызывать ненужных вопросов.

Текст легко читается

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

Текст без ошибок

Проверяйте, проверяйте и еще раз проверяйте тексты на соответствие правилам языка. Это касается и запроса доступа к уведомлениям.

Кнопка действия заметна

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

Выбор типов уведомлений

У такой механики есть как плюсы, так и минусы (особенно если спрашивать в самом начале). Как считаете, в чем они заключаются? Напишите в комментариях – обсудим.

Возможность отложить

Если клиент откажет в доступе при системном запросе, восстановить его будет сложнее. Лучше добавить кнопку отказа в экран с пояснением и спросить еще раз в будущем.

Кнопка отказа визуально вторична

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

Пояснение при отказе

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

Быстрый переход к настройкам

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

2. Заголовок уведомления

Своевременный

Уведомления должны быть своевременными и относящимися к контексту, в котором находится пользователь.

Релевантный

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

Доносит ключевую мысль

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

Диалог 1-на-1

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

Не обрезается

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

Ключевой контент в начале

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

Вызывает интерес

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

Локализован

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

Без ошибок

Базовый момент: убедитесь, что текст уведомления корректен и не содержит каких-либо ошибок.

Без CAPS LOCK

Выполнив весь текст в верхнем регистре, вы сделаете его «кричащим», и это может вызвать отторжение на стороне пользователя.

3. Текст уведомления

Дополняет заголовок

Текст уведомления должен дополнять, пояснять текст заголовка, гармонично согласоваться с ним и восприниматься, как единое целое.

Краткий

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

Ключевой контент в начале

Как и в заголовке, вынесите ключевой контент в начало текста уведомления. Так вы повысите шансы на то, что пользователь его прочтет.

Не обрезается

Хорошо, если текст уведомления не будет обрезаться – в том числе и в расширенной версии уведомления.

Соответствует Tone-of-Voice

Уведомления, как и любые другие каналы коммуникации, должны соответствовать тональности коммуникаций компании / текстов в приложении.

Содержит призыв к действию

Добавьте в текст описания призыв к действию. Это может дополнительно побудить пользователя к переходу в приложение.

Содержит вопрос

Вместо призыва к действию в тексте можно разместить вопрос к пользователю. Это также может повысить шансы на открытие уведомления и переход в приложение.

Содержит элемент срочности

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

Без конфиденциального контента

По возможности не включайте в текст уведомления конфиденциальную информацию пользователя, т.к. есть риск, что ее могут увидеть на lock screen’е третьи лица.

Placeholder

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

4. Использование emoji

Emoji используются

Включая в заголовок и текст emoji, мы повышаем заметность уведомления и привлекаем дополнительное внимание пользователя.

Emoji релевантны

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

Emoji вместо слов

С учетом того, что размер текста в уведомлениях ограничен, некоторые слова можно заменять релевантными emoji, чтобы сэкономить место.

Без устаревших символов

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

Количество emoji

Не перебарщивайте с количеством emoji, включаемых в текст сообщения, иначе они превратятся в визуальный шум. Лучше обойтись одним-двумя символами.

5. Медиа-контент

Добавлен

Текстовый контент можно снабдить статическим изображением, GIF-анимацией или видео, которые будут доступны в полной версии уведомления.

Не содержит иконку

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

Релевантен тексту

Если вы добавляете в уведомление медиа-контент, позаботьтесь о том, чтобы он дополнял текст и соответствовал ему.

В хорошем качестве

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

Не обрезается

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

Центр изображения

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

Минимум текста в изображении

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

Текст дублируется

Учтите, что не все пользователи просмотрят изображение (зажав уведомление). Поэтому если в нем есть важный текст, убедитесь, что он присутствует и в заголовке / описании.

Текст не мельчит

Изображение должно легко читаться на смартфоне и не должно содержать мелких, трудно различимых деталей. В частности, если на нем есть текст, он не должен мельчить.

Шрифт текста

Размещая текст в изображении, выполните его в легко читаемом шрифте, чтобы облегчить восприятие информации.

Расположение текста и фон

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

Кастомизируемый интерфейс

Это редко используется, но iOS позволяет создать для уведомлений свой интерфейс за рамками приложения с широким спектром элементов – вплоть до кнопок.

Звук уведомления

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

6. Кнопки уведомлений

Применяются

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

Действия понятны

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

Текст действий краткий

Так как размер под текст действий в кнопках небольшой, по возможности ограничьтесь 1-2 словами, чтобы текст не обрезался.

Текст локализован

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

Иконки действий

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

Иерархия действий

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

Переход в контекст приложения

Если пользователь просто нажмет на push, он и так откроет приложение. Поэтому нет смысла в том, чтобы «вшивать» в кнопку лишь открытие без каких-либо прочих действий.

Корректная обработка действий

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

7. Бейдж

Используется

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

Показывает число уведомлений

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

Своевременно обновляется

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

8. Время и частота отправки

Рассылка своевременна

В случаях, когда требуется оповещение в моменте (например, «курьер будет через 5 минут»), убедитесь, что уведомления рассылаются без каких-либо задержек.

Время суток

Если вы делаете маркетинговую рассылку, убедитесь, что не вторгаетесь в сон своих пользователей: не запускайте ее слишком рано утром, поздно вечером или в ночи.

Часовые пояса

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

Время наивысшей вовлеченности

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

Привязка к действиям

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

Привязка к геолокации

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

Не слишком часто

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

Без дублирования

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

Типы задаются клиентом

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

Частота задается клиентом

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

9. Применение в e-commerce

Призыв к авторизации

Если клиент не авторизовался в приложении, ему можно отправить уведомление с призывом это сделать, подсветив ценность, которую он от этого получит.

Welcome-уведомление

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

Онбординг

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

Побуждение к первой покупке

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

Акции и распродажи

Наиболее частый повод для рассылки уведомлений – оповещения о различных акциях и распродажах. В идеале эти предложения должны быть персонализированы.

Подборки товаров

Время от времени клиентам также можно рассылать подборки товаров на основе данных по их покупательским предпочтениям и интересам.

Новые поступления

Кроме того, клиентов можно оповещать о поступлении в продажу новой продукции. Главное – не делать это слишком часто.

Снижение цен

Если цена товара, который находится у клиента в избранном, снизилась, почему бы не оповестить его об этом?

Товар снова в наличии

Если товара нет на складе, магазин может предложить клиенту подписаться на уведомления о том, когда товар снова поступит в продажу.

Брошенная корзина

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

Товары в избранном

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

Прогресс в программе лояльности

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

Скорое сгорание бонусов

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

Поздравление

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

Напоминания о датах

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

Статус заказа

Дайте клиентам возможность отслеживать статус заказа с помощью push-уведомлений. Это сделает процесс доставки более прозрачным и удобным.

Оповещения о задержках

Если доставка по каким-то причинам задерживается или переносится, оповестите об этом клиента. Это позволит лучше управлять его ожиданиями.

Сообщения от поддержки

Если в приложении есть функционал чата с поддержкой, используйте push-уведомления при получении клиентом сообщения от оператора.

Оценка качества

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

Фидбэк по отменам

Собирая фидбэк в случаях отмены заказов можно выявить причины, на которые компания может влиять, чтобы сократить % отказов в будущем.

Спонтанная благодарность

Представьте, что компания без какого-либо повода просто по-человечески благодарит вас за то, что вы ее лояльный клиент. Как считаете, какие эмоции это вызовет?

Re-engagement

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

Новый функционал

Если в приложении стали доступны новые полезные функции, % их использования можно повысить, оповестив пользователей с помощью push-уведомлений.

Новая версия приложения

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

To be continued...

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

Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать базу знаний по UX/UI мобильных приложений.

Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.

Проектируем уведомления в iOS: 104 гайдлайна