Дизайн страницы тарифов: как помочь выбрать план

Страница тарифов должна отвечать на три вопроса: какой план подходит для моей работы, за что именно я плачу и что произойдёт после выбора. Красивые карточки не компенсируют непонятную единицу оплаты или таблицу, в которой одна строка означает разные вещи в разных столбцах. Сначала помогите посетителю разобраться в предложении, а затем выделяйте предпочтительный тариф.

Когда вы проектируете страницу тарифов в Pixso, рассматривайте весь путь выбора: карточку плана, пояснения к ней и следующий экран. После нажатия кнопки посетителю не должно приходиться заново разбираться в условиях.

Начните с решения, которое принимает покупатель

Рассмотрим Northstar — вымышленный сервис для составления расписаний. Алекс выбирает тариф для четырёх коллег, которые редактируют расписания, и ещё двух, которым нужен только просмотр. Ему важно не количество пунктов в самом длинном столбце. Он хочет понять, сможет ли команда работать с общими расписаниями, кому потребуется платное место и какие требования к администрированию влияют на выбор.

В Northstar есть планы Solo, Team и Business. Solo рассчитан на одного редактора. Team добавляет общие расписания и участие коллег с доступом только для просмотра. Business предназначен для централизованного администрирования организации и покупки через отдел продаж. Так у страницы появляется понятная основа: самостоятельная работа, совместная работа и требования организации.

Под названием каждого плана кратко обозначьте его аудиторию. «Для команд, которые ведут общие расписания» полезнее, чем «Раскройте свой потенциал». Декоративные отметки должны оставаться второстепенными. У подписи «Рекомендуем» нужна понятная причина — например, возможность совместного редактирования. Само визуальное выделение не должно создавать впечатление, что этот тариф подходит всем.

Покажите, за что взимается плата

Цена без единицы оплаты заставляет посетителя гадать. Это стоимость за человека, за редактора, за рабочее пространство или за весь аккаунт в месяц? Разместите пояснение рядом с суммой, а не во всплывающей подсказке или далёкой сноске. Если минимальный объём покупки меняет итоговую стоимость, объясните это там же.

В нашем примере план Team оплачивается за каждого редактора. Поэтому Алексу нужны четыре платных места. Два участника с доступом только для просмотра, по условиям этого примера, не увеличивают число оплачиваемых мест. Повторите это различие на экране подтверждения выбранного плана. Если назвать всех участников просто «пользователями», разобраться в предложении станет сложнее.

Если количество мест можно изменить, пересчитывайте соответствующую сумму и сохраняйте единицу оплаты на виду. Поле «Размер команды» неоднозначно, когда часть коллег только просматривает материалы. «Места редакторов» точнее описывает покупаемое количество. Отдельно объясните, что произойдёт, если участник с правом просмотра станет редактором: финансовые последствия не должны скрываться за названием роли.

Разделите месячный эквивалент и обязательство по оплате

Стоимость в пересчёте на месяц и ежемесячный платёж — не одно и то же. Если годовой план показывает месячный эквивалент, разместите рядом «Оплата за год» и укажите годовую сумму, которую посетитель согласится заплатить. Маленькая приписка «/мес.» не должна заменять это объяснение.

Переключатель периода оплаты должен находиться рядом с тарифами и ясно показывать выбранный вариант. Переход с месячной оплаты на годовую должен одновременно обновлять все затронутые цены и пояснения. Он не должен незаметно менять количество мест или выбирать другой план. Если на следующем шаге добавляются применимые сборы, покажите их до оплаты, не выдавая предварительный расчёт за окончательный счёт.

Обещание экономии уместно только при понятной базе сравнения. Укажите, какие месячное и годовое предложения сравниваются, и используйте одинаковое количество мест. Процент без объяснения отвлекает от главного: сколько нужно заплатить и за какой период.

Сравнивайте одну и ту же возможность во всех планах

Таблица должна отвечать на вопросы, для которых в карточках недостаточно места. Начните с возможностей, которые действительно различают планы. У каждой строки должен быть один смысл, а термины во всех столбцах должны совпадать.

Сравнение Northstar	Solo	Team	Business
Основная задача	Расписание одного человека	Общие расписания рабочей команды	Управление расписаниями в организации
Редактирование	Один редактор	Оплачиваемые места редакторов	Доступ редакторов по согласованным с организацией условиям
Коллеги с доступом только для просмотра	Общее рабочее пространство не предусмотрено	Включены без права редактирования	Управляются по согласованной модели доступа
Администрирование	Личные настройки	Администрирование рабочего пространства	Централизованное администрирование организации
Следующий шаг	Создать личное рабочее пространство	Проверить места и период оплаты	Обсудить требования организации

Алекс может исключить Solo: команде нужны общие расписания. Team отвечает указанным требованиям к редактированию и просмотру. Business стоит рассматривать, только если нужны дополнительные административные возможности или особый порядок покупки. Это обоснованный выбор, а не соревнование по количеству галочек.

Один прочерк не должен одновременно означать «не включено» и «не применимо». Если различие важно, назовите его прямо. Аналогично, «Расширенная поддержка» мало что говорит о сравнении, если страница не объясняет, что именно меняется. Возможность, одинаковую для всех планов, можно указать один раз в общем блоке, а не повторять во всей длинной таблице.

Сделайте результат каждой кнопки понятным

Подпись кнопки должна описывать следующий шаг. На карточке Team в Northstar можно написать «Выбрать Team», если далее открывается проверка количества мест и периода оплаты. На Business — «Связаться с отделом продаж», если кнопка ведёт к обращению. Одинаковое «Начать» скрывает важную для посетителя разницу.

Если действие запускает пробный период, объясните условия, которые влияют на решение: нужны ли платёжные данные и что произойдёт после окончания. Используйте реальные условия продукта, а не обещания другой компании. Если есть бесплатный план, отличайте его подключение от временного пробного доступа к платному.

Передавайте выбранный план, период и количество мест на следующий экран. Дайте исправить эти значения до подтверждения. Возврат к тарифам не должен незаметно сбрасывать годовую оплату на месячную или удалять только что введённое количество.

Сохраните возможность сравнивать на телефоне

Карточки, расположенные друг под другом, удобно читать по отдельности, но сложнее сопоставлять. Держите название плана и единицу оплаты рядом с каждым блоком, который влияет на решение. Добравшись до строки об общих расписаниях, посетитель всё ещё должен понимать, о каком плане идёт речь.

Выбирайте мобильную структуру под задачу сравнения. Небольшая таблица может подойти, если планы различают несколько коротких строк. Для длинного сравнения можно дать выбрать сопоставляемые планы, сохраняя их названия на виду. Не сжимайте три настольных столбца до нечитаемого текста.

При сворачивании подробностей важные условия должны оставаться видимыми. Пояснение отдельной функции можно раскрывать по запросу; период оплаты или обязательный минимум мест не стоит прятать туда же. Прежде чем фиксировать высоту карточек, проверьте длинные названия и перевод. Полное и понятное предложение важнее одинаковых по высоте блоков.

Отделяйте выбранное значение от фокуса

У переключателя периода нужен ясный выбранный вариант, а у обеих его частей — заметный клавиатурный фокус. Посетитель должен различать «Выбрана оплата за год» и «Сейчас я могу переключиться на месяц». Одного цвета для этого недостаточно.

Заголовкам планов, заголовкам таблицы и ссылкам также нужна осмысленная структура в реализации. Повторяющиеся кнопки должны позволять определить, к какому плану относятся. Если изменение количества мест пересчитывает сумму, согласуйте с разработчиками, как сообщать результат, не уводя фокус из поля после каждого введённого символа.

Проверьте страницу с увеличенным текстом и в узком окне. Фиксированная панель действий не должна закрывать пояснение к цене, а таблица — мешать навигации с клавиатуры. Такие особенности нужно проверять в работающей странице, а не только в макете.

Проверьте весь путь выбора в Pixso

Разместите в Pixso сравнение планов Northstar и экран с итогами выбора Team рядом. Сохраните одинаковые названия планов, правило оплаты мест редакторов и период. Добавьте узкую версию, которая оставляет нужную Алексу информацию, а не просто уменьшает настольные карточки.

Попросите участника проверки выбрать план для четырёх редакторов и двух коллег с доступом к просмотру, не объясняя тарифы заранее. Выслушайте причину выбора. Затем спросите, какое количество оплачивается, какой период действует и что сделает кнопка. Если человек выбирает Team, но считает, что платить нужно за всех шестерых, у страницы всё ещё есть существенная проблема с ясностью.

Повторите сценарий для человека, который ведёт расписание самостоятельно, и для организации с централизованным администрированием. Задача не в том, чтобы всех троих привести к выделенной карточке. Нужно сделать подходящий путь понятным и сохранить это понимание при регистрации или покупке.

Создать понятное сравнение тарифов в Pixso