Как упростить сложную таблицу с тарифами
Дизайн тарифных планов, который действительно продаёт
Представьте, что вы только что разработали и выпустили идеальное приложение. Но по какой-то причине пользователи его не покупают. Проблема не в самом приложении. Проблема в пользовательском опыте, связанном с таблицей цен.
Большинство таблиц с ценами настолько сложны, что пользователи не могут различить ценность и преимущества разных тарифных планов. В результате им сложно принять решение, какой план выбрать. Это не только замедляет их, но и может привести к тому, что они покинут страницу и пересмотрят своё намерение совершить покупку.
Чтобы пользователи доводили своё намерение до конца, необходимо упростить таблицу цен так, чтобы ценность каждого варианта была легко различима. Для этого потребуется переработать структуру и элементы традиционной таблицы цен.
Вместо того чтобы делать акцент на названии тарифного плана, лучше выделять цену — так пользователям будет проще сравнивать стоимость. Такая прозрачность также вызывает у них доверие, ведь она показывает, что вы открыто сообщаете о своих ценах.
Также важно дать пользователям рекомендации по выбору, чтобы они понимали, какой тариф лучше всего соответствует их потребностям. В данном случае используется строка текста, которая различает планы для личного пользования, стартапов и крупных компаний. Это помогает пользователям выбрать оптимальный тариф в зависимости от размера их бизнеса.
Размещение кнопки действия внизу не позволяет пользователям сразу же совершить нужное действие, когда они готовы. Вместо этого лучше размещать кнопку под ценой, но над списком функций — так она будет более заметной и доступной. Это также визуально отделяет информацию о цене от списка функций, снижая плотность текста.
Не стоит перечислять каждую функцию в каждом тарифе — это может перегрузить пользователя. Вместо этого используйте текст-перенос, чтобы указать, какие функции переносятся из более дешёвого тарифа. Это уменьшает объём текста и экономит много пространства.
Например, в тарифе «Премиум» доступны несколько новых функций в дополнение к тем, что есть в тарифе «Базовый». Используя формулировку «Все функции базового тарифа и...», вы даёте понять, что тариф «Премиум» включает в себя всё из «Базового», не перечисляя это заново.
Некоторые функции могут содержать технические термины, которые пользователи могут не понять. Вместо того чтобы заставлять их гадать, стоит добавить иконку с подсказкой рядом с такой функцией. При клике пользователь получит нужную контекстную информацию.
Маркированные списки в перечне функций выглядят невыразительно. Цветные иконки с галочками работают намного лучше — они создают ощущение, что каждый тариф предлагает множество выгод. Кроме того, такие списки легче воспринимаются визуально.
Годовые скидки
Если вы хотите стимулировать пользователей к долгосрочной подписке, предложите скидку за оплату на год вперёд. Однако, если выгода отображается неясно, пользователи не смогут её оценить.
Поэтому важно использовать бейджи (значки), отображающие сумму экономии в правом верхнем углу каждого тарифа. Также показывайте ежемесячную стоимость с припиской о годовом выставлении счёта. Вверху разместите переключатель, позволяющий выбрать между «Ежегодной» и «Ежемесячной» оплатой. Чтобы подчеркнуть, какой вариант наиболее выгодный, добавьте бейдж «Лучшая цена» рядом с меткой «Ежегодно».
Самый популярный тариф
Иногда пользователи затрудняются с выбором, когда перед ними несколько тарифных планов. Чтобы упростить принятие решения, можно выделить самый популярный тариф. Это легко сделать, увеличив визуальный размер и «глубину» этого блока, а также добавив бейдж «Самый популярный».
Анатомия UI
Если вы не знаете, как лучше оформить страницу с тарифами, вспомните об «анатомии» интерфейса. Элементы и структура должны быть выстроены в определённом порядке для обеспечения наилучшего пользовательского опыта. Чем проще пользователю понять разницу между тарифами и сделать выбор, тем ниже шанс, что он покинет страницу без действия.
