Impedire che i menu Navi+ si sovrappongano ad altre app

Perché questo sarà un problema?

In molti casi, sarà necessario utilizzare più applicazioni incorporate nel tuo sito web. Questo può creare un problema di usabilità abituale poiché gli elementi dell’interfaccia possono sovrapporsi (vedi l’immagine qui sotto). Un semplice esempio è quando utilizzi frequentemente un’applicazione di chat come Shopify Inbox o WhatsApp. Tipicamente, queste app di chat occupano una posizione prominente nell’angolo in basso a destra dello schermo del telefono. Quando decidi di utilizzare Navi+ per migliorare significativamente la navigazione sul tuo sito web, si presenta questo problema. Ecco alcuni modi per affrontare questo problema.

Soluzione 1: Regolare la posizione dei pulsanti flottanti (Demo con Shopify inbox)

Soluzione 2: Impostare il padding del menu Navi+ per evitare sovrapposizioni con le applicazioni.

Il padding e il margine sono strumenti ampiamente utilizzati e potenti nella tecnologia, specialmente in HTML5/CSS. Impostando il padding in base alla posizione di quell’area, puoi evitare sovrapposizioni di applicazioni. Puoi anche impostare la distanza dal menu Navi+ ai bordi regolando il margine.

Soluzione 3: Sostituire le barre inferiori con barre superiori/barre di supporto o pulsanti di azione flottanti

Sebbene la Barra Inferiore sia lo strumento più efficace per guidare gli utenti, utilizzato da quasi tutte le app native mobili, o web mobile (più lento), a volte potresti voler posizionare il tuo menu Navi+ in una posizione diversa come in alto (Barra Superiore), a destra/sinistra (Barra di Supporto), fluttuante sopra l’interfaccia (pulsante di azione flottante). Oppure puoi combinarli per la migliore efficienza di navigazione. Dai un’occhiata alle seguenti opzioni di Navi+ per capire come farlo, a volte ci vuole solo 1 secondo e risolverai il tuo problema.

Z-index - dare priorità all’ordine di visualizzazione delle “applicazioni flottanti”

La proprietà z-index specifica l’ordine di sovrapposizione di un elemento. Un elemento con un ordine di sovrapposizione maggiore è sempre davanti a un elemento con un ordine di sovrapposizione inferiore. Vedi l’immagine qui sotto per capire meglio.

Il valore predefinito dello z-index per il menu Navi+ è impostato a 50 per tutti, poiché ‘non ci consideriamo più importanti di altre app’, ma 50 è anche il numero sufficiente per visualizzarsi bene su tutti i temi Shopify. A volte potresti dover regolare lo z-index del tuo menu Navi+ nei seguenti casi:

1. Quando utilizzi più menu Navi+ su una pagina e desideri che si sovrappongano, ma un menu appare sopra gli altri.
2. Quando ci sono altri oggetti/app che sovrappongono il tuo menu Navi+, in tal caso, lo z-index risolverà tutto.

C’è una domanda difficile: quale z-index dovresti impostare per il tuo menu Navi+ per evitare sovrapposizioni come desiderato? Se hai più menu Navi+, puoi disporli secondo le tue preferenze senza preoccuparti – ecco perché stiamo costruendo Navi+ per essere il più versatile possibile per le attuali ‘applicazioni flottanti’ su Shopify.

Se hai bisogno di impostare lo z-index per il tuo menu Navi+ per gestire conflitti con altre app, puoi cercare il tuo z-index da un minimo di 0 a un massimo di 2.147.483.647. Questo potrebbe sembrare un po’ difficile, ma è il modo più semplice e migliore perché lo z-index non influenzerà la visualizzazione della tua interfaccia al di fuori del problema che stai affrontando. Se hai esperienza con il debug di CSS e HTML – questo è facile, basta attivare la modalità di ispezione per vedere quale z-index ha l’app in conflitto. Oppure, il modo più semplice, clicca semplicemente sull’icona della chat di Crisp per chattare con un consulente Navi+; saremo felici di assisterti con questo problema.