En pristabell, inte en prislista. Det här är punkten där en besökare bestämmer sig för att betala eller lämna. Utformningen av den här punkten leder antingen mot handling eller begraver konverteringen.

Det handlar inte om flashiga knappar. Det handlar om hur struktur, visuell hierarki och prissättningspsykologi samverkar. En teknik, och sidan fungerar. En annan, och besökaren lämnar.

Här nedan finns 16 exempel från Dropbox till BigCartel med analys: varför deras tabeller är minnesvärda och vilka tekniker som fungerar.

💡 Snabb översikt:

• Gå igenom exemplen och lägg märke till återkommande mönster
• Kolla jämförelsetabellen och välj en lämplig approach
• Använd teknikmatrisen från det sista avsnittet

Jämförelsetabell: 16 sätt att designa pristabeller

1. Dropbox

Dropbox plans-sida, ett av de renaste exemplen. Tre kort, beskrivande paketbilder, separation av "personal" och "teams" med en tunn linje, inte färg.

Istället för funktionsikoner, kontextuella illustrationer. Teamkortet visar samarbete; det personliga visar organiserade filer. Bakgrunden smälter in i sidan, så besökare jämför planer istället för att kämpa mot designen.

• Fördelar: illustrationer istället för ikoner; separation med linje, inte färg; bakgrundsintegrering
• Nackdelar: med många funktioner kan minimalism underleverera information
• Var du ska titta: 🔗 Dropbox Plans

2. Wufoo

Wufoo använder en helfärgsmatris med en månad/år-växling via reglage. Funktioner visas genom jämförelse: den fullständiga listan endast i den populära Bonafide-planen, medan vänster och höger visar gröna bockmarkeringar bredvid tillgängliga delar.

CTA-knappar överst och underst. För sidor som skrollar är detta avgörande. Skrollade du ner för att studera funktioner? Knappen väntar redan.

• Fördelar: matris med reglage; funktionsjämförelse via populär plan; CTA överst och underst
• Nackdelar: överbelastad med färg, kan se rörig ut på mobilen
• Var du ska titta: 🔗 Wufoo Pricing

3. Freshdesk

Freshdesk lägger till ett animerat element: den populära planen markeras med en svävande varmluftsballong-GIF, den enda rörelsen på en statisk sida. Ögonen dras dit direkt.

Det "växande grönska"-temat löper genom allt: paketbilder, funktionsikoner, knappar, gröna nyanser. Besökare associerar omedvetet grönt med handling.

• Fördelar: animation fokuserar på populär plan; konsekvent färgtema
• Nackdelar: GIF kan distrahera vid upprepade besök
• Var du ska titta: 🔗 Freshdesk Pricing

4. Plugmatter

Plugmatters eget exempel: en matris i rött och vitt som matchar varumärket. Funktioner till vänster, planer till höger, mittplanen "framhävd" genom ljusstyrka, inte en ny färg.

Samma design finns som mall i deras pristabell-plugin, ett sällsynt fall av att "äta sin egen hundmat" i praktiken.

• Fördelar: strikt varumärkesstil; mitten framhävd genom ljusstyrka; designen är samtidigt produktdemo
• Nackdelar: högkontrastrött är inte universellt
• Var du kan titta: 🔗 Plugmatter

5. Pulse

Pulse bevisar att mindre text tillåter djärvare design. Rymlig layout, stor knapp, minimala beskrivningar. Den populära planen i mitten har en mörkare bakgrund och ljusare knapp, med en "Great Value"-tagg ovanför.

• Fördelar: rymlig layout ger andrum; tagg för värdeerbjudande
• Nackdelar: för komplexa produkter kan det bli för mycket tom yta
• Var du kan titta: 🔗 Pulse Pricing

6. Mailchimp

Mailchimp skapade en dynamisk "Recommended"-tagg: flytta reglaget för antal prenumeranter, så ändras den rekommenderade planen. Besökare behöver inte gissa vad de ska välja.

Priset visas efter funktionsbeskrivningen, så att besökare utvärderar värdet innan de ser siffran.

• Fördelar: dynamisk tagg baserad på behov; pris efter värde
• Nackdelar: på små skärmar kan reglaget vara opraktiskt
• Var du kan titta: 🔗 Mailchimp Pricing

7. Zendesk

Zendesk erbjuder en gratis provperiod för ALLA paket, inte bara det grundläggande. "Try"-knappar är markerade i orange och leder till en fullt fungerande professionell version.

När provperioden tar slut kommer nedgraderingen till grundplanen att kännas som en förlust. Behållningspsykologi genom upplevelse, inte genom rabatt.

• Fördelar: testperiod för alla abonnemang; fullfjädrad testperiod
• Nackdelar: komplex produkt kanske inte visar sitt fulla värde under testperioden
• Hitta hit: 🔗 Zendesk prissättning

8. Litmus

Litmus använder stora färgblock, ett per abonnemang. Färgerna kompletterar varandra och skär sig inte.

Två olika CTA:er: en knapp högst upp, och längst ner ett erbjudande om att spara ett specifikt belopp på årsabonnemanget. Besparingar i kronor fungerar bättre än procent.

• Fördelar: färgblock för att särskilja abonnemang; två semantiskt olika CTA:er
• Nackdelar: stora block kräver mycket vertikalt utrymme
• Hitta hit: 🔗 Litmus prissättning

9. BeanStalk

BeanStalk leker med djup: korten för frilansare är platta och grå, medan korten för företag är tredimensionella och "upphöjda". Kortets visuella tyngd matchar priset och målgruppen.

Paketnamnen (Brons, Platina) säger inget i sig, men detaljerade beskrivningar kompenserar för det.

• Fördelar: 3D-effekt för dyrare abonnemang; olika "allvar" för olika målgrupper
• Nackdelar: abonnemangsnamnen är ointetsägande; 3D på en ultraplatt sajt ser daterat ut
• Hitta hit: 🔗 BeanStalk prissättning

10. Readymag

Readymag använder bara två färger: mörkblått och vitt. Dollartecknet är märkbart mindre än prissiffran, en teknik som minskar "betalningssmärtan": besökare fokuserar på siffran, inte på själva spenderandet. Tooltips på funktioner förklarar alternativ utan att belamra tabellen.

• Fördelar: minimalism ner till två färger; smart teknik med liten valutasymbol; tooltips i stället för textväggar
• Nackdelar: i långa tabeller kan två färger flyta ihop
• Var du kan titta: 🔗 Readymag-prissättning

11. Crazyegg

Crazyegg förstorar variablerna som skiljer planerna åt, så att de blir mycket större än den omgivande texten. Besökarna behöver inte leta efter skillnaderna; de hoppar fram direkt.

Den valda planen är färgad blå (förtroende), knapparna är gröna (handling). Färger arbetar med psykologi.

• Fördelar: överdrivna skillnader; förtroende-blå + handling-grön
• Nackdelar: bara för tabeller med få variabler
• Var du kan titta: 🔗 Crazyegg Pricing

12. Heroku

Heroku är nästan helt monokromt: allt i nyanser av lila, förutom en enda blå fläck på knappen för den professionella planen. Ögat går direkt dit.

Priset är byggt INUTI knappen, inte ovanför den. Planbeskrivningarna använder arv: "Alla funktioner i gratisplanen plus…," och så vidare ner genom kedjan.

• Fördelar: monokromt med en färgaccent; pris inuti CTA; kaskadarv
• Nackdelar: monokromt kan verka tråkigt
• Var du kan titta: 🔗 Heroku Pricing

13. Freshbooks

Freshbooks, "svävande" text mellan sidorna. De flesta planer skiljer sig bara åt i antal kunder och pris. Färre skillnader, renare design.

Evergreen-planen har en "mest populär"-tagg och ett litet dollartecken i förhållande till siffran, samma teknik som Readymag.

• Fördelar: renhet genom få variabler; svävande effekt
• Nackdelar: bara när planer skiljer sig åt med 1-2 parametrar
• Var du kan titta: 🔗 Freshbooks Pricing

14. Slidedeck

Slidedeck gör medvetet alla planer visuellt identiska; den rekommenderade är bara aningen mörkare. För ett tillägg är det inte färgerna som spelar roll utan tillgången till specifika funktioner. Designen distraherar inte från att studera funktionslistan.

• Fördelar: designen stör inte jämförelsen; visuell likhet tvingar fram läsning
• Nackdelar: utan visuellt ankare är det lätt att tappa bort sig
• Titta här: 🔗 Slidedeck Pricing

15. YepText

YepText, den snabbaste tabellen att greppa i samlingen. Tre rader, särpräglade paketnamn (Workin' It, The Beast, The Champ), beslut på sekunder.

Namnen speglar målgruppen, inte en formell nivå. Känslomässig koppling utan ett enda extra ord.

• Fördelar: ultrasnabb förståelse; särpräglade namn
• Nackdelar: för komplex SaaS, för lite information
• Titta här: 🔗 YepText Pricing

16. BigCartel

BigCartel använder bilder som bakgrund i prissektionen: varje bild visar VEM planen är till för, en konstnär med ett par verk, en växande butik, en seriös verksamhet. Ett visuellt porträtt av målgruppen är starkare än ord.

Funktioner visas i en popup, vilket håller tabellen ren medan informationen finns ett klick bort.

• Fördelar: bilder visar målgruppen; dolda detaljer i popup
• Nackdelar: risk att besökare inte klickar; inte för jämförelse "ansikte mot ansikte"
• Titta här: 🔗 BigCartel Signup

Video: pristabellsdesign som ökar konvertering

Genomgång från DNSK Design Study om hur "fulare men tydligare" pristabeller ökade konvertering DNSK Design Study. Sex minuter, och det blir tydligt varför visuell "snygghet" ofta stjälper:

⁉️🤔 Vanliga frågor

Vad gör en pristabell "konverteringsvänlig"?

Tre saker: tydliga skillnader mellan planerna, visuell betoning på det rekommenderade alternativet och frånvaro av "smärta" när man tittar på priset. Specifika tekniker: litet valutatecken, pris efter värdebeskrivning, en markerad plan. DNSK-studien visade att "tydliga" tabeller konverterar märkbart bättre än "snygga" DNSK Study, 2024.

Är det nödvändigt att markera en plan som "populär"?

Nästan alltid användbart. Besökare kommer med tvivlet "vilken ska jag välja?", och den markerade planen löser det. Undantaget är när planerna tydligt delas upp efter målgrupp, som hos Dropbox: personlig / team / företag. Då är det bättre att dela upp visuellt istället för att markera.

Hur många planer är optimalt?

Tre eller fyra. Tre är den klassiska: basic / populär / avancerad. Fyra om det finns ett företagssegment. Fem eller fler riskerar "valförlamning." Av de 16 exemplen använder de flesta 3-4 planer.

Vilka färger för CTA-knappar fungerar bäst?

Grön ("kör") och orange ("agera nu"). Blå för förtroendeelement. Röd med försiktighet: den fångar uppmärksamhet men signalerar "fara." Huvudregeln: CTA-knappen ska vara det ENDA elementet med den färgen på sidan.

Ska man visa priset direkt eller dölja det bakom "kontakta oss"?

För självbetjäning, visa det direkt och transparent. Dolda priser irriterar. För företag med anpassad prissättning, ge en indikation ("från X kr") och ange det exakta priset via kontakt. Exempel: Heroku i samlingen.

Vilken strategi för pristabellsdesign ska du välja?

16 exempel bakom oss. Nu det viktigaste: vad du ska tillämpa på ditt projekt.

Om du har 3-4 planer med tydliga skillnader, ta Freshbooks- eller Readymag-metoden: minimalt med färger, betoning på 1-2 variabler, litet valutatecken. Fungerar för de flesta SaaS.

Om planerna skiljer sig markant i funktioner, använd en matris som Plugmatter eller Wufoo: funktioner till vänster, planer till höger, bockar i skärningspunkterna. Skillnader synliga på sekunder.

Om du har tydliga målgruppssegment, ta Dropbox- eller BeanStalk-metoden: olika kort för olika målgrupper, visuellt åtskilda, med särskiljande bilder.

Om produkten är komplex och behöver en testperiod, använd Zendesk-modellen: gratis fullfjädrad testperiod för alla planer. Låt dem prova den professionella versionen; nedgraderingen till basic kommer att kännas som en förlust.

Och den främsta lärdomen från den här samlingen: pristabellsdesign handlar inte om "snyggt." Det handlar om "omedelbart tydligt vilken plan man ska ta." Gör det, så kommer konverteringen att tala för sig själv.