Design de app de delivery de comida: redesign da tela inicial, antes e depois

A tela inicial de um app de delivery de comida tem uma única função: levar uma pessoa com fome até um restaurante em poucos segundos. O primeiro rascunho abaixo falha nisso, não porque alguma parte seja feia, mas porque todas as partes pedem atenção ao mesmo tempo. A solução não foi novas funcionalidades nem um novo estilo. Foi tirar coisas até que cada parte dissesse uma coisa só.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

Conte o que o olho precisa processar antes de chegar ao primeiro restaurante. À esquerda: um endereço completo, dois ícones no cabeçalho, uma barra de busca com mais dois ícones, um banner em degradê com três linhas de texto e um botão, pontinhos de carrossel, cinco anéis em cinco cores, um título de seção com ícone de chama e três selos em uma só foto. À direita: o nome de um lugar, um carrinho, uma barra de busca, cinco tiles, uma oferta e um card.

Nada à direita está sem uma funcionalidade que a esquerda tinha. O endereço, a busca, as categorias, a oferta e os restaurantes continuam todos lá. Cada um só parou de competir com os outros.

Correção 1: diga onde, em uma palavra

Antes

Depois

O rascunho mostra o endereço completo, 221B Baker Street, cortado no meio de uma palavra, em letra pequena ao lado de um pin. A correção mostra o nome que a pessoa deu a esse endereço, "Casa", grande, com uma seta que indica que dá para trocar.

Ninguém abre um app de delivery para ler o próprio endereço. A pessoa precisa confirmar uma coisa: isso vai para o lugar certo? Um rótulo que ela mesma escolheu, Casa, Trabalho, Casa da mãe, responde isso mais rápido que o nome de uma rua, e continua legível em qualquer tamanho porque é uma palavra só. O endereço completo fica a um toque de distância, na tela em que você o edita.

A correção também tira o ícone de perfil do cabeçalho. O rascunho o tinha duas vezes, uma no topo e outra como aba Conta. Duas portas para o mesmo cômodo fazem as pessoas se perguntarem se levam a cômodos diferentes.

Correção 2: uma forma, um estado selecionado

Antes

Depois

Antes, cada uma das 5 categorias fica em um círculo com seu próprio anel colorido: amarelo, verde, azul, rosa, roxo. Depois, os tiles compartilham uma forma e uma moldura neutra, e só o selecionado, Pizza, recebe o vermelho da marca na borda e no rótulo.

Cor em uma interface é um sinal, e cinco cores enviam cinco sinais. Quem passa os olhos pela linha tem que perguntar o que o verde significa e por que o sushi é azul. A resposta é nada, e esse é o problema: decoração que parece informação.

Quando a cor é gasta em uma coisa só, ela significa algo. Um único tile vermelho diz "você está aqui" sem uma palavra. As fotos fazem o resto, porque fotos de comida já são a coisa mais colorida da tela e não precisam de ajuda.

Correção 3: uma oferta, uma mensagem

Antes

Depois

O banner do rascunho empilha "SUPER PROMO!", a oferta, o código, o pedido mínimo e "Aplicam-se os termos" em letra minúscula, e depois um botão. A correção mantém o 50% OFF e diz três coisas: quando (Só hoje), para quem (seu primeiro pedido acima de $20) e o código, como um botão que você pode copiar.

A oferta nunca foi o problema. 50% de desconto é um bom motivo para pedir, e a correção a mantém do mesmo tamanho.

O que mudou foi tudo ao redor. "SUPER PROMO!" e "50% OFF" diziam a mesma coisa duas vezes. As letras miúdas enfiavam quatro informações em uma linha a 9 px, separadas por barras. O botão "Pedir agora" não tinha para onde ir, porque ainda não existe um restaurante específico para pedir.

O código agora é a ação. Tocar nele copia YUMMY50, a única coisa que a pessoa precisa levar desse banner até o checkout. Os termos também vão para o checkout, onde fazem sentido.

A imagem também mudou. O rascunho recorta o hambúrguer em um círculo flutuando sobre um degradê laranja. A correção o fotografa sobre o vermelho da marca, então a comida fica no próprio card em vez de num adesivo colado em cima.

Correção 4: um selo, dois dados

Antes

Depois

Antes, a foto traz três selos (Entrega grátis, 20% OFF, Patrocinado) e o texto abaixo lista culinárias, tempo de entrega, taxa, faixa de preço, pedido mínimo e horário de funcionamento. Depois, um selo, o nome, a avaliação e dois dados: quanto tempo e quanto custa.

Um card de restaurante em uma lista é lido em cerca de um segundo, e nesse segundo a pessoa decide duas coisas: eu quero essa comida, e vale a espera e a taxa? O card corrigido responde exatamente isso. A foto responde a primeira. "25 a 35 min, entrega $2,99" responde a segunda.

Tudo o mais no card antigo é informação real, só não é informação de primeiro olhar. A lista de culinárias já está visível na foto. O pedido mínimo de $15 e o fechamento às 23h só importam depois que você escolheu, então pertencem à página do próprio restaurante.

"Patrocinado" é para o negócio, não para o cliente, e três selos lado a lado se anulam. Um selo, escolhido por prioridade, é lido.

Cinco correções menores

As quatro partes acima são as grandes. Estas cinco mudanças são igualmente deliberadas:

• Uma margem. O rascunho usava 12 px à esquerda e 16 px à direita, então nada se alinhava com nada. A correção usa 20 px nos dois lados, e cada borda da tela fica nessa linha.
• Um sistema tipográfico. O rascunho tinha texto de 9 a 30 px sem degraus entre eles. A correção usa os estilos de texto do iOS, de 11 a 22 pt, então cada tamanho tem uma função e nada é pequeno demais para ler.
• Uma busca mais calma. A busca do rascunho tinha um microfone e um ícone de filtro dentro, e um placeholder tão longo que era cortado. A correção mantém um ícone e um texto mais curto: "Pratos, restaurantes ou culinárias".
• Sem pontinhos de carrossel. Pontinhos sob um banner prometem mais banners. A maioria nunca desliza, e os pontinhos são mais uma coisa para olhar. Uma oferta não precisa de pontinhos.
• Quatro abas, não cinco. Favoritos saiu da barra de abas. Salvar continua acontecendo no coração de cada card, e quatro abas dão mais espaço e um alvo mais fácil para cada uma.

Audite a sua própria tela inicial

Segure a tela inicial do seu app ao lado deste checklist. Cada "não" é uma parte que está gritando.

Pegue o arquivo do Figma

O arquivo gratuito tem as duas telas como componentes, cada correção como um par antes e depois, as variáveis de cor e os estilos de texto do iOS.

Arquivo gratuito do Figma

Tela inicial de delivery de comida, antes e depois

As duas telas e cada parte corrigida como componentes do Figma. Grátis, somente visualização, duplique para os seus rascunhos.

Abrir no Figma

FAQ

O que a tela inicial de um app de delivery de comida deve mostrar primeiro?

Para onde o pedido vai, uma barra de busca, as categorias e uma oferta, depois os restaurantes. Cada card de restaurante precisa de uma foto, o nome, a avaliação, o tempo de entrega e a taxa de entrega.

Quantos selos um card de restaurante deve ter?

Um. Três selos lado a lado se anulam; escolha o que mais importa para o cliente, como entrega grátis.

Um app de comida deve usar uma cor diferente para cada categoria?

Não. Dê a toda categoria a mesma forma e uma moldura neutra, e gaste a cor da marca só na selecionada, para que a cor signifique "você está aqui".

Como projetar um banner de promoção que converte?

Diga uma oferta uma vez: o desconto, para quem é e o código. Faça do código a ação, tocável para copiar, e leve os termos para o checkout.

Quantas abas um app de delivery de comida deve ter?

Quatro ou cinco, no máximo. Aqui quatro (Início, Busca, Pedidos, Conta) deram mais espaço a cada aba, com o salvar resolvido pelo coração em cada card.

Fontes

• As duas telas são nossas, projetadas e medidas no Figma. As medidas da tabela vêm dos arquivos do Figma.
• Fotos de comida via Unsplash por Fernando Andrade, sina piryae, Mahmoud Fawzy, Anna Pelzer, Alana Harris, Thimotius Timmy e Poul Hoang. Hambúrguer da promoção por Elements Interactive no Pexels, com o fundo de estúdio trocado pelo vermelho da marca por cor, sem IA.
• Tamanhos de texto do iOS das Human Interface Guidelines, Typography da Apple.
• Publicado originalmente como carrossel no App Brainy.