Design de app de meditação: redesign da tela inicial, antes e depois
Uma tela inicial júnior de app de meditação com cinco cores de humor, palavras brancas sobre uma foto clara e um parágrafo para o progresso, e a mesma tela corrigida. Cada mudança lado a lado, o motivo de cada uma e o arquivo grátis do Figma.
Um app de meditação tem uma única promessa: a tela te deixa mais calmo do que você chegou. O primeiro rascunho abaixo quer isso, e depois sabota tudo com nove cores, palavras brancas sobre uma foto clara e um parágrafo onde deveriam estar os números. A correção mantém todas as funcionalidades e baixa o volume.
A tela inteira, antes e depois
Rascunho júnior
Corrigida
A tela da esquerda é simpática e barulhenta. A da direita é o mesmo produto em volume mais baixo, e o volume mais baixo é a funcionalidade.
Conte o que o olho precisa separar em cada lado. O rascunho mostra cinco cores de humor e quatro cores de bloco, mais uma caixa pêssego e uma foto com texto por cima, antes de alguém ler uma palavra. A tela corrigida tem um verde-sálvia da marca, #4F7A5A, e uma chama pêssego, #E0784A, reservada para a única coisa que significa sequência.
| Rascunho júnior | Corrigida | |
|---|---|---|
| Cores na verificação de humor | 5 | 1, mais cinza |
| Cores nos blocos recomendados | 4 | 0, fotos no lugar |
| Texto sobre uma foto | título e 4 etiquetas | nenhum |
| Progresso | uma frase | 3 números |
| Abas | 5 | 4 |
| Margem lateral | 14 px à esquerda, 12 px à direita | 20 px nos dois lados |
| Tamanhos de texto | 8 a 18 px | 11 a 28 pt |
Correção 1: faça a pergunta de humor uma vez, em uma cor
Antes
Depois
Cinco círculos coloridos com uma palavra embaixo de cada, contra uma pergunta, cinco rostos quietos e uma resposta escolhida.
Uma verificação de humor é uma pergunta com cinco respostas. No rascunho cada resposta tem sua própria cor, então antes de o usuário escolher qualquer coisa a linha já parece respondida, e nada mostra o que está selecionado. A cor está fazendo o papel de decoração, não de informação.
A correção desenha os cinco rostos no mesmo cinza e preenche só o escolhido, no verde da marca, com a palavra dele numa etiqueta ao lado da pergunta: "Calmo". Agora a cor significa exatamente uma coisa: este é o estado atual. As palavras sob os rostos saíram da linha porque a etiqueta diz a palavra do rosto escolhido, uma vez só.
O princípio vale para qualquer app com avaliação ou escolha: se toda opção é colorida, a cor não diz nada ao usuário. Mantenha as opções neutras e gaste o destaque na seleção.
Correção 2: a foto em cima, as palavras embaixo
Antes
Depois
Palavras brancas e quatro etiquetas minúsculas sobre uma foto clara de praia, contra uma foto com o título, o tempo e um botão de play embaixo.
O rascunho coloca um título branco de 17 px e quatro etiquetas de 8 px direto sobre areia e mar claros. Branco sobre foto clara é o par mais fraco que existe, e as etiquetas são o menor texto da tela justo no ponto em que o usuário decide o que tocar. Um texto sobre uma foto também muda a cada foto: no dia em que chega uma imagem mais escura, o layout se lê diferente.
A correção move todas as palavras para o cartão, sob a foto, em texto escuro sobre uma superfície lisa. A foto agora é só uma foto. Quatro etiquetas viram uma linha de meta, "Daily Calm, 10 min, Sleep", e a pílula de Play no canto vira um botão redondo no fim da linha, onde o polegar já está. A mesma sessão agora tem um título, uma duração e uma ação.
A regra para reutilizar: se as palavras importam, dê a elas uma superfície própria. Texto sobre foto é a decisão de aceitar que algumas fotos vão quebrá-lo.
Correção 3: dois cartões de foto no lugar de quatro blocos coloridos
Antes
Depois
Quatro blocos pastel com um ícone cada, contra dois cartões de foto que mostram como a sessão é sentida.
Os blocos não parecem nada. Uma caixa roxa com uma lua diz "sono" do mesmo jeito chapado que uma caixa azul com pulmões diz "respire", e as quatro cores custam à tela a sua calma. As fotos mostram a coisa: um céu noturno para uma sessão de sono, um lago com neblina para uma matinal. Num app de meditação a imagem faz parte do produto, porque define o clima antes do áudio.
A linha corrigida mostra dois cartões, e cada um traz nome, duração e categoria em duas linhas. Dois cartões deixam cada foto larga o bastante para ser lida. Os blocos Breathe e Focus Music não estão nesta tela, e a seção foi renomeada de "Recommended For You" para "Para você", já que uma lista na tela inicial já é para você.
Correção 4: três números no lugar de um parágrafo
Antes
Depois
Uma frase com os mesmos três fatos enterrados nela, contra os três fatos como números com rótulos.
As duas versões dizem a mesma coisa: sete dias seguidos, duas horas e trinta e cinco minutos no total, vinte e três sessões. O rascunho amontoa tudo numa frase com dois pontos de exclamação e um "até agora, incrível!". O leitor precisa ler a frase inteira para achar o número que veio buscar, e um número não se compara de relance quando mora dentro de uma oração.
A correção dá a cada fato a sua coluna: um número grande e um rótulo pequeno. A chama, em pêssego, fica ao lado da sequência porque a sequência é o número que faz as pessoas voltarem amanhã. Agora o usuário confere o progresso no tempo que leva para olhar.
As correções menores
- Quatro abas, não cinco. Hoje, Explorar, Sono e Perfil substituem Início, Sono, Meditar, Música e Perfil. Meditar e Música não têm mais abas próprias.
- Uma margem. O rascunho usava 14 px à esquerda e 12 px à direita. A correção usa 20 px nos dois lados e 14 px entre os cartões.
- Uma saudação mais limpa. "Como você está se sentindo hoje???" saiu do cabeçalho, porque o cartão de humor pergunta isso, uma vez, com um ponto de interrogação.
- Uma ação no cabeçalho. O sino fica e ganha um pontinho. O avatar saiu do cabeçalho, e Perfil continua sendo uma aba.
- Uma escala tipográfica de verdade. O texto foi de 8 a 18 px para os tamanhos do iOS, de 11 a 28 pt, então o menor texto é legível e o título é claramente um título.
- Links de seção discretos. "View all >" virou "Ver tudo", as mesmas palavras em todas as seções.
Audite o seu próprio app de bem-estar
| Pergunta | Por que importa |
|---|---|
| Toda opção de uma escolha tem a sua própria cor? | Se todas são coloridas, nenhuma diz "selecionada" |
| Algum texto está sobre uma foto? | A próxima foto pode quebrá-lo |
| Dá para ler uma sequência ou um total de relance? | Números escondidos em frases são ignorados |
| Os cartões de sessão mostram como a sessão é sentida? | Calma se vende com imagens |
| Há mais de uma cor de destaque? | Cada cor extra é mais uma coisa para decifrar |
| Duas abas levam ao mesmo lugar? | Portas duplicadas escondem a estrutura |
Pegue o arquivo do Figma
O arquivo grátis 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 grátis do Figma
Tela inicial de app de meditação, antes e depois
As duas telas e cada parte corrigida como componentes do Figma. Grátis, somente visualização, duplique para os seus rascunhos.
FAQ
O que a tela inicial de um app de meditação deve mostrar?
Uma saudação, uma pergunta de humor, a sessão de hoje como um único cartão de foto com um botão de play, uma linha curta de sugestões e o progresso do usuário. Todo o resto pode esperar a um toque de distância.
Como deve ser um check-in de humor em um app?
Cinco opções iguais e discretas, com uma pergunta acima delas. Colora apenas a opção que o usuário escolher e diga a palavra dela uma vez. Se cada rosto tem a sua própria cor, nada diz ao usuário o que está selecionado.
Tudo bem colocar texto sobre uma foto em um app?
Só quando o texto fica numa área controlada, como uma sobreposição escura, e passa no contraste mínimo. Numa foto clara e variável, ponha as palavras numa superfície lisa sob a imagem.
Como mostrar sequências e progresso em um app de bem-estar?
Como alguns números com rótulos, como dias seguidos, tempo total e sessões. Uma sequência merece um pequeno destaque, como uma chama. Uma frase de incentivo não substitui o número.
Quantas abas um app de meditação deve ter?
Quatro ou cinco. Se duas abas levam à mesma biblioteca, junte-as. A tela corrigida foi de cinco abas para quatro.
Fontes
- As duas telas são nossas, desenhadas e medidas no Figma. O usuário, as sessões e os números são inventados para o exercício.
- Fotos via Pexels de Татьяна Танатова, olia danilevich, Felipe Barboza e Jean-Daniel Francoeur.
- 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.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
