Prévenir les menus Navi+ de se chevaucher avec d’autres applications
Pourquoi cela sera-t-il un problème ?
Dans de nombreux cas, vous devrez utiliser plusieurs applications intégrées sur votre site Web. Cela peut poser un problème d’utilisabilité habituel, car les éléments de l’interface peuvent se chevaucher (voir l’image ci-dessous). Un exemple simple est lorsque vous utilisez fréquemment une application de chat comme Shopify Inbox ou WhatsApp. En général, ces applications de chat occupent une position proéminente dans le coin inférieur droit de l’écran du téléphone. Lorsque vous décidez d’utiliser Navi+ pour améliorer considérablement la navigation sur votre site Web, ce problème se pose. Voici quelques façons de résoudre ce problème.
Solution 1 : Ajuster la position des boutons flottants (Démo avec Shopify inbox)
Solution 2 : Configurer le rembourrage du menu Navi+ pour éviter le chevauchement avec les applications.
Le rembourrage et la marge sont des outils largement utilisés et puissants dans la technologie, en particulier en HTML5/CSS. En configurant le rembourrage en fonction de la position de cette zone, vous pouvez éviter le chevauchement des applications. Vous pouvez également définir la distance entre le menu Navi+ et les bords en ajustant la marge.
Solution 3 : Remplacer les barres inférieures par des barres supérieures/barres de support ou des boutons d’action flottants
Bien que la barre inférieure soit l’outil le plus efficace pour guider les utilisateurs, utilisé par presque toutes les applications mobiles natives, ou le web mobile (plus lent), parfois vous voudrez peut-être placer votre menu Navi+ à un endroit différent, comme en haut (Barre supérieure), à droite/gauche (Barre de support), flottant au-dessus de l’interface (bouton d’action flottant). Ou vous pouvez les combiner pour la meilleure efficacité de navigation. Consultez les options suivantes de Navi+ pour comprendre comment le faire, parfois cela ne prend que 1 seconde, et vous résoudrez votre problème.
Z-index - prioriser l’ordre d’affichage des “applications flottantes”
La propriété z-index spécifie l’ordre de pile d’un élément. Un élément avec un ordre de pile plus élevé est toujours devant un élément avec un ordre de pile plus bas. Voir l’image ci-dessous pour en savoir plus.
Le z-index par défaut pour le menu Navi+ est fixé à 50 pour tous, car nous ‘ne nous considérons pas comme plus importants que d’autres applications’, mais 50 est également le nombre suffisant pour bien s’afficher sur tous les thèmes Shopify. Parfois, vous devrez peut-être ajuster le z-index de votre menu Navi+ dans les cas suivants :
- Lorsque vous utilisez plusieurs menus Navi+ sur une page et que vous souhaitez qu’ils se chevauchent, mais qu’un menu apparaît au-dessus des autres.
- Lorsque d’autres objets/apps chevauchent votre menu Navi+, auquel cas, le z-index résoudra tout.
Il y a une question difficile : quel z-index devez-vous configurer pour votre menu Navi+ afin d’éviter le chevauchement comme souhaité ? Si vous avez plusieurs menus Navi+, vous pouvez les organiser selon vos préférences sans vous inquiéter – c’est pourquoi nous construisons Navi+ pour être aussi polyvalent que possible pour les ‘applications flottantes’ actuelles sur Shopify.
Si vous devez configurer le z-index de votre menu Navi+ pour gérer les conflits avec d’autres applications, vous pouvez rechercher votre z-index d’un minimum de 0 à un maximum de 2 147 483 647. Cela peut sembler un peu difficile, mais c’est le moyen le plus simple et le meilleur, car le z-index n’affectera pas l’affichage de votre interface en dehors du problème auquel vous êtes confronté. Si vous êtes expérimenté avec le débogage CSS et HTML – c’est facile, il suffit d’activer le mode d’inspection pour voir quel z-index l’application en conflit a. Ou, le moyen le plus simple, cliquez simplement sur l’icône de chat Crisp pour discuter avec un conseiller Navi+ ; nous serions heureux de vous aider avec ce problème.