Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день

Проектируем уведомления в iOS

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

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

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

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

В этой статье мы разобьём уведомления в 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

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

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