I am ready for a long road flight for work with a week- or months-long projects.
Проектируем уведомления в iOS
Лучшие практики UX/UI мобильных приложений
104
гайдлайна
Как же я устал от всех этих предновогодних push-уведомлений Санлайта, Sokolov, Joom и прочих магазинов за последние 3 недели… Я больше не могу. Удаляю их все. Все 154 приложения.
«Зачем ты их скачивал?» – спросите вы. «Чтобы сделать для вас новую статью про уведомления в iOS» – отвечу я. Как всегда, детально и с примерами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
«Зачем ты их скачивал?» – спросите вы. «Чтобы сделать для вас новую статью про уведомления в iOS» – отвечу я. Как всегда, детально и с примерами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Структура статьи
В этой статье мы разобьём уведомления в iOS на составные части и обсудим моменты, которые стоит учитывать, проектируя каждую из них.
Так как я продолжаю работу над базой знаний по UX/UI в e-commerce, в конце статьи будет много идей по применению уведомлений интернет-магазинами.
1. Запрос доступа
В нужное время
Запрашивайте доступ к уведомлениям тогда, когда для этого есть контекст, а не при первом запуске приложения. Клиент в этот момент еще не понимает, в чем его ценность.
Магнит Доставка
Без конкурирующих запросов
Не отправляйте пользователю сразу несколько запросов. Например, на уведомления и на геолокацию. Лучше разделить их на 2 отдельных шага.
Tanuki Family
Сопровождается пояснением
Запрашивая доступ к уведомлениям, поясните, зачем вам это требуется, что будет получать пользователь. Это повысит шансы на то, что он предоставит вам доступ.
Перекрёсток Впрок
Визуализация пояснения
Выполните пояснение в визуально привлекательном дизайне. Не стоит ограничиваться текстом в системном всплывающем окне.
ASOS
Визуализация соответствует тексту
Если вы сопровождаете пояснение изображением, оно должно соответствовать информации, которую вы доносите до пользователя в тексте.
4 Лапы
Визуализация актуальна
Если у приложения меняется иконка или название, не забудьте обновить и экран запроса доступа к уведомлениям, если он содержит эти элементы.
Лента
Экран с пояснением – до запроса
Базовый момент: убедитесь, что запрос на доступ к уведомлениям отправляется клиенту после, а не до того, как он ознакомится с пояснением.
Befree
Highlight ощутимой ценности
Убедитесь, что ценность, которую вы подсвечиваете при включении уведомлений, ощутима и понятна для клиента. Не ограничивайтесь абстрактными фразами.
Ozon Seller
Примеры использования
Запрашивая доступ к уведомлениям, вы можете подсветить конкретные примеры того, как будете их использовать.
Афиша
Заявленный контент vs. реальность
Будьте честными с клиентом: расскажите в рамках экрана с пояснением о всех типах уведомлений, которые он будет получать, предоставив вам доступ.
Профи
Призыв к действию
Разместите на экране с пояснением призыв к действию. Это может повысить шансы на то, что пользователь предоставит доступ к уведомлениям.
585 Золотой
Локализация
Если ваше приложение переведено на другие языки, убедитесь, что все компоненты экрана с пояснением локализованы корректно.
Ozon
Без жаргонизмов
Не все ваши пользователи могут знать, что такое push/пуши. Поэтому от этих терминов лучше отказаться, чтобы не вызывать ненужных вопросов.
12 storeez
Текст легко читается
Для пояснения ценности от подключения уведомлений используйте легко читаемый шрифт. Не создавайте затруднения в восприятии информации на самом первом шаге.
OSKELLY
Текст без ошибок
Проверяйте, проверяйте и еще раз проверяйте тексты на соответствие правилам языка. Это касается и запроса доступа к уведомлениям.
4 Лапы
Кнопка действия заметна
Сделайте кнопку согласия на получение уведомлений достаточно большой и контрастной по отношению к фону, чтобы она привлекала внимание и на нее было легко нажать.
lamoda
Выбор типов уведомлений
У такой механики есть как плюсы, так и минусы (особенно если спрашивать в самом начале). Как считаете, в чем они заключаются? Напишите в комментариях – обсудим.
Joom
Возможность отложить
Если клиент откажет в доступе при системном запросе, восстановить его будет сложнее. Лучше добавить кнопку отказа в экран с пояснением и спросить еще раз в будущем.
Food.ru
Кнопка отказа визуально вторична
Сделайте кнопку отказа в доступе визуально вторичной по отношению к кнопке согласия, т.к. это не основное, наиболее желаемое целевое действие.
OSKELLY
Пояснение при отказе
Если пользователь отказал приложению в доступе к уведомлениям, есть шанс, что он передумает. Поэтому пояснение о том, как их включить в настройках, не будет лишним.
Perform
Быстрый переход к настройкам
Снабдите пояснение кнопкой быстрого перехода к настройкам, чтобы сделать процесс изменения прав доступа более бесшовным.
Perform
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
2. Заголовок уведомления
Своевременный
Уведомления должны быть своевременными и относящимися к контексту, в котором находится пользователь.
Перекрёсток Впрок
Релевантный
Посыл, заложенный в уведомлении, должен быть релевантен получателям. Для этого лучше сегментировать аудиторию и подстраивать контент под каждый из сегментов.
Joom
У меня нет машины и я не интересуюсь тематикой авто
Доносит ключевую мысль
Спроектируйте текст заголовка так, чтобы из него была понятна ключевая мысль и суть, которую вы ходите донести с помощью уведомления.
Едадил
Диалог 1-на-1
Лучше, если текст уведомления будет спроектирован так, чтобы вызвать у пользователя ощущение персонального диалога с компанией. Обращайтесь лично к клиенту.
Профи
Не обрезается
Текст не должен обрезаться. Нет смысла в том, чтобы отсылать текст, который нельзя будет прочитать. Проверить, не будет ли обрезаться текст ваших пушей, можно здесь.
OSKELLY
Ключевой контент в начале
Разместите ключевой контент в начале текста, чтобы он был виден в любом случае – даже если заголовок будет обрезаться.
Love Republic
Вызывает интерес
Некоторые компании формулируют текст уведомлений таким образом, чтобы вызвать у пользователя интерес, желание узнать, что за ним скрывается – и зайти в приложение.
Профи
Локализован
Если ваше приложение переведено на несколько языков, это должно касаться и пушей. Клиент, использующий приложение на испанском, не должен получать их на английском.
Joom
Без ошибок
Базовый момент: убедитесь, что текст уведомления корректен и не содержит каких-либо ошибок.
Без CAPS LOCK
Выполнив весь текст в верхнем регистре, вы сделаете его «кричащим», и это может вызвать отторжение на стороне пользователя.
Gloria Jeans
3. Текст уведомления
Дополняет заголовок
Текст уведомления должен дополнять, пояснять текст заголовка, гармонично согласоваться с ним и восприниматься, как единое целое.
OSKELLY
Краткий
Используйте минимум текста, чтобы донести информацию. Уберите второстепенные слова, не влияющие на суть. Это повысит шансы на его прочтение.
Эльдорадо
Ключевой контент в начале
Как и в заголовке, вынесите ключевой контент в начало текста уведомления. Так вы повысите шансы на то, что пользователь его прочтет.
585 Золотой
Не обрезается
Хорошо, если текст уведомления не будет обрезаться – в том числе и в расширенной версии уведомления.
Ozon Seller
Соответствует Tone-of-Voice
Уведомления, как и любые другие каналы коммуникации, должны соответствовать тональности коммуникаций компании / текстов в приложении.
SOKOLOV
Содержит призыв к действию
Добавьте в текст описания призыв к действию. Это может дополнительно побудить пользователя к переходу в приложение.
Все Инструменты
Содержит вопрос
Вместо призыва к действию в тексте можно разместить вопрос к пользователю. Это также может повысить шансы на открытие уведомления и переход в приложение.
Профи
Содержит элемент срочности
Если уведомление носит маркетинговый характер, добавив в текст описания элемент срочности, вы можете повысить шансы на его открытие моменте.
Joom
Без конфиденциального контента
По возможности не включайте в текст уведомления конфиденциальную информацию пользователя, т.к. есть риск, что ее могут увидеть на lock screen’е третьи лица.
Тинькофф
Placeholder
Если отображение текста уведомлений отключено, пользователь увидит лишь системный placeholder. Его можно настроить, чтобы placeholder описывал суть уведомления.
4. Использование emoji
Emoji используются
Включая в заголовок и текст emoji, мы повышаем заметность уведомления и привлекаем дополнительное внимание пользователя.
OSKELLY
Emoji релевантны
За последнее время emoji шагнули далеко за рамки смайлов, поэтому в большинстве случаев найти emoji, релевантный для контекста сообщения, не составит труда.
Hoff
Emoji вместо слов
С учетом того, что размер текста в уведомлениях ограничен, некоторые слова можно заменять релевантными emoji, чтобы сэкономить место.
Акушерство
Без устаревших символов
Вместо устаревшего формата для смайликов и указателей лучше использовать современные и визуально более привлекательные символы emoji.
585 Золотой
Количество emoji
Не перебарщивайте с количеством emoji, включаемых в текст сообщения, иначе они превратятся в визуальный шум. Лучше обойтись одним-двумя символами.
Sunlight
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
5. Медиа-контент
Добавлен
Текстовый контент можно снабдить статическим изображением, GIF-анимацией или видео, которые будут доступны в полной версии уведомления.
12 Storeez
Не содержит иконку
Изображение не должно содержать иконку приложения: она и так будет отображаться в левой части уведомления. В ее дублировании смысла нет.
Релевантен тексту
Если вы добавляете в уведомление медиа-контент, позаботьтесь о том, чтобы он дополнял текст и соответствовал ему.
ЦУМ
В хорошем качестве
Изображение не должно размываться и пикселить. Иначе можно испортить впечатление пользователя от вашего уведомления и снизить шансы на переход.
Технопарк
Не обрезается
Протестируйте соотношение сторон изображения на устройствах: если оно слишком высокое или широкое, оно может начать обрезаться или по сторонам появятся рамки.
Центр изображения
Центр изображения будет виден как в полной, так и в краткой версии уведомления. Спроектируйте его так, чтобы смысл доносился в обеих версиях.
OSKELLY
Минимум текста в изображении
Если вы решили разместить в изображении текст, сделайте его максимально кратким. Так вы повысите вероятность его прочтения.
Hoff
Текст дублируется
Учтите, что не все пользователи просмотрят изображение (зажав уведомление). Поэтому если в нем есть важный текст, убедитесь, что он присутствует и в заголовке / описании.
Сима-Ленд
Текст не мельчит
Изображение должно легко читаться на смартфоне и не должно содержать мелких, трудно различимых деталей. В частности, если на нем есть текст, он не должен мельчить.
La Redoute
Шрифт текста
Размещая текст в изображении, выполните его в легко читаемом шрифте, чтобы облегчить восприятие информации.
ЦУМ
Расположение текста и фон
Также, чтобы не возникало проблем при чтении, убедитесь, что текст размещен на однородном контрастном фоне. Избегайте размещения текста на пестром фоне.
Иль де Боте
Кастомизируемый интерфейс
Это редко используется, но iOS позволяет создать для уведомлений свой интерфейс за рамками приложения с широким спектром элементов – вплоть до кнопок.
Тинькофф
Звук уведомления
Для уведомления можно добавить свой звук, который будет согласован со звуковыми эффектами в приложении, делая опыт получения уведомления более нативным.
6. Кнопки действий
Применяются
Уведомление можно снабдить кнопками действий, которые позволят клиенту выполнить требуемую задачу. Иногда даже без необходимости заходить в приложение.
Lady & Gentleman City
Действия понятны
Убедитесь, что действия релевантны контенту и не вызывают вопросов у пользователей в текущем контексте.
OSKELLY
Текст действий краткий
Так как размер под текст действий в кнопках небольшой, по возможности ограничьтесь 1-2 словами, чтобы текст не обрезался.
ЦУМ
Текст локализован
Как и в случае с прочими элементами интерфейса, если ваше приложение переведено на другие языки, текст кнопок действия в уведомлении также должен быть локализован.
Все Инструменты
Иконки действий
Сделать действия более понятными можно за счет дополнения текста кнопок релевантными иконками.
Reminders
Иерархия действий
В уведомлении может быть до 4 кнопок. Но это ограничение можно обойти, реализовав их в формате меню (при нажатии на кнопку появятся кнопки следующего уровня).
Perform
Переход в контекст приложения
Если пользователь просто нажмет на push, он и так откроет приложение. Поэтому нет смысла в том, чтобы «вшивать» в кнопку лишь открытие без каких-либо прочих действий.
Читай-Город
Корректная обработка действий
Не понаслышке знаю, что при обработке действий могут возникать баги, поэтому важно тестировать их как при открытом, так и при выгруженном из памяти приложении.
7. Бейдж в иконке приложения
Используется
Даже если пользователь пропустил ваше уведомление, хорошо заметный бейдж на иконке приложения позволит привлечь к нему внимание пользователя.
СпортМастер
Показывает число уведомлений
Программно бейджу можно задать любое число, но чтобы лучше управлять ожиданиями пользователей, он должен содержать именно число непрочитанных уведомлений.
Едадил
Своевременно обновляется
Если вы используете бейдж, убедитесь, что его счетчик корректно и своевременно обновляется при просмотре каждого уведомления.
8. Время и частота отправки
Рассылка своевременна
В случаях, когда требуется оповещение в моменте (например, «курьер будет через 5 минут»), убедитесь, что уведомления рассылаются без каких-либо задержек.
Время суток
Если вы делаете маркетинговую рассылку, убедитесь, что не вторгаетесь в сон своих пользователей: не запускайте ее слишком рано утром, поздно вечером или в ночи.
Часовые пояса
Учитывайте, что ваши клиенты могут находиться в разных часовых поясах. Поэтому лучше разбить рассылку на части, чтобы все они получили ее в одно и то же местное время.
Время наивысшей вовлеченности
Выбирая время рассылки, используйте исторические данные по своей аудитории: когда уведомления чаще открывались, когда конверсия в целевое действие была выше.
Привязка к действиям
Рассылку уведомлений можно привязывать к действиям клиента – в приложении или за его рамками. Например, собрать фидбэк по функции после того, как клиент ей воспользовался.
Привязка к геолокации
Например, клиент может получить уведомление о персональной скидке в конкретном магазине сети, совершая покупки в торговом центре, в котором этот магазин расположен.
Не слишком часто
Бомбардировка пользователя слишком частыми уведомлениями повышает шансы не только на их отключение, но и на удаление самого приложения.
Sunlight
Без дублирования
Не отсылайте уведомления повторно тем, кто не прочитал их с первого раза. Это не вызовет ничего, кроме отторжения и желания запретить доступ к уведомлениям.
ЦУМ
Типы задаются клиентом
Дайте клиенту самому выбрать в настройках, какие именно уведомления он хочет получать. Не грузите его тем, что ему не релевантно, без возможности это отключить.
Ozon Seller
Частота задается клиентом
В некоторых случаях частоту отправки уведомлений можно уточнить у самого пользователя. Как считаете, в каких? Напишите в комментариях.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
9. Применение в e-commerce
Призыв к авторизации
Если клиент не авторизовался в приложении, ему можно отправить уведомление с призывом это сделать, подсветив ценность, которую он от этого получит.
Welcome-уведомление
Если клиент предоставил доступ, магазин может его поприветствовать и поблагодарить с помощью уведомления, доставляемого вскоре после получения согласия.
Сантехника Онлайн
Онбординг
Магазин также может собрать целую цепочку из уведомлений, в каждом из которых расскажет как о своих преимуществах, так и о полезных функциях приложения.
Kazan Express
Побуждение к первой покупке
Новые клиенты, не совершившие покупку в течение определенного периода, могут получить уведомление, побуждающее к оформлению первого заказа.
Hoff
Акции и распродажи
Наиболее частый повод для рассылки уведомлений – оповещения о различных акциях и распродажах. В идеале эти предложения должны быть персонализированы.
Детский Мир
Подборки товаров
Время от времени клиентам также можно рассылать подборки товаров на основе данных по их покупательским предпочтениям и интересам.
OSKELLY
Новые поступления
Кроме того, клиентов можно оповещать о поступлении в продажу новой продукции. Главное – не делать это слишком часто.
12 Storeez
Снижение цен
Если цена товара, который находится у клиента в избранном, снизилась, почему бы не оповестить его об этом?
Товар снова в наличии
Если товара нет на складе, магазин может предложить клиенту подписаться на уведомления о том, когда товар снова поступит в продажу.
Брошенная корзина
Если клиент добавил товары в корзину, но не оформил заказ, магазин может отправить ему напоминание, повышая шансы на оформление заказа.
Товары в избранном
Если у клиента скопились товары в избранном, и грядут праздники или его день рождения, ему можно об этом ненавязчиво напомнить.
Прогресс в программе лояльности
Если клиент достиг нового уровня в программе лояльности, его можно поздравить через уведомление и рассказать о новых доступных бенефитах.
Скорое сгорание бонусов
Если бонусы в вашей программе лояльности ограничены по сроку использования, оповещайте клиентов заблаговременно о том, что они скоро сгорят.
Поздравление
Если у вас есть данные по дню рождения клиента, его можно поздравить с помощью push-уведомления и предложить, например, бонусы в качестве подарка.
Напоминания о датах
Клиенту можно напоминать о важных датах. Например, в доставке цветов можно выслать напоминание спустя год после заказа букета и предложить повторить.
Статус заказа
Дайте клиентам возможность отслеживать статус заказа с помощью push-уведомлений. Это сделает процесс доставки более прозрачным и удобным.
Оповещения о задержках
Если доставка по каким-то причинам задерживается или переносится, оповестите об этом клиента. Это позволит лучше управлять его ожиданиями.
Сообщения от поддержки
Если в приложении есть функционал чата с поддержкой, используйте push-уведомления при получении клиентом сообщения от оператора.
Оценка качества
После совершения заказа клиент может получить уведомление с просьбой дать обратную связь по товару и качеству доставки.
Фидбэк по отменам
Собирая фидбэк в случаях отмены заказов можно выявить причины, на которые компания может влиять, чтобы сократить % отказов в будущем.
Спонтанная благодарность
Представьте, что компания без какого-либо повода просто по-человечески благодарит вас за то, что вы ее лояльный клиент. Как считаете, какие эмоции это вызовет?
Re-engagement
Клиентов, давно не совершавших покупки, можно пытаться вернуть за счет различных механик повышения лояльности, используя уведомления, как канал доставки.
Рив Гош
Новый функционал
Если в приложении стали доступны новые полезные функции, % их использования можно повысить, оповестив пользователей с помощью push-уведомлений.
Сантехника Онлайн
Новая версия приложения
Если новая версия приложения дает более позитивный опыт, а у клиента не настроено авто-обновление, его можно об этом уведомить.
Street Beat
To be continued...
В этой статье мы разобрали тему уведомлений в iOS. На первый взгляд все может казаться достаточно простым, но, как всегда, разница между успехом и провалом – в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать базу знаний по UX/UI мобильных приложений.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce