Na­vi­ga­tion res­pon­sive : des menus dy­na­miques pour la na­vi­ga­tion mobile

La na­vi­ga­tion res­pon­sive est l’un des prin­ci­paux aspects de l’op­ti­mi­sa­tion mobile. Si les uti­li­sa­teurs n’arrivent pas à passer d’un point A à un point B sur leur mobile, ils n’hésitent pas à quitter le site. La con­sé­quence ? Une perte de trafic et, surtout, de chiffre d’affaires. Découvrez les dif­fé­rentes tech­niques per­met­tant de remédier à ce problème.

Qu’est-ce qu’une bonne na­vi­ga­tion res­pon­sive ?

Une bonne na­vi­ga­tion est es­sen­tielle à un site Web, car elle permet à l’uti­li­sa­teur de trouver ra­pi­de­ment l’in­for­ma­tion qu’il recherche. Les dif­fé­rentes commandes devraient fonc­tion­ner le plus sim­ple­ment possible, être com­pré­hen­sibles et évidentes de manière à permettre une uti­li­sa­tion intuitive. Les prin­ci­paux défis d’une na­vi­ga­tion res­pon­sive sont le manque d’espace et l’uti­li­sa­tion tactile sur les appareils mobiles. Il existe pourtant quelques solutions per­met­tant une na­vi­ga­tion claire et favorable à l’uti­li­sa­teur. La base du res­pon­sive Webdesign est que le contenu d’une page s’adapte de manière dynamique à tous les types de supports et à leurs exigences tech­niques.

L’approche Mobile first est à cet égard souvent de mise. Ce principe de con­cep­tion met l’op­ti­mi­sa­tion pour mobile en premier plan. L’uti­li­sa­bi­lité et la per­for­mance font partie des objectifs prin­ci­paux de cette démarche. Ensuite vient l’adap­ta­tion à l’affichage sur or­di­na­teur fixe et portable. En revanche, adapter une version de site Web pour or­di­na­teur vers un format mobile nécessite souvent beaucoup de temps et de res­sources. Avant de commencer la pla­ni­fi­ca­tion et la mise en place d’une na­vi­ga­tion res­pon­sive, il faut trouver les réponses à certaines questions de base, notamment l’em­pla­ce­ment et la structure de base du menu de na­vi­ga­tion.

Où devrait être placé le menu de na­vi­ga­tion ?

Les approches typiques placent le menu de na­vi­ga­tion en en-tête et en bas de page. Sur les pages mobiles, l’uti­li­sa­teur trouve seulement un renvoi au bas de page où se trouve le menu de na­vi­ga­tion.

Les menus de na­vi­ga­tion en bas de page ne sont pas toujours optimaux pour l’uti­li­sa­teur : celui-ci s’attend gé­né­ra­le­ment à ce que les éléments de na­vi­ga­tion im­por­tants soient fa­ci­le­ment ac­ces­sibles. Pour cette raison, la na­vi­ga­tion dans le pied de page est de moins en moins utilisée. C’est pourquoi l’accent est mis sur le contenu de la page d’accueil. Aujourd’hui, la na­vi­ga­tion mobile se trouve plus souvent en haut de la page. Ce type de mise en œuvre est considéré comme classique pour la plupart des uti­li­sa­teurs.

Comment la na­vi­ga­tion est-elle struc­tu­rée ?

Il existe dif­fé­rentes pos­si­bi­li­tés pour struc­tu­rer un menu de na­vi­ga­tion. La na­vi­ga­tion sous forme de liste et celle sous forme de trame sont les plus courantes.

La pré­sen­ta­tion classique par liste est utilisée aussi bien pour les na­vi­ga­tions à un seul niveau que pour les na­vi­ga­tions étendues à plusieurs niveaux. Ses avantages incluent une mise en place simple, ainsi qu’une fa­mi­lia­rité pour les uti­li­sa­teurs.

Une trame de na­vi­ga­tion s’impose pour les points de na­vi­ga­tion courts et est par­ti­cu­liè­re­ment demandée dans le e-commerce. Les points de na­vi­ga­tion sont affichés dans la trame les uns à côté des autres et le nombre de colonnes et la grandeur de l’écran dépendent de la taille de l’écran. Si l’on choisit une trame à deux colonnes, le nombre de points de na­vi­ga­tion doit être pair pour éviter une pré­sen­ta­tion dé­sé­qui­li­brée.

Quels sont les concepts de na­vi­ga­tion mobile ?

Nous en venons main­te­nant à la question centrale : comment s’articule la na­vi­ga­tion mobile ? La manière dont la na­vi­ga­tion est présentée détermine le concept. Les options de pré­sen­ta­tion sont multiples : soit le menu de na­vi­ga­tion se trouve di­rec­te­ment dans le champ de vision, soit elle ne s’ouvre que lorsque vous appuyez dessus ; soit elle remplace le contenu, soit elle se superpose à lui. Nous avons rassemblé quelques exemples ci-dessous.

Na­vi­ga­tion via un menu déroulant

Les menus dé­rou­lants font partie des clas­siques de la na­vi­ga­tion res­pon­sive. Ils rap­pel­lent fortement la structure de la na­vi­ga­tion courante sur le bureau, sont donc familiers aux uti­li­sa­teurs et sont par con­sé­quent un concept de na­vi­ga­tion souvent choisi. La na­vi­ga­tion est activée en appuyant sur le bouton cor­res­pon­dant et se superpose au contenu sans le masquer com­plè­te­ment.

Na­vi­ga­tion slidedown

La na­vi­ga­tion toggle, ou slidedown en anglais, est un autre mode de na­vi­ga­tion répandu. On parle aussi de na­vi­ga­tion en accordéon en français. Lorsque vous appuyez sur le bouton de menu, la na­vi­ga­tion s’ouvre. Toutefois, con­trai­re­ment au menu déroulant, cette variante ne se superpose pas au contenu : elle le fait glisser vers le bas. Ce type de na­vi­ga­tion est un peu plus complexe à mettre en œuvre, mais est considéré comme évolutif et peu en­com­brant. Grâce à la pos­si­bi­lité d’intégrer des points de sous-na­vi­ga­tion, elle constitue une solution élégante pour les menus simples comme pour les menus plus complexes.

Barre de na­vi­ga­tion in­fé­rieure

La barre de na­vi­ga­tion in­fé­rieure est une solution de plus en plus populaire pour les ap­pli­ca­tions mobiles et les pages Web, dans laquelle le menu est affiché en bas de l’écran. Ce type de na­vi­ga­tion est par­ti­cu­liè­re­ment convivial, car il est fa­ci­le­ment ac­ces­sible sur smart­phone. Il convient bien aux projets avec peu de points de na­vi­ga­tion, mais es­sen­tiels, et offre une structure claire et épurée qui aide les uti­li­sa­teurs à passer ra­pi­de­ment d’une section prin­ci­pale du site à une autre.

Na­vi­ga­tion off-canvas

Ce type de na­vi­ga­tion res­pon­sive se trouve en dehors de la zone visible d’un site Web : le menu n’est pas intégré dans la mise en page. Il s’agit donc d’une solution peu en­com­brante qui permet d’éco­no­mi­ser de la place sur votre site Web. Le menu apparaît après avoir cliqué sur l’icône du menu et déplace l’ensemble de l’écran. Cette option s’avère très adaptée pour les grandes struc­tures de menus avec de nombreux sous-menus.