L’adaptation responsive du menu de navigation secondaire

Ne pas confondre avec le second niveau de menu

Les utili­sa­teurs sont très habi­tués à croi­ser lors de leur navi­ga­tion un seconde niveau de menu dans le menu de navi­ga­tion prin­ci­pal, prenons l’exemple d’un site vitrine composé du menu suivant : Qui-sommes-nous ? | Nos services | Notre équipe | Nos points de vente | Contact | Espace client

Le second niveau de menu de “Nos services” pour­rait être par exemple :

• Livrai­son à domi­cile | Drive-in | Garan­tie casse

Ce second niveau de menu se présen­tera par exemple sous forme de drop­down au rollo­ver sur le premier second niveau de menu.

Le menu de navi­ga­tion secon­daire est diffé­rent du second niveau de menu que nous venons de décrire, il s’agit d’un tout autre menu menu, déco­réllé du premier, il est contex­tuel.

Par exemple, toujours sur notre site, nous avons un espace client, avec un menu propre déta­ché du header :

Le menu de navi­ga­tion secon­daire est signalé en vert, il s’agit d’un menu contex­tuel, il n’est présent que dans l’es­pace client, et permet à l’uti­li­sa­teur de navi­guer entre les diffé­rentes pages de son espace client.

L’adap­ta­tion respon­sive

L’adap­ta­tion respon­sive de deux niveaux de menu est une problé­ma­tique UX récur­rente, nous avons recensé les solu­tions possibles, et listé leurs avan­tages et leurs incon­vé­nients

Le drop­down

Les avan­tages :

• l’user comprend immé­dia­te­ment qu’il y a un menu secon­daire sur la page
• les utili­sa­teurs ont l’ha­bi­tude d’uti­li­ser des drop­down

Les incon­vé­nients :

• les diffé­rentes rubriques du menu sont cachées
• Le menu n’est acces­sible que depuis le haut de la page

Le carrou­sel

Les avan­tages :

• Le menu est visible d’en­trée de jeu
• Les jeunes utili­sa­teurs sont à l’aise avec une navi­ga­tion hori­zon­tale et le swipe
• Le menu secon­daire peut rester sicky en haut du navi­ga­teur lors du scroll

Les incon­vé­nients :

• Tous les utili­sa­teurs ne sont pas à l’aise avec le swipe et la navi­ga­tion hori­zon­tale, notam­ment les séniors
• Certaines rubriques du menu restent cachées

Le offcan­vas

Les avan­tages :

• Les utili­sa­teurs savent parfai­te­ment utili­ser le off-canvas, qui se comporte comme un burger menu
• Il permet à l’uti­li­sa­teur d’avoir une vision claire du menu secon­daire

Les incon­vé­nients :

• Peut être désta­bi­li­sant si le menu prin­ci­pal est déjà en off-canvas
• Le menu secon­daire n’est pas visible et rencontre les mêmes soucis de taux d’uti­li­sa­tion que les burger menus

La tool­bar

Les avan­tages :

• La tool­bar reste sticky en bas du navi­ga­teur, la navi­ga­tion est acces­sible en perma­nence
• Les utili­sa­teur sont habi­tués à ce mode de navi­ga­tion souvent utili­sés dans des appli­ca­tions

Les incon­vé­nients :

• Limité à 5 items
• Incom­pa­tible avec un menu prin­ci­pal en tab-bar
• Réduit la surface de l’écran, ce qui peut être gênant avec un header fixe sur les plus petits devices