On constate avec la part grandissante des mobiles sur le trafic web, se développer un nouveau paradigme, dans l’ergonomie web. Les menus déroulants sont en train de s’effacer pour redonner leur place au bon vieux clic, on en comprend d’ailleurs facilement la raison, l’inefficience du survol sur mobile, nous ramène ainsi, aux fondamentaux du web. Après avoir été un must, le menu déroulant arrivé à son pinacle avec les menus XXl, véritable ville dans la ville et parfois tellement exhaustif qu’ils en devenaient fourre-tout, semble remis en question part son caractère trop lié à l’utilisation d’un curseur.

Quelques exemples symptomatique du retour du menu « one click »

Le menu déroulant et son mythe

L’histoire des menus déroulants est directement hérité de celui des systèmes d’exploitation machines, dont ils reprennent les principes d’utilisabilité, avec quelques variantes malheureusement pour l’internaute.
En effet les menus déroulants de nos machines ne s’affichent qu’après un premier clics et disparaitront qu’après la validation d’un deuxième clic. Le web n’a retenu que le survol comme gain de temps pour l’internaute et cette erreur en terme d’interaction c’est répandu dans le monde des designers qui pensaient à tord que les menus affichés au survol étaient plus rapides et plus simples pour les utilisateurs

Cela partait d’une bonne intention et aurait pu devenir un parangon à l’instar des menus de nos OS. Mais les menus web sont en réalité plus difficiles à utiliser. Oui les menus affichés au survol économisent un clic et permettent d’arrivée sur la page ciblée plus rapidement
néanmoins le clic est nécessaire pour faire savoir au site ce que l’utilisateur souhaite et attend à l’ouverture du menu.
Cliquer pour obtenir ce qu’il veut n’a jamais été un problème pour l’utilisateur et correspond à son modèle mental. L’utilisation des menus affichés au survol peut s’avérer difficile dans plusieurs cas.

Les tunnels invisibles

Les contraintes des interfaces web font que l’internaute est obligé d’emprunter des tunnels invisibles lors du survol des menus déroulants. Les tunnels de survol sont des parcours au travers desquels les utilisateurs doivent circuler dans le but de cliquer sur un élément de menu. Toutes sortie du tunnel de survol se verra sanctionné par la fermeture du menu. Une difficulté assez désagréable, puisque la logique voudrait que l’on puisse suivre le chemin le plus direct pour aller à l’item choisi, cela rend la navigation également moins aisée et moins efficace, empêchant les utilisateurs d’atteindre leur objectif de navigation rapidement.

Le schéma montre bien que l’internaute devra manœuvrer la souris à travers le tunnel de survol à chaque fois qu’ils souhaitent cliquer sur un élément de menu.

l’ecueil des éléments périphériques

Dans cet exercice de menu déroulant au survol, qui se joue en partie sur une certaine dexterité à atteindre sa cible, les plus mal lotis sont les élements périphériques car proche du bord du menu, ils sont les plus difficiles à atteindre répondant en cela à la loi de FITTS : « les cibles les plus petites ou éloignées nécessitent plus de temps pour être atteintes » ».
Si les utilisateurs ne ralentissent pas le mouvement de la souris pour arriver précisément sur un élément périphérique du menu, le menu se ferme et ils n’ont plus qu’à recommencer.
Pour éviter cet écueil, il conviendra de prévoir en CSS un padding suffisamment important pour éviter de louper la cible ou du moins laisser à l’utilisateur une marge d’erreur plus importante.

Les menus déroulants et leur corollaire

En plus d’être difficile à utiliser les menus déroulants posent le problème des pages d’index qui sont souvent sujet à discussion lors des échanges avec les clients ces éléments doivent t-ils être cliquable, si oui que trouve t-on derrière. Ces pages d’index sont souvent cachées dans l’élément principal que les utilisateurs survolent avec leur souris. La plupart des utilisateurs ne sauront pas cliquer sur l’élément principal du menu pour se rendre sur la page d’index. Plusieurs réponses peuvent être apportées : l’item est cliquable et renseignera le visiteur sur cette rubrique de premier niveau. On considère que l’élément ne doit pas être cliquable puisque finalement tous sera développer dans les items du menu déroulant. Il existe une troisième solution qui est un pis aller, car on fausse la réponse attendue par l’internaute en faisant de l’index un alias du premier item du menu déroulant.

Les solutions

Les sites montrés plus haut ont réglés ces difficultés en revenant à un menu de premier niveau simple et cliquable sans menu déroulant, on peut je pense associé le clic à l’affichage d’un menu déroulant qui sera affranchi des difficultés décrites plus haut comme les tunnels de survol, les éléments périphériques difficiles à atteindre et des pages d’index cachées.

Il est heureux de constater que les efforts fait pour la mobilité nous ont permis de revenir à des approches utilisables pour les menus affichés au clic.

La première approche est la plus simple et la plus normale. Quand l’utilisateur clique l’élément général, le menu s’ouvre. Il se ferme seulement quand l’utilisateur clique en dehors du menu. Cette approche permet aux utilisateurs de déplacer la souris de la façon désirée sans affecter le menu.

Le menu affiché au clic vous force également à mettre le lien vers la page d’index dans le menu plutôt que de le cacher dans l’élément général du menu. Si les utilisateurs cliquent l’élément général du menu, le menu se ferme. Ainsi, faire de l’élément général un lien vers la page d’index n’est plus une option. Il faut faire de l’index un élément du menu. Les utilisateurs verront clairement comment se rendre sur les pages d’index.

Prenant compte également de l’interaction au touch sur mobile, on veillera également à faire en sorte de respecter le loi de Fitts en ayant une cible assez grande c’est à dire un bouton cliquable couvrant une zone facile à atteindre au doigt.

Force de constater qu’aujourd’hui on développe un menu pour Desktop et un menu pour mobile au touch, il conviendrait peut-être de ne développer qu’une seule navigation propre à satisfaire les deux mondes, en s’orientant sur un principe que comprennent tous les terminaux, tablettes, télé, et ordinateurs c’est à dire le clic.