# Dieci scelte di design per l'ecommerce che aumentano la conversione in modo misurabile > Non «usa più spazio bianco», non «testa il colore del pulsante». Le scelte specifiche di gerarchia visiva, fotografia, tipografia e mobile che muovono davvero la conversione nei negozi reali. Ryan Badger - 3 novembre 2024 - 7 min di lettura ## Le scelte di design che muovono davvero la conversione Gli articoli sul design di solito cadono in due campi. "Usa tanto spazio bianco!" (troppo vago) oppure "Fai A/B test su 47 colori di pulsante" (troppo granulare). Nessuno dei due aiuta chi guarda il proprio negozio chiedendosi perché converta all'1,3%. Questo articolo parla delle scelte di design visivo specifiche che spostano in modo misurabile la conversione nei negozi ecommerce. Non il gusto. Non l'estetica del brand. Le scelte di layout, gerarchia, colore e tipografia che o aiutano le persone a comprare o le ostacolano. ## 1. Gerarchia visiva: la cosa più importante deve sembrare la più importante La maggior parte dei negozi dà lo stesso peso visivo a tutto nella pagina prodotto: testo a 16px, prezzo a 18px, titoli a 18px. Ogni elemento compete; nessuno vince. L'occhio non ha un punto d'ingresso. Soluzione: ciò su cui vuoi che si clicchi deve essere la cosa più grande e a più alto contrasto della pagina. - Titolo del prodotto: 28-36px - Prezzo: 20-24px, in grassetto, ben delimitato - Pulsante Aggiungi al carrello: a tutta larghezza su mobile, l'elemento visivamente più pesante della pagina - Descrizioni, elenchi di specifiche, info di spedizione: 14-16px, più discreti Quando guardi la tua pagina prodotto da 2,5 metri di distanza (sì, letteralmente, appoggiati allo schienale), riesci a capire qual è l'azione principale? Se l'intera pagina sembra una zuppa grigia, la tua gerarchia è rotta. ## 2. Spazio bianco attorno alla CTA, non ovunque "Usa più spazio bianco" viene sbandierato come consiglio universale di design. Quello che conta davvero è lo spazio bianco attorno ai pulsanti e agli elementi chiave, non lo spazio bianco fine a sé stesso. - Almeno 40-60px di padding attorno all'area Aggiungi al carrello - Il prezzo in uno spazio pulito tutto suo, non affollato da altro testo - Le immagini del prodotto con spazio a disposizione (non bordo a bordo senza margini) Stringi di più tutto il resto (recensioni, info di spedizione, prodotti correlati). Sono secondari. L'area della CTA vince perché è l'unica con spazio per respirare. ## 3. Una fotografia coerente batte una fotografia "migliore" Un catalogo di 50 prodotti in cui le foto sono tutte leggermente diverse (sfondi diversi, luci diverse, livelli di zoom diversi) sembra amatoriale. Un catalogo in cui ogni foto ha lo stesso angolo, la stessa luce, lo stesso taglio e lo stesso sfondo sembra professionale. È un problema di volume, non di qualità. I tuoi 5 best seller possono avere foto hero curatissime. Tutto il resto va fotografato in modo identico, anche se un po' meno scenografico. L'incoerenza comunica "negozio piccolo e inaffidabile" più della bassa qualità. Regola pratica: - Foto principale: sfondo bianco o neutro, centrata, stesso taglio in tutto il catalogo - Foto secondarie: lifestyle / in uso, tono coerente - Tutte le foto con lo stesso rapporto d'aspetto e la stessa risoluzione ## 4. Contrasto della CTA, non colore della CTA "I pulsanti arancioni convertono X% in più di quelli verdi!" Vedi spesso questa affermazione dei test. Presa da sola è un'assurdità. Quello che conta è il **contrasto con la pagina attorno**. Un pulsante arancione su un sito a tema arancione è invisibile. Un pulsante blu sullo stesso sito è un faro. Scegli il colore con il contrasto più alto rispetto alla palette dominante del tuo sito. Se la tua pagina è bianco + nero + beige, la tua CTA dovrebbe essere l'unico colore che non compare altrove. Punto secondario: evita i ghost button (solo contorno, senza riempimento) per le CTA principali. Sembrano eleganti ma testano male in conversione perché all'occhio segnalano "secondario". Usa un riempimento pieno per Aggiungi al carrello, Effettua l'ordine, Acquista ora. ## 5. Dimensione del testo e lunghezza delle righe su mobile La maggior parte dei negozi mobile ha testo troppo piccolo e troppo largo. I telefoni mostrano il testo a densità di pixel più alta; ciò che è 16px su desktop sembra piccolo su mobile. Soglia minima per la tipografia mobile: - Testo: 16-18px come minimo - Lunghezza della riga: 40-60 caratteri per riga - Interlinea: 1,4-1,6 volte la dimensione del carattere - Pulsanti / aree di tocco: altezza minima di 44px (linea guida di accessibilità di Apple) Se i visitatori fanno pinch per zoomare sulle tue descrizioni, il tuo testo è troppo piccolo. Prova su un telefono vero a distanza di braccio, non nell'emulatore mobile del browser. ## 6. Aggiungi al carrello fisso su mobile Scorri una lunga pagina prodotto su mobile: quando hai letto la descrizione, il pulsante Aggiungi al carrello è tre schermate più su. Chi ha deciso di comprare ora deve tornare indietro, e il tasso di conversione cala. Soluzione: un pulsante Aggiungi al carrello fisso che resta in basso nel viewport mobile quando quello originale esce dallo schermo. Un tocco, si apre il carrello, niente caccia scorrendo. Desktop: il carrello fisso diventa facoltativo (il viewport è più grande). Mobile: non negoziabile. ## 7. Immagini hero che mostrano il risultato, non il prodotto La maggior parte delle sezioni hero mostra il prodotto isolato su bianco. Va bene per una foto di riferimento; è sbagliato per una hero. La hero deve comunicare "com'è la vita con questo" in 2 secondi. Meglio: il prodotto in uso, nel suo contesto, con una persona o un ambiente in linea con il tuo acquirente tipo. - Skincare: qualcuno che lo usa, luce del mattino, bagno - Arredamento: il pezzo in una stanza vera, vissuta - Abbigliamento: indossato, in movimento, non su un manichino - Cibo/caffè: mentre viene preparato o gustato, non una foto di prodotto La hero con il prodotto in uso converte meglio di quella con il prodotto isolato perché fa più lavoro di immaginazione al posto dell'acquirente. Può vedersi mentre lo usa senza doverselo immaginare. ## 8. Componenti coerenti in tutto il negozio Un errore comune: le pagine prodotto usano uno stile di card, le pagine categoria un altro, la homepage un terzo. I clienti avvertono questa incoerenza anche se non sanno nominarla. I negozi sembrano affidabili quando gli stessi componenti compaiono in modo coerente. Un piccolo design system per l'ecommerce è: - Un solo componente card prodotto (usato in homepage in evidenza, griglie di categoria, prodotti correlati, risultati di ricerca) - Un solo sistema di pulsanti (primario, secondario, terziario; solo questi tre) - Un solo sistema di stili per i titoli (H1, H2, H3; applicati con coerenza) - Una sola palette di colori (massimo 3 colori del brand, più la scala di grigi) - Una sola scala tipografica (massimo 3-4 dimensioni) La maggior parte dei negozi crea 15 varianti di ciascuno quando ne basterebbe una. Meno varianti = aspetto più professionale. ## 9. La prima schermata è la pubblicità per lo scorrimento L'area visibile al primo caricamento (above the fold) ha un solo compito: far venire voglia al visitatore di scorrere. Tutto qui. Non cercare di chiudere la vendita nella prima schermata. Cosa serve above the fold: - Per chi è (in una riga) - Cos'è il prodotto (visivamente, una bella immagine) - Una CTA chiara (Aggiungi al carrello o Acquista ora) - Un segnale di fiducia rassicurante (valutazione + numero di recensioni, o citazione della stampa, o cliente noto) Cosa NON serve above the fold: - Più CTA in competizione per l'attenzione - Un carosello hero che avanza da solo ogni 3 secondi (killer della conversione; i clienti si bloccano quando il contenuto si muove) - Ogni vantaggio che il prodotto ha - Gallerie di testimonianze ## 10. Elimina il carosello dalla tua homepage Collegato al punto precedente, ma merita un punto a sé: i caroselli hero in homepage sono morti. Gli studi mostrano con costanza che le slide hero a rotazione ricevono clic dall'1 al 3%, e solo la prima slide riceve attenzione significativa. Scegli il messaggio che metteresti nella slide 1; mettilo come hero statica. Lascia perdere il resto. ## Cosa gestisce Shoprocket La vetrina con tema include template che seguono già la gerarchia visiva, il contrasto e gli schemi mobile descritti sopra. Se usi l'embed del widget sul tuo sito, controlli tu il design della pagina circostante, ma: - Il **cassetto del carrello** (non un carrello a pagina intera) è il default - **Carrello fisso su mobile** supportato - **Immagini prodotto responsive** con consegna WebP automatica e rapporti d'aspetto corretti - **Site builder + oltre 40 temi**, così non devi costruire il design system da zero - Gli **hook CSS personalizzati** ti permettono di adattare l'embed al tuo sito ```
``` Cosa Shoprocket non controlla: le tue immagini hero, la coerenza delle tue fotografie, i tuoi testi, il tuo sistema di colori. Quelli sono tuoi, e dipende da te farli funzionare o meno. > **Consiglio:** apri subito il tuo negozio sul telefono. Prendi una pagina prodotto. Riesci a vedere Aggiungi al carrello senza scorrere? Il prezzo è chiaramente la seconda cosa più grande? Riesci a leggere la descrizione senza strizzare gli occhi? Se la risposta a una qualsiasi di queste domande è no, quella è la prima correzione di design da fare. ## In breve - **Gerarchia:** l'elemento più importante deve sembrare il più importante. Verificalo con il test dei 2,5 metri - **Spazio bianco attorno alla CTA**, non ovunque fine a sé stesso - **La coerenza fotografica** batte la qualità fotografica. Un solo stile in tutto il catalogo - **Contrasto della CTA, non colore.** Vince il colore con il contrasto più alto rispetto alla palette della tua pagina - **Tipografia mobile: testo da 16px+, aree di tocco da 44px+** - **Aggiungi al carrello fisso su mobile** è non negoziabile - **Le immagini hero mostrano i risultati** (prodotto in uso), non il prodotto su bianco - **Un piccolo design system (3 colori, 4 dimensioni, 3 varianti di pulsante)** sembra più professionale di 15 varianti - **La prima schermata vende lo scorrimento**, non il prodotto. Un messaggio chiaro, una CTA - **Elimina il carosello della homepage**. Vince la hero statica [Inizia la prova gratuita](https://app-v3.shoprocket.io/signup) se vuoi una vetrina con tema che abbia questi schemi già integrati. 14 giorni, senza carta. --- - HTML version: https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione - Language: Italiano (it) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)