Categoria in evidenza nella barra del menu: panoramica chiara anche con un vasto assortimento
Con XONIC 4.10 potete decidere quali categorie visualizzare direttamente nella barra di navigazione superiore. Tutte le altre vengono raggruppate dal pulsante «Altre categorie» in un pannello di facile consultazione. Sullo smartphone, una fila di chip mostra le stesse voci, mentre il menu sul lato sinistro guida l’utente attraverso l’assortimento livello per livello.
In sintesi
- Novità in XONIC 4.10: categorie in evidenza nella barra del menu. Tutte le altre categorie principali sono raggruppate sotto “Altre categorie”, e le voci che non rientrano più nella riga vengono spostate automaticamente in quella sezione.
- Smartphone: una barra del menu scorrevole composta da chip sotto l’intestazione mostra gli stessi elementi in evidenza. L’ultima tessera apre «Altre categorie».
- Nuovo menu sul bordo sinistro: si naviga livello per livello con il pulsante “Indietro”. Il terzo livello si apre direttamente nel pannello. È possibile attivare immagini delle categorie, brevi descrizioni e fino a due riquadri di azione; l’area servizi è già attiva dopo l’aggiornamento e può essere disattivata.
- Utilizzabile da tutti: tramite tastiera e screen reader, con focus visibile e aree di selezione a partire da 48 pixel di altezza.
- Disponibile con XONIC 4.10. Dopo l’aggiornamento, i negozi esistenti decidono autonomamente quando attivare la barra del menu e i chip.
Perché gli assortimenti di grandi dimensioni richiedono una navigazione diversa
La barra di navigazione superiore ha spazio solo per una manciata di categorie.
Chi gestisce molte categorie principali raggiunge rapidamente i limiti della navigazione in testa alla pagina: la riga diventa troppo affollata oppure alcune sezioni importanti non trovano spazio. Con XONIC 4.10 potete decidere quali categorie mettere in evidenza direttamente nella barra del menu, ad esempio le sezioni con il maggior fatturato o un tema stagionale. I vostri clienti possono accedere a tutte le altre categorie principali con un clic su «Altre categorie».
Il pannello «Altre categorie» mostra, per ogni categoria principale, una colonna con le relative sottocategorie. Gli elenchi lunghi terminano con il link «Mostra tutto in “...”». Se la finestra del browser si restringe, le voci della barra che non rientrano più nella riga vengono spostate automaticamente in questo pannello. In questo modo la barra di navigazione rimane su una sola riga e ordinata.
Barra del menu con elementi in evidenza e pannello «Altre categorie» aperto in un negozio demo. Clicca per ingrandire.
Ecco come funziona la barra del menu
Un’impostazione per ogni categoria, lo stesso ordine su tutti i dispositivi.
Impostare i contenuti in evidenza
Per ogni categoria, selezionare «Automatico», «Sì» o «No». L’impostazione «Categoria come scheda dell’intestazione» viene applicata automaticamente. Anche le sottocategorie possono essere in evidenza.
Altre categorie
Il pannello si apre al passaggio del mouse e può essere fissato con un clic; sul tablet, con un tocco. Da tastiera, si apre con il tasto Invio o la barra spaziatrice, mentre il tasto Esc lo chiude.
Evidenzia
Le singole categorie vengono contrassegnate con un colore di risalto o con un badge «Saldi» o «Novità». Ciò vale a tutti i livelli e la categoria rimane nella sua consueta posizione di ordinamento.
Orientamento
La categoria corrente è sottolineata nella barra del menu. Se si trova sotto “Altre categorie”, il pulsante è evidenziato, in modo che i clienti sappiano dove si trovano.
L’impostazione si effettua direttamente nella schermata della categoria: sotto «Categoria come scheda di intestazione» sono presenti i nuovi campi «Evidenzia nella barra del menu» ed «Evidenzia nella navigazione». Accanto alla selezione, il backend mostra immediatamente se la categoria è presente nella barra del menu. La modifica ha effetto dopo il salvataggio.
Nella schermata delle categorie: "Evidenzia" e "Metti in risalto", ciascuna con testo di aiuto e indicatore di stato. Clicca per ingrandire.
In mobilità: chip e il nuovo menu sul bordo sinistro
Sullo smartphone vale lo stesso ordine del desktop.
Sotto l’intestazione appare una barra orizzontale scorrevole composta da chip con gli stessi elementi in evidenza presenti sul desktop. Il chip della categoria corrente è evidenziato in scuro e viene messo in primo piano. L’ultima icona «Altre categorie» apre direttamente il menu delle altre categorie.
La fila di chip dopo averla fatta scorrere, con «Altre categorie» alla fine.
Il menu sul bordo sinistro è stato riorganizzato. Ogni sottolivello apre un proprio pannello con intestazione fissa, pulsante «Indietro» e il link «Mostra tutto in “...”» in primo piano. Il terzo livello si apre direttamente all’interno del pannello, invece di aprire un altro pannello. Il menu parte da dove si trova il cliente in quel momento: se si trova in una sottocategoria, apre il pannello della categoria principale. Sullo smartphone occupa l’intero schermo, mentre su tablet e desktop appare come un pannello stretto sul margine sinistro.
È possibile attivare singolarmente le immagini delle categorie al livello superiore e la breve descrizione sotto le righe delle categorie. A queste si aggiungono fino a due riquadri promozionali, posizionati in alto o al centro e gestiti nel Banner Manager. L’area servizi, che comprende pagine informative, richiamo telefonico, lingua e valuta, lista dei desideri e account cliente, è già attiva dopo l’aggiornamento e può essere disattivata. Per i negozi privi di campo di ricerca nell’intestazione è disponibile anche una funzione di ricerca nel menu.
Livello superiore con punti salienti, riquadri promozionali e area servizi.
Secondo livello con pulsante «Indietro», il terzo livello si apre nel pannello.
Utilizzabile con mouse, dito, tastiera e screen reader
La nuova navigazione è progettata per tutti i metodi di input.
- Tastiera: i menu si aprono con il tasto Invio o la barra spaziatrice e si chiudono con il tasto Esc. Alla chiusura, il focus torna sull’elemento che ha attivato il menu.
- Focus visibile: le voci nella barra del menu mostrano un chiaro anello di focus quando si naviga con il tasto Tab, e i relativi sottomenu si aprono anche tramite tastiera.
- Lettori di schermo: la pagina corrente è contrassegnata. Le voci di livello superiore segnalano «contiene la categoria corrente».
- Aree di selezione: i chip e le righe di menu hanno un’altezza minima di 48 pixel.
- Movimenti ridotti: chi ha impostato un numero ridotto di animazioni nel sistema operativo vedrà i menu senza transizioni.
- Senza JavaScript: sul desktop, «Altre categorie» rimane accessibile anche in questo caso.
Cosa potete preparare fin da ora
La tecnologia arriverà con l’aggiornamento, ma la scelta la potete fare già oggi.
- Selezionare gli elementi salienti: quali categorie cercano più spesso i vostri clienti, quali contribuiscono al vostro fatturato? Queste devono essere inserite nella barra del menu.
- Aggiungere brevi descrizioni: una breve frase per ogni categoria principale aiuta i clienti a orientarsi nel menu. La visualizzazione presuppone che l’opzione delle brevi descrizioni per le categorie sia attivata.
- Controllare le immagini delle categorie: nel livello superiore del menu appaiono in formato ridotto (48 pixel). Le immagini riconoscibili anche a queste dimensioni sono quelle che funzionano meglio.
- Pianificare i riquadri promozionali: titolo, testo breve e immagine per un massimo di due riquadri. Potete gestire la durata tramite la data di scadenza del banner; i clic vengono conteggiati.
- Definire le pagine informative: quali pagine di contenuto, ad esempio relative alla spedizione o al pagamento, devono essere inserite nell’area servizi del menu? La selezione va effettuata nel CMS Manager.
Disponibilità: con XONIC 4.10
La nuova navigazione è parte integrante di XONIC 4.10. Nei negozi di nuova creazione, la barra del menu con elementi in evidenza e chip è attivata fin dall’inizio. Nei negozi esistenti, dopo l’aggiornamento la navigazione in testa alla pagina rimane inizialmente invariata. È possibile attivare le nuove funzioni in Impostazioni → Design → Intestazione (area di testa) selezionando «Navigazione in testa: categorie in evidenza nella barra del menu» e «Navigazione in testa: barra del menu mobile (fila di chip)». I requisiti sono la barra di navigazione attivata nell’intestazione e almeno una categoria in evidenza.
Con l’aggiornamento, il menu sul lato sinistro passerà alla nuova navigazione a livelli. Chi desidera mantenere il precedente menu a tendina, selezioni in Impostazioni → Design → Off-Canvas, alla voce «Off-Canvas a sinistra: modello di navigazione», il valore «accordion». In quella sezione è anche possibile attivare le immagini delle categorie, la breve descrizione e la ricerca, definire la posizione dei riquadri delle azioni o nascondere l’area dei servizi. I riquadri stessi vanno creati in Strumenti → Gestione banner nel gruppo di banner «offcanvas_nav». Tutti i negozi con il template standard noteranno una piccola modifica: il link alla fine dei sottomenu abbreviati si chiamerà d’ora in poi «Mostra tutto in “...”».
XONIC 4.10 è in fase di preparazione; comunicheremo la data di rilascio nelle nostre notizie. Se utilizzate un template personalizzato, la vostra navigazione attuale continuerà a funzionare. Verificheremo insieme a voi durante l’aggiornamento se i nuovi elementi verranno integrati in tale template. Tutte le impostazioni con screenshot sono disponibili nella nuova guida «Navigazione per categorie».
Domande frequenti sulla nuova navigazione
Pronti per una navigazione che cresce insieme al vostro assortimento
Contattateci se state pianificando l’aggiornamento a XONIC 4.10 o se desiderate concordare in anticipo le vostre categorie in evidenza.
