Brouillon
Cette page n'est pas terminée.
Concevoir un menu pour une application peut, à première vue, sembler assez simple. En réalité, c'est plutôt difficile à réussir. Une telle conception nécessite de prendre en compte le public auquel le site s'adresse (ses capacités, ses connaissances, etc.) et également la complexité de l'application.
Dans cet article, nous détaillerons différentes catégories de menus et quelques problèmes classiques qui peuvent survenir lors de la conception d'un menu. Pour cet article, il n'y a pas de prérequis technique car il s'agit plus de bon sens et d'ergonomie. De plus, il existe de nombreux outils qui peuvent aider à construire un menu graphique.
Écrire un menu simple mais utile sera beaucoup plus apprécié qu'un menu très joli et très animé mais qui est embrouille les utilisateurs et qui les frustre. Les utilisateurs devraient pouvoir trouver le site « confortable » et pouvoir s'y retrouver et naviguer rapidement.
Les différents menus
Un menu est une liste d'éléments dont on peut en sélectionner un ou plusieurs. Sur le Web, vous devriez avoir vu de nombreux exemples de menus. Il peut par exemple s'agir de tableaux de navigation, de pop-ups ou de barres d'outils. Dans la suite de cette section, nous décrirons les principaux types de menus.
Les menus déroulants
Un menu déroulant peut être construit sur plusieurs niveaux, en cliquant sur l'élément d'un menu, cela affiche un autre menu. À quelle profondeur faut-il aller ? Généralement, trois niveaux de menus suffisent. Par exemple, dans Firefox, l'élément « Affichage » fait partie du premier niveau et il permet d'accéder au menu de « Zoom » (deuxième niveau). Plus il y a de niveau, plus l'utilisateur prend du temps pour effectuer une tâche. De plus, pour accomplir une simple action, les utilisateurs doivent se souvenir de l'enchainement de menus qu'ils ont utilisés.
Les éléments de menu peuvent avoir des raccourcis claviers correspondants qui permettent d'y accéder plus rapidement. Pour simplement ajouter un raccourci sur un élément HTML, il suffit d'utiliser l'attribut accesskey. Attention, un raccourci peut être réservé par le système d'exploitation, le navigateur ou un module complémentaire, ça peut donc être utile que de permettre à l'utilisateur de modifier le raccourci comme il le souhaite.
Les barres d'outils ou menus avec icônes
Ces menus utilisent des icônes pour les différentes actions, plutôt que du texte. L'utilisateur peut donc associer une icône à une tâche donnée. L'icône utilisée pour l'action doit avoir un lien avec la tâche. Par exemple, une icône populaire pour mettre un texte en italique est un I majuscule oblique. Afin d'éviter toute confusion ou ambiguité, il est préférable d'ajouter une bulle d'informations qui s'affiche au survol de la souris ou du doit pour expliciter l'action correspondante.
Les menus contextuels
Un menu contextuel est un menu dont les éléments sont spécifiques au contexte dans lequl le menu a été ouvert. Un usage typique pour ce genre de menu est l'affichage d'un menu lorsque l'utilisateur clique droit sur un élément de la page.
Bien que HTML5 définisse comment gérer les menus contextuels, la plupart des navigateurs ne les supportent pas encore. Toutefois, il est possible de développer un menu contextuel spécifique en utilisant HTML (ancienne version), CSS et JavaScript puis de lier ce menu à une action du clavier ou de la souris.
Les cartes
En ce qui concerne les éléments de menus qui représentent une zone géographique sur une carte, il est possible de construire une image avec différentes zones, chacune correspondant à un élément de menu. Dans l'exemple qui suit, tiré de jVectorMap, on a une carte des États-Unis où certaines villes sont représentées par des cercles. Lorsque l'utilisateur passe sa souris au-dessus d'une ville, une légende apparaît avec le taux de chômage dans cette ville.
Les cartes peuvent être utilisées aussi pour des représentations non-géographiques. Il suffit de remplacer l'image de la carte par une autre image.
La pagination
Lorsque l'utilisateur doit naviguer entre différentes pages sans groupes prédéfinis, avoir une liste d'éléments, répartis sur plusieurs pages et un menu qui affiche un tableau des pages sera le plus approprié. Le but de la pagination est d'améliorer la navigation, de permettre efficacement aux visiteurs de savoir où ils en sont, d'où ils viennent et où ils peuvent aller.
Quelques règles sur les menus de pagination :
- Il est préférable de fournir de grandes zones cliquables
- Il ne faut pas utiliser de soulignement pour le contenu (autre que celui qui sera affiché pour les liens)
- Il faut identifier la page courante
- Il faut espacer les liens entre les différentes pages
- Il faut fournir des liens « Précédent » et « Suivant »
- Il faut utiliser les liens « Premier » et « Dernier » (lorsque c'est applicable)
- Il faut placer ces liens (« Premier » et « Dernier ») sur l'extérieur du menu
__
Il peut souvent être utile de maquetter l'application dans un storyboard avec plusieurs cas d'utilisation pour identifier ce à quoi ressemblera son ergonomie et les menus qu'on utilisera.
Les éléments d'un menu
Un menu est composé des éléments suivants :
- Un titre
- Un ensemble d'éléments
- Un séparateur
- Un indicateur de sous-menu où il y en a besoin
- Un raccourci clavier s'il est disponible
- Une icône
La sélection d'un élément de menu
Il est possible de séléctionner un élément d'un menu grâce à plusieurs actions :
- Appuyer sur une touche du clavier
- Positionner le curseur du pointeur à l'aide du clavier, de la souris ou d'un autre dispositif comme un stylet ou un doigt
- Parler via une interface de reconnaissance vocale.
Les éléments de menu accessibles via des commandes
TODO
La mise en forme d'un menu
Grouper plusieurs éléments d'un menu
Plusieurs facteurs peuvent nous amener à grouper des éléments d'un menu :
- L'ordre alphabétique
- Le temps et l'ordre des actions
- L'emplacement
- La fréquence d'utilisation
- Les propriétés communes entre les éléments
L'ordre des éléments
Certains éléments devraient être triés dans l'ordre croissant. Par exemple, la liste des numéros de page, dans le cas de la pagination, doit être ordonné. Il faut aussi prendre en compte la bidirectionnalité de certaines locales, en anglais les chiffres seront placés de gauche à droite et dans certaines autres locals, ils seront ordonnés mais placés de droite à gauche.
Certains éléments doivent être classés selon la fréquence d'utilisation. Les éléments utilisés les plus fréquemment doivent être présents en haut des menus.
L'interopérabilité
TODO
L'adaptabilité
Les menus n'ont pas nécessairement à être statiques. Ils peuvent évoluer en fonction du contexte. Par exemple, une application web peut avoir deux types d'utilisateurs (les administrateurs d'une part et les utilisateurs classiques d'autre part) et en fonction du type d'utilisateur, le menu peut être adapté. Dans notre exemple, les administrateurs peuvent avoir besoin d'actions spécifiques, non-nécessaires pour les utilisateurs.
Les applications utilisent des contextes en fonction desquels les menus s'adaptent. Par exemple, avant d'être connecté sur un site, le bouton « Se connecter » sera affiché. Une fois connecté-e, le bouton sera remplacé ou modifié pour laisser place à « Se déconnecter », l'utilisateur et l'application sont passés d'un contexte à un autre.
Une autre situation où un menu peut changer : les options disponibles dépendent des choix ou actions de l'utilisateur. Par exemple, un élément de menu peut être grisé (désactivé) ou masqué tant que le contexte n'a pas changé.
L'accessibilité
Cas d'utilisation
TODO