Hiérarchie Visuelle Z-Pattern : Guider l'Œil du Client dans le Menu

Un restaurant régional de 30 couverts près du sanctuaire Mevlana à Konya a augmenté son funnel "consulter le menu → commander" de 18% simplement en alignant sa carte numérique au Z-pattern. Pas de nouvelle techno — juste une hiérarchie qui suit le regard.

Z-Pattern vs F-Pattern

Les études eye-tracking de Nielsen Norman identifient deux schémas de lecture. Le F-pattern apparaît sur les pages textuelles. Le Z-pattern domine sur les landing visuelles et menus digitaux.

Le trajet Z : haut-gauche (héros) → haut-droite (tagline) → diagonale vers bas-gauche (description) → bas-droite (CTA "Commander"). Placer le déclencheur à la fin du Z capte un œil prêt à agir.

Mise en œuvre à Konya

Quatre ancres Z sur la page catégorie :

1) Haut-gauche : photo etli ekmek + "Cuisine de Konya". 2) Haut-droite : chips de catégories. 3) Milieu-gauche : texte patrimonial 2 phrases. 4) Bas-droite : CTA sticky. Le temps avant commande a chuté de 22 secondes ; conversion +18%.

Trois Tests Gratuits

Test plissement (quatre blocs visibles ?), test 5 secondes (que reste-t-il ?), heatmap Microsoft Clarity (le regard suit-il vraiment le Z ?). Si la diagonale manque, contraste ou taille trop faibles au milieu.

FAQ

Le Z-pattern fonctionne-t-il sur mobile ? Moins — le scroll vertical domine, F-pattern convient mieux. Z est optimal tablette/desktop avec Z complet dans un seul viewport.

Et en RTL (arabe) ? Le Z se miroir : commence haut-droite, finit bas-gauche. thMenu applique dir="rtl" automatiquement.

CTA en bas-gauche au lieu de bas-droite ? Non — c'est l'angle mort. Le clic chute de 30–40% car l'œil a "fermé" le Z à droite.

Cet article vous a été utile ? Partagez-le.