Hinnakujunduse tabel, mitte hinnakiri. See on punkt, kus külastaja otsustab, kas maksta või lahkuda. Selle punkti kujundus kas suunab tegutsema või matab konversiooni.

Asi pole uhketes nuppudes, vaid selles, kuidas struktuur, visuaalne hierarhia ja hinnakujunduspsühholoogia kokku mängivad. Üks tehnika ja leht töötab. Teine ja külastaja lahkub.

Allpool on 16 näidet Dropboxist BigCartelini koos analüüsiga: miks nende tabelid on meeldejäävad ja millised tehnikad toimivad.

💡 Kiire ülevaade:

• Mine näited läbi ja pane tähele korduvaid mustreid
• Vaata võrdlustabelit ja vali sobiv lähenemine
• Rakenda viimases osas olevat tehnikate maatriksit

Võrdlustabel: 16 lähenemist hinnakujunduse tabeli disainile

1. Dropbox

Dropboxi plaanide leht, üks puhtamaid näiteid. Kolm kaarti, kirjeldavad paketi pildid, „isikliku" ja „meeskondade" eraldamine õhukese joonega, mitte värviga.

Funktsiooniikoonide asemel on kontekstipõhised illustratsioonid. Meeskonnakaart näitab koostööd, isiklik kaart korrastatud faile. Taust sulandub lehega, nii et külastajad võrdlevad plaane, selle asemel et disainiga võidelda.

• Plussid: illustratsioonid ikoonide asemel; eraldamine joonega, mitte värviga; taustaga integreerimine
• Miinused: paljude funktsioonide puhul võib minimalism infot vähe pakkuda
• Kust vaadata: 🔗 Dropboxi plaanid

2. Wufoo

Wufoo kasutab täisvärvilist maatriksit kuu/aasta lülitusega liuguri abil. Funktsioone näidatakse võrdluse kaudu: täielik nimekiri ainult populaarses Bonafide plaanis, samal ajal kui vasakul ja paremal on saadaolevate üksuste kõrval rohelised linnukesed.

CTA nupud üleval ja all. Keritavate lehtede puhul on see kriitiline. Kerisid funktsioone uurides alla? Nupp juba ootab.

• Plussid: maatriks liuguriga; funktsioonide võrdlus populaarse plaani kaudu; CTA üleval ja all
• Miinused: värviga üle koormatud, võib mobiilis segane välja näha
• Kust vaadata: 🔗 Wufoo hinnakiri

3. Freshdesk

Freshdesk lisab animeeritud elemendi: populaarne plaan on tähistatud hõljuva kuumaõhupalli GIF-iga, mis on ainus liikumine staatilisel lehel. Pilgud tõmmatakse koheselt sellele.

„Kasvava roheluse" teema jookseb läbi kõige: paketi pildid, funktsiooniikoonid, nupud, rohelised varjundid. Külastajad seostavad rohelist alateadlikult tegevusega.

• Plussid: animatsioon suunab tähelepanu populaarsele plaanile; järjepidev värviteema
• Miinused: GIF võib korduvatel külastustel häirida
• Kust vaadata: 🔗 Freshdeski hinnakiri

4. Plugmatter

Plugmatter'i enda näide: punavalge maatriks, mis sobib brändiga. Vasakul omadused, paremal paketid, keskmine pakett on esile tõstetud heleduse, mitte uue värviga.

Sama kujundus on mallina saadaval nende hinnakujundustabeli pluginas, harv juhus, kus „sööd oma koeratoitu" on päriselt kasutusel.

• Plussid: range brändistiil; keskmine pakett esile tõstetud heledusega; kujundus on ühtlasi toote demo
• Miinused: suure kontrastiga punane ei sobi kõigile
• Kust vaadata: 🔗 Plugmatter

5. Pulse

Pulse tõestab, et vähem teksti võimaldab julgemat kujundust. Avar paigutus, suur nupp, minimaalsed kirjeldused. Populaarne pakett on keskel tumedamal taustal ja heledama nupuga, selle kohal on silt „Great Value".

• Plussid: avar paigutus annab hingamisruumi; väärtuspakkumise silt
• Miinused: keerukate toodete puhul võib tühja ruumi olla liiga palju
• Kust vaadata: 🔗 Pulse Pricing

6. Mailchimp

Mailchimp lõi dünaamilise „Recommended" sildi: liiguta tellijate arvu liugurit ja soovitatav pakett muutub. Külastajad ei pea ise arvama, mida valida.

Hind kuvatakse pärast omaduste kirjeldust, nii et külastajad hindavad väärtust enne numbri nägemist.

• Plussid: vajaduspõhine dünaamiline silt; hind pärast väärtust
• Miinused: väikestel ekraanidel võib liugur olla kohmakas
• Kust vaadata: 🔗 Mailchimp Pricing

7. Zendesk

Zendesk pakub tasuta prooviperioodi KÕIGILE pakettidele, mitte ainult baaspaketile. „Try" nupud on esile tõstetud oranžiga ja viivad täisfunktsionaalsesse professionaalsesse versiooni.

Kui prooviperiood lõpeb, tundub üleminek baaspaketile kaotusena. Hoidmise psühholoogia läbi kogemuse, mitte allahindluse.

• Plussid: prooviperiood kõikidele pakettidele; täisfunktsionaalne testimisaeg
• Miinused: keeruline toode ei pruugi prooviperioodi jooksul end avada
• Kust vaadata: 🔗 Zendesk Pricing

8. Litmus

Litmus kasutab suuri värviblokke, üks iga paketi kohta. Värvid täiendavad üksteist ega lähe vastuollu.

Kaks erinevat CTA-d: nupp üleval ja all pakkumine säästa aastapaketiga konkreetne summa. Säästu näitamine numbrina toimib paremini kui protsentides.

• Plussid: värviblokid pakettide eristamiseks; kaks semantiliselt erinevat CTA-d
• Miinused: suured blokid nõuavad palju vertikaalset ruumi
• Kust vaadata: 🔗 Litmus Pricing

9. BeanStalk

BeanStalk mängib sügavusega: vabakutselistele mõeldud kaardid on lamedad ja hallid, samas kui äriklientidele mõeldud kaardid on kolmemõõtmelised ja „kõrgendatud". Kaardi visuaalne kaal vastab hinnale ja sihtrühmale.

Pakettide nimed (Bronze, Platinum) ei kanna tähendust, kuid üksikasjalikud kirjeldused kompenseerivad selle.

• Plussid: 3D-efekt kallimate pakettide puhul; erinev „tõsidus" erinevatele sihtrühmadele
• Miinused: pakettide nimed on väheinformatiivsed; 3D ülilamedal saidil näeb välja vanamoodne
• Kust vaadata: 🔗 BeanStalk Pricing

10. Readymag

Readymag kasutab ainult kahte värvi: tumesinist ja valget. Dollarimärk on märgatavalt väiksem kui hinna number, tehnika, mis vähendab „maksmisvalu": külastajad keskenduvad numbrile, mitte kulutamise faktile. Funktsioonide kohtspikrid selgitavad valikuid ilma tabelit risustamata.

• Plussid: minimalism kuni kahe värvini; väikese valuutamärgi tehnika; tööriistavihjed tekstimüüride asemel
• Miinused: pikkades tabelites võivad kaks värvi kokku sulada
• Kust vaadata: 🔗 Readymagi hinnakiri

11. Crazyegg

Crazyegg suurendab pakette eristavaid muutujaid, muutes need ümbritsevast tekstist palju suuremaks. Külastajad ei pea erinevusi otsima; need hüppavad kohe silma.

Valitud pakett on värvitud siniseks (usaldus), nupud on rohelised (tegevus). Värvid mõjuvad psühholoogiliselt.

• Plussid: liialdatud erinevused; usaldus-sinine + tegevus-roheline
• Miinused: ainult väheste muutujatega tabelite jaoks
• Kust vaadata: 🔗 Crazyeggi hinnakiri

12. Heroku

Heroku on peaaegu täielikult ühevärviline: kõik lillades toonides, välja arvatud üks sinine laik professionaalse paketi nupul. Pilk läheb otse sinna.

Hind on ehitatud nupu SISSE, mitte selle kohale. Pakettide kirjeldused kasutavad pärimist: „Kõik tasuta paketi funktsioonid pluss…" ja nii mööda ahelat edasi.

• Plussid: ühevärviline ühe värvilise aktsendiga; hind tegevuskutse sees; astmeline pärimine
• Miinused: ühevärviline võib tunduda igav
• Kust vaadata: 🔗 Heroku hinnakiri

13. Freshbooks

Freshbooks, „hõljuv" tekst lehekülgede vahel. Enamik pakette erineb ainult klientide arvu ja hinna poolest. Vähem erinevusi, puhtam disain.

Evergreeni paketil on „kõige populaarsem" silt ja väike dollarimärk numbri suhtes, sama tehnika nagu Readymagil.

• Plussid: puhtus väheste muutujate kaudu; hõljumise efekt
• Miinused: ainult siis, kui paketid erinevad 1-2 parameetri poolest
• Kust vaadata: 🔗 Freshbooksi hinnakiri

14. Slidedeck

Slaidikomplekt muudab kõik paketid tahtlikult visuaalselt identseks; soovitatav on vaid veidi tumedam. Lisateenuse puhul pole olulised mitte värvid, vaid konkreetsete funktsioonide olemasolu. Kujundus ei tõmba tähelepanu funktsioonide loetelu uurimiselt kõrvale.

• Plussid: kujundus ei sega võrdlemist; visuaalne võrdsus sunnib lugema
• Miinused: visuaalse ankru puudumisel on lihtne ära eksida
• Kust vaadata: 🔗 Slidedeck hinnakiri

15. YepText

YepText, kõige kiiremini haaratav tabel selles kogumikus. Kolm rida, eristuvad pakettide nimed (Workin' It, The Beast, The Champ), otsus sekunditega.

Nimed peegeldavad sihtrühma, mitte formaalset taset. Emotsionaalne side ilma ühegi lisasõnata.

• Plussid: ülikiire arusaamine; eristuvad nimed
• Miinused: keeruka SaaS-i jaoks liiga vähe infot
• Kust vaadata: 🔗 YepText hinnakiri

16. BigCartel

BigCartel kasutab hinnakirja sektsiooni taustana pilte: iga pilt näitab, KELLELE pakett on mõeldud, kunstnik paari tööga, kasvav pood, tõsine äri. Sihtrühma visuaalne portree on sõnadest tugevam.

Funktsioonid kuvatakse hüpikaknas, hoides tabeli puhtana, samas kui info on vaid ühe kliki kaugusel.

• Plussid: pildid näitavad sihtrühma; peidetud detailid hüpikaknas
• Miinused: oht, et külastajad ei klõpsa; ei sobi „näost näkku" võrdluseks
• Kust vaadata: 🔗 BigCartel registreerumine

Video: konversiooni suurendav hinnakirja kujundus

DNSK Design Study analüüs sellest, kuidas „koledamad, aga selgemad" hinnakirjad konversiooni suurendasid DNSK Design Study. Kuus minutit ja saab selgeks, miks visuaalne „ilusus" sageli kahjuks tuleb:

⁉️🤔 Korduma kippuvad küsimused

Mis teeb hinnakirja „konversioonisõbralikuks"?

Kolm asja: plaanide erinevuste selgus, soovitatava variandi visuaalne rõhutamine ja hinna vaatamisel tekkiva „valu" puudumine. Konkreetsed võtted: väike valuutasümbol, hind pärast väärtuse kirjeldust, üks esiletõstetud plaan. DNSK uuring näitas, et „selged" tabelid konverteerivad märgatavalt paremini kui „ilusad" DNSK Study, 2024.

Kas ühte plaani on vaja esile tõsta kui „populaarset"?

Peaaegu alati kasulik. Külastajad saabuvad kahtlusega „millise ma peaksin valima?" ja esiletõstetud plaan lahendab selle. Erandiks on olukord, kus plaanid jagunevad selgelt sihtrühmade kaupa, nagu Dropboxil: isiklik / meeskond / ettevõte. Siis on parem jagada visuaalselt, mitte esiletõstmise teel.

Kui palju plaane on optimaalne?

Kolm või neli. Kolm on klassikaline: baas / populaarne / edasijõudnutele. Neli, kui on olemas ettevõtete segment. Viis või enam riskib „valikuhalvatusega". 16 näitest kasutab enamik 3-4 plaani.

Millised CTA-nuppude värvid toimivad kõige paremini?

Roheline („mine") ja oranž („tegutse kohe"). Sinine usalduselementide jaoks. Punasega ettevaatlikult: see tõmbab tähelepanu, kuid mõjub kui „oht". Peamine reegel: CTA-nupp peaks olema lehel AINUS seda värvi element.

Kas hinda peaks kohe näitama või peitma selle „võta ühendust" taha?

Iseteeninduse puhul näidake seda kohe ja läbipaistvalt. Peidetud hinnad ärritavad. Ettevõtetele mõeldud kohandatud hinnastamise puhul andke vihje („alates $X") ja täpne number läbi kontakti. Näide: Heroku kogumikus.

Millise hinnakujundustabeli kujundusviisi peaksite valima?

16 näidet on seljataga. Nüüd peamine: mida oma projektis rakendada.

Kui teil on 3-4 selgete erinevustega plaani, kasutage Freshbooksi või Readymagi lähenemist: minimaalselt värve, rõhk 1-2 muutujal, väike valuutasümbol. Toimib enamiku SaaS-ide puhul.

Kui plaanid erinevad oluliselt funktsioonide poolest, kasutage maatriksit nagu Plugmatter või Wufoo: funktsioonid vasakul, plaanid paremal, linnukesed ristumiskohtades. Erinevused on nähtavad sekunditega.

Kui teil on selged sihtrühmade segmendid, kasutage Dropboxi või BeanStalki lähenemist: erinevad kaardid erinevatele sihtrühmadele, visuaalselt eraldatud, eristavate piltidega.

Kui toode on keeruline ja vajab proovimist, kasutage Zendeski mudelit: tasuta täisfunktsionaalne prooviperiood kõikidele plaanidele. Laske neil proovida professionaalset versiooni; üleminek baasversioonile tundub kaotusena.

Ja selle kogumiku peamine õppetund: hinnakujundustabeli kujundus ei seisne „ilusas". See seisneb selles, et „kohe on selge, milline plaan võtta". Tehke seda ja konversioon räägib enda eest.