Un'immagine può rendere un'opzione di prodotto più facile da comprendere, ma solo se lo shopper può capire cosa rappresenta e se è selezionata. Una fila di quadrati colorati attraenti non è un miglioramento quando i clienti non possono distinguere due tonalità simili o scoprire quale taglia non è disponibile.
Improve Options Design PRO può presentare i valori delle opzioni native di OpenCart come immagini o testo e utilizzare immagini di opzioni configurate globalmente o specifiche per prodotto. Usa queste capacità per spiegare la scelta, quindi valida il risultato sui dispositivi che i tuoi clienti utilizzano.
Scegli immagini per differenze visive
Le immagini sono utili quando la differenza è genuinamente visiva: tessuto, finitura, motivo o colore. Il testo può essere più chiaro per misurazioni, conteggi di confezioni o specifiche tecniche. Non forzare ogni opzione nella stessa presentazione solo per rendere una pagina prodotto coerente.
| Opzione | Presentazione utile | Informazioni da mantenere |
|---|---|---|
| Finitura del tessuto | Immagini ravvicinate coerenti | Nome finito leggibile |
| Taglia della camicia | Scelte di testo | Etichetta della taglia e link alla guida delle taglie |
| Capacità del dispositivo | Scelte di testo | Capacità e qualsiasi differenza di prezzo |
| Colore del prodotto | Immagine o campione con testo | Nome del colore e stato selezionato |
Utilizza ritagli, illuminazione e scala coerenti. Una miniatura più grande o più luminosa non dovrebbe accidentalmente implicare che un valore sia selezionato. Rendi lo stato selezionato distinto dagli stati di hover, focus e non disponibile.
Decidi dove vengono gestite le immagini delle opzioni
Un'immagine globale può adattarsi a un valore di opzione condiviso utilizzato in molti prodotti. Un'immagine specifica del prodotto è più appropriata quando la stessa etichetta appare diversa su articoli diversi. “Rovere” su un tavolo non dovrebbe necessariamente riutilizzare l'immagine scelta per una finitura di armadio non correlata.
Scegli una regola di proprietà e documentala. Se un'immagine di opzione globale cambia, rivedi i prodotti rappresentativi che la ereditano. Per le immagini specifiche del prodotto, mantieni un semplice elenco di controllo in modo che i prodotti appena aggiunti non tornino silenziosamente a una miniatura generica poco utile.
Mantieni etichette e stati di selezione chiari
Non comunicare disponibilità o selezione solo attraverso il colore. Mantieni etichette di testo leggibili e un indicatore di messa a fuoco visibile, e verifica che la navigazione da tastiera raggiunga ogni scelta interattiva. Controlla l'output del tema effettivo e qualsiasi personalizzazione di integrazione; non presumere che l'aggiunta di un'immagine fornisca automaticamente un comportamento accessibile.
Dopo aver selezionato un'opzione, l'acquirente dovrebbe essere in grado di rispondere a tre domande: quale valore è selezionato, se cambia il totale e se è disponibile. Conferma che quelle risposte rimangano visibili quando il puntatore si allontana o la pagina viene scorsa.
Testa il comportamento touch senza fare affidamento su hover
Lo zoom al passaggio del mouse dell'estensione può aiutare gli utenti desktop a ispezionare un'immagine dell'opzione. I visitatori mobili non hanno un passaggio del mouse persistente, quindi le informazioni essenziali devono rimanere disponibili senza di esso. Testa un dispositivo touch reale, inclusi uno schermo piccolo e un telefono più grande.
- Tocca un'opzione e verifica che la selezione avvenga in modo prevedibile.
- Cambia la tua selezione e conferma che solo il valore previsto rimane attivo.
- Scorri attraverso l'area delle opzioni senza selezionare accidentalmente un valore diverso.
- Utilizza la tastiera o un metodo di navigazione assistiva per ispezionare gli stessi controlli.
- Aggiungi il prodotto a un carrello di prova e controlla che i valori scelti siano registrati correttamente.
Distinguere la presentazione dall'inventario delle varianti
Rendere un'opzione nativa più bella è un compito diverso rispetto a dare a una combinazione di dimensione e colore il proprio SKU e stock. Se hai bisogno di dati a livello di combinazione, rivedi Options combinations e il workflow di gestione scorte per variante. Conferma come interagiscono entrambe le estensioni prima di implementarle insieme.
Lo stesso principio si applica alle estensioni di prezzo e galleria. Inventaria tutti i moduli che alterano l'area delle opzioni e testa la configurazione completa, specialmente su un tema personalizzato. Un test riuscito sul tema predefinito non prova che il tuo modello di prodotto personalizzato si comporti in modo identico.
Esamina l'intera pagina prodotto dopo la modifica
Mantieni i file immagine di dimensioni appropriate per la loro area di visualizzazione ed evita di caricare fotografie a piena risoluzione per campioni piccoli. Controlla la stabilità del layout mentre le immagini vengono caricate e assicurati che l'area delle opzioni non spinga le informazioni principali sull'acquisto in un ordine confuso. Il nostro audit della pagina prodotto mobile collega questi controlli con il resto del percorso di acquisto.
Valuta il risultato con comportamenti osservabili: meno scelte poco chiare nei test di usabilità, opzioni del carrello correttamente registrate e un layout che rimane utilizzabile su schermi piccoli. Non promettere un aumento della conversione da un cambiamento visivo prima di misurarlo nel tuo negozio.