Mirko Mortaroli · La mia Arcadia
Demo dal vivo

Dodici effetti per una landing che si muove al momento giusto.

Ognuno qui sotto è fatto con HTML, CSS e poche righe di JavaScript, senza librerie. Parte da solo quando arrivi alla sezione, e con Riproduci lo rivedi quando vuoi.

Accanto trovi cosa fa, dove ha senso e dove invece fa danni. I numeri, le recensioni e i prezzi sono di esempio.

01 · Apertura

Comparsa del titolo

Il titolo entra una parola alla volta, da sfocato a nitido. Dura meno di un secondo e guida l'occhio nell'ordine in cui la frase va letta.

DoveNella prima schermata, una volta sola.

OcchioIl testo deve stare già scritto nella pagina, così Google lo legge anche se l'animazione non parte.

Testi che vendono anche mentre dormi.

Siti, email e annunci per chi ha un lavoro vero da raccontare.

Parliamone →
02 · Apertura

Parola che ruota

Una sola parola del titolo cambia a rotazione. Con una frase dici quattro cose e ognuno ci ritrova la sua.

DoveQuando i servizi o i prodotti sono diversi ma la promessa è la stessa.

OcchioChi usa un lettore di schermo deve sentire la frase completa una volta sola, non a ripetizione.

Scrivo siti, email, annunci e script per reel che fanno lavorare.

03 · Riprova sociale

Notifiche di vendita

Gli ordini arrivano come notifiche sul telefono e il totale sale con loro. Fa vedere che qualcuno sta già comprando.

DoveNegozi online e lanci, collegato agli ordini veri.

OcchioCon ordini inventati diventa una pratica commerciale scorretta. O dati veri o niente.

Dati di esempio
Incassato oggi
0 €
0 ordini
04 · Riprova sociale

Recensioni a mazzo

Le recensioni stanno una sopra l'altra come carte, e la prima passa in fondo ogni pochi secondi. Ne leggi una alla volta senza un muro di testo.

DoveSotto l'offerta, prima del modulo.

OcchioSolo recensioni vere, con nome e attività. Quelle false sono vietate dal Codice del Consumo.

Recensioni di esempio
★★★★★

Mi ha riscritto la pagina dei servizi. Il telefono ha ripreso a squillare.

Laura · studio di fisioterapia
★★★★★

Pensavo servissero più parole. Ne servivano meno, e giuste.

Davide · falegnameria
★★★★★

Le email adesso le aprono. Prima le cancellavano.

Sara · negozio di ceramiche
★★★★★

Due giri di revisione e nessuna discussione. Raro.

Marco · agenzia viaggi
05 · Fiducia

Numeri che contano

Le cifre partono da zero e salgono quando la sezione entra in vista. Il movimento attira lo sguardo proprio sul dato che vuoi far ricordare.

DoveTre numeri al massimo, quelli che rispondono a "posso fidarmi?".

OcchioVirgola per i decimali e punto per le migliaia. "4.9" su un sito italiano sembra un errore.

Numeri di esempio
12
anni di lavoro con le piccole imprese
1.340
testi consegnati
4,9
voto medio su 5
06 · Servizi

Griglia che si compone

Le schede dei servizi entrano una dopo l'altra, con un leggero ritardo fra loro. La sezione si costruisce sotto gli occhi e la gerarchia si capisce da sola.

DoveServizi o caratteristiche, con una scheda più grande delle altre.

OcchioFra una scheda e l'altra bastano un decimo di secondo. Di più e sembra che la pagina si sia inceppata.

Siti

La pagina che risponde prima che te lo chiedano.

Email

Quelle che si aprono il martedì mattina.

Annunci

Tre secondi per farsi notare.

Reel

Script da dire, non da leggere.

07 · Prodotto

Cursore guidato

Un finto cursore usa l'app al posto tuo. Clicca, scrive, conferma. Mostra il prodotto più nitido di un video registrato e pesa molto meno.

DoveSoftware e servizi online, per far vedere quanto è semplice il primo passo.

OcchioVa mostrato quello che il prodotto fa davvero, con le stesse schermate.

Progetti

+ Nuovo progetto
Newsletter autunno
Pagina chi siamo
08 · Risultati

Prima e dopo

Una linea da trascinare separa la versione vecchia da quella nuova. Chi guarda fa il confronto con le proprie mani, ed è più convincente di qualsiasi spiegazione.

DovePortfolio e casi studio. Per un copywriter funziona anche sul testo.

OcchioDeve funzionare anche con la tastiera e col dito sul telefono.

Dopo

Ti richiamiamo entro due ore.

Se non succede, il sopralluogo è gratis.

Chiedi il sopralluogo →
09 · Metodo

Linea del processo

Una linea si disegna da sola e accende i passaggi del metodo uno dopo l'altro. Chi legge capisce in un colpo d'occhio cosa succede dopo il primo contatto.

DoveLa sezione "come lavoro" o "come funziona".

OcchioQuattro o cinque passaggi. Con dieci la linea diventa una mappa della metropolitana.

→ Testo online
10 · Prezzi

Prezzi che girano

Passando da mensile ad annuale le cifre scorrono come un contachilometri. Il risparmio si vede succedere invece di doverlo calcolare.

DoveAbbonamenti e pacchetti con due modi di pagare.

OcchioIl prezzo finale deve restare leggibile e uguale a quello che si paga, IVA compresa se vendi ai privati.

Prezzi di esempio
Base
€/mese
Pro
€/mese
Studio
€/mese
11 · Scelta

Noi e gli altri

Una tabella di confronto che si riempie riga per riga, con le spunte che si disegnano. Mette in fila le differenze nel punto in cui chi legge sta decidendo.

DoveSubito prima dei prezzi o del modulo.

OcchioContro "gli altri" in generale va bene. Se fai nomi di concorrenti valgono le regole della pubblicità comparativa.

Esempio
CaratteristicaCon meDi solito
Risposta entro un giorno–
Prezzo fisso, scritto prima–
Revisioni fino al lancio–
Testi pensati anche per Google
Un solo referente–
12 · Conversione

Clic e conferma

Il pulsante diventa una rotellina, poi una spunta, con una manciata di coriandoli. Chi si è appena iscritto sa che è andata a buon fine e se lo ricorda.

DoveDopo l'invio di un modulo, di un'iscrizione o di un ordine.

OcchioLa spunta va mostrata solo quando il server ha risposto davvero, mai prima.

Modulo di prova
Ci sei. Controlla la posta, la prima email arriva tra poco.
Tre regole per tutti

Un effetto serve la lettura. Quando la interrompe, va tolto.

  1. Il testo sta già scritto nella pagina e l'animazione si limita a farlo comparire. Così lo leggono Google e chi ha una connessione lenta.
  2. Chi ha chiesto al telefono di ridurre le animazioni vede la versione ferma. Prova su questa pagina, è già così.
  3. Numeri, recensioni e vendite devono essere veri. Un effetto rende credibile anche quello che non lo è, ed è proprio per questo che va usato con onestà.

Pagina costruita con Claude da Mirko Mortaroli, copywriter. Il ragionamento completo sta nella newsletter La mia Arcadia.