Design de app de tarefas: redesign da tela Hoje, antes e depois
Uma tela de app de tarefas feita por júnior, com progresso em fração com duas casas decimais, cinco chips de filtro coloridos, uma data vermelha em cada tarefa e um botão flutuante sobre a última, e a mesma tela corrigida. Cada mudança lado a lado e o arquivo Figma grátis.
Um app de tarefas precisa parecer uma ajuda. O primeiro rascunho abaixo sabe exatamente o que vence hoje, e então diz isso com uma data vermelha em cada linha, chips coloridos para cada prioridade e um botão estacionado em cima da última tarefa. Parece um alarme. A correção mantém todas as tarefas e todos os fatos e baixa o alarme ao nível de uma lista calma.
A tela inteira, antes e depois
Rascunho júnior
Corrigido
À esquerda, cada tarefa carrega uma descrição, até três tags, uma data vermelha e um monte de rostinhos. À direita, cada tarefa é uma linha e meia, e a lista é a primeira coisa em que o olho pousa.
Conte o que o olho precisa processar. O rascunho tem uma caixa de progresso colorida, cinco chips de filtro em cinco cores e, em cada tarefa, uma descrição, tags coloridas, uma data vermelha e, muitas vezes, um grupo de avatares. A tela corrigida tem um anel, um seletor de três partes e uma lista.
| Rascunho júnior | Corrigido | |
|---|---|---|
| Progresso | "1/5 tarefas concluídas (20,00%)" e uma barra | um anel em 20% e "1 de 5 concluída" |
| Filtros | 5 chips em 5 cores | 3 palavras em um seletor |
| Tags coloridas por tarefa | até 3 | 0 |
| Datas em vermelho | todas as tarefas | nenhuma |
| Prioridade mostrada por | um filtro de chip colorido e uma tag | um pequeno ponto |
| Adicionar tarefa | um botão flutuante de 56 px sobre a lista | uma linha no fim da lista |
| Abas | 5 | 4 |
| Margem lateral | 14 px à esquerda, 12 px à direita | 20 px dos dois lados |
| Tamanhos de texto | 8 a 20 px | 11 a 28 pt |
Correção 1: progresso como um anel e uma frase
Antes
Depois
Uma fração, uma porcentagem com duas casas decimais, uma barra e uma torcida, contra um anel e uma frase.
O rascunho diz a mesma coisa três vezes: "1/5", "20,00%" e uma barra um quinto cheia. As duas casas decimais entregam o jogo: "20,00%" é um número que um programa imprimiu, não um de que uma pessoa precisa. E a linha embaixo é pequena, cinza e termina com dois pontos de exclamação.
A correção escolhe uma imagem, um anel em 20%, e uma frase com os dois fatos que importam: uma de cinco concluída, quatro restantes. A frase termina com a parte útil, "próxima às 16h", que diz ao usuário o que fazer em seguida em vez de torcer por ele.
O anel é desenhado no vermelho da marca, o mesmo vermelho da linha de adicionar e da aba ativa.
Correção 2: filtrar por quando, não por cor
Antes
Depois
Cinco chips de prioridade e status em cinco cores, contra três palavras em um seletor.
Os chips do rascunho misturam duas perguntas. Alta, Média e Baixa perguntam o quão importante é uma tarefa, Concluídas pergunta em que estado ela está e Todas (5) pede tudo. Os cinco chips usam cinco cores com dois raios de canto, então nem as formas concordam.
Para usá-los, o usuário primeiro precisa aprender que vermelho é urgente, laranja é médio e verde é baixo, e
A correção faz uma pergunta, a que as pessoas fazem a uma lista de tarefas: quando. Todas, Hoje e Próximas são três palavras em um único seletor, que se lê como um controle com um estado selecionado, e combina com as abas abaixo: a aba Hoje, a aba Próximas. A prioridade não desapareceu. Ela foi para as linhas, como um pequeno ponto (correção 3).
Correção 3: uma tarefa é uma linha e meia
Antes
Depois
Título, descrição, tags, uma linha de vencimento vermelha e avatares em cada tarefa, contra um título, um horário e uma lista.
Cada tarefa do rascunho pode carregar cinco tipos de informação: uma descrição, até três tags coloridas, um "Vence: 24/10/2026 17:00" vermelho, um grupo de avatares e uma caixa de seleção. "Urgente!!" aparece como tag numa tarefa que já está vermelha na linha de vencimento. Toda tarefa vence hoje, e toda data é vermelha, então o vermelho deixa de significar atraso e passa a significar "existe uma tarefa".
A correção dá a cada tarefa um título e uma linha cinza: o horário e a lista a que pertence. "17h, Trabalho". A data sumiu porque o cabeçalho já diz que dia é.
As tags colapsaram no nome da lista. A prioridade virou um pequeno ponto à direita, vermelho na primeira tarefa e laranja na segunda, sem ponto onde não há nada a sinalizar. A tarefa concluída fica na lista, riscada e marcada como "Concluída", com um check preenchido no vermelho da marca.
As tarefas ficam em um card branco com um divisor fino entre elas, então a lista se lê como uma coisa só.
Correção 4: "Adicionar tarefa" no fim da lista
Antes
Depois
Um botão flutuante que cobre a última tarefa, contra uma linha no fim da lista.
Um botão flutuante segue o usuário e cobre o que estiver embaixo dele. No rascunho, ele fica em cima da última tarefa, cortando os avatares à direita da linha, e é o objeto mais pesado da tela: 56 px, vermelho saturado, com sombra.
A correção faz o que uma lista faz: termina com a coisa que você pode adicionar a ela. "Adicionar tarefa" fica em uma linha bem onde a última tarefa termina, com um pequeno sinal de mais e o mesmo vermelho das outras ações. Não há sombra e nada fica coberto. Quem rola uma lista já está olhando para o fim dela, então a ação de adicionar é encontrada onde o olho para.
As correções menores
- Quatro abas, não cinco. Hoje, Próximas, Explorar e Perfil substituem Hoje, Próximas, Projetos, Busca e Perfil.
- Uma margem. O rascunho usava 14 px à esquerda e 12 px à direita. A correção usa 20 px dos dois lados.
- Um cabeçalho de verdade. "Minhas tarefas" com uma data completa virou um pequeno "Sábado, 24 de out" sobre um grande "Hoje", e o avatar virou um sino.
- Um vermelho. O vermelho da marca,
#E5484D, cobre o anel, o ícone de adicionar e a aba ativa. O texto vermelho usa um#D92D20mais escuro, para continuar legível. - Uma escala tipográfica de verdade. O texto foi de 8 a 20 px para os tamanhos do iOS, de 11 a 28 pt.
Audite seu próprio app de tarefas
| Pergunta | Por que importa |
|---|---|
| Um número aparece em duas formas, como 1/5 e 20%? | Escolha uma imagem e uma frase |
| Os filtros fazem uma pergunta só? | Misturar importância e estado obriga o usuário a decodificar |
| O vermelho é usado para algo além de ação e urgência? | Se tudo é vermelho, nada está atrasado |
| Uma tarefa pode ser lida em uma linha e meia? | Listas são escaneadas, não lidas |
| O botão de adicionar cobre conteúdo? | Um botão flutuante esconde o último item |
| A data aparece nas linhas quando a tela já é de um dia só? | Repetir o dia é ruído |
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 Figma grátis
Tela Hoje de app de tarefas, antes e depois
As duas telas e cada parte corrigida como componentes do Figma. Grátis, somente visualização, duplique para seus rascunhos.
FAQ
O que a tela Hoje de um app de tarefas deve mostrar?
O progresso de hoje, uma forma de alternar entre Todas, Hoje e Próximas, a lista de tarefas com seus horários e uma ação Adicionar tarefa. Descrições e datas longas podem esperar no detalhe da tarefa.
Como um app de tarefas deve mostrar o progresso?
Como um anel ou uma barra mais uma frase, como "1 de 5 concluída". Não imprima o mesmo número como fração, porcentagem e barra. Se mostrar uma porcentagem, arredonde.
Como um app de tarefas deve mostrar a prioridade?
Com um pequeno ponto, ou uma bandeira, nas linhas que precisam, não com tags coloridas em toda tarefa. A prioridade também pode ser um filtro ou uma ordenação, mas não precisa ser a principal.
Um app de tarefas deve usar um botão flutuante de adicionar?
Um botão flutuante é comum, mas numa tela de lista ele pode cobrir o último item. Uma linha "Adicionar tarefa" no fim da lista não cobre nada e fica onde o olho para.
Quais devem ser os filtros de um app de tarefas?
As perguntas que as pessoas fazem: todas, hoje e próximas. Mantenha uma pergunta por controle e não misture um filtro de prioridade com um filtro de status na mesma fileira.
Fontes
- Ambas as telas são nossas, desenhadas e medidas no Figma. As tarefas, as pessoas e o cliente são inventados para o exercício. 1 de 5 tarefas concluída é 20%.
- Fotos via Pexels por pessoas uem, Iphanyi Ezemenari e Ajan Yogi.
- Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS usados na tela corrigida.
- Apple Human Interface Guidelines: Color, sobre não depender só da cor para carregar significado.
- 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
