Design de app de receitas: redesenho da tela inicial, antes e depois

Um app de receitas começa com o melhor ativo que uma tela pode ter: comida com cara de boa. O primeiro rascunho abaixo tem receitas de verdade e fotos bonitas, e então as afoga com uma caixa de busca que lista quatro coisas, um arco-íris de categorias, maiúsculas pequenas na foto principal e três ícones em cada linha. A correção mantém todo o conteúdo e dá espaço para a comida.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

A tela da esquerda tem muito a oferecer e conta tudo de uma vez. Na da direita, as mesmas receitas chegam na ordem em que quem cozinha procura: buscar, filtrar, escolher e depois navegar.

Conte o que a pessoa precisa ler antes de escolher o jantar. No rascunho: uma saudação com subtítulo, uma caixa de busca, um botão de filtro, um sino, chips de categoria em seis cores, um título sobre a foto, uma linha de cinco informações em maiúsculas, dois botões na foto e, depois, três ícones em cada uma de quatro linhas. A tela corrigida pede menos a cada passo, e os números mostram isso.

Correção 1: deixe a busca dizer o que encontra

Antes

Depois

Um placeholder que lista quatro coisas e fica sem espaço, contra duas coisas e um filtro.

O placeholder do rascunho é "Buscar receitas, ingredientes, culinárias, co...", cortado no meio da quarta palavra. O placeholder é a única frase que uma caixa de busca tem para dizer, então ele deve dizer o que a caixa faz, e deve caber. A lista do rascunho não cabe, e uma dica cortada parece erro.

A correção nomeia as duas coisas que as pessoas realmente digitam: receitas ou ingredientes. Todo o resto, como culinária ou dieta, é para o botão de filtro ao lado.

O botão de filtro também passou de um quadrado terracota preenchido para um branco. Um botão preenchido é a coisa mais berrante da linha, e era o filtro, não a busca. O sino saiu dessa linha e subiu para a saudação, então a linha agora é uma busca e um botão.

Correção 2: um estilo para todas as categorias

Antes

Depois

Cinco categorias em cinco cores com um ícone cada, contra um estilo e um chip preenchido.

Quando cada categoria tem a própria cor, as cores deixam de significar qualquer coisa. Café da manhã é pêssego, almoço é verde, jantar é roxo. Nada disso diz a quem cozinha qual está ativa, e o rascunho não tem nenhum estado selecionado.

Na correção, todo chip é branco e simples, e o selecionado, "Tudo", é preenchido no terracota da marca. A cor agora carrega um fato: o que está ligado.

Os chips também são maiores, então cada um é um toque mais fácil, e a linha esmaece na borda direita onde rola. No rascunho a linha simplesmente é cortada na borda da tela, com "Vegano" partido ao meio. Um esmaecido diz "tem mais, deslize". Um corte seco não diz nada.

Correção 3: as informações vão para baixo da foto

Antes

Depois

Um título e cinco informações em maiúsculas sobre um prato claro, contra um título e três informações com ícones no card embaixo.

O rascunho coloca um título de 15 px e uma linha de maiúsculas brancas de 9 px sobre um prato claro e uma mesa clara. O prato é o ponto central da foto, e o texto fica em cima dele na única cor que some contra ele. A linha traz as informações de que quem cozinha precisa para decidir: tempo, dificuldade e porções. É a parte mais difícil de ler da foto.

A correção move o texto para um card embaixo da foto, em letra escura. As três informações que decidem se vai cozinhar hoje mantêm seu lugar, cada uma com um ícone: um relógio para 30 min, um gráfico de barras para Fácil e duas pessoas para 4 porções. A pessoa aprende os ícones uma vez e depois lê a linha num relance. O card corrigido tira as calorias e a nota, que podem ficar na página da receita.

Os botões da foto passaram de dois, um coração e um compartilhar, para um só: salvar. Essa é a ação que quem cozinha quer de um card de receita, porque salvar é como uma receita acaba sendo feita depois.

Correção 4: uma linha é uma receita, um tempo e um nível

Antes

Depois

Quatro linhas com crédito do chef e três ícones cada, contra três linhas com tempo, nível e dois ícones discretos.

Cada linha do rascunho traz uma miniatura, um nome, uma linha com tempo, dificuldade e "por Chef Anna", e três ícones: um coração, um marcador e um compartilhar. Um coração e um marcador são duas formas de dizer "gostei disso", e uma lista de quatro linhas imprime essa escolha doze vezes.

Na correção, cada linha tem uma foto maior, o nome e uma linha de tempo e dificuldade. À direita há dois ícones, compartilhar e salvar, em um cinza claro que sai do caminho até você querer usá-los. A primeira receita mostra como é o estado salvo: o marcador se preenche no terracota da marca, a mesma cor da categoria selecionada. O título "Receitas populares" encurta para "Populares", porque o app já é sobre receitas.

A lista corrigida mostra três receitas em vez de quatro, então o card tem espaço acima da barra de abas.

As correções menores

• Quatro abas, não cinco. Início, Busca, Salvas e Perfil substituem Início, Busca, Salvas, Planejador e Perfil.
• Uma margem. O rascunho usava 14 px à esquerda e 12 px à direita. A correção usa 20 px dos dois lados e 14 px entre blocos.
• Uma saudação mais curta. "Oi, Maya! O que você quer cozinhar hoje?" virou "O que vai ao fogo, Maya?".
• Uma cor de marca. O terracota, #C8553D, marca o chip selecionado, o marcador salvo, a aba ativa e os pequenos rótulos. Mais nada é colorido.
• Uma escala tipográfica de verdade. O texto foi de 8 a 18 px para os tamanhos do iOS, de 11 a 22 pt.

Audite o seu próprio app de receitas

Pegue o arquivo do Figma

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

Arquivo grátis do Figma

Tela inicial de app de receitas, 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 receitas deve mostrar?

Uma caixa de busca que diz o que encontra, uma linha de categorias, uma receita em destaque com tempo, dificuldade e porções, e uma lista curta de receitas populares. Calorias, notas e créditos de chef podem ficar na página da receita.

O que a barra de busca de um app de receitas deve dizer?

Diga o que a caixa encontra, no menor número de palavras que couber: "Buscar receitas ou ingredientes". Uma lista longa de tudo o que ela poderia encontrar é cortada, e os extras pertencem a um filtro.

Como os chips de categoria devem ser em um app de receitas?

Um estilo para todos, com o chip selecionado preenchido na cor da marca. Deixe a linha rolar e esmaecer na borda para as pessoas verem que tem mais.

Onde devem ficar o tempo e a dificuldade de uma receita?

Embaixo da foto, em uma linha com um ícone pequeno para cada: um relógio para o tempo, um nível para a dificuldade e pessoas para as porções. Texto sobre foto de comida é difícil de ler e esconde o prato.

Quantos ícones uma linha de lista de receitas deve ter?

Dois ou menos. Salvar e compartilhar bastam, e um cinza discreto evita que eles disputem atenção com o prato.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O usuário, os chefs e a lista de receitas são inventados para o exercício.
• Fotos via Pexels de Tamra Creatives Agency, Willians Huerta, Kei Scampa, Ana Palade, adrian vieriu e Surendra Shrestha.
• Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS usados na tela corrigida.
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum), para texto sobre imagens e fundos.
• Publicado originalmente como carrossel no App Brainy.