En pristabell, ikke en prisliste. Dette er punktet der en besøkende bestemmer seg for å betale eller forlate siden. Utformingen av dette punktet dytter enten mot handling eller begraver konverteringen.

Det handler ikke om prangende knapper. Det handler om hvordan struktur, visuelt hierarki og prissettingspsykologi spiller sammen. Én teknikk, og siden fungerer. En annen, og den besøkende forlater siden.

Nedenfor finner du 16 eksempler fra Dropbox til BigCartel med analyse: hvorfor tabellene deres er minneverdige og hvilke teknikker som fungerer.

💡 Rask oversikt:

• Gå gjennom eksemplene og legg merke til gjentakende mønstre
• Sjekk sammenligningstabellen og velg en passende tilnærming
• Bruk teknikkmatrisen fra den siste delen

Sammenligningstabell: 16 tilnærminger til utforming av pristabeller

1. Dropbox

Dropbox' abonnementsside, et av de reneste eksemplene. Tre kort, beskrivende pakkeillustrasjoner, skille mellom "personlig" og "team" med en tynn strek, ikke farge.

Kontekstuelle illustrasjoner i stedet for funksjonsikoner. Teamkortet viser samarbeid; det personlige viser organiserte filer. Bakgrunnen glir inn i siden, slik at besøkende sammenligner abonnementer i stedet for å kjempe mot designet.

• Fordeler: illustrasjoner i stedet for ikoner; skille med strek, ikke farge; bakgrunnsintegrasjon
• Ulemper: med mange funksjoner kan minimalisme underlevere informasjon
• Hvor du bør se: 🔗 Dropbox-abonnementer

2. Wufoo

Wufoo bruker en fullfarget matrise med en måned/år-veksler via bryter. Funksjoner vises gjennom sammenligning: hele listen kun i det populære Bonafide-abonnementet, mens venstre og høyre side viser grønne haker ved siden av tilgjengelige elementer.

CTA-knapper øverst og nederst. For sider som skroller, er dette kritisk. Har du skrollet ned for å studere funksjoner? Da venter knappen allerede.

• Fordeler: matrise med bryter; funksjonssammenligning gjennom populært abonnement; CTA øverst og nederst
• Ulemper: overlesset med farger, kan se rotete ut på mobil
• Hvor du bør se: 🔗 Wufoo-priser

3. Freshdesk

Freshdesk legger til et animert element: det populære abonnementet er merket med en svevende varmluftsballong-GIF, den eneste bevegelsen på en statisk side. Blikket trekkes dit umiddelbart.

Temaet "voksende grønt" går igjen overalt: pakkebilder, funksjonsikoner, knapper, grønne nyanser. Besøkende assosierer ubevisst grønt med handling.

• Fordeler: animasjon retter fokus mot populært abonnement; gjennomgående fargetema
• Ulemper: GIF kan virke distraherende ved gjentatte besøk
• Hvor du bør se: 🔗 Freshdesk-priser

4. Plugmatter

Plugmatter sitt eget eksempel: en matrise i rødt og hvitt som matcher merkevaren. Funksjoner til venstre, planer til høyre, midtplanen «uthevet» ved hjelp av lysstyrke, ikke en ny farge.

Det samme designet er tilgjengelig som en mal i deres pristabell-plugin, et sjeldent tilfelle av «å spise sin egen hundemat» i praksis.

• Fordeler: streng merkestil; midten uthevet ved lysstyrke; designet fungerer som produktdemo
• Ulemper: høy kontrast med rødt er ikke universelt
• Hvor du kan se: 🔗 Plugmatter

5. Pulse

Pulse beviser at mindre tekst gir rom for dristigere design. Romlig layout, stor knapp, minimale beskrivelser. Den populære planen i midten har mørkere bakgrunn og lysere knapp, med en «Great Value»-etikett over.

• Fordeler: romlig layout gir pusterom; verdiforslagsetikett
• Ulemper: for komplekse produkter kan det bli for mye luft
• Hvor du kan se: 🔗 Pulse Pricing

6. Mailchimp

Mailchimp laget en dynamisk «Anbefalt»-etikett: flytt skyveknappen for antall abonnenter, så endres den anbefalte planen. Besøkende slipper å gjette hva de skal velge.

Pris vises etter funksjonsbeskrivelsen, slik at besøkende vurderer verdi før de ser tallet.

• Fordeler: dynamisk etikett basert på behov; pris etter verdi
• Ulemper: på små skjermer kan skyveknappen være upraktisk
• Hvor du kan se: 🔗 Mailchimp Pricing

7. Zendesk

Zendesk tilbyr gratis prøveperiode for ALLE pakker, ikke bare den grunnleggende. «Prøv»-knapper er uthevet i oransje og leder til en fullt funksjonell profesjonell versjon.

Når prøveperioden utløper, vil nedgraderingen til grunnpakken føles som et tap. Retensjonspsykologi gjennom erfaring, ikke gjennom rabatt.

• Fordeler: prøveperiode for alle abonnementer; fullverdig testperiode
• Ulemper: komplekst produkt kommer kanskje ikke til sin rett i prøveperioden
• Hvor du kan se: 🔗 Zendesk-priser

8. Litmus

Litmus bruker store fargeblokker, én per abonnement. Fargene utfyller hverandre og krasjer ikke.

To ulike CTA-er: en knapp øverst, og nederst et tilbud om å spare et konkret beløp på årsabonnementet. Besparelse oppgitt som tall fungerer bedre enn prosenter.

• Fordeler: fargeblokker for å skille abonnementene; to semantisk ulike CTA-er
• Ulemper: store blokker krever mye vertikal plass
• Hvor du kan se: 🔗 Litmus-priser

9. BeanStalk

BeanStalk leker med dybde: kort for frilansere er flate og grå, mens kort for bedrifter er tredimensjonale og «hevet». Kortets visuelle tyngde samsvarer med pris og målgruppe.

Pakkenavn (Bronze, Platinum) har ikke noe meningsinnhold, men detaljerte beskrivelser kompenserer for det.

• Fordeler: 3D-effekt for dyre abonnementer; ulik «seriøsitet» for ulike målgrupper
• Ulemper: abonnementsnavnene er lite informative; 3D på et ultraflatt nettsted ser gammeldags ut
• Hvor du kan se: 🔗 BeanStalk-priser

10. Readymag

Readymag bruker bare to farger: mørk blå og hvit. Dollartegnet er merkbart mindre enn pristallet, en teknikk som reduserer «betalingssmerte»: besøkende fokuserer på tallet, ikke på det faktum at de bruker penger. Verktøytips på funksjoner forklarer alternativer uten å rote til tabellen.

• Fordeler: minimalisme ned til to farger; teknikk med lite valutategn; verktøytips i stedet for tekstvegger
• Ulemper: på lange tabeller kan to farger flyte sammen
• Hvor du kan se: 🔗 Readymag-priser

11. Crazyegg

Crazyegg forstørrer variablene som skiller planene, og gjør dem mye større enn teksten rundt. Besøkende slipper å lete etter forskjeller; de hopper frem umiddelbart.

Den valgte planen er farget blå (tillit), knappene er grønne (handling). Farger spiller på psykologi.

• Fordeler: overdrevne forskjeller; tillit-blå + handling-grønn
• Ulemper: kun for tabeller med få variabler
• Hvor du kan se: 🔗 Crazyegg-priser

12. Heroku

Heroku er nesten helt monokromt: alt i nyanser av lilla, bortsett fra en enkelt blå flekk på knappen for profesjonell plan. Øyet går rett dit.

Prisen er bygget INNI knappen, ikke over den. Planbeskrivelsene bruker arv: «Alle funksjonene i gratisplanen pluss…», og så videre nedover i kjeden.

• Fordeler: monokromt med én fargeaksent; pris inne i CTA; kaskadearv
• Ulemper: monokromt kan virke kjedelig
• Hvor du kan se: 🔗 Heroku-priser

13. Freshbooks

Freshbooks, «svevende» tekst mellom sidene. De fleste planene skiller seg bare i antall kunder og pris. Færre forskjeller, renere design.

Evergreen-planen har en «mest populær»-etikett og et lite dollartegn i forhold til tallet, samme teknikk som Readymag.

• Fordeler: renhet gjennom få variabler; svevende effekt
• Ulemper: kun når planer skiller seg med 1-2 parametere
• Hvor du kan se: 🔗 Freshbooks-priser

14. Slidedeck

Slidedeck gjør med vilje alle planer visuelt identiske; den anbefalte er bare litt mørkere. For et tillegg er det ikke farger som betyr noe, men tilgjengeligheten av spesifikke funksjoner. Designet distraherer ikke fra å studere funksjonslisten.

• Fordeler: designet forstyrrer ikke sammenligningen; visuell likhet tvinger frem lesing
• Ulemper: uten et visuelt anker er det lett å miste oversikten
• Hvor du kan se: 🔗 Slidedeck-priser

15. YepText

YepText, den raskeste tabellen å forstå i samlingen. Tre rader, særpregede pakkenavn (Workin' It, The Beast, The Champ), avgjørelse på sekunder.

Navnene gjenspeiler målgruppen, ikke et formelt nivå. Emosjonell tilknytning uten ett eneste ekstra ord.

• Fordeler: ultrarask forståelse; særpregede navn
• Ulemper: for kompleks SaaS, for lite informasjon
• Hvor du kan se: 🔗 YepText-priser

16. BigCartel

BigCartel bruker bilder som bakgrunn for prisseksjonen: hvert bilde viser HVEM planen er for, en kunstner med et par verk, en voksende butikk, en seriøs virksomhet. Et visuelt portrett av målgruppen er sterkere enn ord.

Funksjoner vises i en popup, noe som holder tabellen ren samtidig som informasjon er ett klikk unna.

• Fordeler: bilder viser målgruppen; skjulte detaljer i popup
• Ulemper: risiko for at besøkende ikke klikker; ikke for «ansikt til ansikt»-sammenligning
• Hvor du kan se: 🔗 BigCartel-registrering

Video: pristabelldesign som øker konvertering

Gjennomgang fra DNSK Design Study om hvordan «styggere, men tydeligere» pristabeller økte konvertering DNSK Design Study. Seks minutter, og det blir klart hvorfor visuell «penhet» ofte skader:

⁉️🤔 Ofte stilte spørsmål

Hva gjør en pristabell «konverteringsvennlig»?

Tre ting: tydelige forskjeller mellom planene, visuell fremheving av det anbefalte alternativet og fravær av «smerte» når man ser prisen. Konkrete teknikker: lite valutasymbol, pris etter verdibeskrivelse, én uthevet plan. DNSK-studien viste at «tydelige» tabeller konverterer merkbart bedre enn «pene» DNSK Study, 2024.

Er det nødvendig å fremheve én plan som «populær»?

Nesten alltid nyttig. Besøkende kommer med tvilen «hvilken bør jeg velge?», og den uthevede planen løser den. Unntaket er når planene tydelig deler seg etter målgruppe, slik som hos Dropbox: personlig / team / bedrift. Da er det bedre å dele visuelt i stedet for ved å fremheve.

Hvor mange planer er optimalt?

Tre eller fire. Tre er klassikeren: basis / populær / avansert. Fire hvis det finnes et bedriftssegment. Fem eller flere risikerer «valgparalyse». Av de 16 eksemplene bruker de fleste 3-4 planer.

Hvilke farger på CTA-knapper fungerer best?

Grønn («kjør») og oransje («handle nå»). Blått for tillitselementer. Rødt med forsiktighet: det fanger oppmerksomhet, men leses som «fare». Hovedregelen: CTA-knappen bør være det ENESTE elementet med den fargen på siden.

Bør du vise prisen umiddelbart eller skjule den bak «kontakt oss»?

For selvbetjening, vis den umiddelbart og transparent. Skjulte priser irriterer. For bedrift med tilpasset prising, gi et hint («fra X kr») og oppgi det eksakte beløpet gjennom kontakt. Eksempel: Heroku i samlingen.

Hvilken tilnærming til pristabell-design bør du velge?

16 eksempler bak oss. Nå det viktigste: hva du skal bruke i ditt prosjekt.

Hvis du har 3-4 planer med tydelige forskjeller, bruk Freshbooks- eller Readymag-tilnærmingen: minimale farger, vekt på 1-2 variabler, lite valutasymbol. Fungerer for de fleste SaaS.

Hvis planene skiller seg betydelig på funksjoner, bruk en matrise som Plugmatter eller Wufoo: funksjoner til venstre, planer til høyre, haker i skjæringspunktene. Forskjeller synlige på sekunder.

Hvis du har tydelige målgruppesegmenter, bruk Dropbox- eller BeanStalk-tilnærmingen: forskjellige kort for ulike målgrupper, visuelt adskilt, med særpregede bilder.

Hvis produktet er komplekst og trenger en prøveperiode, bruk Zendesk-modellen: gratis fullverdig prøveperiode for alle planer. La dem prøve profesjonell-versjonen; nedgraderingen til basis vil føles som et tap.

Og hovedlærdommen fra denne samlingen: pristabell-design handler ikke om «pent». Det handler om «umiddelbart tydelig hvilken plan man skal ta». Gjør det, så vil konverteringen tale for seg selv.