Я Максим, веб-разработчик. Страница с тарифами — одна из самых важных на сайте SaaS-продукта или компании с пакетами услуг. От того, как оформлена таблица тарифов, зависит, какой план выберет клиент — и выберет ли вообще. Делюсь правилами, которые я вывел на практике.
Три тарифа — золотой стандарт
Два тарифа — мало выбора, нет ценового якоря. Четыре и больше — перегруз, паралич выбора. Три — оптимально: базовый, рекомендуемый, премиум.
Базовый — для тех, кто хочет попробовать. Рекомендуемый — для большинства клиентов (выделен визуально). Премиум — для крупных клиентов и как ценовой якорь.
Визуальное выделение рекомендуемого тарифа
Рекомендуемый тариф должен притягивать взгляд. Способы: увеличенная карточка (чуть выше остальных), контрастный цвет рамки или фона, бейдж «Популярный выбор» или «Рекомендуем», тень или обводка.
На мобильных — рекомендуемый тариф показывается первым (сверху). Человек прокручивает тарифы горизонтально — первый увиденный запоминается лучше.
Названия тарифов
Не называйте тарифы «Тариф 1, Тариф 2, Тариф 3». Дайте им понятные имена, которые отражают аудиторию: «Старт», «Бизнес», «Корпоративный». Или: «Для фрилансера», «Для команды», «Для предприятия».
Название должно помогать клиенту самоидентифицироваться: «О, я фрилансер — значит, мне сюда».
Что показывать в каждом тарифе
Цена — крупным шрифтом, первое, что бросается в глаза. С указанием периода: «₽/мес» или «₽/год». Если есть скидка за годовую оплату — покажите обе цены с переключателем «Месяц / Год».
Список функций — чёткий, без лишнего. 5–8 пунктов. Ключевые отличия выделены: если в базовом тарифе нет функции X, а в бизнесе есть — это должно быть заметно (галочка vs крестик или прочерк).
CTA-кнопка — под каждым тарифом. «Начать бесплатно» для базового, «Выбрать» для среднего, «Связаться» для премиум (если нужна индивидуальная настройка).
Переключатель месяц/год
Если предлагаете скидку за годовую оплату — сделайте переключатель (toggle) в верхней части блока тарифов. При переключении цены обновляются анимированно. Рядом — бейдж «Экономия 20%» для годового плана.
По моему опыту, 30–40% пользователей выбирают годовую оплату, если скидка составляет 15–20%.
Сравнительная таблица
Под карточками тарифов размещаю развёрнутую таблицу сравнения: строки — функции, столбцы — тарифы. Для тех, кто хочет детально разобраться. С фиксированной шапкой, чтобы при скролле было видно, какой столбец какому тарифу соответствует.
FAQ под тарифами
Блок частых вопросов снимает последние возражения: «Можно ли сменить тариф?», «Что будет, если превышу лимит?», «Есть ли пробный период?». Размещаю сразу под тарифами — пока человек ещё на странице.
Мобильная версия
На мобильных карточки тарифов — горизонтальный скролл (свайп) или вертикальный список. Я предпочитаю вертикальный список с рекомендуемым тарифом первым — так человек видит лучший вариант без свайпа.
Страница тарифов — это не просто прайс-лист. Это продающая страница, которая должна ответить на вопрос «какой план мне подходит?» за 10 секунд. Продумайте её так же тщательно, как лендинг.