Impostazioni dell’esperienza utente

Link in evidenza

1. Documentazione di Company XYZ sulle impostazioni dell’esperienza utente
2. Documentazione di Shopify sull’editor del tema

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usa queste impostazioni globali per rendere coerenti le interazioni di acquisto in tutto il tema. Influiscono sul modo in cui i clienti ricevono il feedback del carrello, esaminano le immagini dei prodotti, riconoscono le schede e i banner collegati, navigano durante lo scorrimento e passano da una pagina all’altra.

Comportamento del carrello e della galleria prodotti

Scegli lo stile di aggiunta al carrello più adatto al tuo processo di acquisto:

1. Redirect to cart porta i clienti direttamente al carrello dopo l’aggiunta di un articolo, una soluzione adatta ai negozi che desiderano che i clienti esaminino subito il proprio ordine.
2. Show mini cart conferma l’aggiunta in un overlay, mantenendo i clienti nella pagina corrente. Questa è l’impostazione predefinita e consente di continuare la navigazione.
3. Update icon only mantiene l’interazione essenziale aggiornando l’indicatore del carrello senza aprire una visualizzazione del carrello.

Scegli se i clienti possono aprire le immagini dei prodotti in un lightbox. Lo zoom della galleria è utile quando gli acquirenti devono esaminare più da vicino materiali, dettagli o varianti dei prodotti; disattivalo per un’esperienza di visualizzazione delle immagini più semplice.

Se usi lo stile del carrello con la sola icona, assicurati che l’indicatore del carrello rimanga facilmente visibile. I clienti devono poter capire che un articolo è stato aggiunto senza lasciare la pagina.

Overlay ed effetti al passaggio del mouse

Attiva l’effetto di sfocatura dell’overlay per attenuare il contenuto dietro gli overlay supportati e attirare l’attenzione sull’interazione attiva. Disattivalo se preferisci un aspetto visivo più nitido o vuoi che il contenuto dello sfondo rimanga più visibile.

Il ridimensionamento delle schede e i filtri delle immagini aggiungono un feedback al passaggio del mouse alle schede e ai banner collegati in tutto il tema. Entrambi sono attivati per impostazione predefinita. Usali per rendere più facilmente individuabili i contenuti collegati, ma mantieni gli effetti discreti quando le schede utilizzano immagini dettagliate o layout ricchi di testo.

Comportamento dell’header

Controlla il comportamento dell’header durante lo scorrimento dei clienti:

1. Fixed mantiene visibili nella parte superiore dello schermo la navigazione, la ricerca e i controlli del carrello.
2. Hide on scroll riduce l’header quando i clienti scorrono verso il basso e lo mostra nuovamente quando scorrono verso l’alto. Questo è il comportamento predefinito.
3. Off mantiene l’header nella sua posizione normale nella parte superiore di ogni pagina.

Un header fisso consente di accedere rapidamente ai controlli principali. Un header che si nasconde lascia più spazio ai contenuti, caratteristica particolarmente utile sugli schermi più piccoli.

Transizioni di pagina

Usa una transizione con dissolvenza per attenuare il cambiamento visivo tra le pagine. Lascia le transizioni disattivate quando preferisci un feedback di navigazione immediato o un’esperienza di navigazione più essenziale.

Consiglio

Evita di combinare transizioni di pagina marcate con effetti pronunciati al passaggio del mouse e overlay. Limitare i movimenti in competizione aiuta i clienti a concentrarsi sui prodotti e sulle azioni di acquisto.

Note sull’uso

1. Testa il feedback del carrello. Aggiungi articoli dalle pagine prodotto e dalle schede degli elenchi per verificare che i clienti ricevano una conferma chiara.
2. Supporta l’ispezione dei prodotti. Attiva lo zoom della galleria quando le immagini ravvicinate dei prodotti aiutano i clienti a prendere decisioni di acquisto.
3. Mantieni prevedibili i contenuti collegati. Usa gli effetti al passaggio del mouse in modo coerente nelle schede prodotto e nei banner promozionali.
4. Controlla lo scorrimento sui dispositivi mobili. Visualizza in anteprima il comportamento dell’header selezionato sugli schermi più piccoli per bilanciare lo spazio dei contenuti con l’accesso ai controlli di navigazione e del carrello.
5. Usa il movimento in modo intenzionale. Scegli una combinazione equilibrata di transizioni, feedback al passaggio del mouse ed effetti overlay per un’esperienza di navigazione più tranquilla.