Quando ho abbozzato il layout per un negozio di caffè modello in 2014, aveva senso descrivere intestazione, home page, categoria e scheda prodotto quasi come blocchi costruttivi: logo a sinistra, carrello a destra, filtri qui, pulsante di acquisto là.
Le aspettative di base delle persone non sono cambiate molto. È cambiato il contesto: la maggior parte dei design deve funzionare su mobile, le offerte sono più complesse e ogni script aggiuntivo compete per velocità e attenzione. Perciò non consiglio più di copiare ciecamente un layout. Consiglio di seguire le attività dei clienti.
L'intestazione deve orientare, non mostrare ogni opzione
Nell'intestazione le persone cercano il brand, la navigazione, la ricerca, l'account e il carrello. Non devono avere tutti lo stesso rilievo. La priorità cambia in base al catalogo e alla fase d'acquisto.
- Il logo conduce alla home e ha un nome testuale comprensibile.
- La ricerca deve essere facilmente accessibile quando si conosce il nome di un prodotto o di un parametro.
- Il carrello mostra il proprio stato e non scompare dopo l'aggiunta di un articolo.
- Il contatto o l'aiuto sono reperibili senza competere con l'acquisto.
- Il menu funziona con il tocco, la tastiera e senza richiedere un puntamento preciso del mouse.
Un menu a scomparsa può aiutare con un catalogo ampio. Con dieci categorie spesso è soltanto un ostacolo appariscente. Google consiglia di rendere categorie e prodotti raggiungibili attraverso normali link di navigazione; la sola ricerca potrebbe non esporre l'intero catalogo ai robot. I principi sono descritti nella documentazione sulla struttura dei siti e-commerce.
La home page deve distribuire il traffico, non raccontare l'intero catalogo
Nella home page devo capire rapidamente cosa vende il negozio, a chi si rivolge e dove proseguire. Invece di uno slider automatico, preferisco una priorità chiara e diversi accessi stabili alle principali situazioni d'acquisto.
Possono aiutare i prodotti più venduti, così come le categorie stagionali, i consigli o un motivo per fidarsi del negozio. Ogni blocco deve avere uno scopo. “Così la pagina non sembra vuota” non è uno scopo.
Una categoria aiuta a restringere la scelta
Una categoria non è testo SEO incollato sopra una griglia di prodotti. È uno strumento decisionale. Il nome e la breve introduzione definiscono l'offerta, i filtri la restringono e l'ordinamento aiuta in base alla situazione del cliente.
- Nomina i filtri con il linguaggio dei clienti, non con i campi interni del database.
- Mostra le scelte attive dopo il filtraggio e rendile facili da rimuovere.
- Rendi visibili le sottocategorie importanti come link, non solo come valori gestiti da script.
- Mostra i dati dell'elenco necessari per il confronto; metti il resto nella scheda dettagliata.
- Un risultato vuoto dovrebbe offrire una via per tornare indietro, non un vicolo cieco.
Le breadcrumb aiutano le persone a capire la propria posizione nel catalogo e possono aiutare i motori di ricerca a comprenderne la gerarchia. Se utilizzi dati strutturati, segui la documentazione aggiornata di Google sulle breadcrumb.
La scheda prodotto deve rispondere alle domande prima e dopo il pulsante
Un pulsante “Aggiungi al carrello” visibile è una base, non l'intera scheda. Prima di decidere, le persone hanno bisogno di nome, prezzo, variante, disponibilità, spedizione, resi, fotografie e informazioni adeguate al rischio dell'acquisto.
Per il caffè contano origine, aroma, tostatura, peso e preparazione. Per un trapano contano di più specifiche, compatibilità e assistenza. Non esiste un ordine universale. Esiste una domanda universale: cosa deve sapere il cliente per acquistare la variante giusta e non restituirla in seguito?
Le recensioni devono essere credibili e riguardare il prodotto specifico. I prodotti consigliati devono sostenere la scelta, non distogliere qualcuno da un acquisto quasi concluso. Un pulsante social nella scheda prodotto non è ancora una priorità. Dovremmo aver superato il periodo in cui un pulsante “Mi piace” era la risposta a tutto.
Il carrello e il checkout devono eliminare le sorprese
Il carrello deve consentire di modificare quantità e variante e di rimuovere gli articoli. Mostra il prezzo totale, la spedizione e la data di consegna il prima possibile, non dopo il terzo passaggio e la registrazione.
Il checkout come ospite è spesso una scelta predefinita sensata. Se un account offre un valore reale, proponilo dopo l'ordine. I moduli devono avere etichette corrette, compilazione automatica ed errori che spieghino cosa correggere. Le aree cliccabili devono essere abbastanza grandi; il criterio attuale è descritto in WCAG 2.2 alla voce Dimensioni dell'area cliccabile.
Misura le attività, non il colore dei pulsanti
I test A/B possono essere utili quando un'azienda ha traffico sufficiente, un'ipotesi e una metrica decisiva. Cambiare il banner ogni settimana senza un campione sufficiente è un parco giochi, non una conclusione affidabile.
Tengo traccia dell'uso della ricerca e dei filtri, delle azioni di aggiunta al carrello, degli errori nei moduli, degli abbandoni a ogni passaggio, dei resi e delle domande all'assistenza. Completo i numeri osservando le persone e le loro domande. L'analisi mostra dove; spesso una persona spiega perché.
La base della misurazione è in Google Analytics 4. Discuto i controlli delle prestazioni in Come velocizzare un sito web.
Un negozio online non deve essere originale nel modo in cui presenta il carrello. Deve convincere sul perché acquistare proprio qui questo prodotto.
Per gli argomenti delle pagine prodotto e vendita, continua con Elementi importanti delle pagine di vendita. La base completa del sito è in Come iniziare un progetto web.