Quand utiliser (et ne pas utiliser) un mega menu pour la navigation

Menu géant et expérience utilisateur

Les principaux principes de l'utilisation des menus géants devraient être en mesure de répondre à une question simple:

Le menu géant peut-il faciliter la navigation sur mon site Web?

Vous ne devriez pas en ajouter un simplement parce qu'ils sont les dernières choses à la mode. L'ajout d'un menu géant sur votre site Web devrait prendre en compte l'expérience utilisateur (UX). Si votre mega menu rend le processus de navigation plus lisse et plus intuitif, ajoutez-en un. Sinon, ou vous n'avez besoin que de quelques éléments dans le menu, respectez le menu déroulant ordinaire.

Lorsque vous décidez d'utiliser le menu Mega, vous pouvez également vous poser une autre question:

Le menu géant peut-il aider mon site Web à atteindre ses objectifs?

Vous pouvez penser que c'est une vague question à laquelle il est difficile de répondre, mais tous les aspects de la conception et du contenu du site Web devraient être associés à ce que votre site Web essaie de réaliser. Cela peut être l'une des situations suivantes:

• vendre des produits en ligne
• Encouragez les gens à vous contacter à acheter votre service
• Développer des abonnés
• Promouvoir la charité
• Créer une communauté
• Obtenez des abonnés
• Billets pour les événements de vente

Je crois que le site Web peut avoir plus d'objectifs, mais ce sont parmi les plus courants. Comprendre vos objectifs vous aidera à savoir exactement les pages que vous souhaitez que les utilisateurs visitent pour atteindre vos objectifs.

Donc, si vous voulez que les gens achètent des produits en ligne et que vous avez un grand magasin complexe, un menu géant est probablement le meilleur choix. Mais si vous n'avez qu'un produit ou un service très spécifique et que vous souhaitez diriger les gens vers la page de vente de ce produit ou service, le menu géant peut être distrayant.

Avant de décider d'ajouter un menu géant, prenez le temps de réfléchir à ce que vous voulez que votre site Web réalise, où vous voulez que les visiteurs aient sur le site et sur le type de navigation les encouragent à le faire.

Voici quelques exemples spécifiques d'un menu géant qui peut améliorer votre site Web.

Quand utiliser le menu Mega

Regardons certains des méga menus comme ajouts utiles au site Web.

1.

Si votre site Web est un site Web de vente au détail, les utilisateurs seront habitués à voir des menus géants et à les utiliser pour parcourir divers départements du magasin.

Par exemple, le site Web de John Lewis ci-dessous utilise un mega méga différent pour chaque section principale du magasin. Ce qui suit est la section des vêtements pour femmes:

Les gens sont habitués à utiliser des menus géants sur des sites Web des grands grands magasins et ne sont pas confus. Par exemple, si je visite le site pour une robe, je peux facilement entrer la partie correspondante du site en un seul clic.

2.

Dans certains cas, un menu déroulant ou une série de menus déroulants contiendra tellement d'options que cela réduira l'expérience utilisateur.

Une étude menée par Jakob Nielsen et Angie Li montre que pour les principaux menus de navigation, les menus géants améliorent l'expérience utilisateur par rapport aux menus déroulants. En effet, un menu déroulant avec beaucoup de contenu demandera à l'utilisateur de faire défiler vers le bas, il faut parfois faire défiler vers le bas, puis faire défiler vers le haut. Cela prend plus de temps, met plus de stress sur la mémoire à court terme et peut être déroutant.

Par conséquent, si votre site Web doit inclure de nombreux éléments dans le menu de navigation, le menu Mega est susceptible d'améliorer l'expérience utilisateur. Mais assurez-vous que si vous utilisez un menu géant, vous le construisez d'une manière intuitive pour l'utilisateur, et vous utilisez des conseils de conception comme les couleurs, les effets de texte et les polices pour faciliter la navigation.

Le site Web du jeu ci-dessous est un excellent exemple de la série de menu géants, chacun lié à une partie du site Web. Ces menus utilisent des effets d'espacement et de texte tels que du texte en gras et des arrière-plans pour rendre le menu intuitif et facile à naviguer.

### 3. Lorsque la conception du menu améliore le site Web

Parfois, vous avez la possibilité d'ajouter du contenu à votre site Web qui est plus que des liens texte.

Le site Web Moleskine ci-dessous a un mega mega unique. En plus des liens de texte, il dispose également de photos de produits clés qui agissent comme des liens avec du texte qui les couvrent.

Cela encourage les visiteurs à visiter ces pages et rend le mega menu plus qu'un simple aspect fonctionnel du site Web - il améliore la conception et aide à atteindre les objectifs de vente.

Quand ne pas utiliser le menu Mega

Parfois, vous ne devriez pas utiliser le menu Mega. Voici quelques exemples.

1.

Si votre site Web n'a pas de centaines de pages, le menu géant semblera redondant. Pour un site Web ou un blog normal de petites entreprises, un menu géant ne fera que confondre les visiteurs - et il semblera également vide.

Le site Web Envato Tuts utilise une combinaison de menus géants et de menus déroulants normaux. Pour des parties du site Web qui ont peu de liens, un menu déroulant normal peut terminer la tâche et couvrir moins de pages:

### 2. Lorsque votre page d'accueil est juste un lien

Si votre page d'accueil n'est qu'une page qui se lie à une sous-page, vous n'avez pas non plus besoin d'un menu géant.

Le site Web du gouvernement britannique est un exemple.

Une fois que vous aurez accédé à la poursuite du site Web, il y aura un menu de navigation de gauche qui peut être élargi:

Il s'agit également d'un bon exemple de ne pas utiliser un mega menu dans un environnement où les utilisateurs peuvent ne pas s'attendre à utiliser un mega menu. Par exemple, dans les sites Web du secteur public, les méga menus sont moins courants que dans les sites de vente au détail.

3.

Parfois, votre site Web est conçu pour vendre un ou deux produits ou services, ou pour encourager l'inscription aux listes de diffusion.

Si tel est le cas, vous pouvez avoir une bannière sur la page d'accueil qui dirige le visiteur vers une page de connexion.

Dans ce cas, vous voulez que la navigation soit maintenue au minimum. Le menu géant offre aux visiteurs tellement d'options qu'ils sont beaucoup moins susceptibles de visiter la page que vous souhaitez qu'ils visitent. Gardez donc votre navigation au minimum et concentrez-vous sur la réalisation des visiteurs vers votre page de connexion.

Le site Web de l'examinateur de médias sociaux en est un bon exemple. Maintenant, ils veulent que les visiteurs fassent l'une des deux choses: inscrivez-vous à leur liste de diffusion ou achète des billets pour leurs réunions. La bannière reflète le deuxième point, tandis que l'appel à l'action qui occupe la partie supérieure de la page d'accueil reflète le premier point.

s'ils donnent aux visiteurs un grand menu géant, cela réduit la probabilité qu'ils fassent l'une ou l'autre de ces deux choses, donc ils gardent la navigation simple à la place.

### 4. Sur les appareils mobiles

Créer un mega menu facile à lire sur un petit écran sera difficile. Pour le faire fonctionner, vous devez soit rendre les liens petits, ce qui signifie que les gens ne pourront pas cliquer dessus ou introduire le défilement. La combinaison d'un menu géant avec le défilement peut être déroutant car il est difficile de savoir où se termine le menu géant et où commence le contenu de la page.

Sur les appareils mobiles, il est préférable d'utiliser le menu du hamburger: un menu qui ne sera pas visible avant de cliquer sur son symbole. On l'appelle souvent un menu de hamburger parce que le symbole: les trois lignes verticales ressemblent un peu à un hamburger.

Le site Web de John Lewis mentionné ci-dessus a un tel menu. Cliquez sur le symbole et les options de menu se développent en dessous.

choses à noter lors de l'ajout de menus géants à votre site Web

Nous venons de discuter quand nous devrions et ne devons pas ajouter des menus géants à votre site Web. Si vous pensez que les menus géants amélioreront la convivialité de votre site Web, il est temps de se renseigner sur certaines choses importantes à retenir avant d'ajouter des menus géants à votre site Web.

Le lien doit être ordonné

Le menu géant contient généralement de nombreux liens. Par conséquent, il est important d'être organisé et divisé en parties appropriées. Cela est évident dans la capture d'écran du menu géant sur le site Web de John Lewis. Les liens dans la section des femmes sont en outre placés dans différentes catégories faciles à naviguer.

Les liens doivent être faciles à lire et cliquer sur

Vous devez également vous assurer que tous les liens dans le menu Mega sont faciles à lire et à cliquer. Il devrait y avoir suffisamment d'espacement entre les liens afin que les utilisateurs ne cliquent pas accidentellement sur le contenu auquel ils ne veulent pas accéder. Ils doivent contenir du texte limité, mais aident toujours les utilisateurs à comprendre où ils prendront l'utilisateur une fois cliqué.

Ajouter des conseils visuels pour aider les utilisateurs

Vous pouvez également ajouter des conseils visuels au menu de navigation pour aider les utilisateurs à comprendre comment les liens sont organisés. Par exemple, l'icône Arrow indiquera à l'utilisateur que cliquer sur un élément sous-menu spécifique affichera un tas de nouveaux liens. Les articles clickables et non cliquables doivent être facilement distingués.

Performance d'optimisation

Le menu géant est complexe et à forte intensité de ressources. Ils nécessitent beaucoup d'étiquettes, CSS et JavaScript pour fonctionner comme prévu n'importe où. Certains menus géants utilisent également fortement des images. Cela peut nuire au menu et au temps de chargement du site Web. Vous ne voudrez pas que vos prospects s'ennuient en attendant, puis en vous tournant vers vos concurrents. Par conséquent, le maintien du mega menu optimisé devrait être une priorité.

Fournir des alternatives pour les appareils mobiles

Comme nous en avons discuté précédemment, le menu géant ne fonctionne pas bien sur les appareils mobiles en raison de la petite taille d'écran. Vous devriez envisager de fournir un autre moyen de navigation sur un petit écran pour garder votre site Web réactif. Par exemple, vous pouvez utiliser le menu Burger sur votre appareil mobile et peut-être supprimer l'image dans le menu de navigation sur le petit écran, en utilisant uniquement le lien de base.

Ajouter le bouton d'action à l'action

Les utilisateurs utiliseront souvent votre menu géant pour passer à une autre partie du site Web. Vous pouvez utiliser ces connaissances pour augmenter l'engagement des utilisateurs en ajoutant habilement des appels à l'action ou des promotions au bon endroit.

Amélioration de la convivialité grâce aux tests des utilisateurs

Ce qui vous semble évident et correct dans un mega menu peut ne pas être le cas pour les utilisateurs. Il est donc important que vous deviez conserver les tests A / B de votre mega menu pour savoir quelle disposition est la meilleure pour votre situation.

Testez le menu Mega sur plusieurs appareils

Il est également important que vous testiez votre menu Mega sur autant de navigateurs et d'appareils possibles. Les menus géants sont des éléments d'interface utilisateur complexes, les faire paraître corrects peut être un peu délicat. En même temps, assurez-vous que tous les liens du menu Mega fonctionnent correctement.

Ajoutez un menu géant à votre site Web

Si vous avez décidé que le menu Mega est le bon choix pour votre site Web, la façon la plus simple d'ajouter un mega menu est via le plugin.

Codecananyon propose de nombreux plugins de menu géants pour votre choix. Certains des plus populaires incluent:

• UberMenu est le plugin de menu géant le plus vendu. Il vous permet de créer des méga menus entièrement personnalisés pour votre site Web. Il comprend un sélecteur CSS pour vous aider à concevoir un mega mega magnifiquement apparenté avec des polices et des effets de texte, et est disponible dans plusieurs dispositions.
• Mega Menu principal vous permet de placer divers types d'objets dans votre menu. Donc, si vous voulez une image comme le site Web de Moleskine ci-dessus, cela pourrait aider.
• Le menu Hero est conçu pour être facile à utiliser et peut vous aider à monter et à exécuter un mega menu en quelques minutes et est livré avec un constructeur de menu glisser-déposer.

Pour plus d'inspiration pour la création de menus géants, vous voudrez peut-être consulter ces autres articles sur Envato TUTS:

Utilisez judicieusement les menus géants et ils amélioreront votre site Web

Le menu géant peut être un excellent moyen d'améliorer l'expérience utilisateur du site Web. Si vous avez un grand site Web avec beaucoup de liens, l'ajout d'un menu géant aidera vos utilisateurs à naviguer. Si votre site Web répond aux exigences, essayez d'ajouter un menu géant dès aujourd'hui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!