Design de app de café: redesign da tela inicial de pedidos, antes e depois
Uma tela inicial de pedidos de café com uma linha de loja de 54 caracteres, um banner de pontos gritante, oito abas saindo pela borda e um botão ADD embaixo de cada foto, e a mesma tela corrigida. Cada mudança lado a lado, o motivo de cada uma e o arquivo Figma gratuito.
Uma pessoa abre um app de café para fazer uma coisa: pedir uma bebida e retirar. O primeiro rascunho abaixo tem as coisas certas, e mostra todas de uma vez: uma linha de loja longa, um banner que grita sobre pontos, oito abas e um botão ADD embaixo de cada foto. A correção mantém a loja, os pontos e o cardápio, e dá a cada um um lugar único e discreto.
A tela inteira, antes e depois
Rascunho júnior
Corrigida
À esquerda, a pessoa encontra uma saudação, uma linha de loja, um banner de pontos, uma faixa de abas e uma grade de botões, tudo no mesmo volume. À direita, há uma coisa para ler por bloco e uma ação por linha.
| Rascunho júnior | Corrigida | |
|---|---|---|
| Loja | Uma linha de 54 caracteres em uma caixa com borda | Um card de retirada com um link Change |
| Pontos | Um banner com três pontos de exclamação | Um card de progresso: 250 pontos para uma bebida grátis |
| Abas de categoria | 8, saindo pela borda | 4 chips, um selecionado |
| Itens | Uma grade de 2 por 3 cards | Linhas com foto de 60 px |
| Botões de adicionar | Um ADD largo amarelo manteiga embaixo de cada foto | Um botão redondo por linha |
| Abas na barra | 5 | 4 |
| Margem lateral | 14 px à esquerda, 12 px à direita | 20 px, com 16 px entre blocos |
| Tamanhos de texto | 9 a 18 px | 11 a 28 pt |
Correção 1: diga onde, uma vez só
Antes
Depois
Uma linha de loja espremida em uma caixa, contra um card de retirada.
O rascunho espreme a loja em uma linha: "Downtown Store - 123 Main St (0.3 mi) - Open until 9PM", 54 caracteres em letra pequena dentro de uma caixa com borda e uma seta no fim. O nome, a rua, a distância e o horário pesam todos igual, então o olho lê a linha inteira para achar a única informação de que precisa.
A correção transforma a linha em um card de retirada. "Pickup at Downtown" é o título, "0.3 mi · Open until 9 pm" é uma linha cinza embaixo, e "Change" fica à direita no azul da marca como uma ação de verdade. O endereço da rua não está na tela inicial. A saudação cresceu para um grande "Good morning, Leo", e os pontos de exclamação sumiram.
A regra para reaproveitar: divida uma linha longa em um título, um detalhe e uma ação. Uma caixa com seta diz "toque em mim" com menos clareza do que uma palavra que diz "Change".
Correção 2: pontos como progresso
Antes
Depois
Um banner gritante, contra uma barra de progresso.
O banner do rascunho vai do azul ao amarelo manteiga, e o texto branco fica na ponta amarela, onde é mais difícil de ler. Ele diz "You have 1,250 points! Redeem now for FREE drinks!!!" e a pílula Redeem Now embaixo é branca com texto amarelo claro. Diz que a pessoa tem pontos, mas não o quão perto ela está de algo.
A correção é um card azul profundo. "Rewards" e "1,250 points" ficam no topo, e a linha grande é "250 points to a free drink". Uma barra de progresso manteiga embaixo enche 83%, que são 1.250 de 1.500, e a linha pequena diz onde está a bebida grátis. A pessoa vê a distância, que é o número interessante.
A regra para reaproveitar: um saldo de pontos é um número, e progresso é uma história. Mostre a história, e deixe o número de lado.
Correção 3: quatro chips, um selecionado
Antes
Depois
Oito abas saindo pela borda, contra quatro chips.
O rascunho tem oito categorias: Coffee, Tea, Cold Drinks, Seasonal, Bakery, Breakfast, Merch e Gift Cards. Elas saem pela borda direita, então "Merch" é cortado para "Mer", e a pessoa precisa rolar para o lado para descobrir que há mais. A selecionada é marcada por um sublinhado fino.
A correção mostra quatro chips: All, Coffee, Cold drinks e Bakery. All é preenchido com o azul do café e os outros são brancos, então a selecionada fica clara num relance. As outras categorias não estão nesta tela; um app de verdade as manteria na aba Menu, a um toque de distância.
A regra para reaproveitar: uma fileira de filtros deve caber na tela. Se ela precisa de rolagem lateral para mostrar a própria lista, mostre menos.
Correção 4: uma linha por item
Antes
Depois
Uma grade de cards com um botão manteiga embaixo de cada um, contra três linhas.
O rascunho mostra os itens como uma grade de cards: uma foto grande, um nome, um preço e um botão manteiga "ADD +" em maiúsculas. Duas fileiras e meia de cards preenchem a tela abaixo das abas, o manteiga dos botões se repete embaixo de cada foto, e o link "View Menu" é amarelo pálido sobre branco.
A correção faz de cada item uma linha com foto de 60 px, o nome, uma linha cinza e o preço, e um "+" azul redondo à direita. Três linhas cabem em um card onde a grade mostrava duas cards e meio, e o único botão em cada linha é o de adicionar. "Full menu" está no azul da marca.
A regra para reaproveitar: quando todo item tem a mesma ação, a ação deve ser pequena e alinhada, para que o olho leia nomes e preços descendo por uma única borda.
As correções menores
- Uma borda esquerda. As margens do rascunho eram 14 px à esquerda e 12 px à direita. A correção usa 20 px dos dois lados e 16 px entre blocos.
- Uma escala tipográfica de verdade. O texto passou de 9 a 18 px para tamanhos iOS de 11 a 28 pt.
- Quatro abas, não cinco. Home, Menu, Order, Rewards e Account viraram Home, Menu, Rewards e Account. A aba Order saiu da barra.
- Uma paleta de quatro. Azul cobalto do café #2342A8, azul profundo #15276B, manteiga #F3C77A e creme #F5EFE4 substituem um gradiente e um fundo cinza.
Audite a sua própria tela de pedidos
| Pergunta | Por que importa |
|---|---|
| A pessoa consegue ler a loja de retirada num relance? | Decide se ela consegue pedir |
| As recompensas mostram progresso ou só um saldo? | A distância é o número interessante |
| A fileira de categorias cabe sem rolagem lateral? | Uma aba cortada esconde o que mais existe |
| Todo item repete um botão largo? | Um botão pequeno de adicionar por linha basta |
FAQ
O que a tela inicial de um app de pedidos de café deve mostrar primeiro?
A loja de retirada em um card com um link Change, depois o progresso das recompensas, depois as categorias e os itens populares. A pessoa deve ver onde está pedindo antes de ver o quê.
Como projetar uma seção de pontos de fidelidade?
Mostre a distância até a próxima recompensa como uma barra de progresso e uma linha simples, como "250 points to a free drink", e deixe o saldo de lado.
Quantas abas de categoria um cardápio deve ter?
Tantas quantas couberem na tela sem rolagem lateral, geralmente quatro. Coloque o resto na aba Menu, a um toque de distância.
O cardápio deve usar grade ou lista?
Uma lista de linhas funciona melhor para pedir, porque nomes e preços se alinham em uma borda e cada linha precisa de um botão pequeno de adicionar. Uma grade serve para navegar por fotos.
Qual deve ser o tamanho de um botão de adicionar?
Pelo menos 44 por 44 pontos para tocar, mesmo quando o círculo visível é menor. A tela corrigida usa um botão azul redondo por linha.
Fontes
- As duas telas são nossas, desenhadas e medidas no Figma. A loja, o endereço, os preços e os pontos são inventados.
- Fotos do cardápio via Pexels por Duc Nguyen, Melissa Jansen van Rensburg, Marcelo Verfe, Juan Pablo Serrano, Skyler Ewing e Vinícius Vieira ft.
- Apple Human Interface Guidelines: Typography, para os tamanhos de texto iOS usados na tela corrigida.
- Apple Human Interface Guidelines: Accessibility, para o tamanho de alvo de toque de 44 pt.
- Kivetz, Urminsky e Zheng, The Goal-Gradient Hypothesis Resurrected, Journal of Marketing Research, 2006, para clientes comprando com mais frequência conforme um cartão de fidelidade enche.
- Publicado primeiro como carrossel no App Brainy.
Want this for your own app? Our team redesigns ordering apps like this one, from the first audit to the finished components.
Get Started
