I am ready for a long road flight for work with a week- or months-long projects.
Пэйволлы: прокачиваем насмотренность
200+ моментов, которые стоит учесть при проектировании
Часть II
Это вторая часть статьи, посвященной проектированию пэйволлов. В ней мы обсуждаем сложившиеся паттерны, тонкости, которые стоит учитывать, и грабли, на которые лучше не наступать.
В этой статье в структурированной форме описано все, что я заметил после просмотра 3000+ paywall’ов. Если я что-то упустил, жду вас в комментариях. Ну а если материал полезен, буду рад, если поделитесь им с коллегами.
Для удобства, структуру материала я дублирую и оставляю единой в обеих частях.
В этой статье в структурированной форме описано все, что я заметил после просмотра 3000+ paywall’ов. Если я что-то упустил, жду вас в комментариях. Ну а если материал полезен, буду рад, если поделитесь им с коллегами.
Для удобства, структуру материала я дублирую и оставляю единой в обеих частях.
Структура статьи
Часть 1:
Часть 2:
6. Тарифы
В этом блоке мы сначала обсудим моменты, связанные с процессом сравнения тарифов, а затем более детально остановимся на отображении цен и скидок.
6.1 Сравнение тарифов
Тарифы не спрятаны
Некоторые в пэйволле подсвечивают тариф, наиболее выгодный для компании, при этом пряча остальные за неброский label и намеренно затрудняя сравнение.
Zero
Тарифы на одном экране
По возможности постарайтесь разместить тарифные планы в рамках одного экрана, чтобы клиенту легче было их сравнить. Особенно если их всего 2, как в примере:
Deliveroo
Тарифов не слишком много
По возможности не используйте более 3 тарифов. Паралич выбора применим и для paywall'ов: чем больше опций, тем труднее выбрать оптимальную.
Bumble
Разница в тарифах понятна
Проведите исследование и проверьте, насколько легко клиентам разобраться в предлагаемых тарифах. В этом примере есть потенциал для улучшения:
Text Me
Мотивация к длительной подписке
Более длительную подписку часто делают финансово более выгодной, давая скидку и мотивируя клиентов оставаться с компанией дольше.
Open
Тариф по умолчанию
Некоторые компании, вместо того, чтобы предоставить выбор клиенту, делают первый шаг за него, выбирая (более выгодный для себя) тариф по умолчанию.
TimePage
Платные vs. бесплатные фичи
Некоторые не просто рассказывают о фичах, а противопоставляют их тому, чем клиент пользуется в бесплатной версии, тем самым усиливая эффект.
Spotify
Сравнение фич списком
Если фичи бинарны (либо есть, либо нет), а тариф лишь один, сравнение можно реализовать в формате наглядного списка с 3 столбцами.
Duolingo
Структурированные списки
Если список фич длинный, для облегчения восприятия фичи в нем можно разбить по смысловым группам.
Craft
Сравнение без перегрузки
Однако в порыве реализовать сравнение тарифов по фичам убедитесь, что вы не слишком перегружаете экран. Вот такого исполнения лучше избегать:
LinkTree
Отдельная карточка
Если фич много, их сравнение прямо в рамках основного экрана paywall'а может перегрузить интерфейс. Поэтому их можно вынести в отдельную карточку.
Flighty
Сравнение при переключении
В качестве альтернативы можно дать пользователю возможность переключаться между тарифами и подсвечивать, какие фичи активны в каждом из них.
Evernote
Дублирование фич в тарифах?
Некоторые компании проектируют paywall таким образом, что фичи в карточках начинают дублироваться, тем самым затрудняя процесс сравнения.
Spotify
Удобство переключения
Расположите кнопки тарифов так, чтобы до них не приходилось далеко тянуться. В примере выбрать срок подписки относительно менее удобно.
Linktree
Подобное с подобным
Если, скажем, у вас есть годовая и месячная подписки, имеет смысл подсветить стоимость годовой в расчете на месяц, чтобы облегчить сравнение.
Endel
Сравнение с другими тратами
По аналогии с предыдущим пунктом, некоторые подсвечивают низкую стоимость за счет сравнения с другими тратами – например, чашкой кофе. Как вам такое?
Olio
Использование маркеров
Нередко компании подсвечивают наиболее популярные тарифы или лучшие цены с помощью маркеров, акцентируя на них внимание клиента.
Badoo
Читаемость маркеров
При этом сама информация на маркере должна хорошо читаться: текст должен быть контрастным и не должен мельчить.
Koloro
Не выбранный vs. неактивный
В некоторых кейсах тарифы, которые не были выбраны, настолько визуально вторичны, что становятся похожи на неактивные тем самым вводя клиента в заблуждение.
Lifesum
6.2 Отображение цен и скидок
Цены тарифов видны
Понимаю, что это базовый момент, но просто не мог не обойти этот пример стороной: если продаете платный тариф, позаботьтесь о том, чтобы его стоимость была видна.
Slowly
Цены хорошо заметны
Делая цену подписки слишком мелкой и неконтрастной, компания как бы намекает, что не хочет акцентировать на ней внимание клиента. От такого лучше воздержаться:
Apple Fitness
Итоговая цена есть на экране
За 1 шаг до оплаты клиент должен видеть итоговую цену. В примере видна только цена альтернативной подписки, но не подписки, стоящей за основной кнопкой free trial'а.
Picsart
Итоговая цена понятна
Некоторые в годовой подписке вместо общей стоимости пишут лишь (более низкую) цену в расчете на месяц, заставляя клиента считать самому. Так лучше не поступать:
Fabulous
Цены за короткие периоды
Некоторые, чтобы создать ощущение низкой цены, при оплате года подсвечивают стоимость за день или неделю. Dark pattern или неплохо? Напишите в комментах.
Picture This
100 или 99.95?
Многие пользуются тем, что фокус внимания чаще падает на левую часть цены, и визуально снижают ее на 1, 10, 100 долларов, отнимая лишь несколько центов.
Loona
Валюта локализована
Цена должна отображаться в валюте, соответствующей рынку, в котором зарегистрирован пользователь.
Sleep Cycle
Скидки отображаются
Если тариф на длительный период предполагает скидку, грех не подсветить этот факт в рамках paywall'а.
Greg
Форматы скидок
Вы можете отображать скидки в 3 основных форматах: процентные, абсолютные и период подписки в подарок.
Скидка хорошо заметна
Реализуйте скидку в виде хорошо заметного маркера. Смысла в том, чтобы делать ее визуально посредственной, мало. Особенно если сама скидка значительная.
Epicurious
Скидка значима
Просто не мог не обойти стороной этот пример: если скидка незначительная, возможно, ее и не стоит подсвечивать? Особенно если скидка – 0%.
Tagged
Скидка видна по умолчанию
Скидка на тарифный план должна быть видна по умолчанию, а не только тогда, когда пользователь его выбирает.
Perform
Старая и новая цены
Процентные скидки также часто дополняются старой и новой ценами, чтобы усилить эффект за счет абсолютных значений.
BetterSleep
Старая цена перечеркнута
Если вы используете механику старой и новой цен, используйте устоявшийся паттерн перечеркивания, чтобы не вызывать лишних вопросов.
Flighty
Старая цена легко читается
В своем порыве перечеркнуть старую цену некоторые перегибают палку – так что ее становится трудно прочитать.
Demo
Благотворительные тарифы
Встречаются кейсы, когда нуждающимся доступ к приложению дают бесплатно. Это, помимо прочего, придает позитивный окрас компании в глазах клиентов.
Transit
Выбор стоимости
Некоторые дают клиенту самому выбрать цену подписки, но при этом указывают на популярный выбор либо пишут, во сколько по затратам им обходится 1 пользователь.
Alan Mind
Тарифы по акции
Нередко можно встретить кейсы, когда к тарифам также применяется акционная скидка, нацеленная на создание у клиента ощущения выгодной покупки.
Lensa AI
Механики срочности
Встречаются кейсы, когда разработчики пытаются создать у клиента ощущение срочности. Как вам такой подход? Хорош или не очень? Напишите в комментах.
Memrise
7. Free trial
Далеко не каждый пользователь вашего приложения решит купить «кота в мешке», как бы красочно ни был оформлен paywall. Поэтому тестовый доступ...
Предлагается
Хорошая и часто используемая практика – дать клиенту тестовый доступ, чтобы он мог оценить качество приложения перед подпиской.
Instacart
Highlight периода trial'а
В явной форме подсветите, на сколько времени дается тестовый доступ. Сделать это можно в intro-тексте, в блоке с тарифами, в тексте кнопки подписки и т.д.
Amazon Music
Период trial'а достаточен
Период тестового доступа должен быть достаточным для того, чтобы клиент успел ознакомиться и воспользоваться функционалом.
SoundCloud
Trial не слишком длинный
Но подумайте дважды перед тем, как делать период trial'а длинным: понимая, что времени до его конца много, клиенты могут не начать использовать приложение в моменте.
Quibi
Trial – фактор выбора тарифа
В некоторых случаях free trial дается лишь на 1 из тарифов (чаще всего, более длинный), таким образом, повышая его привлекательность.
Kahoot!
Trial'ы разной длительности
Также иногда применяется градация trial'ов по длительности: например, годовая подписка может предполагать trial в месяц, а месячная – в 1 неделю.
Bear
Trial vs. intro price
Некоторые компании вместо бесплатного trial'а предлагают сниженную цену на первый период. Какие плюсы и минусы у такого подхода? Напишите в комментах.
The Wall Street Journal
Ручная активация
Некоторые не просто говорят о free trial'е, а предлагают клиенту активировать тестовый доступ вручную, упаковывая его, как достижение: «сообщил энергию – получи плюшку».
Flo
Побуждающий вопрос
Отдельно стоит подсветить, что некоторые компании, предлагая trial, задают побуждающий вопрос, как бы начиная диалог с пользователем:
Prequel
Изменение текста кнопки
Также при активации free trial'а можно изменять текст кнопки целевого действия, делая его более релевантным контексту.
Picsart
Цель free trial'а
Некоторые игроки специально подсвечивают, зачем нужен free trial и какую ценность получит из него пользователь.
Noom
Визуализация триала
Отобразив процесс тестового доступа в визуальном формате, мы можем лучше донести до пользователя его детали и более эффективно управлять его ожиданиями.
Picsart
Highlight текущего шага
Внимание пользователя можно дополнительно привлечь, подсветив, на каком шаге он находится в данный момент.
Quizlet
Trial – полноценный доступ
Достаточно часто в рамках описания trial'а в явной форме подсвечивается, что это полноценный доступ без каких-либо ограничений относительно платной версии.
Finimize
Период и дата окончания
Кто-то мыслит периодами, кто-то легче воспринимает даты. Поэтому хорошо, если в paywall'е совмещаются и период, на который дается trial, и дата окончания.
IFTTT
Напоминания об окончании
Highlight того, что вы отправите клиенту напоминание ближе к концу trial'а, позволит лучше управлять его ожиданиями и может быть воспринят, как своего рода забота.
Blinkist
Заказ напоминания
Напоминание можно презентовать не как какую-то данность, а как дополнительную услугу, которую клиент заказывает, повышая тем самым воспринимаемую ценность.
PlantIn
Совмещение с фичами
Визуализируя trial, можно не просто рассказать о процессе, но и подсветить ключевые фичи, которыми клиент сможет воспользоваться во время тестового доступа.
imgmi
Trial – только начало
Можно подсветить, что trial – лишь начало: timeline в нижней части может растворяться, уходя вдаль, а текст последнего пункта – рассказать о старте полноценной подписки.
Brilliant
8. Безопасность платежей
У части пользователей могут возникнуть вопросы касательно того, кем и как будут обрабатываться платежи, насколько они защищены. Поэтому имеет смысл отработать эти опасения в рамках paywall'а.
Highlight безопасности платежа
Часто в paywall'е уточняется, что платежи проводятся на стороне App Store. Это позволяет отработать возможные опасения.
Loona
Визуализация безопасности
Нередко текст о безопасности платежа также дополняется релевантной иконкой щита или замка, которая позволяет облегчить восприятие.
Headway
Highlight бесплатности trial'а
Часто факт бесплатности free trial'а отдельно подчеркивается, повышая заманчивость предлагаемой подписки.
Uber
Trial vs. списание средств
Помимо бесплатности, некоторые приложения также в явной форме доносят до клиента факт, что в моменте с него ничего не спишется, тем самым отрабатывая опасения.
Opal
Когда можно отписаться?
Еще одно опасение связано с тем, что клиент не сможет отказаться от подписки, если она ему не понравилась. О том, что сможет в любое время, пишут в явной форме.
Duolingo
Deadline по отписке
Однако можно сделать и более корректное уточнение: чтобы платеж не прошел, нужно отказаться минимум за 24 часа до следующей даты оплаты.
Picsart
Highlight простоты отписки
Некоторые не просто рассказывают клиенту о том, что он может отказаться, но и подсвечивают факт, что сделать это будет очень легко.
Fabulous
Описание процесса отписки
Некоторые идут ещё дальше и рассказывают в paywall'е о том, что нужно сделать, чтобы отписаться, повышая прозрачность процесс для клиента.
Blinkist
Частота списания средств
Хоть это уже и не обязательное требование Apple, можно пояснить, что подписка авто-возобновляемая, и рассказать о том, как часто будет происходить списание.
Lifesum
Текст виден полностью
Убедитесь, что верстка корректна во всех локализациях, и текст с описанием процесса отписки не обрезается на половине.
Picsart
9. Помощь с подпиской
Если у клиента возникли вопросы по подписке, он либо обратится за помощью, либо забьёт и уйдет. Если вам интересен первый вариант, лучше предоставить ему эту возможность.
Помощь предусмотрена
Если пользователь испытывает затруднения с подпиской или у него остались вопросы, дайте ему возможность получить помощь в рамках paywall'а.
Endel
Ответы на частые вопросы
Чтобы ответить на наиболее распространенные вопросы, можно либо сослаться на Q&A блок в рамках paywall'а, либо расположить его в нижней части экрана.
SoundCloud
Связь с сотрудником
Помимо Q&A также можно предусмотреть возможность связи с сотрудником, если пользователь столкнулся с проблемой или не нашел ответ на свой вопрос.
Bear
Премиум гайд
Кроме того, в блок с помощью можно поместить ссылку на ресурс, в котором бы рассказывалось, как извлечь максимальную пользу от премиум-фич.
Todoist
10. Кнопка подписки
Нажатие на кнопку подписки – практически последний шаг, отделяющий вас от получения выручки или активации тестового доступа. Давайте разберем, какие моменты стоит учитывать при ее проектировании.
Размер кнопки
Сделайте кнопку достаточно большой как по ширине, так и по высоте, чтобы на нее легко было нажать.
PlantIn
Расположение
Разместите кнопку подписки так, чтобы до нее легко было дотянуться. Нижняя часть экрана для этого идеально подходит. А вот и антипример:
Upwork
Фиксация
Если paywall предполагает прокрутку экрана, зафиксируйте кнопку покупки так, чтобы она была доступна в любой момент.
Castro
Affordance
Базовый момент: кнопка должна выглядеть, как кнопка. У пользователя не должно возникать каких-либо затруднений с ее поиском.
Paramount
Цвет текста
Текст в кнопке должен хорошо читаться и не вызывать ложных ассоциаций. В примере красный текст может ассоциироваться с деструктивным действием:
Stationhead
Текст не слишком общий
Не используйте в кнопке оплаты слишком общие формулировки по типу «Продолжить» или «Далее». Привяжите их к контексту подписки.
MathBox
Оплата vs. free trial
Если подписка предполагает free trial, вместо покупки в текст кнопки можно вынести именно его: «Начать free trial», «Попробовать» и т.д.
Informed News
Highlight бесплатности
Факт бесплатности free trial'а некоторые приложения выносят в текст кнопки покупки, дополнительно воздействуя этим на пользователя.
Instacart
Апелляция к ценности
Некоторые заменяют целевое действие оплаты на получение ценности, которую дает подписка.
Thumbtack
Цена подписки в кнопке
В некоторых случаях цена подписки включается в текст кнопки, чтобы в явной форме и честно показать, сколько заплатит клиент.
Grab
Цена подписки в дисклеймере
В качестве альтернативы, цену подписки можно выносить в текстовый дисклеймер, расположенный в непосредственной близости от кнопки.
TimeTree
Объем текста в кнопке
Большой объем текста в кнопке может затруднить восприятие и стать барьером на пути к оплате. Вторичный текст лучше разместить рядом, но не внутри.
Blinkist
Кнопки под каждый тариф
Если есть лишь 2 типа подписок, некоторые добавляют 2 кнопки оплаты, сокращая путь клиента на 1 тап. Но есть ли у этого варианта минусы? Напишите в комментах.
Otter
Восстановление покупок
Помимо кнопки оплаты также нужно предусмотреть кнопку восстановления покупок на случай, если клиент поменял устройство или выходил из своей учетной записи.
GoArt
11. Юридическая информация
Часто при создании пэйволла в игру вступает юридический департамент. Конечно же, они хотят как лучше. Но при этом важно, чтобы такой текст не отпугнул клиента. Поэтому есть ряд механик, позволяющих сгладить риски.
Текст краткий
Размещая массивные блоки с юридическим текстом, мы рискуем навести на клиента скуку. Чем меньше слов, тем лучше.
Bumble
Размер шрифта
Чтобы не отпугнуть пользователя полотном юридического текста, его часто выполняют мелким и слабо контрастным шрифтом.
Audible
Скрытие текста
Еще один вариант не пугать клиента юр.текстом – разместить его в карточке, которая появляется лишь при тапе по второстепенному элементу (в примере – «Details»).
Ground News
Текст за областью первого экрана
Иногда экран проектируется так, что весь контент на нем полностью виден без прокрутки – кроме юр.текста, который либо виден частично, либо скрыт.
Present
Под кнопкой подписки
Учитывая, что текст этот пользователи читают крайне редко, а место он занимает, его можно разместить в самом низу экрана – уже под кнопкой целевого действия.
Endel
Политика и условия
Paywall должен содержать ссылки на политику обработки персональных данных и условия использования приложения. Без этого никуда – требование Apple.
Universe
Согласие без чекбокса
Не вынуждайте клиента жать на чекбокс согласия, чтобы совершить покупку. Текста «продолжая использование, я соглашаюсь...» будет достаточно.
Invoice2Go
Формат текста ссылок
Текст ссылок должен отличаться от стандартного, чтобы было понятно, что на них можно нажать. Сделать это можно за счет другого цвета или подчеркивания.
Invoice2Go
Анкорный текст
При этом ссылку на политику лучше не размещать в формате URL, а спрятать за анкорным текстом: как минимум, смотреться это будет лучше.
Badoo
12. Закрытие paywall'а
Знаю разработчиков, которые специально делают отказ от предложения мучительным процессом. Моя позиция такова: насильно мил не будешь, и лучше не ставить клиенту палки в колеса, если уж он решил закрыть paywall.
Paywall можно закрыть
Есть такой тип – hard paywall, который нельзя закрыть: либо подписывайся, либо уходи. Рабочая стратегия. Но я с точки зрения клиентского опыта ее не поддерживаю.
Halide
Кнопка закрытия общепринятая
Для кнопки закрытия paywall'а можно не изобретать колесо и использовать наиболее привычный формат крестика или текста «пропустить».
Loona
Кнопка хорошо заметна
Не стоит прятать кнопку закрытия в надежде на то, что клиент не найдет ее и оформит подписку: сделайте ее достаточно заметной в рамках интерфейса.
Picture This
Кнопка визуально вторична
При этом кнопка закрытия не должна конкурировать за внимание клиента с кнопкой подписки, как в этом примере:
Uber
Расположение кнопки
Разместите кнопку под кнопкой подписки или в верхней правой части. Разместив ее в верхней левой части, вы усложните клиенту задачу – до нее сложнее дотянуться.
Memrise
Закрытие vs. активация
Также не стоит располагать кнопку закрытия слишком близко к кнопке активации в надежде, что пользователь ошибется и оформит free trial, как в этом примере:
Clover
Посыл в тексте кнопки
Некоторые в тексте кнопки подсвечивают деструктивность действия, чтобы клиент сильнее ощутил свой отказ. Рабочая схема или перебор? Напишите в комментах.
Picture This
Касание вне области paywall'а
Если paywall занимает не весь экран и расположен поверх основного экрана, предусмотрите его закрытие при тапе за его пределами.
Picture This
To be continued...
Как видим, при проектировании paywall'ов есть много моментов, которые стоит учитывать. А насмотренность позволяет нам использовать хорошие практики и не наступать на грабли, на которые кто-то уже наступил.
Paywall'ы продолжают эволюционировать: появляются новые механики и паттерны. поэтому если вы заметите, что в этой статье я что-то не покрыл – напишите мне, сделаем этот материал лучше.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с коллегами. Будем на связи.
Paywall'ы продолжают эволюционировать: появляются новые механики и паттерны. поэтому если вы заметите, что в этой статье я что-то не покрыл – напишите мне, сделаем этот материал лучше.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с коллегами. Будем на связи.
Все статьи по e-commerce