web design uiMay 1, 202610 min read

Проблема страницы с ценами

Большинство страниц с ценами это театр конверсии, который строят growth-команды, никогда не проектировавшие ничего другого. Страница цен самый честный экран на сайте. Вот что делают правильно понятные и что ломают раздутые.

By Boone
XLinkedIn
the pricing page problem

Страница с ценами это страница, на которой команда признаётся, что не смогла решить, за что брать деньги. Четыре тарифа, восемь колонок галочек, кнопка «Связаться с отделом продаж» посередине, переключатель годовой оплаты, спрятанный в углу. Growth-команда назвала это экспериментом по конверсии и выкатила. Посетитель один раз прокручивает страницу, возвращается на предыдущую вкладку и никогда не объясняет, почему ушёл.

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

Страница с ценами самый честный экран на сайте

Страница с ценами показывает, знает ли команда, кто ей платит и за что. Любая другая маркетинговая страница может спрятаться за текстом. Эта не может.

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

Команды, которые делают это правильно, выбирают сторону до того, как выбирают вёрстку. Команды, которые не делают, гоняют A/B-тест вёрстки и называют это стратегией. «Протестируем 7 вариантов» это замена ясности продукта, и клиент чувствует разницу, даже если не может её назвать.

Пять типов провала

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

Воксельная сетка из четырёх подписанных плиток: СТЕНА ИЗ ЧЕТЫРЁХ ТАРИФОВ с одинаковыми колонками, МОРЕ ГАЛОЧЕК со стопкой строк, СТРАНИЦА-КАЛЬКУЛЯТОР с полями ввода и ВОРОТА «СВЯЖИТЕСЬ С ПРОДАЖАМИ» с закрытой коралловой дверью
Воксельная сетка из четырёх подписанных плиток: СТЕНА ИЗ ЧЕТЫРЁХ ТАРИФОВ с одинаковыми колонками, МОРЕ ГАЛОЧЕК со стопкой строк, СТРАНИЦА-КАЛЬКУЛЯТОР с полями ввода и ВОРОТА «СВЯЖИТЕСЬ С ПРОДАЖАМИ» с закрытой коралловой дверью

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

Море галочек. Восемь колонок, сорок строк, в каждой ячейке зелёная галочка или бледный прочерк. Опытным пользователям это не нужно. Случайные покупатели не могут это прочитать. Взгляд посетителя вываливается на четвёртой строке.

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

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

Таблица сравнения, которую никто не читает. Развёрнутая матрица под карточками, поданная как «прозрачность». Это не она. Это спецификация, которую продуктовая команда не смогла превратить в цены. Настоящая прозрачность это ясная позиция.

Ценообразование это продуктовое решение, отрисованное как дизайн

Самые понятные страницы с ценами отражают чёткую продуктовую позицию о том, кто пользователь и за что он платит. Страница короткая, потому что позиция короткая.

Страница с ценами это hero-секция пути к конверсии. Что бы вы ни сказали, это и есть предложение. Посетитель читает страницу как продукт, так же как лендинг читается как бренд.

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

Примеры, заслужившие свой экран

Настоящие имена, настоящие детали интерфейса.

Воксельная диаграмма из трёх пьедесталов с подписями HOBBY, TEAM, BUSINESS, на каждом одна коралловая плашка с единственным решением: SOLO, SEATS, SCALE, у основания голубые кнопки
Воксельная диаграмма из трёх пьедесталов с подписями HOBBY, TEAM, BUSINESS, на каждом одна коралловая плашка с единственным решением: SOLO, SEATS, SCALE, у основания голубые кнопки

Linear. Free, Standard, Plus, Enterprise. Математика по местам, настоящие цифры выше сгиба, короткая таблица сравнения, где колонки действительно означают разное. Чёткая позиция насчёт того, для кого Plus, без съезда на территорию «маркетингового лендинга».

Vercel. Hobby, Pro, Enterprise. Оплата за место честная, цифры по трафику и минутам сборки видны, калькулятор появляется только там, где соответствует единице. Hobby бесплатный, Pro двадцать за место, Enterprise это звонок. Три решения, три кнопки, никаких ворот посередине.

Stripe. Редкий случай, когда калькулятор и есть цена. Единица это транзакция, поэтому калькулятор и есть продукт. 2,9% плюс 30 центов это ориентир, который индустрия цитирует по памяти.

Cursor. Оплата за место, просто, AI-план выставлен по умолчанию. Free это настоящий тариф, а не программа реабилитации. У Pro есть цифра, без звёздочки. Business для команд, которым нужен SSO.

GitHub. Free, Team, Enterprise. Модель почти не менялась десять лет и всё ещё работает. Одиночка не платит ничего. Команда получает общие приватные репозитории. Enterprise получает SAML, SCIM, журналы аудита. Каждый тариф соответствует реальному состоянию организации.

Superhuman. Тридцать долларов в месяц, и они не шутят. Ни бесплатного плана, ни тарифа-приманки, ни «стартовой» страховки. Либо вам нужен продукт за эти деньги, либо нет.

Figma. Место с ролью. Редакторы платят, зрители нет. Dev Mode это плашка сбоку, а не четвёртый тариф, втиснутый между Professional и Organization.

Notion. Оплата за место, AI-надстройка отдельной строкой. Такое решение говорит покупателю, что AI это реальные затраты и реальная функция, а не замаскированное повышение цены.

Anthropic. Два разделения: разработчики и бизнес, внутри каждого тарифы по использованию. Разделение и есть позиция. Одиночный разработчик на API не тот же покупатель, что команда на Claude for Work.

Framer. Контрпример, который узнает большинство читателей. Расползание тарифов породило страницу, которая задаёт больше вопросов, чем отвечает. Продукт отличный, а страница с ценами читается так, будто команда ещё не решила, чем она является.

Безымянный контрпример: SaaS-страница с 27 функциями на тариф, которая теряет покупателя на четвёртой строке. Вы закрыли эту вкладку. И каждый потенциальный клиент тоже.

Пять правил для страницы цен, которая несёт позицию

Эти правила накапливаются. Выполните четыре, и страница работает. Выполните два, и у вас стена из четырёх тарифов.

Воксельная стопка из пяти наклонных полос с подписями ОДНА ПРОДУКТОВАЯ ПОЗИЦИЯ, ОДНО РЕШЕНИЕ НА ТАРИФ, НАСТОЯЩИЕ ЦИФРЫ СВЕРХУ, НИКАКОГО КАЛЬКУЛЯТОРА, ЕСЛИ ЕДИНИЦА НЕ КАЛЬКУЛЯТОР, НИКАКИХ ВОРОТ ПРОДАЖ ДО КВАЛИФИКАЦИИ
Воксельная стопка из пяти наклонных полос с подписями ОДНА ПРОДУКТОВАЯ ПОЗИЦИЯ, ОДНО РЕШЕНИЕ НА ТАРИФ, НАСТОЯЩИЕ ЦИФРЫ СВЕРХУ, НИКАКОГО КАЛЬКУЛЯТОРА, ЕСЛИ ЕДИНИЦА НЕ КАЛЬКУЛЯТОР, НИКАКИХ ВОРОТ ПРОДАЖ ДО КВАЛИФИКАЦИИ

Правило 1: Одна продуктовая позиция, заявленная выше сгиба

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

Правило 2: Одно решение на тариф

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

Правило 3: Настоящие цифры выше сгиба

Страница с ценами без цифры выше сгиба это лид-форма в костюме. Цена самый важный пиксель на экране. Если страница прячет цифру под CTA «Смотреть цены», команда продаёт что-то другое, а не продукт.

Правило 4: Никакого калькулятора, если единица не калькулятор

Stripe заслуживает калькулятор, потому что единица это транзакция. AWS заслуживает, потому что единица это секунда. Математика по местам не заслуживает. Если команда хватается за калькулятор, чтобы увильнуть от решения по тарифам, калькулятор делает страницу хуже. Разбор проектирования трения намеренно объясняет, когда трение оправдано. На странице цен оно почти никогда не оправдано.

Правило 5: Никакого «Связаться с продажами», пока пользователь не может сам себя оценить

Enterprise получает кнопку связи. Ладно. Но «Связаться с продажами» в среднем тарифе это налог на время покупателя. Если команде нужен звонок, чтобы назвать цену, команда не закончила ценообразование.

Антипаттерны, которые нужно удалять на месте

Пять паттернов, которые встречаются почти в каждом аудите страницы цен. Каждый из них выдаёт, что команда прячется за вёрсткой.

Фальшивая модалка «запросить предложение». Кнопка, которая открывает форму вместо цифры. Пользователь заполняет форму ради привилегии быть оценённым менеджером по продажам.

Спрятанный переключатель годовой оплаты. Маленький тумблер в углу, который переключает все цены между месячными и годовыми, по умолчанию выставленный на ту цифру, что лучше смотрится на скриншоте. Принцип прогрессивного раскрытия объясняет, когда стоит что-то прятать. Это его полная противоположность.

Тёмный паттерн с зачёркиванием. «Было $99, теперь $79». Навсегда. Зачёркнутая цена уже два года не указывает на реальную прежнюю цену. Покупатель знает. Доверие потеряно.

Бейдж «Самый популярный» на тарифе, который команда хочет продать. Настоящие бейджи популярности на основе реальных данных это нормально. Бейджи, налепленные на тариф с лучшей маржой, это театр, и покупатели разгадывают ход. Здесь работает разбор пустых состояний как продукта: голос на продающих экранах должен совпадать с голосом на честных.

Тарифы с названиями драгоценных камней. Bronze, Silver, Gold, Platinum. Эти названия ничего не говорят покупателю о том, для кого тариф. Они тратят единственный шанс страницы оценить посетителя с первого взгляда.

Аудит страницы с ценами

Воксельное дерево решений от одной коралловой плашки-вопроса СПРАВЛЯЕТСЯ ЛИ СТРАНИЦА, расходящееся вниз к шести маленьким воксельным карточкам ТАРИФЫ, ЦИФРЫ, ПОЗИЦИЯ, ВОРОТА, БЕЙДЖ, АУДИТ, у каждой голубой чекбокс
Воксельное дерево решений от одной коралловой плашки-вопроса СПРАВЛЯЕТСЯ ЛИ СТРАНИЦА, расходящееся вниз к шести маленьким воксельным карточкам ТАРИФЫ, ЦИФРЫ, ПОЗИЦИЯ, ВОРОТА, БЕЙДЖ, АУДИТ, у каждой голубой чекбокс

Пропустите любую страницу с ценами через эти семь вопросов. Если на каждый вы не можете ответить уверенным «да», страница не готова.

  1. Может ли новый посетитель выбрать свой тариф меньше чем за десять секунд? Без тура, без прокрутки, без матрицы. Заголовка и трёх карточек должно хватать. Если нужна таблица, карточки провалились.
  2. Есть ли настоящая цифра в долларах выше сгиба хотя бы для одного тарифа? «Свяжитесь с нами» везде это страница контактов в костюме, а не страница цен.
  3. Описывает ли название каждого тарифа решение, а не металл? «Solo», «Team», «Enterprise» лучше, чем «Bronze», «Silver», «Gold». Если названия тарифов можно поменять местами без потери смысла, они не работают.
  4. Достаточно ли коротка таблица сравнения, чтобы прочитать её на одном экране? Если она прокручивается, она проиграла. Терпение покупателя это один экран и одна секунда на строку.
  5. Работает ли страница без переключателя? Годовая и месячная оплата должны быть ясным выбором, а не игрой в прятки. По умолчанию показывайте цену, которую команда готова защищать письменно.
  6. Можно ли защитить бейдж «Самый популярный»? Если команда не может указать на данные за ним, бейдж это театр, а покупатель в шаге от того, чтобы это заметить.
  7. Зарезервирован ли «Связаться с продажами» только для Enterprise? Где угодно ещё это трение, которое странице не нужно.

Страница, прошедшая эти семь пунктов, та, которой покупатель доверяет. Страница, провалившая любой из них, та, с которой покупатель ушёл, не сказав вам почему. Разбор анти-дашборда применяет ту же дисциплину к продуктовым поверхностям, а материал о принципах веб-дизайна показывает, как за этим следует остальной маркетинговый сайт.

Скорость это часть страницы

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

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

Часто задаваемые вопросы

Сколько тарифов должно быть у SaaS?

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

Показывать на странице цен реальные цены или прятать их за «Связаться с продажами»?

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

Бейдж «Самый популярный» действительно улучшает конверсию?

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

Выберите позицию, потом выкатывайте страницу

Большинство страниц с ценами проваливаются не потому, что вёрстка неправильная. Они проваливаются потому, что команда не закончила решать, для чего нужен продукт. Страница вытекает из продуктовой позиции. Никакое тестирование вариантов не закрывает этот разрыв.

Страницы, которые работают в 2026 году, короткие, с позицией и очевидные. Linear, Vercel, Stripe, Cursor, GitHub, Superhuman, Figma, Notion. Ни у кого нет стены из четырёх тарифов. Никто не прячет цифру. Никто не просит покупателя проектировать свой тариф. Они выбрали сторону, и страница несёт эту сторону.

Если вам нужна команда, которая проектирует страницу цен как продуктовое решение, а не как growth-эксперимент, нанимайте Brainy. Мы делаем ценовые поверхности, которые соответствуют бренду и оценивают покупателя меньше чем за десять секунд.

Want a pricing page that ships an opinion instead of four indecisive tiers? Brainy designs pricing pages as a product decision, not a growth experiment.

Get Started

More from Brainy Papers

Keep reading