Separadores de categoria no menu: linhas, espaco em branco ou blocos de cor?

Um meze house de 26 mesas em Cesme separava as categorias com finas linhas cinza. Ao troca-las por 24 pixels de espaco em branco, o tempo na pagina subiu 22 por cento e o scroll ficou bem mais ordenado. O separador escolhido afeta diretamente o pedido medio.

Tres tipos de separador e a psicologia de cada

A linha parece minimalista, mas o cerebro a le como barreira e gera uma micro-pausa. O espaco em branco da ar e agrupa por proximidade. O bloco de cor e o sinal mais alto e deve ser raro.

Material Design 3 reserva linhas para tabelas densas; em menus, o padrao deve ser 16 a 32 px de espaco.

Qual separador para qual categoria?

Com uma so cozinha, basta espaco em branco. Com varias cozinhas ou hierarquia, blocos de cor ajudam — limite a tres tons.

• Espaco 24-32 px: entre itens da mesma categoria.
• Linha 1 px opacidade 0.1: para subgrupos.
• Bloco de cor: apenas para categorias principais.

Dados A/B e padroes de scroll

O teste de quatro semanas mostrou 18 por cento mais profundidade de scroll na variante de espaco; o tempo medio foi de 52 para 64 segundos, com +9 por cento em add-to-cart.

Um cafe em Karakoy reduziu o bounce em 14 por cento com blocos de cor sutis. Bloco aplicado com criterio funciona.

FAQ

Posso combinar os tres? Sim, com hierarquia: bloco no topo, espaco no meio, linha no nivel mais profundo.

E em dark mode? Mantenha a opacidade da linha entre 0.08 e 0.12.

E acessibilidade? Contraste WCAG AA 4.5:1 e uma pista nao cromatica adicional.

Achou útil? Compartilhe.