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

A tela inicial de um app de fitness tem uma única missão: dizer a alguém como está o dia de hoje e oferecer uma forma clara de começar. O primeiro rascunho abaixo tem todos os números certos, mas os entrega em quatro cards apertados, texto branco sobre uma foto poluída e um gráfico sem nada para ler. A correção mantém todas as funcionalidades e muda o quanto de trabalho cada parte exige do olho.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

À esquerda, o olho encontra um cabeçalho com quatro coisas, depois quatro cards em quatro cores, depois uma foto, dois botões e um coração, um gráfico e uma segunda fileira de treinos cortada pela barra de abas. À direita, há três cards e um cabeçalho: como está o dia, o que fazer agora, como está a semana.

Nada que alguém sentiria falta foi removido da lista de funcionalidades. Passos, calorias, água, frequência cardíaca, o treino do dia e a atividade da semana continuam todos lá. Só foram para formas menores em número e maiores em tamanho.

Correção 1: um card de anéis em vez de quatro cards

Antes

Depois

Quatro cards pastel, cada um com ícone, número, rótulo e uma barra fina, contra um card com três anéis, a meta embaixo de cada rótulo e a frequência cardíaca como um pequeno chip.

Cada card do rascunho diz um número e desenha uma barra fina, mas não diz em relação a quê a barra está medindo. 8.432 passos podem ser bom ou ruim. O leitor precisa adivinhar a meta pelo tamanho da barra, e as barras são finas.

Os anéis colocam a meta em palavras ("de 10.000", "de 600 kcal", "de 2 L") e em forma: um anel está cheio ou não está. Um olhar responde "estou no caminho hoje?". Frequência cardíaca é uma leitura, não uma meta, então não ganha um anel. Ela vai para um chip no canto, o que sinaliza que é outro tipo de número.

A regra para reutilizar: se um número tem meta, mostre a meta. Se não tem, não o vista de progresso.

Correção 2: um botão play, uma sombra atrás das palavras

Antes

Depois

Um título de seção, um selo NOVO, texto branco de 9 px sobre a foto e três controles embaixo, contra uma foto com rótulo, texto maior sobre uma sombra e um único botão play.

Texto branco sobre foto só é legível onde a foto por acaso é escura. No rascunho, a linha de detalhes corre pela parte mais clara da imagem, um piso de academia e uma camiseta cinza, e com 9 px ela desaparece. A correção coloca uma sombra preta sobre a foto que chega a 72% na borda inferior, exatamente onde ficam as palavras, e aumenta o texto.

O rascunho também faz uma pergunta antes de a pessoa poder agir: Começar agora, ou Detalhes, ou salvar com o coração? Há uma coisa a fazer com o treino de hoje, que é começar. Um único botão play redondo diz isso sem uma palavra. Os detalhes ficam a um toque de distância quando alguém quiser, mas deixam de competir com a ação principal.

O selo "NOVO" e o título de seção "Treino de hoje" diziam quase a mesma coisa duas vezes. A correção mantém um só rótulo, um chip sobre a foto.

Correção 3: abra o gráfico com o total

Antes

Depois

Sete barras laranja iguais com um menu e uma legenda, contra o total da semana em tipografia grande, um chip de tendência e uma barra em laranja sólido.

Um gráfico responde a uma pergunta, e o do rascunho não diz qual. Sete barras no mesmo laranja forte, sem valores e com legenda para a única série, então o leitor precisa decidir sozinho o que tirar dali. A correção responde primeiro, em palavras, à pergunta mais provável: 4 h 12 min esta semana, 18% a mais que na semana passada.

As barras agora são contexto, não a mensagem. Cinco são um tom claro da cor da marca, e hoje, sábado, é laranja sólido, então o olho cai onde a pessoa está na semana. O domingo continua um toco curto, para a semana ser lida da esquerda para a direita até hoje. O menu "Esta semana" e a legenda "Minutos ativos" saíram porque o título já diz as duas coisas.

A regra para reutilizar: coloque no topo o número que o gráfico levaria um minuto para explicar, e deixe as barras fazerem o resto.

Correção 4: um botão no cabeçalho

Antes

Depois

Um avatar, uma saudação com ponto de exclamação, uma segunda linha com mais dois e três ícones, contra a data, uma saudação e um único botão de notificações.

O cabeçalho do rascunho tem sete coisas antes de qualquer conteúdo: um avatar, duas linhas de saudação e três ícones. O avatar leva à conta da pessoa, e o app já tem uma aba Perfil, então a correção o tira do cabeçalho. Os ícones de busca e configurações saem junto, o que abre espaço para a saudação.

A correção mantém a única coisa que merece o canto superior: notificações, com um ponto quando há algo novo. A saudação vira a data e um nome em tipografia grande, o que diz ao leitor a que dia os números de hoje pertencem, sem ponto de exclamação.

As correções menores

• Quatro abas, não cinco. Início, Treinos, Progresso e Perfil. Estatísticas e Comunidade deram lugar a uma aba Progresso.
• Uma margem. O rascunho usava 14 px à esquerda e 12 px à direita, então os cards pareciam levemente descentralizados. A correção usa 20 px nos dois lados e 16 px entre os cards.
• Uma cor para ação. O rascunho usava cards pêssego, amarelo, rosa e azul, mais laranja. A correção usa laranja para ação e mantém âmbar e azul apenas em dois dos anéis, onde servem para distingui-los.
• Uma escala tipográfica de verdade. O texto passou de 8 a 16 px para os tamanhos de texto do iOS, de 11 a 28 pt, então nada na tela é menor que a menor legenda do sistema.
• Sem fileira de Recomendados. A segunda fileira de fotos do rascunho era cortada pela barra de abas. A correção termina a tela inicial depois do gráfico.
• Saudação mais calma. "Vamos arrasar nas metas de hoje!!" virou a data acima do nome.

Audite seu próprio app de fitness

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 fitness, 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 fitness deve mostrar primeiro?

Como está o dia de hoje: passos, calorias e água em relação às metas, em um único card. Coloque o treino do dia logo abaixo, com uma forma clara de começar.

Anéis de progresso são melhores que barras de progresso em um app de fitness?

Para poucas metas diárias, sim. Um anel é legível de relance, mostra cheio ou não cheio sem precisar de escala e comporta um número no centro. Deixe a frequência cardíaca fora dos anéis, porque ela é uma leitura e não tem meta a preencher.

Como tornar legível o texto branco sobre uma foto de treino?

Coloque uma sombra escura atrás das palavras, mais forte onde o texto fica, e use um tamanho de texto legível. Não conte com a foto ser escura no lugar certo.

Como deve ser desenhado um gráfico de atividade de fitness?

Abra com o total e a tendência em palavras, depois mostre as barras em um tom suave com o dia atual na cor da marca. Tire legendas e menus que o título já cobre.

Quantas abas um app de fitness deve ter?

Quatro ou cinco. Junte abas que guardam números relacionados, como Estatísticas e Comunidade, em um lugar só, como Progresso.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma.
• Fotos via Pexels por pessoas uem, Julia Larson, Tima Miroshnichenko e Vitaly Gariev.
• Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS usados na tela corrigida.
• Publicado originalmente como carrossel no App Brainy.