Design UX: nell'e-commerce l'eccellenza non è un'opzione

Quando qualcuno non riesce a completare un ordine sul tuo negozio, non pensa "l'architettura dell'informazione potrebbe essere più chiara". Pensa che il sito sia rotto.

Non è una metafora. Nel sondaggio del Baymard Institute sui motivi per cui le persone abbandonano il carrello (escludendo chi sta solo guardando), il 17% dice di essere andato via perché il sito web aveva errori o si era bloccato. Alcuni erano guasti reali. Molti no: un modulo che ha cancellato il numero della carta dopo un errore di battitura, un messaggio di errore fissato in cima alla pagina mentre il campo difettoso restava sotto la piega, una ricerca che non restituiva nulla per un prodotto che vendi davvero, un modal che non riuscivano a chiudere con il pollice.

Tu vedi una decisione di design. Loro vedono un bug. E a differenza di un bug vero, questo non compare mai nel tuo monitoring degli errori. Compare solo come un calo silenzioso della conversione.

Prima di tutto: la UX non è la UI

Un chiarimento prima di andare avanti, perché le due parole vengono continuamente confuse. La UI, user interface, è ciò che vede il tuo cliente: colori, pulsanti, tipografia, spaziatura. La UX, user experience, è ciò che gli accade: se trova il prodotto, capisce la data di consegna, si riprende da un errore di battitura e riesce a pagare senza doverci pensare. Un negozio può avere una UI bellissima e una UX rotta: un checkout splendido che cancella il numero della carta resta un checkout rotto. Tutto ciò che segue parla di UX: non di come appare il tuo negozio, ma di come si comporta quando un cliente reale lo usa, con una mano sola, di fretta.

L'unico errore buono è quello che non accade mai

Le euristiche di usabilità di Jakob Nielsen hanno trent'anni e restano la checklist più onesta del commercio digitale. Due di esse pesano più delle altre nel momento in cui c'è del denaro in gioco:

• Previeni l'errore (euristica n. 5). Vincoli, valori predefiniti sensati, la tastiera giusta, una conferma prima di qualsiasi azione distruttiva.
• Se accade comunque, aiuta le persone a riprendersi (euristica n. 9). Linguaggio chiaro, il problema esatto, un passo successivo ovvio.

Un bordo rosso senza testo fallisce su entrambi. Un messaggio che dice Invalid input anche. E un checkout che urla "l'email è obbligatoria" nel millisecondo in cui qualcuno tocca il campo anche: NN/g lo paragona a correggere il compito prima che lo studente abbia risposto a una sola domanda.

Il benchmark checkout 2025 di Baymard è una lettura scomoda se davi per scontato che "i grandi siti hanno risolto la questione": il 64% dei checkout desktop e il 63% dei checkout mobile dei principali negozi USA ed europei è giudicato mediocre o peggio. Il due per cento ottiene un "buono". Nessuno, perfetto (Baymard).

Come appare davvero un errore utile

Prendiamo un codice postale francese che non corrisponde alla città. La versione pigra è un banner rosso: "Indirizzo non valido". La versione utile sta sotto il campo, nella lingua del cliente, e offre una soluzione: "Questo codice postale non corrisponde a Lione. Intendevi 69001 (Lyon 1er)?"

Non è rifinitura. È la regola di efficienza di NN/g più il criterio WCAG 3.3.3 (suggerire una correzione quando il sistema ne conosce una). In pratica:

• Metti il messaggio accanto al campo, non in un toast a milleduecento pixel di distanza.
• Usa icona + bordo + testo. Il colore da solo è invisibile per una parte significativa dei tuoi clienti, e fallisce l'accessibilità per progettazione.
• Non incolparli. "Non valido", "illegale", "errato" suonano tutti come se il cliente avesse sbagliato qualcosa. Il sistema non ha accettato un input; la frase deve assumersene la responsabilità.
• Non cancellare mai ciò che hanno già digitato, incluso il numero della carta dopo un errore nel CVV. Cancellare il modulo significa chiedere loro di decidere l'acquisto una seconda volta.
• Valida quando lasciano il campo (o quando un codice postale, un telefono o un numero di carta è completo), non mentre stanno ancora digitando, e mai al primo focus.

Baymard ha scoperto che il 31% dei siti non ha ancora alcuna validazione inline, e una parte del resto la applica in modo così aggressivo che i tester hanno creduto di aver rotto la pagina. Tre dettagli decidono da che parte stai: nessun avviso prematuro, l'errore scompare nel momento in cui il valore viene corretto, e una piccola spunta verde sui campi validi perché i clienti ansiosi smettano di rileggere tutto il modulo.

Se questo mese puoi riscrivere solo cinque messaggi, misura prima. Quali errori di validazione si verificano più spesso, e quali di essi precedono un abbandono? Quelli meritano una frase umana. Baymard la chiama adaptive error messaging. Tu puoi chiamarla "smetti di scrivere testi per errori che nessuno incontra mai".

Un pagamento rifiutato è un'altra specie. Il cliente deve sapere se è stato addebitato, se lo stock è ancora riservato per lui e cosa può provare invece. "Pagamento non riuscito" più un pulsante di riprova che va in loop è la via più breve da un errore di UX a un chargeback.

Se il negozio non dice nulla, pensano che si sia bloccato

La "visibilità dello stato del sistema" è l'euristica n. 1, ed è in realtà una regola di fiducia. Un feedback prevedibile è ciò che fa sentire sicuro il tocco successivo.

Alcuni schemi che si leggono come un guasto anche quando il backend è perfettamente sano:

• "Aggiungi al carrello" senza badge, senza pannello, senza avviso, così toccano due volte e ordinano due pezzi.
• Un pulsante Paga che resta cliccabile mentre la banca riflette, così toccano due volte e tu crei una doppia autorizzazione.
• Uno spinner senza timeout su un reindirizzamento 3-D Secure. Dopo qualche secondo, per un pollice su un tram, quello è un blocco.
• Un "Passo 2 di 4" che poi tira fuori a sorpresa la creazione di un account o un passaggio via SMS.

Adatta l'indicatore alla posta in gioco: una conferma discreta per "aggiunto al carrello", un blocco solo quando l'utente deve davvero fermarsi. E quando il layout è già noto, una schermata skeleton batte uno spinner infinito.

Il tuo menu è nell'angolo sbagliato della loro mano

Steven Hoober ha osservato 1.333 persone usare il telefono in pubblico. Quasi la metà lo maneggiava con una sola mano; la maggior parte del resto teneva il telefono e toccava comunque con il pollice. Cambiano presa ogni pochi secondi a seconda del compito. Non sono seduti a una scrivania con un mouse.

Quindi un menu hamburger nell'angolo in alto a sinistra, una "X" microscopica in alto a destra di un popup a schermo intero o un pulsante principale intrappolato sotto un banner dei cookie non sono "la versione mobile del sito desktop". Sono errori di portata. Le azioni principali appartengono dove il pollice è già: navigazione in basso, un "Aggiungi al carrello" sticky che sia davvero toccabile, un menu nella zona del pollice invece che incastrato contro la barra di stato.

Il cugino desktop di questa idea è il colore d'accento. Un solo colore dovrebbe significare "questa è l'azione che conta". Se filtri, chip, link secondari e "Paga ora" condividono lo stesso rosso, le persone devono leggere l'interfaccia invece di riconoscerla. Non è branding. È camuffamento.

I telefoni non hanno fatto che allungarsi dal 2013. La parte alta dello schermo non è diventata più facile da raggiungere.

Smetti di disegnare campi di input finti

Il sistema operativo sa già come raccogliere un numero di telefono. type="tel" apre un tastierino numerico, type="email" offre la @, e un selettore di data nativo batterà sempre un calendario personalizzato che rompe l'autofill. Bloccare l'incolla nei campi della carta non ti rende più conforme al PCI; fabbrica errori di battitura.

La stessa logica vale per come vengono nominati i campi. L'attributo HTML autocomplete è un contratto con il browser: shipping street-address, shipping postal-code, email, tel. Compilalo correttamente e Safari, Chrome e il gestore di password digitano l'indirizzo per il tuo cliente. Lascialo vuoto, o peggio, forza autocomplete="off" "per sicurezza", e hai inventato una tassa di quaranta secondi su ogni cliente di ritorno. È anche un requisito di accessibilità (WCAG 1.3.5), non un trucco da sviluppatore.

Un livello sopra, la ricerca dell'indirizzo mentre si digita (la BAN o La Poste in Francia, o qualsiasi fornitore serio) è la versione adulta dell'autocomplete. Tieni solo un fallback manuale per i giorni in cui l'API è lenta: un widget che gira all'infinito è, ancora una volta, "il sito è rotto".

Dai loro un'uscita e una via di ritorno

Le persone toccano la cosa sbagliata di continuo. L'euristica n. 3 è l'uscita di emergenza chiaramente segnalata: annulla, annulla l'operazione, clicca fuori, il tasto Esc, un pulsante di chiusura abbastanza grande da colpirlo davvero.

La regola di NN/g sui modal è netta. Usali per prevenire danni irreversibili, o per chiedere informazioni senza le quali il flusso non può continuare. Non per una newsletter, non per un upsell sui cookie e non per nulla nel mezzo del checkout. Un modal nel checkout è il modo più sicuro per mandare un cliente pronto a pagare nella tana del reset della password.

Su mobile, attento anche al bug opposto: un dito un po' largo che chiude una finestra di cui avevano davvero bisogno. Le conferme distruttive non dovrebbero mai chiudersi con un tocco esterno; i modal non critici dovrebbero chiudersi in tre modi (pulsante, Esc, clic fuori). Se il tuo "non modal" desktop diventa una trappola a schermo intero su un iPhone, non hai un overlay responsive. Hai un sequestro.

La riprendibilità è la stessa euristica allungata nel tempo. Un carrello dovrebbe sopravvivere alla chiusura della scheda. Un checkout di dodici campi non dovrebbe azzerarsi perché il codice postale è stato rifiutato. Se il flusso è lungo, invia un magic link per riprenderlo. Nell'e-commerce europeo, il cliente interrotto a metà acquisto sul telefono non è un caso limite: è la norma.

E l'acquisto come ospite non è un extra: il 18% degli acquirenti ha abbandonato perché il sito esigeva un account, e il 62% dei siti nasconde ancora "Continua come ospite" sotto un'etichetta "Nuovo cliente" (Baymard 2025). Se devono cercarlo, non lo offri. Raccogli l'account dopo l'ordine, con un magic link, non come un casello prima della vendita.

Parla come qualcuno che aspetta un pacco, non come un ERP

"2-3 giorni lavorativi" è una frase scritta dalla logistica. "Arriva giovedì" è una frase scritta per un essere umano. Secondo Baymard, quasi la metà dei negozi leader fa ancora fare al cliente il calcolo del calendario, festivi inclusi. Un conto alla rovescia fino alla scadenza ("ordina nei prossimi 43 minuti per la consegna di giovedì") batte un "ordina entro le 11:00 PST" statico che nessuno convertirà da un fuso orario in cui non vive.

Altri errori di vocabolario che sembrano banali e si comportano come bug:

• Segnare solo i campi opzionali, o solo quelli obbligatori: il 61% dei siti sbaglia, e nei test utente il 32% dei partecipanti ha saltato almeno un campo obbligatorio (spesso il telefono) prima di sbattere contro un muro.
• Regole password degne di una banca centrale per un account di negozio. Regole troppo severe hanno causato fino al 19% di abbandoni tra persone che avevano già un account, e poi fallivano sull'email di reset. Un minimo di 6-8 caratteri più un magic link basta e avanza per vendere scarpe.
• Perdite dal back-office: SKU, 3PL, "fulfillment", "pre-autorizzazione", "challenge 3-D Secure". Traducile. "Controlliamo la tua carta adesso, ti addebitiamo alla spedizione" è un messaggio di stato. "RUM" no.

Il minimalismo è lo stesso rispetto applicato alla struttura. Baymard conta 23,48 elementi di modulo nel checkout medio statunitense, contro un ideale di 12-14 (7-8 campi reali). Quasi un abbandonatore su cinque ha detto che il checkout sembrava troppo lungo. La maggior parte di quei campi extra non è mai servita a spedire un pacco.

Se non lo trovano, non lo vendi

La ricerca non è un widget. Per un catalogo che non si può sfogliare in quindici secondi, è il negozio. Una pagina "nessun risultato" che si stringe nelle spalle è una saracinesca abbassata, e circa la metà dei siti non offre ancora alcuna via d'uscita. "Controlla l'ortografia" non è una via d'uscita; nessuno legge quella frase. Categorie correlate, una query ampliata con cinque anteprime di prodotto, articoli visti di recente, un numero di telefono, i best seller: questa è una via d'uscita.

Lo stesso vale per una navigazione costruita sui nomi del tuo magazzino invece che sulle parole del cliente, e per raccomandazioni che sono casuali o leggermente inquietanti. "Visti di recente" e "acquistati insieme" si guadagnano il loro posto; "abbiamo notato che guardavi fedi nuziali" no.

Le liste, infine, rispettano il fatto che il carrello serve già come memoria esterna. NN/g ha osservato che le persone evitano tutto ciò che è etichettato "Wishlist" (suona come una lista di nozze, e suona come lavoro) e rifiutano tutto ciò che esige un account per salvare un articolo. "Salva per dopo": visibile, senza login. Il vantaggio operativo è reale: una lista è un motivo legittimo per inviare un'email "questo sta per esaurirsi", ma nell'UE quell'email richiede comunque un consenso opt-in adeguato. L'errore di UX e l'errore GDPR sono spesso lo stesso campo.

Un ultimo errore poco glamour: i tuoi articoli sono illeggibili

Se pubblichi un blog, la modalità lettura del browser è un test che il tuo markup supera o fallisce. Titoli gerarchici veri, un titolo di pagina vero, testo che è davvero testo. Una pagina marketing fatta di immagini e div fallisce la modalità lettura, fallisce le tecnologie assistive e fallisce i lettori che volevano semplicemente salvare l'articolo per dopo. È una cosa piccola accanto al checkout. È anche una perdita di credibilità.

Domande frequenti

Analizzalo come un cliente: su un telefono, con un errore di battitura

Questi errori non li vedrai dal desktop dell'ufficio, con l'accesso da amministratore. Li vedrai su un tram, in 4G, con una lettera di troppo nel codice postale e un banner dei cookie che copre il pulsante Paga.

Inizia da lì questa settimana: testo di errore accanto ai campi, input che conservano i loro valori, acquisto come ospite ben visibile, il type e l'autocomplete giusti su ogni campo, un controllo di chiusura funzionante su ogni overlay, una data di consegna invece di "giorni lavorativi", una pagina senza risultati che offra un passo successivo. Niente di tutto ciò richiede un replatform. La maggior parte non richiede nemmeno uno sprint completo.

I negozi che perdono meno clienti non sono quelli con più animazioni. Sono quelli i cui errori si leggono come frasi, i cui pulsanti stanno dove il pollice è già, e i cui clienti non devono mai chiedersi se il sito si sia appena bloccato.

Da Saphes IT-Systems, analizziamo quel percorso esattamente come lo vive un visitatore alla prima volta: errori, stati vuoti, ricerca, checkout, fino al modal che non riesci più a chiudere e che hai smesso di notare, e correggiamo i difetti che sembrano già bug. Se vuoi sapere quali delle tue "scelte di design" i tuoi clienti hanno già archiviato come "rotto", parliamone.