Design de app de tênis: redesign de uma página de produto, antes e depois
Uma página de produto de tênis com quatro ícones e três selos na foto, um preço perdido entre cinco números e tamanhos que não mostram qual foi escolhido, e a mesma página corrigida. Cada mudança lado a lado, o motivo de cada uma e o arquivo grátis do Figma.
Quem abre a página de um tênis quer responder a três perguntas: como ele é, quanto custa e se tem no meu tamanho. O primeiro rascunho abaixo tem as três respostas e obriga o cliente a caçá-las. A correção mantém o mesmo produto e o mesmo preço, e coloca as respostas na ordem em que o cliente pergunta.
A tela inteira, antes e depois
Rascunho de júnior
Corrigido
À esquerda, o cliente encontra sete marcas pequenas na foto antes do nome do produto. À direita, a foto vem primeiro, depois o nome e o preço, e o único botão escuro é o que compra.
| Rascunho de júnior | Corrigido | |
|---|---|---|
| Ícones na foto | 4 | 2 |
| Selos na foto | 3 | 0 |
| Preço | Um entre 5 números em uma linha | Linha própria, preço antigo riscado, 19% de desconto ao lado |
| Caixas de tamanho | 41 por 32 px, uma fileira de 8 | Chips de 44 px, grade de 2 fileiras |
| Tamanho escolhido | Borda de 1 px | Preenchido com #111111 |
| Tamanho esgotado | Parece igual aos outros | Riscado sobre cinza |
| Botões de compra | 2 botões em caixa alta e um link | 1 botão em uma barra fixa |
| Abas | 5 | Nenhuma |
| Margem lateral | 14 px à esquerda, 12 px à direita | 20 px nos dois lados |
| Tamanhos de texto | 9 a 14 px | 12 a 22 pt |
Correção 1: uma foto sem nada em cima
Antes
Depois
Quatro ícones e três selos sobre a foto, contra um botão de voltar e um de salvar.
O rascunho coloca a loja inteira em cima do produto. Voltar, compartilhar, salvar e um carrinho com um "3" vermelho correm pelo topo. "Novidade", "-19%" e "Frete grátis" se empilham no canto inferior esquerdo, sobre a ponta do tênis.
A correção mantém dois botões redondos de 40 px na foto: voltar e salvar. O resto foi para onde pertence. O desconto fica ao lado do preço, a linha de frete fica sob o total na barra inferior, e os pontos que contam as fotos ficam embaixo da foto.
A regra para reaproveitar: a foto do produto é o produto. Tudo que não ajuda o cliente a avaliar o tênis pertence a outro lugar.
Correção 2: primeiro o nome, depois o preço
Antes
Depois
Um preço em uma fileira de números, contra um preço na sua própria linha.
O rascunho coloca a marca em maiúsculas cinza de 9 px, um nome de produto que quebra em duas linhas e depois uma fileira: "$129.00 | 4.8 (2.341 avaliações) | 1,2 mil vendidos". Cinco números dividem uma linha no mesmo tamanho, e o preço precisa ser encontrado entre eles.
A correção dá ao nome a sua própria linha em fonte grande. O preço ganha uma linha só dele: "$129" em fonte grande, o antigo "$159" riscado ao lado e um pequeno chip "19% off". A avaliação, as reviews e as vendas ficam abaixo, em uma linha mais discreta, porque apoiam a decisão e o preço a toma. As duas telas trazem os mesmos números: 129 dividido por 159 dá 0,81, então 19% de desconto é verdade.
A regra para reaproveitar: quando vários números dividem uma linha, um deles é o que o cliente precisa. Dê a ele linha e tamanho próprios.
Uma regra de preço para conferir
Um preço riscado tem um lado legal em alguns lugares.
Correção 3: tamanhos que mostram o que foi escolhido
Antes
Depois
Oito caixas pequenas, contra uma grade de chips com estados que dá para ver.
As caixas de tamanho do rascunho têm 41 por 32 px em uma fileira. O tamanho escolhido, 8,5, tem uma borda 1 px mais escura, e o 9,5 esgotado parece os tamanhos em estoque. Os três pontos de cor não têm nome.
A correção transforma cada tamanho em um chip de 44 px em duas fileiras de quatro. O escolhido é preenchido com #111111 e texto branco. O esgotado é riscado sobre cinza, então parece indisponível antes de alguém tocar. As cores ganham nomes sob as amostras: Carmim, Preto e Lima, com a escolhida contornada.
Os 44 px de altura importam. A orientação da Apple é uma área de toque de pelo menos 44 por 44 pontos, e uma caixa de 32 px em uma fileira de oito é fácil de errar.
A regra para reaproveitar: toda opção precisa de três estados visíveis, disponível, escolhida e indisponível. Diga cada um com preenchimento, não com uma linha fina.
Correção 4: uma barra que compra
Antes
Depois
Dois botões em caixa alta e um link, contra o preço e um botão.
O rascunho termina com um seletor de quantidade, um "ADICIONAR AO CARRINHO" com contorno, um "COMPRAR AGORA" preto e um pequeno link "Adicionar à lista de desejos". Dois botões de peso quase igual fazem o cliente escolher uma forma de comprar, e eles rolam para fora com a página.
A correção termina com uma barra que fica no rodapé: "$129", "Frete grátis" embaixo e um botão preto "Adicionar à sacola". A lista de desejos é o botão de salvar na foto. A barra de abas também saiu, já que cinco abas sob uma barra de compra competem com ela.
A regra para reaproveitar: dê à ação principal um botão e mantenha o preço ao lado dele.
As correções menores
- Uma borda esquerda só. As margens do rascunho eram 14 px à esquerda e 12 px à direita. A correção usa 20 px nos dois lados.
- Uma escala tipográfica de verdade. O texto foi de 9 a 14 px para tamanhos de iOS de 12 a 22 pt.
- Caixa de frase. "ADICIONAR AO CARRINHO" e "COMPRAR AGORA" em maiúsculas viraram "Adicionar à sacola".
- Um link mais discreto. "Tabela de medidas" em azul virou "Guia de tamanhos" em cinza, já que apoia a escolha e não é a escolha.
Audite a sua própria página de produto
| Pergunta | Por que importa |
|---|---|
| A foto está livre de tudo, exceto voltar e salvar? | O cliente veio olhar o produto |
| O preço está em uma linha própria? | É o número que todo cliente procura |
| Dá para distinguir o tamanho escolhido de longe? | Uma borda fina não é um estado |
| Um tamanho esgotado é diferente antes de ser tocado? | Evita um toque que falha |
| O preço continua na tela enquanto a página rola? | O preço e a ação andam juntos |
FAQ
O que uma página de produto de tênis deve mostrar primeiro?
A foto, sem nada em cima além de voltar e salvar. Depois o nome, e então o preço em uma linha própria.
Como projetar um seletor de tamanho para calçados?
Faça de cada tamanho um chip de pelo menos 44 px, preencha o escolhido com uma cor escura e risque os tamanhos esgotados. Uma borda fina em volta do tamanho escolhido é tênue demais para ler.
Como um preço promocional deve ser mostrado em uma página de produto?
Mostre o preço atual grande, o preço antigo riscado ao lado e a porcentagem de desconto em um chip pequeno. As duas telas aqui usam $129, $159 e 19% de desconto. Confira as regras locais sobre qual preço antigo você pode mostrar.
Uma página de produto deve ter Adicionar ao carrinho e Comprar agora?
Um botão principal é mais claro. Dois botões de mesmo peso fazem o cliente escolher uma forma de comprar antes de ter decidido comprar.
Uma página de produto deve ter barra de abas?
Não nesta tela. A página tem uma tarefa, e uma barra de abas sob a barra de compra compete com ela.
Fontes
- As duas telas são nossas, desenhadas e medidas no Figma. O nome do produto, a marca, os preços e as avaliações são inventados.
- Foto do produto via Pexels, por Ahimsa - OM.
- Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS usados na tela corrigida.
- Apple Human Interface Guidelines: Accessibility, para o tamanho da área de toque de 44 pt.
- Comunicação da Comissão Europeia sobre a interpretação do artigo 6.º-A da Diretiva 98/6/CE, para a regra do preço anterior.
- Publicado originalmente como carrossel no App Brainy.
Want this for your own app? Our team redesigns product pages and shop apps like this one, from the first audit to the finished components.
Get Started
