Tabela cen, a nie cennik. To punkt, w którym odwiedzający decyduje: zapłacić czy odejść. Projekt tego punktu albo popycha do działania, albo chowa konwersję.

Nie chodzi o jaskrawe przyciski. Chodzi o to, jak zebrane są struktura, hierarchia wizualna i psychologia ceny. Jeden zabieg i strona zaczęła działać. Inny i odwiedzający odszedł.

Poniżej 16 przykładów od Dropbox po BigCartel z analizą: dlaczego ich tabele zapadają w pamięć i jakie techniki działają.

💡 Szybki przegląd:

• Przejdź przez przykłady i zwróć uwagę na powtarzające się wzorce
• Sprawdź z tabelą porównawczą i wybierz podejście, które pasuje
• Zastosuj matrycę technik z podsumowującej sekcji

Tabela porównawcza: 16 podejść do projektowania tabel cenowych

1. Dropbox

Strona planów Dropbox, jeden z najczystszych przykładów. Trzy karty, opisowe obrazy pakietów, rozdzielenie „dla siebie" i „dla zespołów" cienką linią, a nie kolorem.

Zamiast ikon funkcji, ilustracje kontekstowe. Karta dla zespołów pokazuje wspólną pracę, dla użytku osobistego, uporządkowane pliki. Tło zlewa się ze stroną, odwiedzający porównuje plany, a nie walczy z projektem.

• Plusy: ilustracje zamiast ikon; rozdzielenie linią, a nie kolorem; integracja z tłem
• Minusy: przy dużej liczbie funkcji minimalizm może nie dostarczać informacji
• Gdzie zobaczyć: 🔗 Dropbox Plans

2. Wufoo

Wufoo wykorzystuje pełnokolorową macierz z przełączaniem „miesiąc / rok" za pomocą suwaka. Funkcje pokazano przez porównanie: pełna lista tylko w popularnym planie Bonafide, a po lewej i prawej, zielone znaczniki przy dostępnych pozycjach.

Przyciski CTA na górze i na dole, dla stron, które się przewija, to krytyczne. Poszedł na dół analizować funkcje, przycisk już czeka.

• Plusy: macierz z suwakiem; porównanie funkcji przez popularny plan; CTA na górze i na dole
• Minusy: przeładowany kolorem, na urządzeniach mobilnych może migotać
• Gdzie zobaczyć: 🔗 Wufoo Pricing

3. Freshdesk

Freshdesk dodaje animowany element: popularny plan oznaczony jest GIF-em lecącego balonu, jedyny ruch na statycznej stronie. Wzrok przyciągany jest natychmiast.

Motyw „rosnącej zieleni" przeprowadzony jest przez wszystko: obrazy pakietów, ikony funkcji, przyciski, odcienie zieleni. Odwiedzający podświadomie wiąże zieleń z działaniem.

• Plusy: animacja skupia na popularnym planie; spójny motyw kolorystyczny
• Minusy: GIF może rozpraszać przy kolejnych wejściach
• Gdzie zobaczyć: 🔗 Freshdesk Pricing

4. Plugmatter

Własny przykład Plugmatter: matryca w czerwono-białej gamie pod markę. Funkcje po lewej, plany po prawej, centralny plan „podświetlony" jasnością, a nie nowym kolorem.

Ten sam projekt dostępny jest jako szablon w ich wtyczce do tabel cenowych, rzadki przypadek „jedzenia własnej karmy dla psów" w działaniu.

• Plusy: surowy styl marki; podświetlenie centrum jasnością; design = demonstracja produktu
• Minusy: kontrastowa czerwień nie jest uniwersalna
• Gdzie zobaczyć: 🔗 Plugmatter

5. Pulse

Pulse udowadnia: im mniej tekstu, tym odważniejszy design. Przestronny układ, duży przycisk, minimum opisów. Popularny plan w centrum ma ciemniejsze tło i jaśniejszy przycisk, nad nim tag „Duża wartość".

• Plusy: rozrzedzony układ daje powietrze; tag z propozycją wartości
• Minusy: dla złożonych produktów powietrza może być za dużo
• Gdzie zobaczyć: 🔗 Pulse Pricing

6. Mailchimp

Mailchimp stworzył dynamiczny tag „Polecane": przesunął suwak liczby subskrybentów, a polecany plan się zmienił. Odwiedzający nie zgaduje, co wybrać.

Cenę pokazano po opisie możliwości, odwiedzający ocenia wartość, zanim zobaczy kwotę.

• Plusy: dynamiczny tag dopasowany do potrzeby; cena po wartości
• Minusy: na małych ekranach suwak może być niewygodny
• Gdzie zobaczyć: 🔗 Mailchimp Pricing

7. Zendesk

Zendesk oferuje bezpłatny okres próbny dla WSZYSTKICH pakietów, nie tylko podstawowego. Przyciski „Try" wyróżnione są pomarańczowym i prowadzą do w pełni funkcjonalnej wersji profesjonalnej.

Gdy okres próbny się skończy, powrót do planu podstawowego będzie odczuwany jako strata. Psychologia utrzymania przez doświadczenie, a nie przez zniżkę.

• Plusy: wersja próbna na wszystkich planach; w pełni funkcjonalny okres testowy
• Minusy: złożony produkt może nie ujawnić swoich możliwości w trakcie triala
• Gdzie sprawdzić: 🔗 Zendesk Pricing

8. Litmus

Litmus wykorzystuje duże kolorowe bloki, po jednym na plan. Kolory uzupełniają się i nie kolidują ze sobą.

Dwa różne wezwania do działania: u góry przycisk, na dole propozycja oszczędzenia konkretnej kwoty przy rozliczeniu rocznym. Konkretna kwota oszczędności działa lepiej niż procent.

• Plusy: kolorowe bloki do rozróżniania planów; dwa różne treściowo wezwania do działania
• Minusy: duże bloki wymagają dużo miejsca w pionie
• Gdzie sprawdzić: 🔗 Litmus Pricing

9. BeanStalk

BeanStalk bawi się głębią: karty dla freelancerów są płaskie i szare, dla biznesu, trójwymiarowe, „uniesione". Wizualna waga karty odpowiada cenie i grupie docelowej.

Nazwy pakietów (Bronze, Platinum) nic nie mówią, ale szczegółowe opisy to rekompensują.

• Plusy: efekt 3D dla droższych planów; różna „powaga" dostosowana do odbiorcy
• Minusy: nazwy planów są nieinformacyjne; 3D na superpłaskiej stronie wygląda przestarzale
• Gdzie sprawdzić: 🔗 BeanStalk Pricing

10. Readymag

Readymag używa tylko dwóch kolorów: granatowego i białego. Znak dolara jest wyraźnie mniejszy od cyfry ceny, to zabieg zmniejszający „ból płacenia": odwiedzający skupia się na liczbie, a nie na fakcie wydatku. Dymki z podpowiedziami przy funkcjach wyjaśniają opcje bez zaśmiecania tabeli.

• Plusy: minimalizm do dwóch kolorów; zabieg z małym znakiem waluty; tooltipy zamiast ścian tekstu
• Minusy: przy długich tabelach dwa kolory mogą się zlewać
• Gdzie zobaczyć: 🔗 Readymag Pricing

11. Crazyegg

Crazyegg wyolbrzymia zmienne, którymi różnią się plany, czyniąc je znacznie większymi niż otaczający tekst. Odwiedzający nie musi wyszukiwać różnicy, od razu rzuca się ona w oczy.

Wybrany plan jest podświetlony na niebiesko (zaufanie), przyciski na zielono (działanie). Kolory działają na psychologię.

• Plusy: przerośnięte różnice; trust-niebieski + action-zielony
• Minusy: tylko dla tabel z małą liczbą zmiennych
• Gdzie zobaczyć: 🔗 Crazyegg Pricing

12. Heroku

Heroku jest praktycznie całkowicie monochromatyczny, wszystko w odcieniach fioletu, poza pojedynczą niebieską plamą na przycisku planu profesjonalnego. Wzrok wędruje prosto tam.

Cena jest wbudowana DO WNĘTRZA przycisku, a nie nad nim. Opis planów przez dziedziczenie: „Wszystkie funkcje planu darmowego +…", i tak łańcuchowo.

• Plusy: monochrom z jednym akcentem kolorystycznym; cena wewnątrz CTA; kaskadowe dziedziczenie
• Minusy: monochromatyczność może wydawać się nudna
• Gdzie zobaczyć: 🔗 Heroku Pricing

13. Freshbooks

Freshbooks, „zawieszony" tekst między stronami. Większość planów różni się tylko liczbą klientów i ceną, mniej różnic, czystszy design.

Plan Evergreen z tagiem „najpopularniejszy" i małym znakiem dolara przy cyfrze, ten sam zabieg co w Readymag.

• Plusy: czystość dzięki małej liczbie zmiennych; efekt zawieszenia
• Minusy: tylko gdy plany różnią się 1-2 parametrami
• Gdzie zobaczyć: 🔗 Freshbooks Pricing

14. Slidedeck

Slidedeck celowo sprawia, że wszystkie plany wyglądają wizualnie tak samo, zalecany jest tylko nieco ciemniejszy. Dla addonu krytyczne są nie kolory, a dostępność konkretnych funkcji. Design nie odciąga uwagi od analizy listy funkcji.

• Plusy: design nie przeszkadza w porównaniu; wizualna równość zmusza do czytania
• Minusy: bez wizualnej kotwicy łatwo się zgubić
• Gdzie zobaczyć: 🔗 Slidedeck Pricing

15. YepText

YepText, najszybsza w odbiorze tabela w zestawieniu. Trzy wiersze, charakterystyczne nazwy pakietów (Workin' It, The Beast, The Champ), decyzja w kilka sekund.

Nazwy odzwierciedlają grupę docelową, a nie formalny poziom. Emocjonalne powiązanie bez ani jednego zbędnego słowa.

• Plusy: superszybki odbiór; charakterystyczne nazwy
• Minusy: dla złożonych SaaS za mało informacji
• Gdzie zobaczyć: 🔗 YepText Pricing

16. BigCartel

BigCartel wykorzystuje obrazy jako tło sekcji cenowej: każdy obrazek pokazuje, DLA KOGO jest plan: artysta z kilkoma pracami, rozwijający się sklep, poważny biznes. Wizualny portret grupy docelowej działa silniej niż słowa.

Funkcje są rozwinięte w oknie pop-up, tabela pozostaje czysta, informacje są dostępne na jedno kliknięcie.

• Plusy: obrazy pokazują grupę docelową; ukryte szczegóły w oknie pop-up
• Minusy: ryzyko, że odwiedzający nie kliknie; nie do porównania „twarzą w twarz"
• Gdzie zobaczyć: 🔗 BigCartel Signup

Wideo: design tabel cenowych, który zwiększa konwersję

Analiza od DNSK Design Study o tym, jak „brzydsze, ale czytelniejsze" tabele cenowe zwiększyły konwersję DNSK Design Study. Sześć minut i stanie się jasne, dlaczego wizualna „ładność" często szkodzi:

⁉️🤔 Często zadawane pytania

Co sprawia, że tabela cenowa jest „konwersyjna"?

Trzy rzeczy: jasność różnic między planami, wizualne podkreślenie rekomendowanej opcji oraz brak „bólu" przy patrzeniu na cenę. Konkretne techniki: mały symbol waluty, cena po opisie wartości, jeden wyróżniony plan. Badanie DNSK wykazało, że „zrozumiałe" tabele konwertują zauważalnie lepiej niż „ładne" DNSK Study, 2024.

Czy zawsze trzeba wyróżniać jeden plan jako „popularny"?

Prawie zawsze jest to korzystne. Odwiedzający przychodzi z wątpliwością „który wybrać?", a wyróżniony plan ją rozwiewa. Wyjątkiem jest sytuacja, gdy plany są wyraźnie podzielone według grup odbiorców, jak w Dropbox: osobisty / zespołowy / enterprise. Wtedy lepiej dzielić wizualnie, a nie przez podświetlanie.

Jaka jest optymalna liczba planów?

Trzy lub cztery. Trzy to klasyka: podstawowy / popularny / zaawansowany. Cztery, jeśli istnieje segment enterprise. Pięć i więcej to ryzyko „paraliżu wyboru". Spośród 16 przykładów większość stosuje 3-4 plany.

Jakie kolory przycisków CTA działają lepiej?

Zielony („idź") i pomarańczowy („działaj teraz"). Niebieski do elementów budujących zaufanie. Czerwony ostrożnie: przyciąga uwagę, ale jest odczytywany jako „niebezpieczeństwo". Najważniejsze: przycisk CTA musi być JEDYNYM elementem w tym kolorze na stronie.

Czy pokazywać cenę od razu, czy chować za „skontaktuj się z nami"?

W modelu samoobsługowym pokazywać od razu i przejrzyście. Ukryta cena irytuje. W przypadku enterprise z wyceną indywidualną proszę dać wskazówkę („od X zł"), a dokładną kwotę podać przez kontakt. Przykład: Heroku w zestawieniu.

Jakie podejście do projektowania tabeli cen wybrać?

16 przykładów za nami. Teraz najważniejsze: co zastosować w Państwa projekcie.

Jeśli mają Państwo 3-4 plany o zrozumiałych różnicach, proszę zastosować podejście Freshbooks lub Readymag: minimum kolorów, akcent na 1-2 zmienne, mały symbol waluty. Działa to w przypadku większości SaaS.

Jeśli plany znacznie różnią się funkcjami, matryca jak u Plugmatter lub Wufoo: funkcje po lewej, plany po prawej, znaczniki na przecięciach. Różnicę widać w kilka sekund.

Jeśli mają Państwo wyraźne segmenty odbiorców, podejście Dropbox lub BeanStalk: różne karty dla różnych grup, wizualnie rozdzielone, z charakterystycznymi ilustracjami.

Jeśli produkt jest złożony i potrzebny jest okres próbny, model Zendesk: bezpłatny, pełnofunkcyjny okres próbny dla wszystkich planów. Proszę dać możliwość wypróbowania wersji profesjonalnej, powrót do podstawowej będzie odczuwany jako strata.

I główna lekcja z tego zestawienia: projekt tabeli cen nie polega na tym, by było „ładnie". Chodzi o to, by „od pierwszego spojrzenia było wiadomo, który plan wybrać". Proszę to zrobić, a konwersja powie sama za siebie.