L’ergonomie mobile ne consiste pas à réduire un menu de bureau. Elle adapte l’accès aux contenus à un écran étroit, à une lecture rapide et à l’usage du pouce. Un bon dispositif permet d’atteindre une rubrique, de comprendre où l’on se trouve et de revenir en arrière sans hésitation. L’enjeu est de diminuer les erreurs et la charge cognitive, tout en conservant une hiérarchie claire, même lorsque l’espace disponible est limité.
Sur téléphone, la consultation se fait souvent en situation de mobilité, avec une attention fragmentée et une seule main disponible. L’utilisateur ne souhaite pas analyser une arborescence complexe : il cherche un accès immédiat à une information, un service ou une action. La navigation principale doit donc rendre les destinations prioritaires identifiables en quelques secondes. L’architecture de l’information est le point de départ. Elle organise les contenus selon leur importance et leurs relations, avant tout choix graphique. Une rubrique fréquemment recherchée, telle qu’un catalogue, un compte client ou une prise de contact, mérite une place plus directe qu’un contenu institutionnel peu consulté. Les données de fréquentation, les requêtes internes au site et les retours du support aident à distinguer les besoins réels des suppositions. La « pouce-zone » compte également. Les zones basses et latérales de l’écran sont généralement plus faciles à atteindre d’une main que le haut de l’interface. Cela ne signifie pas que tout doit être placé en bas, mais les actions répétées ou essentielles gagnent à être accessibles sans étirement du doigt. Une interface ergonomique respecte les gestes réels plutôt qu’une disposition héritée du bureau.
La structure doit traduire la hiérarchie du site sans la reproduire intégralement. Sur mobile, chaque niveau supplémentaire ralentit la progression. Il est préférable de distinguer les accès universels, comme la recherche ou le compte, des rubriques de contenu et des actions transactionnelles. Une barre inférieure persistante peut convenir aux quelques destinations consultées très souvent ; un panneau replié convient mieux aux accès secondaires.
Un menu surchargé augmente le temps de décision. Regroupez les pages proches sous une catégorie intelligible plutôt que d’afficher chaque page au premier niveau. Les libellés doivent être courts, explicites et cohérents : « Nos services » est plus clair qu’un intitulé créatif dont le sens doit être deviné. Évitez aussi de multiplier les icônes sans texte. Leur signification varie selon les personnes et les contextes. Une icône peut accompagner un libellé, mais ne devrait pas être le seul repère pour une fonction importante. Un intitulé précis réduit l’ambiguïté et les erreurs de sélection.
Classez les rubriques selon les tâches les plus utiles, non selon l’organigramme interne. La divulgation progressive permet de ne montrer que les choix nécessaires à une étape donnée. Par exemple, un sous-menu n’apparaît qu’après l’ouverture de sa catégorie, au lieu d’exposer d’emblée toute l’arborescence. Un fil d’Ariane peut aider dans les sections profondes, surtout pour un catalogue ou une documentation. Il ne remplace toutefois pas un bouton de retour fiable ni une navigation principale compréhensible. L’état actif doit indiquer clairement la rubrique ou la page consultée afin de maintenir l’orientation de l’utilisateur.
| Élément | Usage pertinent | Point de vigilance |
| Barre inférieure | Quelques destinations fréquentes | Éviter d’y accumuler des accès secondaires |
| Menu hamburger | Rubriques nombreuses ou moins prioritaires | Rendre son ouverture et sa fermeture évidentes |
| Sous-menu accordéon | Catégories à plusieurs niveaux | Signaler visuellement l’état ouvert ou fermé |
La qualité d’un menu dépend autant de son comportement que de son apparence. Au toucher, chaque commande doit répondre sans délai perceptible, afficher un retour visuel et rester stable pendant le chargement. Une animation discrète peut confirmer l’ouverture d’un panneau, mais elle ne doit ni masquer l’action ni ralentir l’accès au contenu.
Une zone tactile est la surface réellement activable par le doigt, pas seulement la taille du texte ou de l’icône. Des cibles rapprochées provoquent des pressions involontaires, notamment dans les sous-menus. Les pixels CSS sont l’unité de référence employée par les navigateurs ; ils ne correspondent pas nécessairement aux pixels physiques de l’écran. Le critère WCAG 2.5.8 prévoit une cible minimale de 24 × 24 pixels CSS, sous certaines conditions, au niveau AA. Le critère WCAG 2.5.5 fixe 44 × 44 pixels CSS au niveau AAA. Viser des surfaces généreuses et un espacement suffisant reste une décision prudente, particulièrement pour les liens proches. La taille visible, la zone cliquable et l’écart entre commandes doivent être pensés ensemble.
L’affordance doit être immédiate : un bouton ressemble à un bouton, une flèche indique un niveau dépliable et une croix sert à fermer le panneau. Le contraste entre textes, icônes et arrière-plan doit permettre une lecture confortable dans des conditions lumineuses variées. Le menu doit aussi fonctionner au clavier et avec les technologies d’assistance. Lorsqu’il s’ouvre, le focus doit aller vers son contenu ; lorsqu’il se ferme, il revient logiquement sur le bouton qui l’a déclenché. Un état de focus visible est indispensable, même si la majorité des visiteurs utilise le tactile. Pour un accompagnement de conception et d’interface, kinko-studio.com constitue un point de contact pertinent.
Le menu hamburger, souvent affiché sous la forme de trois lignes, ouvre généralement un menu hors-canvas : un panneau latéral ou superposé au contenu. Il économise de l’espace, mais rend les rubriques moins visibles qu’une barre permanente. Il est donc adapté lorsque les destinations ne doivent pas toutes être consultées immédiatement, pas lorsqu’une action essentielle risque d’être dissimulée. Le panneau doit comporter un bouton de fermeture identifiable, se fermer avec la touche Échap au clavier et ne pas laisser l’utilisateur interagir par erreur avec le contenu situé derrière. Les sous-menus accordéon sont utiles pour préserver une arborescence compacte. Chaque déclencheur doit être distinct du lien vers la rubrique parente lorsque celle-ci mène elle-même à une page. Ouvrir un sous-menu ne doit jamais empêcher d’accéder à sa catégorie principale.
Un affichage responsive doit rester fiable sur plusieurs largeurs, orientations et navigateurs, mais le contrôle visuel ne suffit pas. Testez des tâches concrètes : trouver une rubrique, rejoindre une page profonde, revenir au niveau précédent ou fermer le menu. Observez les hésitations, les pressions manquées et les intitulés mal compris lors de courts tests d’utilisabilité. Vérifiez aussi le comportement avec zoom, clavier et lecteur d’écran, ainsi que la persistance de l’état actif. Une ressource de référence sur les choix de navigation mobile est proposée par Smashing Magazine. Les retours recueillis doivent conduire à simplifier la structure ou les libellés, plutôt qu’à ajouter des indications superflues.
Un parcours réussi repose moins sur la quantité de liens que sur la clarté des accès proposés. Une hiérarchie cohérente, des intitulés compréhensibles et des commandes adaptées au toucher réduisent les hésitations dès la première interaction. Les contenus prioritaires doivent rester simples à atteindre, tandis que les niveaux secondaires peuvent être révélés progressivement. L’interface doit aussi rester lisible, accessible et prévisible, quels que soient l’écran ou le mode de navigation. Le choix entre barre inférieure, panneau replié et sous-menus dépend donc des tâches réelles, non d’un modèle unique. Enfin, l’observation des utilisateurs permet de repérer les blocages que la conception seule ne révèle pas. Testez des parcours concrets, puis simplifiez les points qui ralentissent l’accès à l’information.
Privilégiez un nombre réduit d’accès correspondant aux actions les plus fréquentes. Au-delà de quelques destinations, les libellés deviennent plus difficiles à lire et les cibles tactiles trop étroites. Les fonctions secondaires ont davantage leur place dans un panneau complémentaire.
Oui, les repères principaux doivent rester stables pour faciliter l’orientation. Une page particulière peut masquer certains éléments afin de favoriser une tâche précise, comme un paiement, mais l’utilisateur doit pouvoir retrouver un moyen clair de quitter ou d’annuler le parcours.
Non, sauf lorsque son sens est universel et parfaitement connu dans le contexte. Les pictogrammes sont interprétés différemment selon les utilisateurs. Associer une icône à un libellé court améliore la compréhension, notamment pour les rubriques importantes ou peu familières.
Des hésitations, des ouvertures répétées, des retours en arrière ou des clics erronés signalent souvent une difficulté. Faites réaliser des tâches simples à quelques personnes extérieures au projet et observez leur parcours. Le comportement observé est plus utile que les préférences déclarées.
Non, la navigation interne doit normalement rester dans le même onglet. Ouvrir une nouvelle fenêtre complique le retour en arrière, particulièrement sur mobile. Cette pratique se justifie surtout lorsqu’un lien mène vers un service externe et que l’utilisateur doit conserver sa page en cours.
