← Torna al portfolio

Case study · progetto reale

Un sito che spiega ZFD e ZLS alle imprese e risponde alle prime domande

Sito per un servizio di consulenza doganale di Latina e Frosinone: una guida a Zona Franca Doganale e Zona Logistica Semplificata, la normativa di riferimento in PDF e una chat per le domande di primo livello.

Visita il sito (si apre in una nuova scheda)

Il problema

ZFD e ZLS sono sigle che un imprenditore sente nominare ma non sa collocare: una riguarda le merci e la sospensione di dazi e IVA all'importazione, l'altra gli investimenti e la semplificazione amministrativa. Il contenuto di partenza era una presentazione di 26 slide, pensata per essere proiettata, non letta da un telefono. Serviva un sito che la rendesse consultabile da chiunque, senza chiedere di scaricare niente, e che desse un primo contatto con il servizio di consulenza.

Contesto e vincoli

  • Cliente reale, dominio proprio su un hosting Aruba: pagine statiche, nessun server applicativo su cui far girare codice.
  • Tema tecnico e normativo: un'informazione sbagliata costa più di una mancante, quindi niente invenzioni, né nel testo né nella chat.
  • Normativa europea, italiana e regionale da rendere trovabile: 40 PDF sulle normative vigenti e 10 sul programma di sviluppo.
  • Contatti e ordine dei nomi decisi dal cliente («ZFD e ZLS», mai il contrario).

Processo e decisioni

Le slide diventano sezioni di una pagina. Ognuna delle 26 slide è una section con il proprio titolo collegato tramite aria-labelledby, così chi usa uno screen reader può saltare da un titolo all'altro. I colori a blocchi della presentazione restano, ma il testo è testo vero, selezionabile e leggibile anche senza CSS.

La normativa in due pagine a parte. Le normative vigenti sono divise in Europea, Italiana e Regionale (Lazio); il programma di sviluppo ha una pagina propria. Home più leggera, e chi cerca un documento preciso lo trova senza scorrere le slide.

Una chat, ma con un backend separato. L'hosting del cliente serve solo file statici, quindi la chat chiama una funzione pubblicata a parte. La chiave del modello linguistico vive solo lì, mai nel browser, e la funzione accetta richieste solo dai domini del sito. La chat dà cinque risposte gratuite e poi rimanda alla consulenza completa via email: è un primo filtro, non un sostituto del consulente.

Il modello non deve improvvisare. Nei primi test, senza definizioni esplicite, la chat inventava concetti sbagliati e dati falsi: accreditamenti, clienti, aliquote. Ho scritto nelle istruzioni le definizioni di ZFD e ZLS, i contatti ufficiali con risposta fissa e regole esplicite su cosa non dire, e dopo ogni modifica la provo con domande trabocchetto.

Sotto la chat, il sito deve restare utilizzabile. La finestra si apre e si chiude da tastiera (Esc compreso) e il focus torna al pulsante che l'ha aperta; il registro dei messaggi è un'area role="log" che gli screen reader leggono man mano. In fondo c'è un avviso in chiaro: risposte a scopo informativo, non consulenza vincolante, e i messaggi vengono inviati a un servizio di intelligenza artificiale.

Soluzione

Un sito statico a una pagina con due sotto-pagine di normativa, e una chat che si appoggia a un servizio esterno solo per le risposte. Il codice è diviso in file separati: index.html, css/style.css e js/main.js per la home, con un foglio di stile dedicato per ciascuna pagina di normativa. Nessun framework e nessun build step: i file si caricano sull'hosting così come sono.

In numeri

26sezioni titolate nella guida
50PDF di normativa consultabili
~49 KBHTML, CSS e JS della home

Il peso è misurato sui file sorgente non compressi, senza il logo. Non ho dati di traffico o di conversione da riportare: non li cito per non inventarli.

Cosa farei diversamente

Il conteggio delle cinque risposte gratuite vive nel browser, mentre il server limita solo la lunghezza della conversazione. Per un uso più esposto servirebbe un limite per utente lato server. Il piano gratuito del modello ha inoltre un tetto di richieste al minuto: con più domande ravvicinate la chat può rispondere con un errore, e per questo il messaggio rimanda sempre al contatto email.

Nota: progetto reale, realizzato per un cliente. Contenuti, sigle e recapiti appartengono al cliente.