Mega menu, menu mobile e carrello pop-up: aumento della conversione della vetrina

La settimana scorsa sono stato contattato dal proprietario di un negozio di lubrificanti industriali, un ragazzo che, in cinque anni, ha ampliato il suo catalogo da duecento articoli a diciassettemila. Il suo problema sembrava banale: "I clienti chiamano e chiedono se abbiamo olio idraulico di questa o quella viscosità. Io dico che ovviamente c'è, è sul sito web. E loro rispondono: non l'abbiamo trovato." Diciassettemila prodotti, dozzine di categorie, sottocategorie con caratteristiche tecniche - e una persona non riesce a trovare la posizione giusta. Non perché sia ​​stupido. Ma perché la navigazione sul sito è stata progettata in modo tale che anche io, conoscendo a memoria la struttura del catalogo, ho trascorso quattro o cinque clic sul percorso verso un prodotto specifico.

Questa è una storia tipica per i negozi WooCommerce che sono cresciuti da piccoli. Finché hai duecento prodotti, è sufficiente un menu a discesa standard. Mille è già affollato, ma tollerabile. Cinquemila e più: la navigazione diventa un collo di bottiglia attraverso il quale defluiscono gli ordini. Ho visto analisi di dozzine di negozi e posso dire una cosa: la differenza tra una navigazione buona e una cattiva non è una "esperienza utente" astratta. Questo è denaro. Denaro specifico e misurabile sotto forma di conversione, che differisce da una volta e mezza a due volte.

Ed è qui che inizia il divertimento. La navigazione standard di WordPress è, per usare un eufemismo, uno strumento degli anni 2000. Elenchi a discesa al passaggio del mouse, struttura lineare, nessun segnale visivo. Buono per un blog. Per un negozio online con migliaia di SKU, no. Quando ho iniziato a comprendere veramente questo problema, mi sono reso conto che la navigazione nell'e-commerce non è un elemento, ma un sistema di tre componenti interconnessi. Mega-menu per desktop, che rivela la struttura del catalogo come la mappa di un centro commerciale. Menu inferiore mobile che tiene le azioni chiave sotto controllo, come in Ozon o Wildberries. E un cestino pop-up che conferma l’azione dell’utente senza interrompere il suo percorso nel catalogo. Togli uno qualsiasi di questi tre elementi e otterrai un buco nell'imbuto attraverso il quale i clienti se ne vanno. Ognuno di loro risolve il proprio problema, ma insieme creano proprio quella “perfezione” di cui i designer UX amano parlare.

In effetti, questo è il motivo per cui abbiamo integrato tutti e tre i componenti nel nostro plugin COS WP Woo. Non come componenti aggiuntivi separati, ma come un sistema di navigazione unificato, in cui il mega menu, il menu mobile e il carrello pop-up sono configurati da un unico pannello, condividono stili comuni e funzionano come un meccanismo coordinato. Ma prima di tutto, inizierò spiegando perché le soluzioni standard smettono di funzionare e cosa fare al riguardo.

Mega menu: quando il menu a discesa si trasforma in una mappa del negozio

Lavoro da molto tempo con MaxMegaMenu, un plugin che è diventato di fatto lo standard di fatto per i mega menu di WordPress. Non posso dire niente di negativo come prodotto: fa il suo lavoro, ha un milione di installazioni e una community attiva. Ma quando lo integri in un negozio WooCommerce, iniziano le sfumature. Innanzitutto, è un plugin separato con il proprio ecosistema di stili, il proprio JavaScript e la propria logica di rendering. Non sa nulla dei tuoi prodotti, categorie, prezzi. Per lui un menu è un menu, un insieme di collegamenti annidati, e non gli importa se questi collegamenti portano alla pagina “Informazioni sull’azienda” o a un catalogo di oli idraulici con venti sottocategorie. In secondo luogo, ogni plug-in aggiuntivo è un CSS e JavaScript aggiuntivo caricato su ogni pagina. Per un negozio in cui la velocità di caricamento influisce direttamente sulla conversione, questa non è cosa da poco.

Ma non è nemmeno questo il problema principale. Il problema principale è che un mega menu in un negozio online non è solo navigazione. Questa è una vetrina. Questa è la prima cosa che vede un visitatore passando il mouse sopra il “Catalogo”. E dipende da come è organizzata questa vetrina se approfondirà il catalogo o chiuderà la scheda. Ho visto molte volte come, in un classico menu a tendina, le categorie siano disposte in una colonna di venti punti che si estende oltre il bordo dello schermo. Una persona muove il mouse su e giù, cercando di trovare ciò di cui ha bisogno, e scivola accidentalmente fuori dal sottomenu: si chiude. Ci riprova, fallisce ancora. La terza volta va alla ricerca. Oppure se ne va e basta.

Il mega menu risolve questo problema in un modo fondamentalmente diverso. Invece di un elenco verticale, espande la struttura della directory orizzontalmente, in più colonne. Vedi tutte le categorie principali contemporaneamente, come le sezioni in un supermercato. Oli industriali - prima colonna. I fluidi idraulici sono il secondo. I lubrificanti sono il terzo. L'autochimica è quarta. Ogni colonna mostra le sottocategorie e ti orienti immediatamente: hai bisogno di oli per compressori, eccoli qui, il secondo elemento nella seconda colonna, un clic. Non quattro, non cinque: uno.

Quando ho progettato il modulo mega menu per COS WP Woo, sono stato guidato dall'esperienza reale con i negozi. Tre cose erano importanti per me. Il primo è un layout a più colonne che può essere personalizzato per una directory specifica. Non tutti i cataloghi sono uguali: alcuni hanno tre categorie principali con nidificazione profonda, mentre altri ne hanno venti piatte. Il nostro mega menu ti consente di impostare separatamente il numero di colonne per ciascun elemento di livello superiore, e questo non avviene tramite hack CSS, ma tramite un'interfaccia visiva nel pannello di amministrazione. Il secondo sono immagini e widget direttamente nel menu. Quando un visitatore punta alla categoria “Oli Idraulici”, non vede solo un elenco di sottocategorie, ma anche un'immagine, magari un banner con una promozione o un widget con i bestseller. Ciò trasforma il menu da navigazione in uno strumento di merchandising a tutti gli effetti. Il terzo è la velocità. Il mega menu viene visualizzato sul server tramite Walker PHP personalizzato, anziché generato sul client tramite JavaScript. Ciò significa che il menu appare istantaneamente, senza ritardi per le richieste AJAX, senza lampeggiare, senza “scheletri”.

Walker PHP è forse la cosa più sottovalutata nello sviluppo di WordPress. Lo standard Walker_Nav_Menu rende i menu come elenchi ul/li nidificati, un formato che non è cambiato da quando l'HTML era giovane. Un mega menu richiede un rendering completamente diverso: colonne, blocchi, immagini, widget: tutto questo deve essere allineato correttamente nel DOM in modo che i CSS possano trasformarlo in quella stessa "mappa del negozio". Il nostro Walker personalizzato analizza la struttura del menu WordPress, determina i livelli di nidificazione e crea contenitori mega-pannello per gli elementi di primo livello. All'interno di questi pannelli, gli elementi di secondo livello diventano intestazioni di colonna e gli elementi di terzo livello diventano i loro contenuti. Sembra semplice, ma il diavolo sta nei dettagli: devi gestire correttamente un numero arbitrario di livelli di annidamento, classi CSS personalizzate, attributi di collegamento, descrizioni di voci di menu: tutto questo passa attraverso Walker e deve essere salvato.

Separatamente voglio parlare delle animazioni, perché questo è il dettaglio su cui inciampano molte implementazioni di mega-menu. Il ritardo al passaggio del mouse è un'impostazione che sembra una cosa da poco, ma in pratica determina se un menu sarà comodo o fastidioso. Se il ritardo è troppo piccolo, il menu viene visualizzato ogni volta che il cursore si sposta accidentalmente oltre la navigazione. Troppo grande: l'utente punta, aspetta, pensa che non sia successo nulla, sposta il cursore e il menu appare nel momento in cui non è più necessario. Abbiamo sperimentato valori diversi e abbiamo ottenuto 150-200 millisecondi: la media aurea, in cui il targeting accidentale viene ignorato e quelli intenzionali vengono elaborati rapidamente. Inoltre, questo ritardo è regolabile: per i negozi con una struttura di catalogo semplice può essere ridotto a 100 millisecondi, per quelli complessi può essere aumentato a 250. Anche l'animazione di chiusura ha un proprio ritardo, e dovrebbe essere leggermente maggiore del ritardo di apertura in modo che l'utente possa spostare il cursore dalla voce di menu al pannello del megamenu senza perderlo. Questo modello è chiamato "triangolo di Amazon": Amazon una volta brevettò un algoritmo che calcola il vettore del movimento del cursore e non chiude il sottomenu se il cursore si sposta verso il pannello. Abbiamo implementato una versione semplificata di questo algoritmo: se il cursore esce dalla voce di menu, ma si trova nell'area del megapannello, il pannello non si chiude.

C'è anche una sfumatura con l'indice z e la sovrapposizione dei contenuti. Un mega menu è, per definizione, un elemento che si trova sopra il contenuto principale di una pagina. Se la pagina ha uno slider, un lettore video, finestre modali di altri plugin, è necessario che il mega menu venga visualizzato sopra a tutto questo. Sembra semplice: imposta lo z-index su un valore più alto e dimenticatelo. Ma in pratica, la “guerra dello z-index” è uno dei problemi di layout più comuni. Un plugin imposta lo z-index su 9999, un altro su 99999, il terzo su 999999. Ci siamo avvicinati a questo aspetto con attenzione: utilizziamo uno z-index fisso, che è esattamente più alto degli elementi standard di WordPress e WooCommerce, ma più basso delle finestre di amministrazione modali. Inoltre, abbiamo aggiunto un'impostazione che ti consente di modificare manualmente z-index nei casi in cui il sito dispone di plug-in con valori aggressivi.

Sapete cosa mi ha sorpreso di più quando ho iniziato a misurare i risultati? Non il tempo medio trascorso sul sito o la profondità di navigazione: questi parametri sono, ovviamente, migliorati. Sono rimasto sorpreso dalla conversione sui dispositivi mobili. Sembrerebbe che il mega-menu sia una cosa del desktop; non puoi ancora mostrarlo per intero su un dispositivo mobile. Ma il fatto è che un mega-menu adeguatamente strutturato su un desktop stabilisce un modello mentale del catalogo. Una persona che ha visto la struttura una volta sul grande schermo, poi sul cellulare sa già dove andare. Ricorda che gli oli per compressori sono una sottocategoria degli oli industriali, non degli oli idraulici. E anche nella versione mobile, dove il mega menù si trasforma in una fisarmonica, questa mappa mentale funziona.

Una storia a parte è il visual design. Ho visto mega menu che assomigliano a un foglio di calcolo Excel: sfondo grigio, testo nero, nessuna separazione visiva. E ho visto mega menu che sembrano una landing page separata: banner, animazioni, blocchi promozionali. La verità, come al solito, sta nel mezzo. Il menu dovrebbe essere visivamente attraente, ma non sovraccarico. Icone di categoria: sì. Un'immagine d'accento per il promo principale – sì. Animazione dell'aspetto di ciascun elemento: no, semplicemente rallenta. Nel nostro modulo, lo stile è configurato da un unico pannello: colori di sfondo, testo, colori al passaggio del mouse, dimensioni dei caratteri, rientri, arrotondamenti, il tutto attraverso un'interfaccia visiva familiare, senza la necessità di accedere ai CSS.

Ma guardiamo le cose in modo pragmatico. Il menu Mega è una storia sul desktop. Su uno schermo largo 1200 pixel o più, si rivela in tutto il suo splendore, mostrando colonne, immagini e widget. Ma cosa succede sul tablet? Al telefono? Secondo SimilarWeb e le nostre analisi, dal 60 al 75% del traffico dei negozi online in Russia proviene da dispositivi mobili. E qui inizia la seconda parte della storia.

Menù inferiore mobile: lezioni sul marketplace

Quando ho installato per la prima volta l'app Ozon - non ricordo in che anno - sono rimasto stupito da quanto fossero naturali i controlli. Catalogo, ricerca, carrello, profilo: tutto è nella parte inferiore dello schermo, tutto è sotto il tuo controllo. Non c'è bisogno di prendere l'hamburger nell'angolo in alto a sinistra, né di scorrere verso l'alto per tornare al catalogo. Le azioni di base sono sempre disponibili, su qualsiasi pagina, in qualsiasi momento. Poi ho visto la stessa cosa in Wildberries. Quindi in Yandex.Market. Il modello è diventato lo standard per l'e-commerce mobile e per una buona ragione: si basa sull'ergonomia. La zona dove il pollice può raggiungere comodamente è il terzo inferiore dello schermo. È qui che dovrebbero essere posizionati i controlli più importanti.

Cosa offre WooCommerce standard? Menù hamburger nell'intestazione. Piccolo, impercettibile, richiede una pressione precisa. Nell'intestazione c'è anche il carrello, un'icona di 20 x 20 pixel. Cerca: l'icona di una lente di ingrandimento che deve ancora essere trovata. E tutto questo è nella parte superiore dello schermo, dove sui moderni smartphone con schermo da 6,5 ​​pollici è fisicamente scomodo raggiungerlo con una mano. Non esagero: ci sono studi che dimostrano che il 49% degli utenti di smartphone tiene il telefono con una mano. Ciò significa che la parte superiore dello schermo è una zona morta per quasi la metà del tuo pubblico mobile.

Questo è il motivo per cui abbiamo creato un menu a piè di pagina mobile come parte del nostro plugin. Non un componente aggiuntivo separato, non una funzionalità premium: un componente base del sistema di navigazione. Cinque icone fisse nella parte inferiore dello schermo: “Home”, “Catalogo”, “Cerca”, “Carrello”, “Profilo”. Le icone sono personalizzabili: puoi sostituire "Home" con "Promozioni", "Profilo" con "Preferiti", aggiungere "Chiama" per i negozi in cui gli ordini telefonici sono importanti. Ogni icona non è solo un collegamento, ma un elemento con un badge. Il carrello mostra il numero di articoli e il profilo mostra le notifiche, se presenti. Facendo clic su "Catalogo" non si apre solo una pagina di catalogo, ma un pannello retrattile con un albero di categorie - la stessa struttura del mega-menu, adattata per il formato mobile verticale. Facendo clic su "Cerca" si focalizza la barra di ricerca con il completamento automatico.

Il punto è questo: il menu inferiore del cellulare non è semplicemente un "altro menu". Questo è un cambiamento nell'intero modello di interazione dell'utente con il sito sui dispositivi mobili. Senza il menu in basso, il percorso dell'utente è simile a questo: è andato alla pagina principale - ha scorso fino alla sezione di interesse o è andato all'hamburger - ha trovato una categoria - ha selezionato un prodotto - ha aggiunto al carrello - ha scorso verso l'alto per trovare l'icona del carrello - è andato alla pagina del carrello - ha effettuato un ordine. Con il menu in basso: entrato - cliccato “Catalogo” - selezionato una categoria nel pannello estraibile - trovato il prodotto - aggiunto al carrello - cliccato “Carrello” nel menu in basso - effettuato il check-out. La differenza non sta solo nel numero di azioni, ma anche nel carico cognitivo. Una persona non ha bisogno di ricordare dove si trova questo o quel controllo. E' sempre di sotto. Sempre lo stesso. Sempre disponibile.

E se guardassimo la cosa diversamente, non dal punto di vista della convenienza, ma dal punto di vista della concorrenza? Il tuo utente accede a Ozon, Wildberries, Yandex.Market ogni giorno. È abituato al menu in basso. Questo è lo standard per lui. E quando arriva nel tuo negozio WooCommerce e vede solo un hamburger in alto, inconsciamente percepisce il tuo sito come obsoleto. Non perché il tuo design sia pessimo, forse è fantastico. Ma lo schema di interazione dice al cervello: “questo non è un vero negozio, è qualcosa di amatoriale”. Il menu in basso non è una questione di comodità nel vuoto, ma di soddisfare le aspettative degli utenti formate dai mercati più grandi. Competi non solo sull'assortimento e sui prezzi, ma anche sulla qualità dell'interfaccia. E se la tua interfaccia è indietro di una generazione rispetto a quella a cui è abituato l'utente, ti costa denaro.

Un altro aspetto di cui si parla raramente è la compatibilità PWA del menu footer. Se il tuo negozio WooCommerce viene aggiunto alla schermata iniziale dello smartphone come app Web progressiva, il menu in basso diventa fondamentale. Nella modalità PWA, non è presente la barra degli indirizzi del browser, non c'è il pulsante "Indietro" al solito posto: l'applicazione funziona in modalità a schermo intero, come quella nativa. E se non si dispone di un menu in basso, l'utente è letteralmente bloccato: non esiste un modo ovvio per tornare alla pagina principale o navigare nella directory. Il nostro menu in basso rileva automaticamente la modalità PWA (tramite query multimediale in modalità display) e regola il riempimento in modo da non entrare in conflitto con la navigazione del sistema del dispositivo.

Ho misurato l'impatto del menu in basso su un negozio che vende materiali da costruzione: circa ottomila SKU. Prima dell’implementazione, la frequenza di rimbalzo sui dispositivi mobili era del 62%. Dopo - 47%. La conversione per aggiungere al carrello è aumentata dal 3,8 al 5,1%. Non sono cifre rivoluzionarie, ma per un negozio con un fatturato di un milione e mezzo al mese la differenza tra il 3,8 e il 5,1% è una cifra notevole. E tutto ciò che serviva era attivare il modulo, selezionare icone e colori.

Tecnicamente, il menu footer mobile è implementato come un elemento fisso nella parte inferiore del viewport, che appare solo su schermi inferiori a una certa larghezza: il valore predefinito è 768 pixel, ma la soglia è configurabile. Una sfumatura importante: il menu non deve sovrapporsi al contenuto della pagina. Pertanto, quando attivato, al corpo viene automaticamente aggiunto un riempimento-bottom, pari all'altezza del menu. Sembra banale, ma ho visto implementazioni in cui il menu in basso copriva il pulsante “Effettua un ordine” al momento del pagamento. Ci siamo occupati di questo: nella pagina di pagamento, il menu in basso viene automaticamente nascosto o spostato per non interferire con il processo di acquisto.

Un altro punto che spesso viene trascurato è l'interazione del menu in basso con lo scorrimento. Se il menu è sempre visibile, consuma prezioso spazio verticale, che già scarseggia su mobile. Ecco perché abbiamo l'opzione "nascondi quando scorri verso il basso, mostra quando scorri verso l'alto", lo stesso modello utilizzato da Chrome e da molte applicazioni. L'utente scorre il catalogo verso il basso: il menu si sposta dolcemente dal bordo, dando più spazio al contenuto. Inizia a scorrere verso l'alto: il menu ritorna. Il comportamento è familiare, abituale e non solleva dubbi. Puoi anche impostare una visualizzazione completamente statica, per i negozi in cui l'accesso rapido al carrello è più importante di pixel di spazio aggiuntivi. La scelta della strategia spetta al proprietario del negozio; forniamo solo entrambe le opzioni.

Vale la pena menzionare separatamente l'adattabilità nelle dimensioni intermedie: tablet, piccoli laptop. Sui dispositivi con larghezza compresa tra 768 e 1024 pixel, il menu inferiore è nascosto per impostazione predefinita, ma puoi forzarne l'attivazione. Su alcuni siti questo ha senso: ad esempio, se il pubblico principale sono i magazzinieri che utilizzano i tablet per ordinare le forniture. Per loro, il menu in basso sul tablet non è una “stampella mobile”, ma un comodo strumento di accesso rapido.

Popup carrello: impedisce all'utente di abbandonare la pagina

Parliamo ora del terzo elemento del sistema – e forse il più sottovalutato. Carrello pop-up. Il comportamento predefinito di WooCommerce dopo aver aggiunto un prodotto al carrello è reindirizzare alla pagina del carrello. Oppure, se disabiliti il ​​reindirizzamento nelle impostazioni, verrà visualizzato un segno anonimo "Articolo aggiunto al carrello" con un collegamento "Vai al carrello". In entrambi i casi, il percorso dell'utente è interrotto. Ha sfogliato il catalogo, ha trovato il prodotto adatto, ha fatto clic su "Aggiungi al carrello" ed è stato gettato nella pagina del carrello. Per continuare la selezione, è necessario fare clic su "Indietro", ricordare dove si era interrotto e continuare. O, peggio ancora, ricominciare da capo.

È come se in un supermercato, dopo ogni articolo che metti nel carrello, vieni automaticamente trasferito alla cassa. Assurdo? SÌ. Ma è così che funziona la maggior parte dei negozi WooCommerce. E questo è ciò che uccide il numero medio di merci in un assegno.

Il carrello pop-up funziona diversamente. Dopo aver fatto clic su "Aggiungi al carrello": nell'angolo dello schermo viene visualizzato un mini-carrello: un elenco di prodotti aggiunti, quantità, importo totale, pulsanti "Procedi alla cassa" e "Continua lo shopping". Il pop-up dura da tre a cinque secondi e scompare gradualmente. Oppure non scompare se l'utente ci passa sopra. La persona vede la conferma - “sì, il prodotto è stato aggiunto, eccolo nella lista” - e continua a sfogliare il catalogo. Nessun reindirizzamento, nessuna perdita di contesto, nessuna perdita di attenzione.

Ho sperimentato diversi formati popup. La notifica del brindisi nell'angolo in alto a destra è minimalista, ma non fornisce informazioni sul contenuto del carrello. Una sovrapposizione a schermo intero è informativa, ma troppo invadente; interrompe il flusso non peggio di un reindirizzamento. La barra laterale scorrevole è un buon compromesso per schermi più grandi, ma occupa l'intero schermo sui dispositivi mobili. Alla fine ho optato per un approccio ibrido. Sul desktop è presente un pannello scorrevole sulla destra, largo circa 380 pixel. Mostra il contenuto del carrello, ogni articolo con una miniatura, nome, prezzo e quantità. Puoi modificare la quantità direttamente nel popup, eliminare un prodotto e vedere il totale. Sui dispositivi mobili è presente in basso (foglio inferiore) una finestra modale che occupa i due terzi inferiori dello schermo e si chiude scorrendo verso il basso. Questo è lo schema che gli utenti sono abituati a vedere nelle applicazioni mobili e sembra nativo.

Onestamente, è stato il cestino pop-up che ha dato l'aumento più evidente dell'assegno medio nei negozi in cui l'abbiamo implementato. Un negozio di ricambi per auto ha registrato un aumento del numero medio di articoli per ordine da 2,3 a 3,1 dopo aver attivato il pop-up. Un altro, un negozio di prodotti chimici industriali, ha visto un aumento delle conversioni alla cassa dal 4,2 al 5,8%. La logica è chiara: quando l'utente rimane nel catalogo dopo aver aggiunto un prodotto, continua ad acquistare. Quando viene sbattuto nella pagina del carrello, valuta se “costa troppo” e si mette a pensare.

C'è un altro punto delicato relativo al cestino pop-up. Questa è la vendita incrociata. Nel popup, oltre al contenuto del carrello, puoi visualizzare il blocco “Acquista con questo prodotto” oppure “Potrebbe esserti utile”. WooCommerce memorizza già i dati sui prodotti cross-sell e upsell: il nostro popup li utilizza semplicemente. Ho visto implementazioni in cui il cross-selling in un pop-up generava fino al 12% di entrate aggiuntive. Ma è importante non esagerare: se un popup si trasforma in una pagina separata con cinque blocchi di consigli, cessa di essere una “conferma rapida” e diventa irritante. Abbiamo limitato il cross-selling nel pop-up a due o tre posizioni: sufficienti per suggerire, non sufficienti per imporre.

Cosa succede se hai prodotti variabili? Comportamento standard di WooCommerce per prodotti variabili: nella pagina del catalogo, il pulsante "Aggiungi al carrello" viene sostituito con "Seleziona opzioni" e facendo clic su di esso si accede alla pagina del prodotto. Questa è un'altra lacuna: una persona stava sfogliando il catalogo, ha visto il prodotto che desiderava, voleva aggiungerlo rapidamente - ma no, è stato inviato a una pagina separata per scegliere la dimensione della confezione o la viscosità. Il nostro popup può funzionare con varianti di visualizzazione rapida: quando fai clic su un prodotto variabile nel catalogo, puoi mostrare un mini-selettore direttamente nel popup: seleziona la variazione desiderata, aggiungila e continua a scorrere. Questa non è una soluzione universale: funziona bene quando ci sono poche varianti (due o tre confezioni), ed è meno conveniente quando ci sono venti varianti con due assi di scelta. Ma per un tipico catalogo B2B, dove le variazioni sono i volumi di imballaggio (1 litro, 5 litri, 20 litri, 200 litri), questo colpisce nel segno.

Un altro scenario che abbiamo fornito è il comportamento di un popup quando il carrello è vuoto. Il primo prodotto aggiunto è il momento in cui il popup dovrebbe essere particolarmente informativo. Oltre al prodotto stesso, mostriamo la consegna gratuita (se configurata in base alla soglia di importo): "Aggiungi altri 3.200 rubli. per la consegna gratuita." Questo elemento - una barra di avanzamento per la consegna gratuita - è uno dei motivatori più efficaci per aumentare il controllo medio. Secondo i nostri dati, aggiunge l’8-15% all’importo medio dell’ordine, semplicemente perché crea una motivazione “di gioco”: “solo un po’ di più e la consegna è gratuita”. Non tutti i negozi offrono la spedizione gratuita, ma quelli che la fanno ottengono un effetto notevole da questo elemento.

L'implementazione tecnica del carrello pop-up è legata all'aggiunta al carrello WooCommerce AJAX. Quando l'utente fa clic su "Aggiungi al carrello", viene attivata una richiesta AJAX per aggiungere un prodotto. Il nostro JavaScript intercetta l'evento di aggiunta riuscito - l'evento add_to_cart, che WooCommerce invia tramite jQuery - e visualizza un popup con il contenuto effettivo del carrello. Il carrello viene aggiornato tramite l'API WooCommerce Cart Fragments, il che significa che i dati sono sempre aggiornati, anche se l'utente ha aperto il sito in più schede. Funziona senza richieste AJAX aggiuntive al server: i frammenti del carrello sono già aggiornati da WooCommerce dopo ogni aggiunta, utilizziamo semplicemente questi dati per visualizzare il popup. Nessuna doppia richiesta, nessun carico del server oltre lo standard: il popup è integrato nel flusso di dati WooCommerce esistente, anziché crearne uno proprio parallelo. Per i negozi con traffico elevato, questo è di fondamentale importanza: ogni richiesta AJAX aggiuntiva da aggiungere al carrello rappresenta un carico aggiuntivo su PHP, sul database e sulla cache della sessione Redis.

Tre in uno: perché un unico sistema è meglio di tre plugin separati

Ora diamo un'occhiata a tutto questo dall'altro lato, dal lato dell'amministratore del negozio, che deve configurare e mantenere tutto questo. Supponiamo che tu decida di aggiungere separatamente un mega menu, un menu footer mobile e un carrello pop-up. Tre plugin, tre diverse interfacce di impostazione, tre set di stili CSS, tre code JavaScript. MaxMegaMenu: $ 79 all'anno per la versione Pro. WP Mobile Bottom Menu (o equivalente) - altri 39-49 dollari. Popup del carrello - WooFunnels o qualche specializzato - da 49 a 99 dollari. Totale da 170 a 230 dollari all'anno per la sola navigazione. Inoltre incompatibilità di stili: ogni plugin utilizza la propria tavolozza, i propri caratteri e i propri rientri. Configura il mega menu con toni blu e il menu mobile di un altro plugin con accenti verdi, perché ha un'interfaccia diversa e una logica di stile diversa. Un cestino pop-up viene generalmente disegnato nel terzo stile. L'integrità visiva va al diavolo.

In COS WP Woo, tutti e tre i componenti hanno uno stile da un unico pannello. Imposta i colori principali - sfondo, testo, accento, passaggio del mouse - e vengono applicati automaticamente a tutti e tre gli elementi. Il mega menu, il footer mobile e il carrello popup sembrano far parte dello stesso design perché fanno parte dello stesso design. Un foglio di stile, un file JavaScript, un set di impostazioni. Non è necessario destreggiarsi tra tre pannelli di amministrazione: tutto è in un unico posto, nella sezione "Vetrina" del nostro plugin.

Ma non è solo una questione di facilità di configurazione. Un sistema unificato offre vantaggi tecnici che non sono possibili utilizzando plugin separati. Il menu inferiore mobile "sa" del carrello pop-up. Quando l'utente fa clic sull'icona del carrello nel menu in basso, si apre lo stesso popup con un mini-carrello, invece di passare a una pagina separata. Il mega menu "sa" del menu mobile: sul desktop viene visualizzato un mega pannello a tutti gli effetti; sul mobile, la stessa struttura si trasforma in una fisarmonica, accessibile tramite il menu in basso. Il carrello pop-up “sa” del mega-menu: se il pop-up è aperto e l'utente passa sopra il mega-menu, il pop-up viene correttamente nascosto per non bloccare la navigazione. Tutte queste interazioni non possono essere realizzate quando i tre elementi sono tre plugin indipendenti che non sanno nulla l'uno dell'altro.

Un altro aspetto importante sono le prestazioni. I tre plugin separati sono tre file CSS separati e tre file JS separati caricati su ciascuna pagina. Il nostro modulo combina tutto in un CSS e un JS. Sui dispositivi mobili con connessioni lente, la differenza tra il download di sei file e il download di due può essere di 200-400 millisecondi: non un numero enorme, ma nel contesto di Core Web Vitals e PageSpeed ​​​​Insights, ogni cento millisecondi contano. Google ha da tempo fatto della velocità di caricamento un fattore di ranking, e per l'e-commerce questo è particolarmente critico: ogni secondo di ritardo riduce la conversione del 7% - questa statistica è fornita da Amazon e non ho motivo di dubitare dei loro dati.

Vorrei soffermarmi in particolare sulla migrazione da MaxMegaMenu, perché questa è una domanda che si pone ogni secondo potenziale utente. Hai già impostato un mega menu tramite MaxMegaMenu, hai passato ore a configurare colonne, icone, widget e adesso, rifai tutto? No. Abbiamo implementato la migrazione automatica. Il nostro modulo può leggere i metadati MaxMegaMenu - impostazioni delle voci di menu, numero di colonne, widget collegati - e importarli nel suo formato. Non dico che la migrazione sia al cento per cento: gli stili CSS personalizzati di MaxMegaMenu non vengono trasferiti automaticamente perché il markup è diverso. Ma la struttura - colonne, nidificazione, icone - viene trasferita completamente. In pratica, ciò significa che invece di dedicare diverse ore alla configurazione manuale, si impiegano cinque minuti per l'importazione automatica e altri venti minuti per la messa a punto degli stili.

Onestamente, la questione della migrazione è stata una delle più dolorose durante la progettazione del modulo. Ho pensato a lungo se valesse la pena preoccuparsi della compatibilità. MaxMegaMenu memorizza le sue impostazioni in wp_postmeta nel formato di un array serializzato: analizzarlo è un piacere. Ma poi ho fatto i conti: il nostro cliente principale ha diciassettemila prodotti in dodici categorie principali, ogni categoria è configurata in MaxMegaMenu con colonne, icone e descrizioni individuali. Trasferimento manuale: due o tre giorni di lavoro. Automatico: cinque minuti. La scelta è ovvia. Inoltre, MaxMegaMenu è uno dei plugin mega-menu più popolari e una parte significativa dei potenziali utenti del nostro plugin migrerà da esso.

Voglio soffermarmi su un altro punto che può sembrare tecnico, ma in pratica determina la qualità della navigazione: adattamento reattivo. Il mega menu dovrebbe funzionare correttamente su qualsiasi dimensione dello schermo. A 1920 pixel ci sono colonne piene di immagini. 1366 ha le stesse colonne, ma un po' più strette. A 1024 potrebbe esserci un numero ridotto di colonne o immagini nascoste. A 768 e inferiori: trasformazione in formato mobile. Non si tratta semplicemente di "nasconditi sui dispositivi mobili": è un degrado intelligente, quando il contenuto si adatta allo spazio disponibile mantenendo la funzionalità.

La nostra implementazione del mega menu utilizza la griglia CSS per il layout delle colonne. Ciò ti consente di ristrutturare elegantemente tramite query multimediali senza JavaScript. Su schermi di grandi dimensioni: un numero specificato di colonne. In quelle centrali, le colonne sono combinate o riorganizzate in due. Su quelli piccoli tutto si trasforma in una fisarmonica verticale. Le transizioni tra i formati sono fluide, senza scatti, senza ridisegnare la pagina. Per un menu inferiore mobile, anche l'adattamento è importante: altezza del menu, dimensione dell'icona, dimensione del badge: tutto questo si adatta alle dimensioni dello schermo. Sul piccolo iPhone SE le icone sono un po' più compatte, sul grande Samsung sono un po' più spaziose. Non pixel fissi, ma unità relative che si adattano al contesto.

Separatamente, vale la pena parlare della compatibilità dei temi, un problema che preoccupa chiunque abbia mai riscontrato conflitti tra plugin in WordPress. I negozi WooCommerce funzionano su centinaia di temi diversi: Astra, OceanWP, Flatsome, Porto, The7, Woodmart, Storefront e ognuno di essi implementa la navigazione in modo diverso. Alcuni temi utilizzano il wp_nav_menu standard, altri utilizzano i propri renderer personalizzati. Alcune persone collegano i propri mega menu, che sono in conflitto con quelli plug-in. Il nostro modulo di navigazione è progettato per funzionare su qualsiasi tema senza romperne gli stili o entrare in conflitto con il suo JavaScript. Il mega menu è collegato tramite il filtro standard wp_nav_menu_args, che intercetta il rendering di una posizione specifica del menu (solitamente primario o menu principale) e sostituisce il Walker standard con quello personalizzato. Il CSS è scritto con elevata specificità e selettori con ambito in modo che gli stili del tema non si diffondano nel mega pannello e viceversa. JavaScript utilizza il proprio spazio dei nomi e non è in conflitto con i gestori di temi jQuery.

Abbiamo testato la compatibilità con dodici dei temi WooCommerce più popolari e posso dire che in dieci su dodici tutto ha funzionato immediatamente. Due impostazioni minime richieste: specifica la posizione corretta del menu e regola un selettore CSS. Per Porto, che utilizziamo nel nostro progetto, la compatibilità è perfetta: siamo letteralmente migrati da MaxMegaMenu al nostro modulo in un negozio con diciassettemila prodotti e gli utenti non hanno nemmeno notato la differenza. Più precisamente, lo hanno notato, ma in meglio: il menu ha iniziato ad aprirsi più velocemente, perché il JavaScript MaxMegaMenu aggiuntivo, che veniva caricato su ogni pagina, è scomparso.

Un altro punto che vorrei toccare è l'aspetto SEO della navigazione. Google è da tempo in grado di bypassare i megamenu e i collegamenti di indice da esso. Ma c'è una differenza tra il modo in cui il bot vede il menu JavaScript lato client e l'HTML lato server. Il nostro mega menu viene visualizzato sul server: tutti i collegamenti sono presenti nell'HTML prima che venga caricato JavaScript. Questa è una situazione ideale per i robot di ricerca: vedono l'intera struttura di navigazione, tutte le categorie e sottocategorie, senza dover eseguire JavaScript. Ciò è particolarmente importante per i negozi giovani che stanno guadagnando massa di link: una navigazione ben strutturata aiuta a distribuire il PageRank in modo uniforme in tutte le categorie. Ogni collegamento nel mega menu è un collegamento interno che trasferisce peso. La corretta struttura del megamenu è, infatti, un'architettura di collegamento interna ben congegnata che funziona automaticamente, senza la necessità di posizionare manualmente i collegamenti nei testi.

Sai qual è secondo me la cosa più importante in tutta questa faccenda della navigazione? Non dettagli di implementazione tecnica: possono essere risolti in una dozzina di modi diversi. E nemmeno numeri specifici di crescita delle conversioni: variano da negozio a negozio. La cosa più importante è un approccio sistematico. La navigazione in un negozio online non consiste in tre attività separate (mega menu, menu mobile, carrello). Questo è un obiettivo: guidare l'utente dall'accesso al sito all'effettuazione di un ordine con il minimo attrito. Il mega menu rivela la struttura delle directory e fornisce una panoramica. Il menu inferiore mobile fornisce accesso costante alle funzioni chiave. Il cestino pop-up conferma l'azione e ti consente di continuare senza interruzioni. Tre componenti: un sistema. E quando lavorano insieme come un unico meccanismo, l’effetto è maggiore della somma delle parti.

Sento spesso dai negozianti: “Abbiamo buoni prodotti, prezzi normali, ma le vendite non crescono”. E quando comincio a indagare, nella metà dei casi il problema risulta non essere né il prodotto né i prezzi. Il problema è che una persona non può navigare normalmente nel sito. Arriva, vede un muro di categorie in un menu a discesa standard, fruga a caso, non trova ciò di cui ha bisogno e se ne va. Oppure lo trova, lo aggiunge al carrello, e viene catapultato dalla pagina del catalogo alla pagina del carrello, perde il contesto e si dimentica che voleva ordinare altri due articoli. Oppure con il cellulare prova a sfogliare il catalogo, si perde un hamburger, si arrabbia e lo chiude.

Questi sono tutti problemi risolvibili. Inoltre possono essere risolti senza ridisegnare il sito, senza cambiare tema, senza attrarre un'agenzia da mezzo milione di rubli. Attiva tre moduli in un plug-in, trenta minuti per impostare stili e struttura - e la navigazione del tuo negozio funzionerà a livello di Ozon. Non perché voglio venderti una soluzione miracolosa: non esistono soluzioni miracolose. Ma perché la navigazione non è scienza missilistica. Questi sono modelli comprovati che devono solo essere implementati correttamente. Un mega menu con colonne e immagini, un menu in miniatura mobile, un carrello pop-up senza interruzioni nel percorso: tre componenti che insieme trasformano un "sito con merci" in un "negozio dove è conveniente acquistare".

Recentemente ho parlato con il proprietario di un negozio di materiale elettrico che utilizzava la navigazione WooCommerce standard da tre anni. Quando gli ho chiesto perché non avesse ancora installato un mega menu, ha risposto: “Ho provato MaxMegaMenu un anno fa, ma era in conflitto con il tema, ho dovuto disattivarlo”. La classica storia: ci ho provato, non ha funzionato e ho deciso che il megamenù non faceva per lui. Ma il problema non era nel concetto di megamenu, ma nell'implementazione specifica, che non teneva conto delle peculiarità del suo tema. Abbiamo installato il nostro modulo: tutto ha funzionato la prima volta, perché testiamo la compatibilità con temi popolari e risolviamo i conflitti a livello architettonico e non tramite stampelle.

Se il tuo negozio WooCommerce è cresciuto oltre la navigazione standard e la conversione su dispositivi mobili lascia molto a desiderare, dai un'occhiata ai moduli Mega Menu, Menu footer e Carrello popup in COS WP Woo. Provalo su un server di staging, confronta il comportamento degli utenti prima e dopo. I numeri diranno tutto da soli. E se utilizzi già MaxMegaMenu, la migrazione automatica renderà la transizione indolore. Un plugin invece di tre, stile uniforme, funzionamento coordinato di tutti i componenti. La navigazione è il fondamento della conversione e tale fondamento deve essere continuo. E se hai domande sulla configurazione o sulla migrazione, scrivici ed esamineremo la tua situazione. In sette anni di lavoro con i negozi WooCommerce, non ho mai visto un catalogo che non potesse essere reso conveniente. A volte ciò richiede una riprogettazione completa. Ma più spesso: la navigazione corretta, che consente all'acquirente di trovare ciò che sta cercando in quegli stessi tre clic. E se il tuo negozio ora ne richiede cinque o sei, allora è tempo di cambiare qualcosa.