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

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

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

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

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

Так как я продолжаю работу над базой знаний по UX/UI в 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 и поделиться этим постом с друзьями и коллегами. Будем на связи.