Таблиця цін, а не прейскурант. Це точка, де відвідувач вирішує: платити чи піти. Дизайн цієї точки або підштовхує до дії, або ховає конверсію.

Річ не в яскравих кнопках. Ідеться про те, як зібрані структура, візуальна ієрархія та психологія ціни. Один прийом, і сторінка запрацювала. Інший, і відвідувач пішов.

Нижче 16 прикладів від Dropbox до BigCartel з розбором: чому їхні таблиці запам’ятовуються і які прийоми працюють.

💡 Швидкий огляд:

• Пройдіться за прикладами й зауважте повторювані патерни
• Звіртеся з порівняльною таблицею та оберіть підхід, який підходить
• Застосуйте матрицю прийомів із підсумкового розділу

Порівняльна таблиця: 16 підходів до дизайну таблиць цін

1. Dropbox

Сторінка планів Dropbox, один із найчистіших прикладів. Три картки, описові зображення пакетів, розділення «для себе» і «для команд» тонкою лінією, а не кольором.

Замість іконок функцій, контекстні ілюстрації. Картка для команд показує спільну роботу, для особистого користування, упорядковані файли. Фон зливається зі сторінкою, відвідувач порівнює плани, а не бореться з дизайном.

• Плюси: ілюстрації замість іконок; розділення лінією, а не кольором; інтеграція з фоном
• Мінуси: за великої кількості функцій мінімалізм може недодати інформації
• Де подивитися: 🔗 Dropbox Plans

2. Wufoo

Wufoo використовує повноколірну матрицю з перемиканням «місяць / рік» через слайдер. Функції показано через порівняння: повний список лише в популярному плані Bonafide, а ліворуч і праворуч, зелені галочки навпроти доступних пунктів.

CTA-кнопки зверху і знизу, для сторінок, які скролять — це критично. Пішов униз вивчати фічі, кнопка вже чекає.

• Плюси: матриця зі слайдером; порівняння функцій через популярний план; CTA зверху і знизу
• Мінуси: перевантажений кольором, на мобільних може рябіти
• Де подивитися: 🔗 Wufoo Pricing

3. Freshdesk

Freshdesk додає анімований елемент: популярний план позначений GIF повітряної кулі, що летить,, єдиний рух на статичній сторінці. Погляд притягується миттєво.

Тема «зростаючої зелені» проведена через усе: зображення пакетів, іконки функцій, кнопки, відтінки зеленого. Відвідувач підсвідомо пов’язує зелений із дією.

• Плюси: анімація фокусує на популярному плані; послідовна колірна тема
• Мінуси: GIF може відволікати при повторних заходах
• Де подивитися: 🔗 Freshdesk Pricing

4. Plugmatter

Власний приклад Plugmatter: матриця в червоно-білій гамі під бренд. Функції ліворуч, плани праворуч, центральний план «підсвічений» яскравістю, а не новим кольором.

Той самий дизайн доступний як шаблон у їхньому плагіні таблиць цін, рідкісний випадок «їж власний собачий корм» у дії.

• Плюси: строгий брендовий стиль; підсвітка центру яскравістю; дизайн = демонстрація продукту
• Мінуси: контрастний червоний не універсальний
• Де подивитися: 🔗 Plugmatter

5. Pulse

Pulse доводить: що менше тексту, то сміливіший дизайн. Просторе верстання, велика кнопка, мінімум описів. Популярний план у центрі темніший фоном і яскравіший кнопкою, тег «Велика цінність» над ним.

• Плюси: розріджене верстання дає повітря; тег із ціннісною пропозицією
• Мінуси: для складних продуктів повітря може бути забагато
• Де подивитися: 🔗 Pulse Pricing

6. Mailchimp

Mailchimp зробив динамічний тег «Рекомендовані»: пересунув слайдер кількості підписників, і рекомендований план змінився. Відвідувач не гадає, що брати.

Ціну показано після опису можливостей, відвідувач оцінює цінність до того, як побачить цифру.

• Плюси: динамічний тег під потребу; ціна після цінності
• Мінуси: на малих екранах слайдер може бути незручним
• Де подивитися: 🔗 Mailchimp Pricing

7. Zendesk

Zendesk пропонує безкоштовний тріал для ВСІХ пакетів, не лише базового. Кнопки «Try» виділені помаранчевим і ведуть до повнофункціональної професійної версії.

Коли тріал закінчиться, відкат на базовий план відчуватиметься втратою. Психологія утримання через досвід, а не через знижку.

• Плюси: тріал на всі плани; повнофункціональний тестовий період
• Мінуси: складний продукт може не розкритися за тріал
• Де подивитися: 🔗 Zendesk Pricing

8. Litmus

Litmus використовує великі кольорові блоки, по одному на план. Кольори доповнюють один одного і не конфліктують.

Два різні CTA: зверху кнопка, знизу, пропозиція заощадити конкретну суму на річному тарифі. Цифра економії працює краще за відсотки.

• Плюси: кольорові блоки для розрізнення планів; два різні за змістом CTA
• Мінуси: великі блоки потребують багато вертикального простору
• Де подивитися: 🔗 Litmus Pricing

9. BeanStalk

BeanStalk грає з глибиною: картки для фрилансерів пласкі й сірі, для бізнесу, тривимірні, «підняті». Візуальна вага картки відповідає ціні та аудиторії.

Назви пакетів (Bronze, Platinum) не несуть сенсу, але докладні описи компенсують це.

• Плюси: 3D-ефект для дорогих планів; різна «серйозність» під аудиторію
• Мінуси: назви планів неінформативні; 3D на надпласкому сайті виглядає застарілим
• Де подивитися: 🔗 BeanStalk Pricing

10. Readymag

Readymag використовує лише два кольори: темно-синій і білий. Знак долара помітно менший за цифру ціни, прийом, який знижує «біль оплати»: відвідувач фокусується на числі, а не на факті витрати. Спливні підказки біля функцій пояснюють опції без захаращення таблиці.

• Плюси: мінімалізм до двох кольорів; прийом з маленьким знаком валюти; тултипи замість текстових стін
• Мінуси: на довгих таблицях два кольори можуть зливатися
• Де подивитися: 🔗 Readymag Pricing

11. Crazyegg

Crazyegg збільшує змінні, за якими розрізняються плани, роблячи їх значно більшими за навколишній текст. Відвідувачу не потрібно вишукувати різницю, вона одразу впадає в око.

Обраний план забарвлений у синій (довіра), кнопки, у зелений (дія). Кольори працюють на психологію.

• Плюси: гіпертрофовані відмінності; trust-синій + action-зелений
• Мінуси: лише для таблиць із малою кількістю змінних
• Де подивитися: 🔗 Crazyegg Pricing

12. Heroku

Heroku практично повністю монохромний, усе у відтінках фіолетового, крім єдиної синьої плями на кнопці професійного плану. Око йде прямо туди.

Ціна вбудована ВСЕРЕДИНУ кнопки, а не над нею. Опис планів через успадкування: «Усі функції безкоштовного плану +…», і так ланцюжком.

• Плюси: монохром з одним колірним акцентом; ціна всередині CTA; каскадне успадкування
• Мінуси: монохромність може здатися нудною
• Де подивитися: 🔗 Heroku Pricing

13. Freshbooks

Freshbooks, «завислий» текст між сторінками. Більшість планів розрізняються лише кількістю клієнтів і ціною, менше відмінностей, чистіший дизайн.

План Evergreen із тегом «найпопулярніші» та маленьким знаком долара відносно цифри, той самий прийом, що й у Readymag.

• Плюси: чистота за рахунок малої кількості змінних; ефект зависання
• Мінуси: лише коли плани розрізняються 1-2 параметрами
• Де подивитися: 🔗 Freshbooks Pricing

14. Slidedeck

Slidedeck навмисно робить усі плани візуально однаковими, рекомендований лише трохи темніший. Для аддону критичні не кольори, а доступність конкретних функцій. Дизайн не відволікає від вивчення списку фіч.

• Плюси: дизайн не заважає порівнянню; візуальна рівність змушує читати
• Мінуси: без візуального якоря легко загубитися
• Де подивитися: 🔗 Slidedeck Pricing

15. YepText

YepText, найшвидша для сприйняття таблиця в добірці. Три рядки, характерні назви пакетів (Workin' It, The Beast, The Champ), рішення за секунди.

Назви відображають аудиторію, а не формальний рівень. Емоційна прив'язка без жодного зайвого слова.

• Плюси: надшвидке сприйняття; характерні назви
• Мінуси: для комплексних SaaS замало інформації
• Де подивитися: 🔗 YepText Pricing

16. BigCartel

BigCartel використовує зображення як фон секції цін: кожна картинка показує, ДЛЯ КОГО план,, художник із парою робіт, магазин, що зростає, серйозний бізнес. Візуальний портрет аудиторії сильніший за слова.

Функції розкриваються у спливному вікні, таблиця залишається чистою, інформація доступна в один клік.

• Плюси: зображення показують аудиторію; приховані деталі у спливному вікні
• Мінуси: ризик, що відвідувач не клікне; не для порівняння «віч-на-віч»
• Де подивитися: 🔗 BigCartel Signup

Відео: дизайн таблиць цін, який підвищує конверсію

Розбір від DNSK Design Study про те, як «більш негарні, але зрозумілі» таблиці цін підвищили конверсію DNSK Design Study. Шість хвилин, і стане зрозуміло, чому візуальна «красивість» часто шкодить:

⁉️🤔 Часті запитання

Що робить таблицю цін «конверсійною»?

Три речі: чіткість відмінностей між планами, візуальний акцент на рекомендованому варіанті та відсутність «болю» під час погляду на ціну. Конкретні прийоми: маленький знак валюти, ціна після опису цінності, один виділений план. Дослідження DNSK показало, що «зрозумілі» таблиці конвертують помітно краще за «красиві» DNSK Study, 2024.

Чи обов’язково виділяти один план як «популярний»?

Майже завжди корисно. Відвідувач приходить із сумнівом «який обрати?», і виділений план його знімає. Виняток, коли плани чітко поділяються за аудиторіями, як у Dropbox: особистий / командний / enterprise. Тоді краще ділити візуально, а не підсвічуванням.

Скільки планів оптимально?

Три або чотири. Три, класика: базовий / популярний / просунутий. Чотири, якщо є enterprise-сегмент. П’ять і більше, ризик «паралічу вибору». З 16 прикладів більшість використовують 3-4 плани.

Які кольори для CTA-кнопок працюють краще?

Зелений («йти») та помаранчевий («діяти зараз»). Синій для trust-елементів. Червоний обережно: привертає увагу, але читається як «небезпека». Головне, CTA-кнопка має бути ЄДИНИМ елементом цього кольору на сторінці.

Чи варто показувати ціну одразу чи ховати за «зв’язатися з нами»?

Для self-service, показувати одразу й прозоро. Прихована ціна дратує. Для enterprise з індивідуальним ціноутворенням, дайте натяк («від $X»), а точну цифру через контакт. Приклад: Heroku в добірці.

Який підхід до дизайну таблиці цін обрати?

16 прикладів позаду. Тепер головне: що застосувати до вашого проєкту.

Якщо у вас 3-4 плани зі зрозумілими відмінностями, беріть підхід Freshbooks або Readymag: мінімум кольорів, акцент на 1-2 змінних, маленький знак валюти. Працює для більшості SaaS.

Якщо плани сильно різняться за функціями, матриця як у Plugmatter або Wufoo: функції ліворуч, плани праворуч, галочки на перетинах. Різницю видно за секунди.

Якщо у вас чіткі сегменти аудиторії, підхід Dropbox або BeanStalk: різні картки для різних аудиторій, візуально розділені, з характерними зображеннями.

Якщо продукт складний і потрібен тріал, модель Zendesk: безплатний повнофункціональний тріал для всіх планів. Дайте спробувати професійну версію, відкат на базову відчуватиметься втратою.

І головний урок добірки: дизайн таблиці цін не про «красиво». Він про «зрозуміло з першого погляду, який план брати». Зробіть це, і конверсія скаже сама за себе.