Case Study

Sito per psicologa: equilibrio tra rigore e accessibilità (case study)

Come ho costruito il sito della Dott.ssa Gemma Colao, psicologa CBT. Palette 'Minimal Sanctuary', stack moderno, accessibilità WCAG 2.2 AA, GDPR sensibili.

Stefano Prandi — 2026-06-08

C'è una differenza importante tra il sito di un medico e il sito di una psicologa, ed è una differenza che il 90% dei progetti che vedo online ignora completamente.

Il medico vende competenza tecnica su un corpo: ti opera, ti prescrive, ti diagnostica. Il suo sito può permettersi di essere clinico, asettico, persino un po' freddo — perché chi cerca un ortopedico vuole sapere quanti interventi ha fatto, non se è una bella persona.

La psicologa lavora invece su una relazione. La prima seduta non è un esame del sangue: è la decisione, da parte del paziente, di affidarsi a uno sconosciuto raccontandogli cose che spesso non ha mai detto a nessuno. Il sito è il primo punto di contatto di questa relazione. E se sbaglia tono, il paziente non arriva mai allo studio.

Questo è il case study di come ho costruito il sito della Dott.ssa Gemma Colao, psicologa CBT con studi a Firenze, Milano e percorsi online — un progetto in cui ogni decisione, dal colore al wording dei pulsanti, è passata attraverso questa domanda: cosa prova chi sta cercando aiuto in questo momento?

Il brief: 5 secondi per accogliere, il resto per rassicurare

Gemma è arrivata con un brief lucido, che riassumo nelle sue parole: "Voglio che chi atterra sul sito senta di essere al posto giusto in cinque secondi, ma deve anche vedere che sono una professionista seria, non una life coach con un master comprato online."

Il punto è proprio questo equilibrio, ed è qui che la maggior parte dei siti di psicologi italiani fallisce. O sono troppo "wellness rassicurante" (palette pastello, font calligrafici, frasi tipo "ritrova te stessa") e perdono credibilità clinica. Oppure sono troppo medicali (sfondo bianco, foto in camice, lista di patologie DSM in home) e respingono chi si sta avvicinando alla terapia per la prima volta.

L'utenza tipo della Dott.ssa Colao è una donna 30-50 anni, scolarizzata, che sta vivendo un periodo difficile — relazione, lavoro, lutto, ansia generalizzata — e che ha aperto Google con un misto di curiosità e vergogna. Quella persona ha bisogno di sentire due cose contemporaneamente: "qui posso dire come sto davvero" e "questa sa cosa sta facendo".

Palette "Minimal Sanctuary": perché questi tre colori e non altri

Ho costruito una palette custom, battezzata internamente Minimal Sanctuary, su tre colori principali:

Paglierino #F4EFE6 — base neutra calda, sostituisce il bianco. Il bianco puro su un sito sanitario richiama l'ospedale e attiva, nella maggior parte delle persone, un'associazione inconscia di tensione. Il paglierino abbassa il contrasto luminoso e rilassa la lettura prolungata.
Salvia #8FA68E — colore primario per CTA e accenti. Il verde salvia è uno dei pochi colori che la letteratura di color psychology associa in modo robusto a senso di calma e radicamento. Non è il verde "natura" sgargiante, è un verde de-saturato che ricorda la pianta secca, l'ambiente protetto.
Terracotta #C97B5F — accento caldo, usato per momenti emotivi: titoli sezione "Chi sono", citazione in apertura, hover degli elementi importanti. La terracotta porta calore senza l'aggressività del rosso o l'urgenza dell'arancione.

Le tre tonalità rispettano contrasto WCAG AA su tutte le combinazioni testuali, e AAA sui blocchi clinici critici (descrizione percorsi, modalità di intervento). Su questo torno tra poco.

Lo stack tecnico: Next.js + Sanity + Tailwind + Framer Motion

La scelta tecnica è stata guidata da quattro vincoli concreti:

Gemma deve poter aggiornare contenuti senza chiamarmi. Articoli, FAQ, sedi, disponibilità.
Le animazioni devono esserci ma essere lente, mai aggressive. Niente effetti pop-in tipo landing page SaaS.
Performance solide su mobile 4G. L'utenza spesso atterra dallo smartphone mentre è in metro o in pausa pranzo.
SEO locale forte su due città (Firenze e Milano) + online nazionale.

La combinazione Next.js + Sanity headless CMS + Tailwind + Framer Motion copre tutti e quattro i requisiti. Next.js per il rendering ibrido (SSG sulle pagine evergreen, ISR sul blog), Sanity per dare a Gemma un editor pulito e versionato senza il bagaglio di WordPress, Tailwind per mantenere il design system coerente e Framer Motion per orchestrare animazioni che rispettano prefers-reduced-motion.

Su Framer Motion una nota: ho impostato durations medie di 600–800ms con easing custom ([0.22, 1, 0.36, 1], un quart-out morbido). Le animazioni veloci da 200ms — quelle che funzionano in un'app SaaS — su un sito di psicologa sembrano nervose. Il sistema nervoso di chi è in ansia legge la velocità come urgenza.

Live: gemmacolao.prandi.net.

I tre pilastri del sito di una psicologa

Da questo progetto e da altri analoghi nel settore sanitario, ho distillato tre principi che considero ormai non negoziabili.

1. Accoglienza visiva

I primi 5 secondi sono iconografia, non testo. Foto naturali della professionista (luce diffusa, ambiente reale dello studio, nessuna posa "da copertina"), colori de-saturati, spaziatura ampia, font umanistico con tratti aperti. Per Gemma ho scelto Fraunces per i titoli (serif contemporaneo, calligrafico ma controllato) e Inter per il corpo (neutralità leggibile).

Niente foto stock. Mai. Lo dico al punto 7.

2. Trasparenza professionale

Subito sotto l'accoglienza, prima ancora dei servizi, va la trasparenza credenziale: formazione (Università, scuola di specializzazione CBT — nel caso di Gemma, Scuola Cognitivo-Comportamentale di Firenze), iscrizione all'Albo con numero verificabile, approccio teorico esplicitato (terapia cognitivo-comportamentale di terza generazione, con cenno ad ACT e mindfulness dove applicabili).

Questa sezione fa due cose: rassicura il paziente che sta valutando se affidarsi, e funziona da segnale E-E-A-T per Google nel ranking YMYL (Your Money Your Life), categoria a cui appartiene tutto ciò che riguarda la salute mentale. Su questo ho scritto un approfondimento dedicato: E-E-A-T Google e autorevolezza.

3. Riduzione dell'ansia decisionale

Il paziente che sta valutando una psicoterapia ha decine di micro-dubbi che non oserà mai chiedere per telefono. Il sito deve anticiparli con una sezione FAQ ragionata:

Come funziona la prima seduta?
Quanto dura un percorso CBT?
Si possono fare sedute online? Funzionano davvero?
Quanto costa? (dove possibile deontologicamente, indicare almeno un range)
Posso interrompere quando voglio?
Il mio medico/familiare verrà informato? (no, e va detto esplicitamente)

Ogni domanda non risolta è un paziente che non scrive. La FAQ non è SEO, è triage emotivo.

Accessibilità WCAG 2.2 AA: non opzionale, eticamente prima ancora che legalmente

Su un sito di psicologa l'accessibilità non è una checklist da spuntare per conformità: è coerente con il mestiere. L'utenza include persone in stati di ansia acuta, depressione (che riduce le risorse cognitive disponibili), deficit di attenzione, dislessia, ipovisione, anziani.

Per il sito della Dott.ssa Colao ho lavorato su:

Contrasto AAA (7:1) sui testi clinici critici, AA (4.5:1) su tutto il resto. La palette è stata progettata partendo da questo vincolo, non adattata dopo.
Navigazione completa da tastiera, con focus ring visibili (terracotta su paglierino, contrasto verificato).
Struttura semantica HTML5 rigorosa: un solo
per pagina, gerarchia heading senza salti, landmark ARIA per
,
,
.
prefers-reduced-motion rispettato a livello CSS e Framer Motion: chi ha il setting attivo vede transizioni istantanee, non lente.
Linguaggio chiaro, nessun jargon DSM in home (no "disturbo d'ansia generalizzato F41.1", sì "quando l'ansia diventa quotidiana").
Form contatto navigabile da screen reader, con label esplicite, messaggi d'errore inline associati via aria-describedby.

Per il riferimento normativo completo: WCAG 2.2 quickref del W3C.

Qui molti siti di psicologi che vedo sono gravemente fuori norma, spesso senza rendersene conto. Un form di contatto che chiede "descrivimi brevemente il motivo per cui mi scrivi" sta raccogliendo dati sanitari, categoria particolare ex art. 9 GDPR. Richiede:

Consenso esplicito e separato, non sepolto nella privacy policy generale.
Base giuridica chiara (consenso del paziente per finalità di valutazione richiesta professionale).
Privacy policy dedicata al ruolo di psicologo come titolare del trattamento, con riferimenti al Codice Deontologico degli Psicologi italiani.
Misure tecniche: connessione HTTPS, niente Google Analytics su pagine con form sanitario (o configurato in modalità anonimizzata e cookieless), niente embed terzi che leakano dati.

Per Gemma ho separato due flussi: il form contatto generico (richiesta info, no dati sanitari) e il form richiesta primo colloquio (dati sanitari, consenso esplicito, doppia conferma).

SEO per psicologa: locale e long-tail problematico

La strategia SEO ha due vettori:

Vettore locale per città. Pagine dedicate "Psicologa CBT Firenze" e "Psicologa CBT Milano", con NAP (Name-Address-Phone) coerenti, schema markup LocalBusiness + Physician per ciascuna sede, Google Business Profile collegato. La pagina online ha keyword separate: "psicologa CBT online", "psicoterapia cognitivo-comportamentale online".

Vettore long-tail problematico. Articoli del blog scritti da Gemma stessa (firma reale, bio autore, anti-AI E-E-A-T) su problematiche specifiche: ansia da prestazione lavorativa, gestione del lutto, terapia di coppia, ansia sociale post-pandemia. Ogni articolo intercetta una query informazionale che precede di settimane o mesi la decisione di prenotare.

Il vantaggio competitivo qui è la firma personale: un articolo firmato da una psicologa iscritta all'Albo con credenziali verificabili batte, per E-E-A-T, dieci articoli generici scritti da copywriter.

Cosa NON fare (visto troppe volte)

Foto stock con donna sdraiata sul divano. È diventata la copertina universale della psicoterapia low-effort. Trasmette caricatura, non accoglienza.
Prezzi sbattuti in home. Il costo va comunicato, ma in una sezione dedicata, con contesto (durata seduta, modalità, eventuali pacchetti). In home diventa transazione, non relazione.
Garanzie di risultato. Vietato deontologicamente (Codice Deontologico, art. 19). E sospetto: nessun professionista serio garantisce esiti terapeutici.
Jargon DSM in home. "Trattamento del disturbo borderline di personalità" non parla al paziente, parla al collega. In home si parla al paziente.
CTA aggressive tipo "Prenota ora!" con freccia rossa. Su un sito di psicologa è violenza visiva. Si scrive "Scrivimi per un primo contatto" o "Iniziamo a conoscerci".

Per un confronto su come questo equilibrio si declina invece nel settore medico-chirurgico, il case study parallelo è qui: Sito ortopedico medico privato.

Risultati misurabili

Dopo il primo mese dalla pubblicazione, su un settore molto competitivo come quello fiorentino:

+340% richieste di primo colloquio rispetto al sito precedente (template WordPress generico).
Dwell time medio 3m 12s sulle pagine sedi, contro i 47s del sito precedente.
Bounce rate 28% in home (contro 71% precedente).
Posizionamento prima pagina Google per "psicologa CBT Firenze" entro 6 settimane.

I numeri contano, ma il segnale più forte l'ha portato Gemma stessa: i pazienti, alla prima seduta, le dicono "ho scelto te perché dal sito mi sembravi una persona, non un servizio."

Quello, per un sito di psicologa, è il KPI vero.

Se sei psicologa, psicoterapeuta o professionista della salute mentale

E stai valutando di rifare il tuo sito — o di farne uno serio per la prima volta — questo è esattamente il tipo di progetto su cui lavoro. Equilibrio tra rigore clinico ed empatia visiva, accessibilità reale, GDPR sanitario fatto bene, SEO locale e long-tail.

Scrivimi da stepdesign.prandi.net e raccontami il tuo studio. Partiamo da lì, senza preventivi al buio.

Il sito giusto non è quello che convince chiunque a prenotare. È quello che fa arrivare in studio le persone giuste, già un po' meno sole.

FAQ

Cosa serve a un sito di psicologa per essere efficace?

Tre pilastri: accoglienza visiva (chi arriva si sente al posto giusto in 5 secondi), trasparenza professionale (percorso, approccio teorico, formazione visibili senza scavare), riduzione dell'ansia decisionale (FAQ sulla prima seduta, modalità online, indicazioni di costo dove deontologicamente possibile). Tutto il resto è ornamento.

Come si comunica empatia senza sembrare banali?

Si evitano le foto stock con la donna sdraiata sul divano e la mano dello psicologo che prende appunti. Si usano palette de-saturate, fotografia naturale (luce diffusa, ambienti reali dello studio), micro-animazioni lente, copy in prima persona della professionista. L'empatia è una conseguenza di scelte concrete, non un aggettivo da mettere nell'header.

Il sito di una psicologa deve essere accessibile WCAG?

Sì. Per ragioni etiche (l'utenza include persone in stato di vulnerabilità, ansia acuta, deficit cognitivi temporanei) e per ragioni legali (European Accessibility Act 2025 e direttive GDPR sui dati sensibili). Target minimo: WCAG 2.2 livello AA, con AAA sui testi clinici critici.

Quali colori funzionano per uno studio psicologico?

Toni naturali e de-saturati: beige caldi (paglierino, sabbia), verdi tenui (salvia, eucalipto), accenti caldi non aggressivi (terracotta, ruggine spenta). Da evitare: blu corporate freddo, bianchi clinici da ospedale, gradient saturi tipo SaaS. La palette deve rilassare il sistema nervoso simpatico, non stimolarlo.

Quanto costa un sito così?

Per un sito di professionista sanitario fatto a regola d'arte (design custom, CMS headless, accessibilità AA, GDPR su dati sensibili, blog, multi-città SEO) il range realistico in Italia è 3.500–7.000 euro. Sotto i 2.000 si entra nel territorio dei template generici travestiti da custom, sopra i 10.000 in genere si paga il brand dell'agenzia.

Richiedi un preventivo