Hinnoittelutaulukko, ei hinnasto. Tämä on se kohta, jossa kävijä päättää maksaa tai poistua. Tämän kohdan suunnittelu joko ohjaa toimintaan tai hautaa konversion.

Kyse ei ole näyttävistä napeista. Kyse on siitä, miten rakenne, visuaalinen hierarkia ja hinnoittelupsykologia kohtaavat. Yksi tekniikka, ja sivu toimii. Toinen, ja kävijä lähtee.

Alla on 16 esimerkkiä Dropboxista BigCarteliin analyyseineen: miksi niiden taulukot jäävät mieleen ja mitkä tekniikat toimivat.

💡 Pikakatsaus:

• Käy esimerkit läpi ja huomaa toistuvat kaavat
• Tarkista vertailutaulukko ja valitse sopiva lähestymistapa
• Sovella tekniikkamatriisia viimeisestä osiosta

Vertailutaulukko: 16 lähestymistapaa hinnoittelutaulukon suunnitteluun

1. Dropbox

Dropboxin pakettisivu, yksi selkeimmistä esimerkeistä. Kolme korttia, kuvailevat pakettikuvat, "henkilökohtaisen" ja "tiimit" erottelu ohuella viivalla, ei värillä.

Ominaisuusikonien sijaan kontekstuaaliset kuvitukset. Tiimikortti näyttää yhteistyön; henkilökohtainen kortti näyttää järjestellyt tiedostot. Tausta sulautuu sivuun, joten kävijät vertailevat paketteja sen sijaan, että kamppailisivat muotoilun kanssa.

• Hyvää: kuvitukset ikonien sijaan; erottelu viivalla, ei värillä; taustaan integrointi
• Huonoa: monien ominaisuuksien kanssa minimalismi voi tarjota liian vähän tietoa
• Mistä katsoa: 🔗 Dropbox Plans

2. Wufoo

Wufoo käyttää täysväristä matriisia, jossa on kuukausi/vuosi-vaihto liukusäätimellä. Ominaisuudet esitetään vertailun kautta: täysi lista vain suositussa Bonafide-paketissa, kun taas vasemmalla ja oikealla näkyy vihreitä valintamerkkejä saatavilla olevien kohtien vieressä.

CTA-napit ylhäällä ja alhaalla. Sivuille, jotka vierivät, tämä on kriittistä. Selasitko alas tutkiaksesi ominaisuuksia? Nappi odottaa jo.

• Hyvää: matriisi liukusäätimellä; ominaisuuksien vertailu suositun paketin kautta; CTA ylhäällä ja alhaalla
• Huonoa: ylikuormitettu värillä, voi näyttää sekavalta mobiilissa
• Mistä katsoa: 🔗 Wufoo Pricing

3. Freshdesk

Freshdesk lisää animoidun elementin: suosittu paketti on merkitty leijuvalla kuumailmapallo-GIF:llä, ainoalla liikkeellä staattisella sivulla. Katseet kiinnittyvät siihen välittömästi.

"Kasvava vehreys" -teema kulkee läpi: pakettikuvat, ominaisuusikonit, napit, vihreän sävyt. Kävijät yhdistävät alitajuisesti vihreän toimintaan.

• Hyvää: animaatio keskittää huomion suosittuun pakettiin; johdonmukainen väriteema
• Huonoa: GIF voi häiritä toistuvilla käynneillä
• Mistä katsoa: 🔗 Freshdesk Pricing

4. Plugmatter

Plugmatterin oma esimerkki: punavalkoinen matriisi, joka sopii brändiin. Ominaisuudet vasemmalla, paketit oikealla, keskimmäinen paketti "korostettu" kirkkaudella, ei uudella värillä.

Sama design on saatavilla mallipohjana heidän hinnoittelutaulukkolisäosassaan, harvinainen tapaus "oman koiranruoan syömisestä" käytännössä.

• Plussat: tiukka brändityyli; keskimmäinen korostettu kirkkaudella; design toimii tuote-esittelynä
• Miinukset: voimakas punainen kontrasti ei sovi kaikille
• Mistä katsoa: 🔗 Plugmatter

5. Pulse

Pulse todistaa, että vähemmän tekstiä sallii rohkeamman designin. Väljä asettelu, iso painike, minimaaliset kuvaukset. Suosituimmalla paketilla keskellä on tummempi tausta ja kirkkaampi painike, ja sen yläpuolella "Great Value" -tunniste.

• Plussat: väljä asettelu antaa hengitystilaa; arvolupauksen tunniste
• Miinukset: monimutkaisille tuotteille valkoista tilaa voi olla liikaa
• Mistä katsoa: 🔗 Pulse Pricing

6. Mailchimp

Mailchimp loi dynaamisen "Suositeltu"-tunnisteen: liikuta tilaajamäärän liukusäädintä, ja suositeltu paketti vaihtuu. Vierailijoiden ei tarvitse arvailla, mitä valita.

Hinta näytetään ominaisuuskuvauksen jälkeen, joten vierailijat arvioivat arvon ennen numeron näkemistä.

• Plussat: tarpeisiin perustuva dynaaminen tunniste; hinta arvon jälkeen
• Miinukset: pienillä näytöillä liukusäädin voi olla kömpelö
• Mistä katsoa: 🔗 Mailchimp Pricing

7. Zendesk

Zendesk tarjoaa ilmaisen kokeilujakson KAIKILLE paketeille, ei vain peruspaketille. "Kokeile"-painikkeet on korostettu oranssilla ja ne johtavat täysin toimivaan ammattiversioon.

Kun kokeilujakso päättyy, peruspakettiin palaaminen tuntuu menetykseltä. Pidättämisen psykologiaa kokemuksen kautta, ei alennuksen.

• Hyödyt: kokeiluversio kaikissa paketeissa; täysin toimiva testijakso
• Haitat: monimutkainen tuote ei välttämättä paljasta itseään kokeilun aikana
• Mistä katsoa: 🔗 Zendesk-hinnoittelu

8. Litmus

Litmus käyttää suuria väripalikoita, yksi per paketti. Värit täydentävät toisiaan eivätkä riitele keskenään.

Kaksi erilaista toimintakehotetta: painike ylhäällä ja alhaalla tarjous, jossa kerrotaan tarkka summa, jonka säästää vuosisopimuksella. Euromääräinen säästö toimii paremmin kuin prosentit.

• Hyödyt: väripalikat erottavat paketit; kaksi merkitykseltään erilaista toimintakehotetta
• Haitat: suuret palikat vievät paljon pystytilaa
• Mistä katsoa: 🔗 Litmus-hinnoittelu

9. BeanStalk

BeanStalk leikittelee syvyydellä: freelancereille tarkoitetut kortit ovat litteitä ja harmaita, kun taas yrityksille suunnatut kortit ovat kolmiulotteisia ja "kohotettuja". Kortin visuaalinen paino vastaa hintaa ja kohderyhmää.

Pakettien nimet (Bronze, Platinum) eivät kerro mitään, mutta yksityiskohtaiset kuvaukset korvaavat tämän.

• Hyödyt: 3D-efekti kalliimmille paketeille; erilainen "vakavuusaste" eri kohderyhmille
• Haitat: pakettien nimet eivät ole informatiivisia; 3D erittäin litteällä sivustolla näyttää vanhentuneelta
• Mistä katsoa: 🔗 BeanStalk-hinnoittelu

10. Readymag

Readymag käyttää vain kahta väriä: tummansinistä ja valkoista. Dollarimerkki on huomattavasti hintanumeroa pienempi, mikä on tekniikka, joka vähentää "maksamisen tuskaa": kävijät keskittyvät numeroon, eivät rahankäytön tosiasiaan. Ominaisuuksien työkaluvihjeet selittävät vaihtoehdot sotkematta taulukkoa.

• Hyödyt: minimalismi vain kahteen väriin asti; pieni valuuttamerkkitekniikka; työkaluvihjeet tekstiseinien sijaan
• Haitat: pitkissä taulukoissa kaksi väriä saattavat sulautua yhteen
• Mistä katsoa: 🔗 Readymag-hinnoittelu

11. Crazyegg

Crazyegg suurentaa paketteja erottelevat muuttujat, tehden niistä paljon ympäröivää tekstiä isompia. Käyttäjän ei tarvitse etsiä eroja, vaan ne hyppäävät heti silmille.

Valittu paketti on väritetty siniseksi (luottamus) ja painikkeet vihreiksi (toiminta). Värit vaikuttavat psykologisesti.

• Hyvää: liioitellut erot; luottamus-sininen + toiminta-vihreä
• Huonoa: toimii vain taulukoissa, joissa on vähän muuttujia
• Katso täältä: 🔗 Crazyegg-hinnoittelu

12. Heroku

Heroku on lähes kokonaan yksivärinen: kaikki on violetin eri sävyissä, lukuun ottamatta yhtä sinistä kohtaa ammattilaispaketin painikkeessa. Katse hakeutuu suoraan siihen.

Hinta on rakennettu painikkeen SISÄÄN, ei sen yläpuolelle. Pakettien kuvauksissa käytetään periytymistä: "Kaikki ilmaisen paketin ominaisuudet sekä…," ja niin edelleen ketjussa alaspäin.

• Hyvää: yksivärinen yhdellä värikorostuksella; hinta toimintakehotteen sisällä; ketjutettu periytyminen
• Huonoa: yksivärinen voi vaikuttaa tylsältä
• Katso täältä: 🔗 Heroku-hinnoittelu

13. Freshbooks

Freshbooksissa teksti "leijuu" sivujen välissä. Useimmat paketit eroavat toisistaan vain asiakasmäärän ja hinnan osalta. Vähemmän eroja, selkeämpi ulkoasu.

Evergreen-paketissa on "suosituin"-merkintä ja pieni dollarin merkki suhteessa numeroon, sama tekniikka kuin Readymagilla.

• Hyvää: selkeys vähäisten muuttujien ansiosta; leijuva vaikutelma
• Huonoa: toimii vain, kun paketit eroavat 1-2 parametrin osalta
• Katso täältä: 🔗 Freshbooks-hinnoittelu

14. Slidedeck

Slidedeck tekee tarkoituksella kaikista paketeista visuaalisesti identtiset; suositeltu on vain hieman tummempi. Lisäosalle olennaista eivät ole värit vaan tiettyjen ominaisuuksien saatavuus. Ulkoasu ei häiritse ominaisuuslistan tutkimista.

• Hyvää: ulkoasu ei häiritse vertailua; visuaalinen samanlaisuus pakottaa lukemaan
• Huonoa: ilman visuaalista ankkuria on helppo eksyä
• Mistä katsoa: 🔗 Slidedeck-hinnoittelu

15. YepText

YepText, kokoelman nopeimmin hahmotettava taulukko. Kolme riviä, erottuvat pakettien nimet (Workin' It, The Beast, The Champ), päätös sekunneissa.

Nimet kuvastavat kohderyhmää, eivät muodollista tasoa. Tunneyhteys ilman yhtäkään ylimääräistä sanaa.

• Hyvää: erittäin nopea ymmärtää; erottuvat nimet
• Huonoa: monimutkaiselle SaaS-tuotteelle liian vähän tietoa
• Mistä katsoa: 🔗 YepText-hinnoittelu

16. BigCartel

BigCartel käyttää kuvia hinnoitteluosion taustana: jokainen kuva näyttää KENELLE paketti on tarkoitettu, taiteilija jolla on muutama työ, kasvava kauppa, vakavasti otettava yritys. Visuaalinen muotokuva kohderyhmästä on sanoja vahvempi.

Ominaisuudet paljastetaan ponnahdusikkunassa, mikä pitää taulukon siistinä ja tiedot yhden klikkauksen päässä.

• Hyvää: kuvat näyttävät kohderyhmän; piilotetut tiedot ponnahdusikkunassa
• Huonoa: riski, etteivät kävijät klikkaa; ei sovellu rinnakkaisvertailuun
• Mistä katsoa: 🔗 BigCartel-rekisteröityminen

Video: hinnoittelutaulukon suunnittelu, joka nostaa konversiota

DNSK Design Studyn analyysi siitä, miten "rumemmat mutta selkeämmät" hinnoittelutaulukot nostivat konversiota DNSK Design Study. Kuusi minuuttia, ja käy selväksi, miksi visuaalinen "kauneus" usein haittaa:

⁉️🤔 Usein kysytyt kysymykset

Mikä tekee hinnoittelutaulukosta konversioystävällisen?

Kolme asiaa: suunnitelmien erojen selkeys, visuaalinen painotus suositellussa vaihtoehdossa ja "kivun" puuttuminen hintaa katsoessa. Konkreettisia tekniikoita: pieni valuuttamerkki, hinta arvokuvauksen jälkeen, yksi korostettu suunnitelma. DNSK-tutkimus osoitti, että "selkeät" taulukot konvertoivat huomattavasti paremmin kuin "näyttävät" DNSK Study, 2024.

Onko yksi suunnitelma tarpeen korostaa "suosituksi"?

Lähes aina hyödyllistä. Kävijät saapuvat epävarmoina: "mikä minun kannattaisi valita?", ja korostettu suunnitelma ratkaisee tämän. Poikkeuksena on tilanne, jossa suunnitelmat jakautuvat selkeästi kohderyhmittäin, kuten Dropboxissa: henkilökohtainen / tiimi / yritys. Silloin on parempi erotella visuaalisesti kuin korostamalla.

Mikä on optimaalinen määrä suunnitelmia?

Kolme tai neljä. Kolme on klassinen: perus / suosittu / edistynyt. Neljä, jos mukana on yrityssegmentti. Viisi tai enemmän aiheuttaa riskin "valintahalvauksesta". Kuudestatoista esimerkistä useimmat käyttävät 3-4 suunnitelmaa.

Mitkä värit toimivat parhaiten CTA-painikkeissa?

Vihreä ("mene") ja oranssi ("toimi nyt"). Sininen luottamuselementeille. Punainen varauksella: se kiinnittää huomion, mutta viestii "vaaraa". Pääsääntö: CTA-painikkeen tulee olla sivun AINOA kyseisen värinen elementti.

Pitäisikö hinta näyttää heti vai piilottaa "ota yhteyttä" -linkin taakse?

Itsepalvelussa hinta näytetään heti ja läpinäkyvästi. Piilotetut hinnat ärsyttävät. Yrityksille, joilla on räätälöity hinnoittelu, anna vihje ("alkaen $X") ja tarkka luku yhteydenoton kautta. Esimerkki: Heroku kokoelmassa.

Mikä lähestymistapa hinnoittelutaulukon suunnitteluun kannattaa valita?

16 esimerkkiä takana. Nyt pääasia: mitä soveltaa omaan projektiisi.

Jos sinulla on 3-4 suunnitelmaa selkein eroin, ota Freshbooksin tai Readymagin lähestymistapa: minimaaliset värit, painotus 1-2 muuttujassa, pieni valuuttamerkki. Toimii useimmille SaaS-palveluille.

Jos suunnitelmat eroavat merkittävästi ominaisuuksiltaan, käytä matriisia kuten Plugmatter tai Wufoo: ominaisuudet vasemmalla, suunnitelmat oikealla, rastit risteyskohdissa. Erot näkyvät sekunneissa.

Jos sinulla on selkeät kohderyhmäsegmentit, ota Dropboxin tai BeanStalkin lähestymistapa: eri kortit eri kohderyhmille, visuaalisesti eroteltuina, omaleimaisin kuvin.

Jos tuote on monimutkainen ja vaatii kokeilujakson, käytä Zendesk-mallia: ilmainen, kaikki ominaisuudet sisältävä kokeilujakso kaikille suunnitelmille. Anna heidän kokeilla ammattilaisversiota; perusversioon palaaminen tuntuu menetykseltä.

Ja tämän kokoelman tärkein opetus: hinnoittelutaulukon suunnittelu ei ole "näyttävyyttä". Se on "välittömästi selvää, mikä suunnitelma kannattaa ottaa". Tee näin, ja konversio puhuu puolestaan.