Conférences

Mes participations aux évènements professionnels

Cachez ce menu hamburger que je ne saurais voir.
Cachez ce menu hamburger que je ne saurais voir.

Le menu hambur­ger est rapi­de­ment devenu un pattern conven­tionné au cours des dernières années.

Mais est-ce un pattern accep­table pour l’uti­li­sa­teur ?

De nombreuses études de cas ont tendance à démon­trer le contraire. Problèmes d’af­for­dance, d’usa­bi­lité et d’usage ont rapi­de­ment mis en avant les faiblesses de cet élément d’in­té­rac­tion.


« Comment », « pourquoi », et « que faire » seront les ques­tions auxquelles nous essaie­ront de répondre.

Il était une fois ...
Il était une fois ...

Pour comprendre les choix anté­rieurs, il faut s’in­té­res­ser au contexte du moment, et notam­ment à ses problé­ma­tiques.

Il s’avère que le menu hambur­ger—a­lors asso­cié à une exten­sion de l’in­ter­fa­ce—­ré­pon­dait d’or et déjà aux problé­ma­tiques réap­pa­rues aujourd’­hui avec les termi­naux mobiles.

À l'origine du menu hamburger.
À l'origine du menu hamburger.

Le menu hambur­ger aurait fait sa première appa­ri­tion en 1981 sur Xerox Star (je n’étais même pas né !).

Sa mission ? Permettre l’ac­cès à des fonc­tions supplé­men­taires de l’in­ter­face sous forme de liste.

Tiens donc, n’est-ce pas l’idée mise en place dans la réuti­li­sa­tion massive d’ajourd’­hui ?


Nous allons creu­ser un peu ce sujet juste­ment …

Une surface limitée
Une surface limitée

Sur les écrans, l’es­pace a toujours été une contrainte.

Pas assez, puis trop; L’adap­ta­tion des conte­nus est devenu une problé­ma­tique impor­tante de la concep­tion d’une inter­face.

À tel point que lorsque sont arri­vés les mega-menus (nous dispo­sions enfin d’un espace suffi­sant), la navi­ga­tion mobile est venue jouer les troubles fêtes.


Que pouvions-nous faire pour conser­ver une telle quan­tité de liens sur une inter­face mobile ?

Les hamburgers à la rescousse
Les hamburgers à la rescousse

Tout comme son parent, le menu hambur­ger a permis de conser­ver le surplus d’élé­ments via la dissi­mu­la­tion.

Si cette méthode paraît tout à fait banale, elle entraine plus de problé­ma­tiques que d’avan­tages.


Concrè­te­ment, pourquoi vouloir cacher des inté­rac­tions initia­le­ment primaires ?

Pourquoi faire autrement ?
Pourquoi faire autrement ?

Oui, la ques­tion se pose. Le menu hambur­ger est aujourd’­hui un pattern connu de la grande majo­rité des utili­sa­teurs. Par consé­quent, il n’existe théo­rique­ment aucune contra­dic­tion à sa mise en place.

D’au­tant plus que ce concept a été proto­typé en long, en large, et en travers. L’au­to­ma­ti­sa­tion de ce type de navi­ga­tion est donc un gain de temps, et par exten­sion un gain finan­cier.


Mais qu’en est-il du prin­ci­pal inté­ressé ?

On pourrait l'accepter ...
On pourrait l'accepter ...

Mais ce serait un menson­ge…

Comme nous l’avons vu, le menu hambur­ger répond à une problé­ma­tique qui n’est pas la bonne :

Que faire de cet amas d’élé­ments de navi­ga­tion desk­top ?

Alors que la problé­ma­tique est propre à l’en­vi­ron­ne­ment.

Privilégier le contenu aux intéractions ?
Privilégier le contenu aux intéractions ?

Certai­ne­ment issu des premières inté­rac­tions virtuelles, le contenu est consi­déré comme une prio­rité, au point d’en réduire les possi­bi­li­tés d’in­té­rac­tions; Ce qui pour­rait s’avé­rer juste.

Mais quand bien même le produit n’est pas un service inté­rac­tif, l’en­semble des éléments qui permettent d’ac­cé­der aux infor­ma­tions ont autant d’im­por­tance que le contenu lui-même.


Rame­nons les inté­rac­tions au même plan.

L'absence d'affordance
L'absence d'affordance

J’en veux pour preuve que l’icône du menu hambur­ger en elle-même—qui fait couler tant d’en­cre—n’est pas expli­cite dans son utili­sa­tion.

Indiquer un objet ne permet pas à l’uti­li­sa­teur d’iden­ti­fier clai­re­ment les infor­ma­tions qui lui sont néces­saires dans son parcours jusqu’à l’objec­tif fixé.

De nombreuses études et obser­va­tions ont par ailleurs montré mécom­pré­hen­sion ou incom­pré­hen­sion totale de cette icône. Oui, nous autres concep­teurs, nous la connais­sons car nous en parlons, nous l’uti­li­sons. L’uti­li­sa­teur, lui, est bien loin de toutes ces notions.

Les problèmes d'intéractions
Les problèmes d'intéractions

Outre le fait qu’il faille systé­ma­tique­ment réou­vrir le menu pour navi­guer—ce qui est une tâche répé­ti­tive et lassan­te—il est diffi­cile pour un utili­sa­teur de se repé­rer dans son parcours par le jeu de nombreux niveaux appa­rais­sant et dispa­rais­sant à tour de rôle.

Dans son article 10 Usabi­lity Heuris­tics for User Inter­face Design, le Niel­sen Norman Group évoque d’ailleurs ce prin­cipe sous la forme heuris­tique du

Recog­­ni­­tion rather than recall

Quelles alternatives ?
Quelles alternatives ?

On parle beau­coup de problèmes vis à vis de ce pattern. Et pour­tant il existe bien des solu­tions.

Bien entendu, remettre en cause un modèle néces­site d’en appor­ter de nouveaux. Et pour se faire, il est à préci­ser qu’une règle en la matière n’est abso­lue.


Jetons un oeil aux possi­bi­li­tés !

De nouveaux patterns
De nouveaux patterns

Parmis l’en­semble des nombreux patterns exis­tants, il en existe un qui fait son bout de chemin dans la bonne voie. Direc­te­ment inspiré du prin­cipe de tabu­la­tions, sépa­rant diffé­rentes sections de conte­nus, la navi­ga­tion hori­zon­tale scrol­lable répond à de nombreuses problé­ma­tiques engen­drées par le menu hambur­ger.

De plus, ce pattern apporte de nouvelles possi­bi­li­tés de réflexion tout en restant faci­le­ment implé­men­tables par les équipes tech­niques.

Il faut cepen­dant consi­dé­rer que peu de patterns sont appli­cables dans 100% des cas, et rien ne vaudra une réflexion et un proto­ty­page abou­tis d’une navi­ga­tion propre à chaque projet.

La solution de facilité
La solution de facilité

Conclu­sion, le hambur­ger, comme tout pattern est une solu­tion de faci­lité, auto­ma­ti­sable.

Il est toujours possible de mettre en place d’autres patterns plus adéquats, mais c’est à nous de travailler la plus-value de l’in­ter­face 😉

Cachez ce menu hamburger que je ne saurais voir.

Kairn (interne)

Pattern reconnu, le menu hamburger est aujourd'hui de plus en plus présent sur les interfaces, que ce soit sur des écrans à taille réduite, ou des interfaces plus larges. Idéalisée comme la solution simple et fonctionnelle, cette fonction n'offre cependant pas une intéraction optimale entre l'utilisateur et le service.

Responsables des adaptations responsives de certains sites, il a longtemps été considéré en interne que le menu hamburger correspondait à un idéal pour sa facilité de mise en place; Au point d'en automatiser son intégration sur différents projets, chose à laquelle je me suis ouvertement opposé à travers cette présentation.

Résultat : De nouveaux prototypes de navigations responsives sont en cours de développement.