Expérimenter avec une tétière inversée

Résumé : sur mobile j’ai changé la barre de menu du blog.

Pendant long­temps, quand on ouvrait mon blog sur télé­phone on voyait ça :Navigation blogmobile v1

Ça fait un gros pâté de texte non ? Nom du blog, puis liens, puis titre de l’ar­ticle. Les liens du menu, notam­ment, sont plus directs et effi­caces qu’un menu-burger, mais ils font très lourds sans vrai­ment être parlants ou inciter à cliquer. Comment rendre ce menu plus discret sans perdre en utili­sa­bi­lité ? Une solu­tion : un menu-tiroir masqué par défaut, mais pas un menu-burger pour autant. Pour l’ou­vrir, il suffit de scroller vers le haut ou d’ap­puyer sur la mani­cule. Essayez de vous-même sur un télé­phone, une fenêtre étroite ou regardez cette vidéo :

Pourquoi ce choix ? J’avais envie d’expérimenter autour de l’idée de la page web comme canevas infini (pour reprendre une expres­sion de Scott McCloud). Une page web n’est pas un rectangle avec des fron­tières claires ni un sens de lecture prédé­fini.

Image prise à Frank Chimero

Ça ne veut pas dire qu’on peut faire n’im­porte quoi : les limites sont celles de la compré­hen­sion du lecteur. Ici on reste sage et ce menu inversé est même plus ergo­no­mique qu’un menu-burger. D’abord il est tout à fait décou­vrable : la mani­cule est bien mise en évidence, on peut appuyer dessus ou sur toute la largeur de l’écran et le menu est suggéré par une saillie. Ensuite, parce qu’au lieu de devoir repérer et viser un bouton, il suffit d’un simple geste de scroll. Comme le dit Joshua Porter, « le défi­le­ment est une conti­nua­tion, le clic une déci­sion ». Enfin, ce geste n’est pas arbi­traire mais cohé­rent avec la manière dont le menu appa­rait : scroller vers le haut fait appa­raitre progres­si­ve­ment plus de page, c’est le prin­cipe même du scroll. Alors que dans l’ab­solu un bouton-burger pour­rait être placé n’im­porte et le menu pour­rait appa­raitre n’im­porte comment.

Bref, je trouve ça pas mal. Me bercé-je d’illu­sions ? Un avis ? Avez-vous croisé des idées simi­laires ?