Le mobile représente environ la moitié de tous trafic internetet par rapport à l'utilisation d'un ordinateur de bureau, l'expérience est tout à fait unique.

Les petits écrans sur les appareils mobiles signifient que les concepteurs doivent être intelligents quant à la façon dont ils utilisent l'espace. En même temps, ils doivent tenir compte de l'ergonomie de la façon dont les utilisateurs interagissent avec la plateforme. Plutôt que d'utiliser une souris, les visiteurs sur un appareil mobile naviguent sur la plateforme à l'aide de leur pouce.

Ces distinctions créent une expérience très différente pour les utilisateurs sur les appareils mobiles. Afin de rester compétitives, les entreprises doivent ajuster leurs conceptions Web pour garantir une UX conviviale sur les appareils mobiles.

Le menu de votre site Web joue un rôle important dans la création d'une expérience transparente pour les visiteurs. Il les guide à travers le site et les aide à trouver les informations dont ils ont besoin.

En améliorant vos fonctionnalités de navigation, vous améliorerez les impressions que les gens ont de votre marque, attirerez des visiteurs fidèles et augmenterez votre taux de conversion.

Voici 3 idées de conception de menu qui vous aideront à optimiser l'espace sur votre site mobile et à augmenter la convivialité :

  1. Navigation en bas
  2. Menu Hamburger
  3. Navigation dans la grille

Navigation en bas

Traditionnellement, la plupart des sites Web présentent leurs menus de navigation en haut de leurs pages. C'est très bien lorsque vous faites défiler un site Web de bureau, car il est facile à repérer. Les clients peuvent immédiatement trouver ce qu'ils recherchent.

Pour les sites Web mobiles, cependant, cette conception ne répond pas tout à fait aux besoins de l'utilisateur. La plupart des utilisateurs mobiles tiennent leur smartphone dans une main et comptent sur leur pouce pour naviguer entre les sites Web, les applications, les plateformes de texte, etc.

Cependant, la taille moyenne de l'écran d'un smartphone se situe entre 4,7 à 6,5 poucestandis que le pouce humain moyen est inférieur à 3 pouces de longce qui signifie que la plupart de ce qui se trouve sur un écran mobile est hors de portée.

Cela signifie que les concepteurs de sites Web ne peuvent pas penser uniquement à l'apparence du site, mais doivent plutôt penser à l'ergonomie de leurs conceptions.

Diagramme d'ergonomie

La source: Magazine fracassant

Basé sur la façon dont les gens utilisent généralement leurs appareils mobiles, ce graphique montre à quel point il est facile – ou difficile – pour les utilisateurs d'accéder à certaines parties de la page. De toute évidence, le bas est le plus facile d'accès pour les utilisateurs, de sorte que les concepteurs ont ajusté leurs menus pour répondre à leurs besoins.

Par exemple, un concepteur Web a créé une barre d'onglets coulissante animée et l'a incluse au bas de cette application financière.

Exemple de navigation inférieure

La source: Behance

Avec toutes les icônes à portée naturelle du pouce de l'utilisateur, la plateforme est facile à utiliser. Cependant, certaines limitations sont associées à cette conception. Avec un si petit espace d'un côté à l'autre, il est difficile d'afficher plus que quelques options de menu à l'écran.

Par conséquent, les concepteurs de sites Web ne devraient pas inclure plus de cinq options à la fois dans ce menu. Cette plate-forme a bien respecté cette règle; ils n'ont inclus que quatre options de menu.

S'il avait besoin d'inclure plus d'options de navigation, le concepteur aurait peut-être opté pour une conception de menu plus compacte, telle qu'un menu hamburger ou une conception en grille.

Menu Hamburger

Les menus de hamburger ressemblent à un hamburger entre deux petits pains ou à trois lignes horizontales empilées les unes sur les autres et apparaissent souvent dans le coin supérieur d'un site Web. Cette conception est particulièrement populaire pour les sites Web mobiles car elle peut s'adapter à des écrans plus petits et ne prend pas trop de place.

Les visiteurs doivent cliquer sur le bouton pour afficher ou masquer les options de navigation incluses dans le menu.

Par exemple, Amazon utilise un menu hamburger sur son site mobile. L'icône apparaît dans le coin supérieur gauche à côté du logo d'Amazon.

Exemple de menu hamburger

La source: Amazone

Une fois que les visiteurs du site ont cliqué sur l'icône, un menu déroulant plus grand apparaît sur le côté de leur écran, comme ceci :

Menu déroulant Amazon

La source: Amazone

Bien que cette conception utilise l'espace plus efficacement qu'un menu de navigation traditionnel, elle peut poser des problèmes à votre utilisateur si elle n'est pas organisée correctement.

Si le menu hamburger lui-même est difficile à trouver, vous risquez de frustrer vos utilisateurs et de les amener à quitter votre site mobile. Par conséquent, les concepteurs doivent s'assurer que l'icône du hamburger est grande et facile à repérer sur la page.

En même temps, ils doivent s'assurer que les options déroulantes sont grandes et faciles à cliquer. Les petites polices rendent difficile pour les utilisateurs d'utiliser leur pouce pour les clics. Néanmoins, ils constituent une excellente option de navigation lorsque vous devez inclure de nombreuses options.

Navigation dans la grille

Semblables au menu hamburger, les menus en grille sont un excellent moyen pour les concepteurs Web d'optimiser l'espace sur un site Web mobile. Au lieu de trois lignes cependant, il utilise une boîte 3×3 pour indiquer plusieurs options. Une fois qu'un utilisateur clique sur l'icône, il verra des options de navigation supplémentaires.

Google utilise une grille de navigation pour que les utilisateurs puissent trouver leurs autres applications telles que Gmail, Calendar et Google Ads.

Navigation dans la grille Google

La source: Google Suite

Cette conception offre une excellente expérience utilisateur et est très tendance. Contrairement à un menu déroulant traditionnel, cette conception comporte souvent des icônes pour afficher différentes options. Les images permettent aux utilisateurs de parcourir plus facilement vos options et de trouver le contenu qu'ils recherchent.

De plus, les blocs plus grands associés aux images permettent aux utilisateurs de cliquer plus facilement avec leurs pouces.

Améliorez la navigation mobile avec ces conceptions de menus

Comme les gens comptent de plus en plus sur leurs appareils intelligents, la création d'un site adapté aux mobiles est essentielle. Le menu de votre site aide les utilisateurs à naviguer sur votre plateforme et à trouver ce qu'ils recherchent. Par conséquent, ils sont importants pour créer une expérience utilisateur transparente.

Lors de la conception d'un menu pour un site Web mobile, les créateurs doivent tenir compte de l'espace qu'il occupe ainsi que de l'ergonomie de la plateforme. Pour résoudre ces problèmes, de nombreux concepteurs se concentrent sur le déplacement des outils de navigation vers le bas de la page.

Cependant, l'espace limité sur l'écran signifie que les concepteurs ne peuvent pas répertorier tous leurs liens au bas de la page. Au lieu de cela, ils s'appuient sur des fonctionnalités peu encombrantes telles que les icônes de hamburger et de grille. Une fois que les utilisateurs cliquent dessus, un menu déroulant plus grand apparaît.

En utilisant ces conceptions de menu, vous pouvez optimiser votre site pour mobile et améliorer votre taux de conversion.