Блок с ценами — одна из самых напряжённых зон сайта. Здесь посетитель впервые сопоставляет то, что вы обещали, с тем, что готов заплатить. Если блок выстроен ясно, человек быстро находит подходящий вариант и переходит к заявке. Если он перегружен, неоднозначен или прячет важное мелким шрифтом, посетитель теряет доверие и уходит искать более понятное предложение.
Многие считают, что оформление тарифов сводится к красивой таблице с галочками. На деле это работа с психологией выбора, структурой информации и честностью предложения. Тарифная сетка — это не просто список цен, а инструмент, который помогает клиенту понять, что именно ему нужно, и подталкивает к осознанному решению.
Разберём, как построить блок: от количества вариантов до формулировок, как подать рекомендуемый тариф, как быть, если точной цены нет, и что проверить перед публикацией.
Нужен ли блок с ценами вообще
Перед проектированием стоит ответить на базовый вопрос: показывать цены или нет. Аргументы за публикацию:
- посетители чаще отказываются от обращений, если не видят даже ориентира по стоимости;
- цена отсекает нецелевых клиентов и экономит время менеджеров;
- открытость повышает доверие;
- блок с ценами хорошо ранжируется по запросам, где пользователи ищут стоимость.
Причины, по которым компании скрывают цены: большое число переменных, индивидуальный расчёт, страх показать конкурентам. Но и тогда можно дать ориентир: «от», типовые пакеты, примеры проектов с итоговой суммой. Полный отказ от цифр обычно обходится дороже, чем честный диапазон. Как формируется стоимость и почему она зависит от множества факторов, мы разбирали в статье про стоимость разработки сайта.
Сколько тарифов показывать
Оптимально три. Это число воспринимается как естественный выбор: базовый вариант, основной и расширенный. Два тарифа дают слишком простое сравнение. Четыре и больше вызывают паралич выбора: посетитель перечитывает строки и не может решить.
| Количество тарифов | Когда подходит | Риск |
|---|---|---|
| Один | Единственный стандартизированный продукт | Нет ощущения выбора |
| Два | Простое деление: «для себя» и «для бизнеса» | Выбор сводится к «дешевле или дороже» |
| Три | Большинство услуг и подписок | Нужно тщательно различать уровни |
| Четыре и более | Сложные продукты с разными аудиториями | Перегрузка, затруднение выбора |
Если у вас больше вариантов, разделите их на группы по задачам клиента: например, «лендинг», «корпоративный сайт», «интернет-магазин», и в каждой группе дайте по три пакета. Так посетитель сначала выбирает направление, а потом уровень. Для сопоставления форматов сайта полезна статья про лендинг и многостраничный сайт.
Структура тарифной карточки
Каждый тариф — это карточка, которая должна быть самодостаточной. Стандартная структура включает:
- Название. Лучше говорящее, а не абстрактное: «Старт», «Бизнес», «Максимум» понятнее, чем «Серебро», «Золото», «Платина», хотя оба подхода допустимы.
- Для кого. Одна строка: «Для небольших компаний, которым нужна визитка» — человек сразу понимает, подходит ли ему вариант.
- Цена. Крупно и без двусмысленностей. Рядом уточнение, что входит в стоимость или за какой период.
- Список состава. Ключевые возможности, а не вся спецификация.
- Кнопка. Единая формулировка для всех: «Выбрать», «Обсудить проект», «Рассчитать».
Следите, чтобы структура во всех карточках повторялась. Сравнение возможно, только когда элементы стоят на одних и тех же местах. Подробнее о проектировании карточек — в статье про дизайн карточек услуг и товаров.
Рекомендуемый тариф
Выделение среднего или самого популярного варианта — один из самых известных приёмов, и он работает. Человек, не уверенный в выборе, склоняется к варианту, который подсвечен как оптимальный. Но важно использовать его честно.
Как выделять:
- более контрастная рамка или подложка;
- метка «Популярный» или «Оптимальный выбор»;
- чуть больший размер карточки;
- акцентная кнопка, тогда как у остальных кнопки спокойнее.
Не стоит выделять тариф, который вы сами хотите продавать, но который не подходит большинству клиентов. Недовольные покупатели оставят негативные отзывы, а доверие потеряется. Выделяйте тот вариант, который действительно чаще всего выбирают и который закрывает типовую задачу.
Как писать состав тарифов
Самая трудная часть — списки возможностей. Здесь часто встречаются две крайности: либо перечисляется всё подряд на два экрана, либо формулировки настолько общие, что ничего не объясняют.
Принципы хорошего списка
- От 5 до 8 пунктов. Больше — трудно сравнивать.
- Одинаковые пункты в каждом тарифе. Если в базовом нет какой-то опции, её показывают как отсутствующую, а не просто убирают. Иначе сравнение невозможно.
- Язык результатов. Вместо «Адаптивная вёрстка» можно написать «Корректно открывается на смартфонах и планшетах». Но не перегибайте: сухие названия иногда понятнее.
- Цифры и объёмы. «До десяти страниц», «Три круга правок», «Поддержка тридцать дней».
- Различия сверху. Самое важное, что отличает тарифы, лучше поставить в начало списка.
- Без внутренней кухни. Клиенту не нужно знать, на каком фреймворке работает сайт, если это не влияет на его выбор. Хотя для технических покупателей этот уровень детализации можно вынести в раскрывающийся блок.
Как показывать отсутствие опции
Серые перечёркнутые строки с крестиками сразу показывают разницу, но создают негативное впечатление. Альтернатива: общий список «Всё из тарифа Старт, плюс…» для более высоких пакетов. Такой формат экономит место и фокусирует внимание на приросте ценности.
Сравнительная таблица или карточки
Есть два основных формата подачи.
- Карточки рядом. Наглядны, хорошо смотрятся на первых экранах, подходят для трёх-четырёх тарифов с небольшим составом. Просты для мобильных, где карточки складываются в столбик.
- Сравнительная таблица. Подходит, когда пунктов много и нужно точное сопоставление. Строки — возможности, столбцы — тарифы. Сложнее адаптировать для смартфона, поэтому там нужна прокрутка или превращение в аккордеон.
Практичный вариант: компактные карточки с главными отличиями сверху и подробная таблица ниже под ссылкой «Сравнить все возможности». Так обе аудитории получают то, что им нужно. На странице наших тарифов мы используем именно такой принцип.
Работа с ценой
Как показывать
- Крупная цифра, мелкое пояснение. Число должно считываться сразу, а условия — сразу под ним.
- Валюта и период. Если оплата ежемесячная или разовая, это указывается рядом.
- Слово «от». Если цена зависит от объёма, честнее указывать нижнюю границу и пояснять, от чего зависит итог.
- Без психологических трюков в ущерб ясности. Старые перечёркнутые цены без реальной скидки вызывают недоверие.
Что делать с дополнительными расходами
Скрытые доплаты — главный источник разочарования. Если в стоимость не входят хостинг, домен, лицензии или поддержка, скажите об этом заранее. Хорошо работает небольшой блок «Что не входит в стоимость» и ссылки на пояснения. По теме пригодятся материалы про хостинг и домен и поддержку сайта после запуска.
Скидки и акции
Если вы предлагаете скидку, у неё должно быть условие или срок. Ложная срочность («Осталось два места» без основания) вредит репутации. Честные ограничения, наоборот, мотивируют.
Если цену назвать нельзя
Для сложных проектов с индивидуальным составом типовые тарифы подходят плохо. Но это не повод оставлять посетителя в неведении. Что можно сделать:
- Показать диапазоны для типовых задач: «Корпоративный сайт от... до...».
- Перечислить факторы, которые влияют на стоимость: число страниц, интеграции, объём контента, сроки.
- Привести примеры из портфолио с описанием состава работ и ориентировочным бюджетом.
- Предложить быстрый расчёт: короткий опросник или форма, по итогам которой клиент получает ориентир.
- Объяснить процесс расчёта, чтобы человек понимал, чем закончится обращение. Описание шагов — на странице этапов работы.
Доверие рядом с ценой
Решение о покупке сопровождается сомнениями. Поэтому рядом с тарифами стоит разместить элементы, снижающие тревогу:
- короткие ответы на частые вопросы: что будет после оплаты, можно ли изменить пакет, как проходит возврат;
- гарантии и условия: о них подробнее на странице гарантий;
- отзывы клиентов, выбравших конкретный пакет. Отзывы с реальными задачами убеждают лучше общих слов, примеры собраны на странице отзывов;
- понятный следующий шаг: что произойдёт после нажатия на кнопку.
Мобильная версия
Большая часть посетителей приходит со смартфонов, и блок тарифов на маленьком экране часто ломается. Основные правила:
- карточки идут друг под другом, а рекомендованный тариф можно поднять выше;
- цена и кнопка остаются в зоне видимости при просмотре списка состава;
- длинные списки сворачиваются в «Показать всё»;
- сравнительные таблицы превращаются в горизонтальную прокрутку с закреплённым первым столбцом или аккордеоны;
- кнопки достаточного размера и расположены так, чтобы их было удобно нажимать.
Подробнее — в материалах про подход mobile first и адаптивную вёрстку.
Визуальное оформление
Блок тарифов должен выглядеть как часть сайта, а не как чужеродная вставка. При этом внутри блока нужна своя иерархия.
- Цена — самый крупный элемент. После неё идут название, затем состав.
- Акцент на одной карточке. Два акцентных тарифа нивелируют друг друга.
- Однородные отступы и выравнивание. Цена, кнопка и заголовки находятся на одной линии во всех карточках. Принципы выстраивания блоков — в статье о визуальной иерархии.
- Спокойные значки. Галочки и крестики не должны быть слишком яркими. Правила оформления значков — в материале про иконки.
- Контраст. Серый мелкий текст на светлом фоне здесь недопустим, ведь именно в этом блоке принимается решение. Подробнее в статье про контраст и читаемость.
Типичные ошибки
- Слишком много тарифов. Пять-шесть вариантов с мелкими отличиями.
- Нечёткие названия. Посетитель не понимает, чем «Профи» отличается от «Эксперта».
- Невидимая цена. Её приходится искать или уточнять в мелком шрифте.
- Скрытые условия. Сноски со звёздочками, из которых следует, что реальная цена иная.
- Нет различий по пользе. Тарифы отличаются только объёмом, но не результатом.
- Нет призыва. После сравнения непонятно, что делать дальше.
- Тяжёлые сравнительные таблицы без пояснений. Сорок строк с терминами, которые клиент не понимает.
- Игнорирование вопросов. Нет ответов на «Что если мне нужно что-то особенное?».
Как проверять эффективность
Блок тарифов проще всего оценивать по поведению посетителей:
- Какая доля посетителей доходит до блока и сколько времени на нём проводит.
- Какие тарифы чаще нажимают и какие заявки приходят по каждому.
- Как меняется доля заявок после изменения порядка, формулировок или выделения.
- Где посетители уходят: на самом блоке или на следующем шаге.
Для проверки гипотез используйте сравнение вариантов, о чём подробно рассказано в руководстве по A/B-тестированию, а об общей логике расчёта эффективности — в материале про конверсию сайта.
Итог
Хороший блок тарифов прост: три понятных варианта, одинаковая структура карточек, один рекомендованный пакет, честная цена и ясный следующий шаг. Он помогает клиенту сориентироваться, а не загоняет в угол. Чем прозрачнее предложение, тем меньше вопросов и возражений, и тем легче менеджерам вести диалог.
Если вы хотите пересобрать блок цен или подготовить тарифную сетку для нового проекта, мы поможем с логикой и оформлением. Ознакомьтесь с услугой веб-дизайна и свяжитесь с нами через контакты.
