Come progettare tabelle prezzi chiare

Una tabella prezzi utile permette di rispondere a tre domande senza calcolatrice né un’altra scheda del browser: quale piano si adatta al mio lavoro? Quanto pagherò davvero? Cosa succede se lo scelgo?

Sembra semplice finché inserisci i dettagli reali del prodotto nel layout. Un piano include cinque editor, un altro si paga per editor, l’annualità appare come equivalente mensile e la funzione decisiva è sepolta sotto dodici spunte identiche. Le schede possono essere curate mentre la decisione resta difficile.

Gli esempi usano Fieldnote, un servizio collaborativo fittizio.

Definisci la scelta prima delle schede

Scrivi in una frase la decisione che ti aspetti dal visitatore. Per Fieldnote: scegliere un piano per lo spazio di lavoro di un ricercatore indipendente, un piccolo team di progetto o un’organizzazione che richiede amministrazione centrale.

Sono esigenze operative diverse e punti di partenza più utili dell’idea che ogni pagina prezzi richieda tre colonne. Un prodotto con un solo pacchetto a pagamento può aver bisogno di spiegare il prezzo anziché confrontarlo. Un servizio con prodotti separati può richiedere un selettore iniziale. Affiancare acquisti fondamentalmente diversi può farli sembrare intercambiabili quando non lo sono.

Chiedi al responsabile di prodotto quali fatti cambino davvero la scelta. Nell’esempio contano progetti attivi, editor inclusi, accesso ospiti e amministrazione. Anche lo storage varia, ma difficilmente determinerà la prima decisione del pubblico previsto. La distinzione ordina la pagina: prima aiutare il lettore a capire quale piano risponda alle sue esigenze, poi esporre i dettagli necessari per verificarlo.

Mantieni una piccola scheda dei fatti fuori dal design. Registra per ogni piano nome, pubblico, unità di fatturazione, quantità inclusa, limite, condizione di upgrade e percorso d’acquisto. Se la fonte lascia una voce indecisa, segnala che è indecisa. Un mockup attraente è un posto particolarmente sbagliato per fissare accidentalmente una politica commerciale mancante.

La scheda protegge dalle revisioni incoerenti. Se cambia il numero di editor inclusi, sintesi, riga di confronto, calcolatore e FAQ potrebbero richiedere aggiornamenti. Trattali come viste di un unico fatto, non come testi indipendenti che contengono casualmente lo stesso numero.

Tabelle prezzi: prima selezionare, poi confrontare

Le schede dei piani e la matrice delle funzioni svolgono lavori diversi. Le schede aiutano a formare una rosa; la matrice verifica la rosa rispetto a requisiti specifici. Cercare di inserire ogni dettaglio nelle schede genera colonne lunghe con differenze difficili da trovare.

Figma distingue presentazioni concise dei piani e una tabella di confronto completa, e raccomanda unità di fatturazione esplicite vicino al prezzo. È una base utile per questa struttura. Guida Figma alle pagine prezzi.

Per Fieldnote, Solo potrebbe descrivere progetti indipendenti e mostrare prezzo, limite dei progetti attivi e accesso ospiti. Team potrebbe presentare ricerca condivisa, poi prezzo, editor inclusi e capacità comune. Organization potrebbe spiegare amministrazione centrale e acquisto tramite vendite. Non serve forzare una cifra pubblica inventata nell’ultima scheda se il modello richiede un preventivo.

Mantieni coerente l’ordine delle informazioni anche quando cambiano i valori. Se una scheda mette i termini sotto il pulsante e un’altra vicino al prezzo, il lettore deve cercare la relazione. L’allineamento diventa spiegazione: stessa posizione, stesso tipo d’informazione.

Leggi GitHub in due passaggi

La pagina prezzi GitHub offre un esempio reale della distinzione tra sintesi e confronto dettagliato. L’area piani stabilisce scelte e percorsi d’acquisto; il confronto delle funzioni sotto offre un’altra profondità. I prezzi catturati illustrano la struttura: consulta la pagina live per le condizioni attuali.

Esamina le due aree con domande diverse. Nella sintesi identifichi un’opzione plausibile per il team? Nella matrice puoi verificare il requisito che la escluderebbe? La divisione serve perché scheda introduttiva e verifica d’acquisto non hanno la stessa densità. Una scheda con tutte le righe della matrice smette di essere una sintesi.

Chiedi a un possibile acquirente di scegliere il piano adatto e spiegare l’impegno: le risposte verificano ciò che comunica il layout.

Calcola il conto effettivamente scelto

Per un esempio separato per posto, immagina SeatMeter, un servizio fittizio con 12 $ per editor al mese, fatturati annualmente, minimo cinque editor. Tre persone non devono necessariamente 36 $ ogni mese. Con questi termini l’impegno minimo annuo è 12 $ × 5 × 12 = 720 $.

Qui il design dei prezzi spesso fallisce anche con ogni numero corretto. La gerarchia rende memorabile l’equivalente mensile e quasi invisibile il pagamento effettivo. Chiedi quale addebito ci si aspetta oggi. Se rispondono con la tariffa anziché il conto, ingrandire la tariffa non risolve l’equivoco.

Non lasciare che un badge di risparmio oscuri la base. Se l’annualità risparmia il venti percento rispetto a dodici pagamenti mensili, dichiara quale tariffa mensile è usata. Se la promozione vale solo per il primo periodo, mantieni la condizione vicina all’importo. Un badge dall’aspetto permanente su un’offerta temporanea crea aspettative che una nota potrebbe non annullare.

La stessa disciplina vale per la capacità inclusa. «Cinque editor inclusi» e «minimo cinque editor pagati» possono dare la stessa dimensione iniziale del team descrivendo regole commerciali diverse. Registra la regola reale nella scheda fatti e mantieni quel significato in scheda, matrice e passaggio al checkout.

Il prezzo per spazio si calcola diversamente

Mantieni insieme importo, valuta, unità di fatturazione e impegno. Negli abbonamenti annuali presentati con equivalente mensile, il totale annuo appartiene allo stesso gruppo visivo.

Supponi che Fieldnote Team costi 30 $ per spazio al mese con fatturazione mensile. L’offerta annuale separata per spazio costa 288 $ l’anno, equivalenti a 24 $ al mese. Una scheda annuale chiara può evidenziare l’equivalente e spiegare subito che si fatturano 288 $ annualmente. Il visitatore non dovrebbe dover dedurre se siano disponibili dodici pagamenti da 24 $.

La distinzione fra prezzo per spazio e per posto richiede la stessa cura. «24 $ al mese» è incompleto se sei persone pagheranno sei volte tanto. Mostra se comprende un numero fisso di editor, si applica a ciascuno o parte da una quantità minima. L’ipotesi quantitativa va vicino al prezzo, non in un tooltip lontano.

Quando il prezzo dipende dall’utilizzo, spiega le condizioni prima di aggiungere un calcolatore. Senza una base di calcolo visibile, il calcolatore può far sembrare preciso un prezzo ancora incerto. Dichiara quale utilizzo è incluso, cosa fa scattare un addebito aggiuntivo e se la stima comprende eventuali opzioni. Se non esiste una tariffa stabile su cui basare il calcolo, spiega invece quali informazioni servono al team commerciale.

Non mescolare unità diverse nella stessa riga. «10» e «Illimitato» restano ambigui finché non si dice cosa si conti e per quale periodo. «Progetti attivi» differisce da «Progetti creati al mese». La distinzione può cambiare l’acquisto anche con numeri identici.

Il selettore cambia i termini, non solo la cifra

Passare da mensile ad annuale dovrebbe aggiornare insieme ogni fatto coinvolto. È più di un’animazione sulla cifra principale. Totale annuo, spiegazione del risparmio, formulazione dell’impegno e destinazione d’acquisto devono restare coerenti con lo stato scelto.

Nel caso Fieldnote, dodici mesi con pagamento mensile costano 360 $, l’annualità 288 $. La differenza è 72 $, il venti percento del totale mensile. Se mostri il risparmio, mantienine chiara la base. Confrontare l’anno scontato con un’altra tariffa promozionale racconterebbe una storia diversa.

La scelta attiva richiede etichetta e stato inequivoci. Due parole vicino a un piccolo interruttore possono lasciare incerti se la sinistra descriva il valore corrente o l’alternativa. Un controllo segmentato con opzione visibilmente selezionata è spesso più facile da spiegare nel prototipo. Qualunque trattamento scegli, lo stato selezionato deve restare chiaramente riconoscibile anche durante l’uso della tastiera e non deve dipendere soltanto dal colore.

Cambia il controllo guardando un piano più in basso. Si capisce ancora il periodo applicato? Un’etichetta di fatturazione ripetuta vicino a un lungo confronto può servire più di un controllo sparito in alto. La ripetizione è giustificata quando conserva il contesto del prezzo.

Decidi anche cosa resta stabile. Ordine dei piani e limiti non dovrebbero cambiare solo perché varia la frequenza, a meno che cambi davvero l’offerta. Una riorganizzazione inattesa rende difficile confrontare gli stati e può sembrare un cambiamento del servizio sotto gli occhi del lettore.

Righe confrontabili onestamente

Ogni riga dovrebbe fare una domanda e rispondere per ogni piano. La capacità dei progetti può essere un numero, l’accesso ospiti «Incluso» o «Non incluso». Il supporto richiede una descrizione se un piano offre email e un altro un referente. Una sola spunta non esprime queste differenze.

Usa stessa unità e precisione lungo la riga. Se Solo dice «Tre progetti attivi», non scrivere «Molto spazio per crescere» in Team: evita proprio il confronto che la tabella deve consentire. Promozione nelle spiegazioni, limite reale nella cella.

Distingui assenza e incertezza. Un trattino può significare non disponibile, non applicabile, non dichiarato o zero. Usa parole esplicite quando conta. Per un simbolo compatto, chiarisci il significato e rendilo disponibile alle tecnologie assistive. Un acquirente non dovrebbe indovinare se una cella vuota sia limite o errore di pubblicazione.

Mantieni stabili anche i nomi. Chiamare la stessa capacità «Cartelle condivise» nel primo piano e «Spazi collaborativi» nel secondo può creare un upgrade apparente inesistente. Se cambia davvero, descrivi più membri, storia più lunga, permessi diversi o un diverso impegno di servizio.

Raggruppa le righe per domande riconoscibili. Fieldnote può usare lavoro di progetto, collaborazione e amministrazione. I gruppi aiutano a trovare risposte, non riproducono le responsabilità interne del team. Se l’acquirente pensa alla condivisione dell’accesso, rendi evidente il percorso anche con più team tecnici proprietari delle funzioni.

Usa con cautela «Tutto dal piano precedente». Accorcia, ma costringe a guardare altrove per capire il livello superiore. Può andare in un riepilogo breve. Nella matrice, ripetere il valore reale è di solito più utile perché ogni riga resta confrontabile da sola.

Una raccomandazione con un motivo

Il piano evidenziato dovrebbe spiegare a chi è adatto e perché. «Per team che condividono ricerca tra progetti» offre un motivo per considerare Fieldnote Team. «Miglior rapporto qualità-prezzo» chiede di accettare un giudizio senza base. «Più popolare» è un’affermazione fattuale che richiede prove, non un sostituto decorativo della raccomandazione.

Usa l’enfasi per proporre un inizio mantenendo leggibili le alternative. Un bordo più forte, una piccola etichetta o una superficie sobria possono bastare. Ingrandire il centro fino a rendere difficili da scorrere i termini vicini è un cattivo scambio: si deve ancora confrontare l’evidenziato con gli altri.

Controlla la pagina senza evidenziazione. Se l’offerta diventa incomprensibile, l’enfasi portava troppo peso esplicativo. Nomi, descrizioni del pubblico e differenze visibili dovrebbero stabilire una scelta ragionevole prima del colore.

Schermi stretti senza perdere il confronto

Impilare le schede è semplice; conservare il confronto è più difficile. Quando ogni piano occupa una schermata, ricordare se il primo includesse una funzione diventa parte del compito. Non presumere che un layout verticale pulito sia automaticamente facile da confrontare.

Se i piani sono pochi, mantieni lo stesso ordine delle funzioni nelle schede impilate. Per una matrice più lunga, valuta un confronto adatto agli schermi stretti che permetta di selezionare due piani, oppure una tabella a scorrimento orizzontale con riferimenti chiari per orientarsi. La scelta dipende dal compito prevalente: leggere un solo piano o confrontare valori specifici di più piani.

Un accordion riduce la lunghezza iniziale ma nasconde informazioni. Mantieni fuori dalle sezioni chiuse limiti essenziali e termini di fatturazione. Se bisogna aprire ogni piano per scoprire l’accesso ospiti, hai solo distribuito lo stesso sforzo su più interazioni.

Con una vera tabella dati, conserva le relazioni strutturali. W3C spiega come associare intestazioni e dati perché le relazioni siano disponibili alle tecnologie assistive. Una griglia di testo visivamente allineato non equivale. Tutorial W3C sulle tabelle accessibili.

Testa lo stretto con un confronto concreto: trovare l’opzione meno costosa per sei editor e venti progetti attivi. I requisiti inventati mostrano se restano le informazioni per scegliere. Verificare soltanto che la pagina entri nel viewport non risponde.

Azione coerente col prossimo passo

Il pulsante dovrebbe descrivere l’azione immediata realmente disponibile. Iniziare una prova, creare uno spazio gratuito, scegliere un abbonamento e contattare le vendite sono passi diversi. Riutilizzare «Inizia» crea una fila coerente, ma lascia vaga l’interazione.

Metti le condizioni importanti vicino all’azione. Se la prova richiede un metodo di pagamento, dillo prima di procedere. Se Organization inizia con una conversazione, evita un pulsante che suggerisca checkout immediato. Serve un’aspettativa corretta, non tutto il processo dentro la scheda.

Considera gli abbonati esistenti: la tabella pubblica generica può portarli a una registrazione duplicata. L’implementazione potrebbe richiedere lo stato del piano attuale o un percorso alle impostazioni. Annotalo anche se il prototipo non gestisce l’account, per non valutare solo i nuovi visitatori.

Non usare un pulsante disabilitato per ogni scelta indisponibile. Se l’idoneità dipende da una condizione dell’account, spiegala. Senza spiegazione non si distingue limite, guasto temporaneo o regola intenzionale.

Le schede GitHub rendono concreto il punto: Team offre «Continue with Team»; Enterprise prova e contatto vendite. La seconda rappresenta due percorsi nello stesso piano, non due sue funzioni. Segui ogni percorso e verifica i dati richiesti dopo. Un colore coerente conserva il ritmo mentre le etichette restano specifiche sul prossimo passo.

Rivedi con compiti decisionali

La revisione visiva è più utile quando ogni persona deve rispondere a una domanda. Dai a una lo scenario individuale e a un’altra il team in crescita. Chiedi piano e fatti decisivi. Il ragionamento rivela ambiguità che una richiesta aperta può perdere.

Per Fieldnote, un compito può riguardare un ricercatore con due progetti e diversi ospiti, un altro sei editor, un terzo amministrazione dell’organizzazione. Includi un caso che debba escludere l’evidenziato. Altrimenti verifichi solo l’effetto visivo, non se il confronto permetta una conclusione diversa.

Chiedi poi a ogni persona importo addebitato subito e impegno di fatturazione. Una risposta errata è un problema anche se le parole corrette tecnicamente compaiono nella pagina. Sposta o riscrivi in base all’equivoco anziché aggiungere automaticamente una nota.

Prova anche un valore volutamente scomodo: funzione dal nome lungo, funzione assente o prezzo negoziato. Non sono rare eccezioni da rinviare allo sviluppo: determinano se la struttura rappresenta l’offerta reale.

L’anteprima HTML OpenDesign sostiene la revisione. I commenti indicano un raggruppamento di prezzo fuorviante o una riga disallineata, e modifiche mirate migliorano la presentazione. Fornisci fatti approvati come contesto. Verifica calcoli, idoneità dell’account e checkout nel flusso implementato.

Prima della consegna, confronta ogni prezzo e limite visibile con la scheda fatti. Controlla entrambi gli stati di fatturazione, ogni azione e il layout stretto. La tabella è pronta quando un lettore spiega correttamente scelta e termini, anche quando il piano evidenziato non è quello giusto.