L’espace limité sur un mobile oblige à faire constamment preuve de créativité dans la disposition des éléments et leurs interactions. L’accès aux contenus grâce à une bonne navigation est donc un enjeu crucial sur votre site. Vous trouverez ici quelques pistes de réflexion pour vous guider dans votre choix de navigation, du menu principal aux sous-niveaux.
Nous nous sommes ici limité à des navigations couramment employées dans les sites informationnels. Les sites de commerce électronique ont, pour leur part, des besoins entièrement différents en ce qui concerne le guidage utilisateur et les enjeux de recherche et de comparaison entre catégories.
Menu principal
Voici une liste des principales techniques utilisées afin de gérer un menu principal :
- Le menu à gauche
- Le menu horizontal
- Le menu déroulant
- Le menu en pied de page
- La liste déroulante
Examinons dans le détail chacune de ces techniques afin d’en voir les avantages et les inconvénients.
Menu à gauche
Site mobile d’Orange
Un clic sur l’icône du menu à gauche déploie un menu aligné sur la gauche et repousse la page vers la droite.
Avantages
- Les utilisateurs connaissent déjà ce type de menu grâce à Facebook.
- Ce menu peut prendre en charge beaucoup d’éléments au premier niveau.
Inconvénients
- L’accès au menu est situé dans la zone la plus difficile à atteindre Responsive Navigation: Optimizing for Touch Across Devices.
- Les menus très longs sont à éviter, à moins qu’il s’agisse d’une application, et encore.
- L’utilisateur doit systématiquement fermer le menu pour revenir à la page, ce qui implique un effort plus contraignant que de devoir simplement faire défiler la page, par exemple.
- Un morceau de page reste visible, et certains utilisateurs qui ne sont pas familiers avec l’application Facebook mobile peuvent penser qu’il s’agit d’une erreur.
Menu horizontal
Site mobile de Lancaster University
Un clic sur la section dirige l’utilisateur vers la page.
Avantage
- Ce menu permet de garder une cohérence visuelle avec la version du site sur ordinateur.
Inconvénients
- Il manque de flexibilité pour rajouter des éléments dans le menu ultérieurement.
- Cette navigation semble repousser plus bas dans la page du contenu qui peut être important et qui devrait être visible au premier coup d’œil.
- Cela augmente aussi l’effort effectué par l’utilisateur puisqu’il doit faire défiler les pages encore plus bas à chaque nouvelle page selon la hauteur du menu pour avoir accès au contenu qui l’intéresse.
Menu déroulant
Exemple A : Menu déroulant qui pousse le contenu vers le bas
Site mobile de Starbucks
Ce menu s’étend en poussant le contenu vers le bas.
Avantages
- Le menu peut avoir une place quasi illimitée, et donc intégrer facilement une navigation secondaire.
- La page en dessous peut être vue sans avoir besoin de refermer le menu.
Inconvénients
- Aucun inconvénient perçu.
Exemple B : Menu déroulant recouvrant le contenu
Site mobile de Sony
Ce menu fonctionne comme un mégamenu en se déployant par-dessus la page, cachant le contenu en dessous.
Avantage
- Le menu peut prendre toute la hauteur du site, bien que comme il passe par-dessus le contenu, il serait recommandé qu’il ne dépasse pas la hauteur de l’écran.
Inconvénient
- L’utilisateur doit fermer le menu s’il veut voir le contenu situé en dessous.
Menu en pied de page
Site mobile d’ISO
Lorsque l’utilisateur clique sur l’icône, il voit toute la page défiler devant ses yeux en moins d’une seconde et s’arrêter au début du menu, qui est placé en bas de page.
Avantages
- Mêmes avantages que le menu en accordéon : de la place pour les catégories, la navigation et la comparaison est facilitée.
Inconvénients
- Il est assez déroutant pour l’utilisateur de voir toute la page défiler et que le menu soit placé dans le bas de celle-ci.
La liste déroulante
Site mobile de Smashing Magazine
Un clic sur la liste déroulante ouvre celle-ci; l’utilisateur doit choisir une section pour être dirigé sur celle-ci.
Avantages
- Tous les niveaux de navigation sont visibles en un coup d’œil lorsque l’utilisateur ouvre la liste déroulante.
- Le menu est très rapide à charger puisque pris en charge nativement.
Inconvénients
- L’utilisateur n’est pas habitué aux listes déroulantes puisque sur les versions ordinateur, elles sont plutôt utilisées dans les formulaires.
- La liste déroulante prend un peu plus de place en hauteur qu’une icône ou qu’un bouton de menu.
- Les possibilités de design sont extrêmement limitées.
Menu secondaire
Voyons maintenant les techniques employées pour la navigation secondaire :
- Le menu en accordéon
- Le menu avec guidage
- La liste déroulante
- Pas de sous-menu
- Le fil d’Ariane
Menu en accordéon
Site mobile de Microsoft
Avantage
- La navigation secondaire est accessible très facilement
Inconvénient
- Aucun inconvénient perçu.
Menu avec guidage
Site mobile de Sony
Avantages
- Ce type de navigation décompose la tâche de l’utilisateur, qui a un choix à faire par « écran ».
- Il est conseillé pour les menus complexes à plusieurs niveaux.
- Le bouton en arrière permet de revenir au niveau de navigation supérieure.
Inconvénient
- Cette navigation est à éviter si l’utilisateur doit vite comparer des sous-catégories entre elles.
La liste déroulante
Site mobile de Passenger Focus
L’utilisation est la même que pour un menu principal : un clic sur la liste déroulante ouvre celle-ci et le visiteur doit choisir une catégorie.
Avantage
- Tous les niveaux de navigation sont visibles en un coup d’œil lorsque l’utilisateur ouvre la liste déroulante.
Inconvénients
- La navigation secondaire est complètement dissociée du menu principal; l’utilisateur peut ne pas la voir s’il scanne rapidement la page.
- La liste déroulante prend un peu plus de place en hauteur qu’une icône ou un bouton de menu.
- Les possibilités de design sont extrêmement limitées.
Pas de sous-menu
Site mobile de WWF
Le seul menu présent est le menu principal. L’utilisateur doit ensuite naviguer dans les pages de catégorie (exemple ci-dessus : la page des espèces) pour voir les sous-catégories (dans le cas présent une sous-catégorie = une espèce).
Avantage
- Les liens des sous-catégories dans la page peuvent être traités visuellement et favoriser la découverte.
- L’exemple ci-dessus montre de belles photos de chacune des espèces.
Inconvénients
- La navigation est rendue plus lente. Certainement déconseillé pour les sites où les utilisateurs reviennent souvent et savent déjà sur quelles pages ils veulent aller.
- Ce type de menu oblige le retour en arrière à moins d’avoir inclus les autres liens des sous-catégories dans la page.
- Il est déconseillé pour les sites à plus de deux niveaux de navigation.
Le fil d’Ariane
Site mobile de newzealand.com
Le fil d’Ariane modélise la place d’une page dans une arborescence, généralement de la manière suivante : Accueil > Catégorie > Sous-catégorie > Sous-sous-catégorie et ainsi de suite jusqu’au titre de la page. Les niveaux de navigation supérieurs sont cliquables. Par exemple, le lien de l’accueil renvoie vers la page d’accueil.
Le fil d’Ariane est davantage un moyen de navigation supplémentaire pouvant pallier aux inconvénients d’autres moyens de navigation, comme celui du « pas de sous-menu ». Par exemple, sur le site de newzealand.com, où il n’y a qu’un menu principal, le fil d’Ariane devient le seul moyen de revenir à la page des destinations. Il peut être aussi utilisé avec n’importe quel menu.
Avantages
- Le fil d’Ariane indique à l’utilisateur où il se trouve.
- Il lui permet de revenir aux niveaux de navigation supérieurs.
Inconvénients
- Lorsque le fil d’Ariane se situe en haut près du titre de la page comme sur un site classique, cela implique une perte d’espace pour le contenu propre à la page.
- Lorsque le fil d’Ariane se situe en bas de page, comme dans l’exemple ci-dessous, il perd un peu de son intérêt. En effet, l’utilisateur doit faire défiler la page pour voir un élément qui sert de repère, ce qui n’est probablement pas ce qu’il cherche à la base sur la page.
Site mobile de Lancaster University
Conclusion
As a general rule, content takes precedence over navigation on mobile.
Luke Wroblewski
L’espace reste l’enjeu principal du mobile. Si la prédominance du contenu est recommandée, la navigation se doit d’être visible, accessible et facile à utiliser autant que possible.
Dépendant des facteurs tels que le nombre de catégories, la longueur des noms des catégories, la taille du logo et la présence de la recherche, votre menu pourra prendre plus ou moins d’espace. Le choix de la navigation va également grandement dépendre de la navigation secondaire.
Vous comprenez donc que chaque type de navigation comporte des avantages et des inconvénients, et que ceux-ci devraient être déterminants dans votre processus de sélection. La navigation la plus optimale est sans surprise celle qui est le plus adaptée à votre contexte.
