Perché un sito converta, chi arriva deve capire subito cosa offri e a chi, trovare motivi concreti per fidarsi e vedere il passo successivo senza cercarlo, anche dallo smartphone. Il web design che converte è la somma di queste scelte, pagina per pagina, verificate con i dati invece che con il gusto personale.
Cosa vuol dire convertire, per il tuo sito?
Una conversione è l'azione che per te ha valore: una richiesta di preventivo, una telefonata, una prenotazione, un acquisto. Accanto a quella principale ci sono le azioni minori che la preparano, come scaricare una scheda tecnica o iscriversi alla newsletter. Pensa a un'impresa di ristrutturazioni: l'azione principale è la richiesta di sopralluogo, quelle minori la chiamata dal telefono e la visita alla galleria dei lavori.
Prima di parlare di grafica conviene scriverle, pagina per pagina, perché la home, la pagina di un servizio e un articolo del blog hanno obiettivi diversi. Poi vanno misurate: in Google Analytics 4 ogni azione importante si registra come evento e si contrassegna come evento chiave, così vedi quante persone la compiono e da quali canali arrivano. Senza questo passaggio, ogni giudizio sul design resta un'opinione.
Cosa deve capire chi arriva, prima ancora di scorrere?
La prima schermata ha un compito preciso: dire cosa fai, per chi e dove, e indicare il passo successivo. «Soluzioni innovative per la tua azienda» non risponde a nessuna di queste domande; «Impianti fotovoltaici per aziende agricole in Lombardia, dal progetto alle pratiche» risponde a tutte. Vale la pena lavorare su quel titolo più che su qualsiasi effetto grafico.
Sotto il titolo servono tre elementi. Una frase che aggiunge il beneficio o la prova più forte. Un pulsante principale il cui testo dice cosa succede dopo il clic: «Richiedi un sopralluogo» è chiaro, «Invia» no. E un segnale di fiducia visibile subito, come recensioni verificabili o i loghi di clienti che hanno accettato di comparire.
Non tutti però entrano dalla home. Chi arriva da Google può atterrare sulla pagina di un servizio o su un articolo, quindi ogni pagina d'ingresso deve reggersi da sola, con titolo chiaro, prova e azione. Il report Pagine di destinazione di Analytics, con la colonna degli eventi chiave, mostra da dove entrano i visitatori e quali pagine portano contatti.
Come si guida lo sguardo verso l'azione?
La gerarchia visiva decide l'ordine in cui si leggono le cose: dimensione, peso del carattere, colore, spazio vuoto e posizione dicono all'occhio cosa viene prima. Un test semplice è guardare la pagina socchiudendo gli occhi, o da qualche passo di distanza: se quello che resta visibile non è il titolo o il pulsante principale, la gerarchia va rivista.
Ogni pagina dovrebbe avere una sola azione principale, riconoscibile a colpo d'occhio; le azioni secondarie hanno un peso minore, per esempio un pulsante con il solo contorno o un link nel testo. Il contrasto conta anche per l'accessibilità: le WCAG chiedono un rapporto di almeno 4,5:1 per il testo normale e di 3:1 per i bordi e gli stati dei controlli, perché chi vede poco possa distinguerli.
Guidare vuol dire anche far trovare le cose. Nei siti con un catalogo ampio la ricerca interna è parte del design: nello store di Aqatech è stata potenziata per trovare i prodotti per marca, modello, codice articolo o parola chiave, così il professionista che conosce il codice e il privato che cerca per esigenza arrivano entrambi al prodotto giusto. La coerenza fa il resto: se lo stesso pulsante ha tre aspetti diversi, chi naviga deve reimparare ogni volta cosa è cliccabile, ed è il motivo per cui colori e componenti si fissano in un design system, anche piccolo.
Perché il progetto deve partire dallo smartphone?
Google usa la versione mobile delle pagine per indicizzarle e posizionarle e raccomanda il design responsive, cioè lo stesso codice che si adatta allo schermo. La guida all'indicizzazione mobile-first chiede anche contenuti equivalenti tra mobile e desktop: puoi raccogliere i testi in schede o fisarmoniche per risparmiare spazio, ma non toglierli.
Progettare partendo dal mobile vuol dire iniziare dallo schermo piccolo e aggiungere dove c'è spazio, invece di comprimere il desktop. Costringe a decidere cosa conta davvero, e sul telefono contano dettagli che al computer non si notano:
- bersagli da toccare abbastanza grandi: le WCAG 2.2 fissano un minimo di 24 per 24 pixel CSS, oppure abbastanza spazio intorno
- numero di telefono cliccabile e pulsante principale sempre a portata di pollice
- zoom sempre consentito: bloccarlo impedisce a chi vede poco di leggere, come ricorda la documentazione MDN
- la tastiera giusta per ogni campo: numerica per il telefono, con la chiocciola per l'email
- prove su telefoni veri, anche di fascia media, oltre che nel simulatore del browser, perché tastiera virtuale e scorrimento si comportano in modo diverso
Nel redesign di Bravoavvocato, progettato da Federica De Fraia e sviluppato da noi, il punto di partenza era proprio questo: gran parte delle persone arriva dallo smartphone, spesso in un momento di urgenza. Il lavoro sul mobile ha voluto dire semplificare ogni passaggio del percorso, alleggerire il caricamento e rendere chat e report leggibili anche sugli schermi più piccoli.
Quanto conta la velocità, e quali scelte di design la peggiorano?
La velocità fa parte del design, perché molte scelte grafiche la determinano. Google valuta l'esperienza con i Core Web Vitals e considera buoni un caricamento del contenuto principale (LCP) entro 2,5 secondi, una risposta alle interazioni (INP) entro 200 millisecondi e uno spostamento del layout (CLS) non oltre 0,1, misurati sul 75° percentile delle visite. Le cause di lentezza che nascono in fase di progetto sono ricorrenti:
- video o immagini enormi in apertura, al posto di un'immagine ottimizzata delle dimensioni giuste
- caratteri tipografici in troppe varianti, ciascuna da scaricare
- banner, pop-up e avvisi sui cookie che spingono giù i contenuti mentre la pagina carica
- effetti di ingresso che tengono nascosto il testo principale finché non finiscono, un errore che trovi spiegato nella guida alle microinterazioni e animazioni
Cosa misurano le tre metriche e come si migliorano lo trovi nella guida ai Core Web Vitals.
Dove si perdono le richieste nei moduli di contatto?
Il modulo è l'ultimo passo prima della conversione, e lì ogni campo in più va giustificato. Le indicazioni di web.dev sono concrete: non chiedere dati che non ti servono, usa etichette vere invece del solo testo segnaposto, che sparisce appena inizi a scrivere, e aiuta il browser a compilare al posto dell'utente. Tradotto in controlli:
- solo i campi che servono per rispondere; il resto si chiede dopo il primo contatto
- etichette sempre visibili sopra i campi
- tipi di campo corretti (email, telefono) e attributo autocomplete, che le WCAG chiedono per i dati personali con il criterio 1.3.5
- errori segnalati mentre si scrive, accanto al campo, con un testo che spiega come correggere, come prevede il criterio 3.3.1
- pulsante di invio disattivato dopo il primo tocco, per evitare doppi invii
- messaggio finale che dice cosa succede adesso e chi risponderà
- un'alternativa per chi preferisce parlare: telefono cliccabile o chat
Se una parte del traffico arriva da campagne a pagamento, la pagina di destinazione segue regole sue, che trovi nella guida alle landing page per le ads.
Quali prove fanno fidare chi non ti conosce?
Chi arriva da una ricerca non ti conosce, e cerca segnali di un'azienda reale e seria. I più utili sono quelli verificabili: recensioni che rimandano alla fonte, testimonianze con nome, ruolo e azienda, pubblicate con il consenso di chi le firma, progetti descritti per quello che è stato fatto, dati aziendali completi, indirizzo e telefono. Anche i numeri funzionano solo se sono veri e controllabili.
Fiducia vuol dire anche rispondere in anticipo alle domande che trattengono dal contattarti. Controlla che le tue pagine rispondano a dubbi pratici come questi:
- lavorate nella mia zona, o con aziende come la mia?
- da cosa dipende il costo, e cosa è incluso?
- cosa succede dopo che ho scritto, e chi mi risponde?
- posso vedere lavori simili a quello che mi serve?
- quali dati mi chiedete, e come li userete?
Le scorciatoie qui sono un rischio. Se vendi anche ai consumatori, la direttiva europea detta Omnibus considera pratiche commerciali sleali pubblicare recensioni false e dichiarare che vengono da clienti reali senza verifiche ragionevoli; lo stesso testo cita come manipolazione la pubblicazione delle sole recensioni positive.
Come capire cosa migliorare, senza tirare a indovinare?
Prima di rifare un sito conviene capire dove perde persone. In Google Analytics 4 l'esplorazione del funnel mostra i passaggi che gli utenti compiono verso un'azione e dove si fermano. Le mappe di calore e le registrazioni delle sessioni, per esempio con Microsoft Clarity, fanno vedere dove si clicca e fin dove si scorre; per le visite dall'Europa lo strumento richiede un segnale di consenso valido.
I dati dicono dove, non perché. Il perché lo scopri guardando qualcuno usare il sito sul telefono con un compito preciso («trova il servizio e chiedi un preventivo»), oppure chiedendo ai clienti come ti hanno scelto. Un test A/B, cioè il confronto tra due versioni della stessa pagina, con poche visite rischia di non dare risultati affidabili: in quel caso meglio correggere prima i problemi evidenti e confrontare il prima e il dopo.
Spesso non serve rifare tutto. Per Avanti Digital Performance abbiamo scelto un intervento chirurgico: individuare i punti di attrito nel percorso del visitatore e correggerli con modifiche mirate, senza stravolgere il sito. Quando invece il problema è la struttura, un restyling parte da quello che già funziona e cambia il resto.
Vuoi sapere dove il tuo sito perde contatti? Mandaci l'indirizzo e l'obiettivo che ha per la tua azienda dalla pagina sul nostro web design: partiamo da lì, prima di parlare di grafica.
