Como criar um cardápio de restaurante fácil de usar no celular

Um cardápio fácil de usar no celular ajuda o cliente a decidir sem brigar com a tela

Para muitos restaurantes, o primeiro cardápio que o cliente vê está no celular. Ele pode escanear um QR code, abrir um link no Google ou tocar em um link no Instagram. Talvez esteja em pé na frente do restaurante, dividindo um aparelho na mesa ou tentando ler com uma mão enquanto segura uma bebida.

Esse contexto muda o que um bom cardápio precisa fazer. Um layout de computador apertado em uma tela estreita faz a pessoa aumentar o zoom, arrastar para os lados e perder o ponto em que estava. Um cardápio de restaurante fácil de usar no celular leva o cliente da categoria ao prato e à decisão com menos esforço.

A solução não é diminuir tudo. As informações importantes precisam de espaço, o caminho deve ser previsível e o cardápio deve ser testado em um celular de verdade. Se você ainda está decidindo como o sistema completo deve funcionar, comece por Cardápio digital para restaurantes: como funciona, benefícios e por que adotar. Este guia trata de deixar o cardápio público confortável de usar.

O que torna um cardápio de restaurante fácil de usar no celular?

Um cardápio adaptado ao celular deve permitir que os clientes:

• abram o cardápio rapidamente depois de escanear ou tocar em um link;
• leiam sem aumentar o zoom ou arrastar a tela na horizontal;
• entendam a diferença entre categorias, pratos, opções e preços;
• toquem na navegação, no idioma e nos filtros de dieta sem abrir o controle errado;
• encontrem os detalhes que afetam a escolha, como porções, ingredientes e disponibilidade; e
• voltem ao cardápio depois de consultar um item sem perder o lugar.

Isso é um padrão de uso, não um estilo visual. Um cardápio pode parecer bem acabado e ainda ser cansativo. Um cardápio simples pode funcionar bem se a letra for legível, as seções forem claras e os controles fizerem o que prometem.

O Google recomenda o design responsivo como o padrão móvel mais fácil de implementar e manter. O buscador também usa a indexação mobile-first, então a versão para celular merece o mesmo conteúdo e cuidado que a versão para computador. Por que cardápios digitais melhoram o SEO dos restaurantes explica o lado da busca. Aqui, a prioridade é a pessoa que está diante da mesa.

1. Comece pelos primeiros dez segundos

A primeira tela deve responder rapidamente a três perguntas:

1. Que restaurante é este?
2. Estou vendo o cardápio atual?
3. Onde toco para encontrar o que quero?

Mostre o nome do restaurante, o serviço ou período ativo, os idiomas disponíveis e o primeiro caminho útil de navegação. Se o cardápio é de almoço, diga isso. Se o jantar começa às 17h, não faça a pessoa descobrir depois de abrir um prato que ainda não está disponível.

Mantenha a primeira tela leve. Uma imagem promocional grande, um vídeo que começa sozinho ou uma introdução longa empurra o cardápio para baixo. Coloque a comida e a próxima ação perto do topo.

A mesma regra vale quando o cardápio é aberto pelo Google, pelo site ou por uma rede social. Cada entrada deve levar ao mesmo cardápio atualizado, não a um PDF antigo ou a uma página sem explicação. Como adicionar o cardápio do restaurante ao Perfil da Empresa no Google e Como adicionar o cardápio do restaurante ao seu site detalham esses caminhos.

2. Organize as categorias para a tela do celular

No celular, as pessoas percorrem o conteúdo na vertical. Elas não devem precisar decifrar um bloco de texto nem abrir todas as categorias para entender a oferta.

Use categorias que acompanhem a forma como os clientes escolhem. Dependendo do restaurante, isso pode significar:

• entradas;
• sopas e saladas;
• pratos principais;
• acompanhamentos;
• sobremesas; e
• bebidas.

Não crie uma categoria para cada poucos itens apenas para encurtar a página. Muitas escolhas no topo dificultam a navegação. Poucas categorias obrigam o cliente a passar por pratos que não têm relação entre si.

Use nomes curtos e conhecidos. Se a cozinha usa um nome interno que os clientes não reconhecem, coloque primeiro o termo voltado para o público. Mantenha a navegação das categorias em um lugar previsível e facilite o retorno ao topo ou a troca de seção.

Para saber mais sobre a ordem das categorias, os grupos de itens e a leitura no celular, veja Como organizar um cardápio de restaurante para pedidos mais rápidos e confiantes.

3. Coloque os detalhes da decisão perto de cada prato

O cliente não deve precisar abrir três telas ou chamar alguém para descobrir o básico. Cada item precisa de informação suficiente para apoiar a próxima decisão.

Na maioria dos pratos, confira se o cardápio mostra:

• um nome claro;
• uma descrição curta dos principais ingredientes e do preparo;
• o preço e o contexto da porção;
• informações de dieta ou alergênicos que o restaurante tenha revisado;
• opções, substituições ou adicionais que mudam o pedido; e
• a disponibilidade quando o item é limitado a um serviço, dia ou unidade.

Não transforme cada item em um parágrafo. Quem está no celular precisa de detalhes úteis, não de uma história sobre a receita. Como escrever descrições de cardápio que ajudam o cliente a pedir mostra uma forma prática de decidir o que entra na descrição.

Mantenha os preços visualmente próximos do item a que pertencem. Se o preço depende do tamanho, mostre os tamanhos e os respectivos valores com clareza. Se o acompanhamento não está incluído, diga isso antes que o cliente presuma o contrário.

Se uma foto ajudar a explicar o prato, use uma que carregue rápido e corresponda ao que a cozinha serve. Uma imagem grande que atrasa o cardápio não ajuda o cliente. Imagens responsivas podem reduzir os dados enviados para aparelhos menores, principalmente quando o arquivo original é muito maior do que o espaço onde será exibido.

4. Faça com que cada toque seja fácil de acertar

O cardápio pode ser usado por alguém com uma mão, uma tela trincada, um sinal fraco ou uma mesa movimentada. Controles pequenos e muito próximos transformam uma navegação simples em tentativa e erro.

Dê tamanho e espaço suficientes para links, botões, troca de idioma, filtros e abas de categoria. O WCAG 2.2 define 24 por 24 pixels CSS como tamanho mínimo para a maioria dos controles acionados por ponteiro, com exceções quando há espaço suficiente entre alvos menores. Trate isso como um piso, não como meta de design. Controles maiores são mais fáceis de usar.

Confira o básico:

• O cliente consegue tocar em uma categoria sem abrir a que está ao lado?
• A troca de idioma é fácil de encontrar sem cobrir o cardápio?
• É possível fechar os detalhes de um prato ou um filtro por uma ação clara?
• O botão de voltar leva a um lugar esperado?
• Links e botões são visualmente diferentes do texto comum?

Se a resposta depender de um toque perfeito, o controle precisa de mais espaço.

5. Mantenha o texto legível sem aumentar o zoom

Texto legível não depende apenas de uma letra grande. Ele também precisa de contraste, espaçamento entre linhas e largura adequada.

Evite linhas longas que ocupem toda a largura do celular. Mantenha as descrições curtas o bastante para uma leitura rápida, mas não reduza a letra até que as palavras virem decoração. Confira se o texto continua legível quando o cliente aumenta o tamanho da fonte no navegador ou usa uma lupa de tela.

Teste o cardápio sob a luz do dia e em um salão escuro. Uma descrição em cinza claro que parece elegante no notebook pode desaparecer perto de uma janela. Um fundo com textura pode dificultar a localização dos preços e dos rótulos de dieta.

O guia Cardápios digitais e acessibilidade: como facilitar o pedido para todos trata com mais detalhes de contraste, estrutura, idiomas e leitores de tela.

6. Teste todo o caminho do cliente em um celular

Não pare depois de confirmar que a página inicial carrega. Teste o caminho que o cliente realmente percorre:

1. Escaneie o QR code em um celular que não esteja conectado ao Wi-Fi do restaurante.
2. Abra o cardápio pelo site e pelo Perfil da Empresa no Google.
3. Confirme se o serviço, o idioma e a unidade estão corretos.
4. Encontre um prato popular sem usar a busca.
5. Abra o prato e leia a descrição, o preço, a porção e os detalhes de dieta.
6. Troque o idioma e repita a conferência do mesmo item.
7. Gire o celular e volte para a seção anterior.
8. Teste com o tamanho do texto aumentado.
9. Confira uma conexão lenta e um aparelho com navegador antigo.

Peça que alguém que não criou o cardápio faça o teste. Quem escreve sabe onde a informação deveria estar. O cliente só sabe onde conseguiu ou não conseguiu encontrá-la.

Registre o aparelho, o ponto de entrada, o problema, a pessoa responsável e a correção. Relacione a mudança a uma auditoria do cardápio antes do serviço quando o problema afetar várias categorias ou canais.

Uma lista rápida para revisar o cardápio no celular

Use esta conferência antes de um período movimentado ou depois de uma atualização:

• O QR code abre o cardápio atualizado.
• O nome do restaurante e o período do serviço estão claros.
• A primeira tela não esconde o cardápio atrás de uma imagem ou mensagem grande.
• As categorias são curtas, conhecidas e fáceis de trocar.
• O texto cabe na tela sem rolagem horizontal.
• Nomes, preços, porções, descrições e disponibilidade correspondem ao que a cozinha faz.
• As informações sobre dieta e alergênicos foram revisadas antes da publicação.
• Botões, links, filtros e controles de idioma têm espaço suficiente.
• As imagens carregam rápido e correspondem à comida servida.
• O cardápio funciona em todos os idiomas publicados e nos principais pontos de entrada.
• Alguém fora do processo de edição testou o cardápio em um celular.

Mantenha a lista junto do registro de alterações do restaurante. Assim, um problema no celular terá uma pessoa responsável e uma data, em vez de virar mais uma explicação repetida na mesa.

Faça da versão para celular o cardápio de verdade

É fácil reconhecer um cardápio de restaurante adaptado ao celular. O cliente consegue abri-lo, encontrar uma categoria, entender um prato e voltar quando precisa. Não precisa aumentar a tela com os dedos, procurar um botão minúsculo ou adivinhar se o preço pertence ao item acima ou abaixo.

Revise juntos a primeira tela, a estrutura das categorias, os detalhes dos itens, os controles, o texto, as imagens e os pontos de entrada. Depois, teste o caminho publicado em um celular real antes do serviço. O Menuit ajuda restaurantes a manter esse cardápio em um endereço público estável, com atualizações ao vivo e dados de visualização para apoiar a próxima revisão.