- Статьи
- 4 мин на чтение
- 6
Проектируем лучший интерфейс для оформления подписки
Показываем преимущества вашей подписки пользователю визуально, а не в 15 строках мелкого текста.
Подписочная модель развивается семимильными шагами (чего уж скрывать, даже мы так живем уже 2 года), и проникает все в новые и новые сферы экономики. А все, что связано с быстрым развитием должно быть легко в использовании, чтобы сохранять этот темп, а значит, интерфейс взаимодействия с подобными сервисами должен быть прост и понятен.
Сегодня у многих сайтов, где предлагается оформить подписку есть пара проблем, которые мешают пользователям:
1) непрозрачное ценообразование
2) неясная ценность подписки против разовой покупки
Пример выше показывает как меняется цена в зависимости от выбранного объема товара, но никак не помогает понять в чем преимущество подписки и сколько на самом деле можно сэкономить. Конечно, можно взять в руки лупу и прочитать весь мелкий текст, взять в руки калькулятор, вычесть 17%, вычесть доставку, прикинуть экономию на горизонте 12 месяцев в 3% в месяц и… уйти заниматься своими делами, а не покупать что-то 🤷♂️
Когда пользователь не может наглядно сравнить что-либо и сделать для себя логический вывод об экономии при использовании подписки, у него нет абсолютно никакой мотивации оформлять эту подписку. Основная задача подобного интерфейса, который предлагает оформить подписку, – дать четкое понимание и ответы на все вопросы пользователя, особенно на вопрос “А нафига мне подписка? Мне же только спросить”.
Улучшаем форму подписки
Выше мы пришли к выводу, что основное, на что нужно обращать внимание пользователя, предлагая ему оформить подписку, – это финансовая выгода и преимущества. Первоначальный интерфейс даже не пытается это показать.
Размещение вариантов покупки над количеством выбранных товаров позволяет пользователям сразу видеть выгоду от подписки. Так же не стоит забывать добавлять зеленый бейдж на карточке выбора, чтобы подсветить процент экономии. Кроме того можно так же добавить абсолютную сумму экономии рядом с ценой.
Конечно, это не все улучшения! Стоит добавить и несколько преимуществ подписки, чтобы увеличить стимул пользователей оформить ее. Вместо добавления 5 строчек мелким текстом, сделайте чек-список с галочками и кратким описанием преимуществ. Таким образом пользователям не придется рыскать по странице в поиске этой информации.
Вполне может оказаться, что у вашей подписки преимуществ не 2 или 3, а целых 30. Чтож, этот список сделает карточку подписки чуууууть чуть больше, поэтому не стоит указывать их все, а выбрать все же 3-4 наиболее весомых для пользователя, а остальные спрятать под кнопкой-ссылкой “Дополнительные преимущества”.
Итак, вы замотивировали пользователей выбрать вариант подписки вместо разовой покупки. Следующий шаг – это подтолкнуть к оформлению большего количества товара: нужно наглядно это показать бейджами с цифрами. Они помогут пользователям видеть процент экономии при покупке бОльшего объема товара. Как мы уже обсуждали ранее, бейджи, отображающие сумму экономии, делает такую покупку более привлекательной для покупателя.
Так же, если ваш продукт или товар позволяет, лучше добавлять его визуальное отображение в карточке: в нашем случае на примере речь идет о покупке товара в банках и мы визуально показываем 1 банку, рядом 2 банки, 4 банки и т.д. Добавление визуальной составляющей делает выбор для многих пользователей более простым и наглядным.
Следующим этапом добавляем бейдж “Самый популярным товар”: многие пользователи обращают на него внимание, т.к. хотят пользоваться тем, что популярно в их кругу общения и этот довод вполне может их подтолкнуть к покупке товара с этим бейджем, поэтому лучше его ставить не на самый дешевый вариант покупки.
Динамическое обновление цен
Стоит заранее предусмотреть техническую возможность динамического изменения цен и сумм экономии в зависимости от выбранного пользователем варианта покупки и количества выбранного товара. Вы так же можете добавить небольшой эффект анимации на наиболее важные цифры, чтобы добавить еще и визуальной динамики в интерфейс.
Контент на карточках так же должен обновляться при выбора пользователем единоразовой покупки – бейджики с суммами экономии должны пропадать, тем самым делая текущий выбор пользователя менее привлекательным.
Расставляем акценты
Важно учесть, что выбранные в данный момент опции – покупка с подпиской и 1 товар – должны быть четко выражены: карточка имеет четкий контур и легкую серую заливку, в отличии от неактивной карточки со светло-серым контуром и белой заливкой, тем самым неактивные карточки не будут отвлекать пользователя.
И еще один визуальный трюк в копилку акцентов: делайте ту карточку, вариант который должен быть выбран (в нашем примере – подписка) визуально крупнее, чем альтернативу. Всегда проще попасть мышкой в более крупный объект 👍
Итоговый вариант формы оформления подписки отвечает на все вопросы пользователя, перечисляет преимущества подписки перед единичной покупкой и подчеркивает выгоду для пользователя. Управление вниманием пользователя – ключ к повышению продаж и большой выручке в любом проекте.
А вы бы в таком интерфейсе оформили подписку? 😅
Перевод статьи How to Design a Better Subscription Box that Sells из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
