Hierarquia Visual Z-Pattern: Guiando o Olhar do Cliente no Menu

Um restaurante regional de 30 mesas perto do santuário Mevlana em Konya elevou seu funil "ver menu → pedir" em 18% simplesmente alinhando o cardápio digital ao Z-pattern. Nada de nova tecnologia — apenas hierarquia que segue o olhar.

Z-Pattern vs F-Pattern

Os estudos eye-tracking da Nielsen Norman identificam dois padrões. F-pattern em páginas de texto denso. Z-pattern em landings visuais e menus digitais.

Rota Z: topo-esquerda (herói) → topo-direita (tagline) → diagonal a baixo-esquerda (descrição) → baixo-direita (CTA "Pedir"). O gatilho no fim do Z encontra olho pronto para agir.

Implementação em Konya

Quatro âncoras Z na página categoria:

1) Topo-esquerda: foto etli ekmek + "Cozinha de Konya". 2) Topo-direita: chips categoria. 3) Centro-esquerda: texto patrimonial 2 frases. 4) Baixo-direita: CTA sticky. Tempo até pedido caiu 22 segundos; conversão +18%.

Três Testes Grátis

Teste olhos semicerrados (quatro blocos visíveis?), teste 5 segundos (o que lembra?), heatmap Microsoft Clarity (segue realmente o Z?). Se falta a diagonal, contraste ou tamanho fracos no centro.

FAQ

Z-pattern funciona no mobile? Menos — o scroll vertical domina, F-pattern encaixa melhor. Z é ótimo em tablet/desktop com Z completo num viewport.

E em RTL como árabe? O Z espelha: começa topo-direita, termina baixo-esquerda. thMenu aplica dir="rtl" automaticamente.

CTA baixo-esquerda em vez de direita? Não — é o ponto cego. Clique cai 30–40% porque o olho já "fechou" o Z à direita.

Achou útil? Compartilhe.