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

Um app de idiomas tem uma única missão na tela inicial: levar o aluno para a aula de hoje. O primeiro rascunho abaixo tem tudo que o aluno precisa, mas parece um boletim escolar. As estatísticas são uma frase cinza, a unidade são doze linhas iguais com porcentagens, um banner berrante vende uma assinatura e o próximo passo é um CONTINUAR pequeno lá embaixo.

A correção mantém todas as funções e muda como elas aparecem e onde ficam. As estatísticas viram quatro contadores simples, a unidade vira um banner sólido, a lista vira uma trilha de nós e um balão diz Começar.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

À esquerda, tudo tem o mesmo peso. A linha de estatísticas de 9 px, o banner amarelo berrante, as doze linhas e o botão CONTINUAR pedem atenção ao mesmo tempo, e nenhum deles diz "toque em mim primeiro".

À direita, a tela se lê de cima para baixo na ordem em que o aluno pensa: como estou indo, que unidade é essa, onde estou nela, o que eu toco. Há uma trilha, um balão e uma ação.

O que mudou, em números

Correção 1: mantenha as estatísticas em uma linha simples

Antes

Depois

O cabeçalho do rascunho: Hola Meu Curso com curso de espanhol, sequência de 41 dias embaixo e um menu de espanhol, depois uma barra cinza com Nível A2 62,5%, XP 1240, Corações 4/5, Gemas 320, Liga Prata, depois um banner amarelo com ASSINE O PLUS AGORA, 50% de desconto no primeiro mês e um botão ASSINAR. Contra uma única linha: uma bandeira da Espanha, uma chama com 41, uma gema com 320, um coração com 4 e uma pequena etiqueta amarela PLUS.

O rascunho soletra as estatísticas como uma frase: "Nível A2 62,5% | XP 1240 | Corações 4/5 | Gemas 320 | Liga Prata". Tem 9 px, é cinza e precisa ser lida como texto. Quem abre o app todo dia não quer ler os próprios números, quer bater o olho neles.

A correção dá a cada número um ícone e uma cor: uma chama para a sequência de 41 dias, uma gema para 320, um coração para 4. Eles ficam em uma linha, em negrito de 16 px, e o olho os pega de uma vez. O menu de espanhol vira a bandeira, que abre a lista de idiomas. O banner "ASSINE O PLUS AGORA!!!", com os 50% de desconto e o botão ASSINAR, encolhe para uma pequena etiqueta PLUS no fim da linha, e a oferta abre a partir dela.

Nível, XP e Liga Prata foram para a aba Perfil. Importam, mas não toda vez que o app abre.

Regra para reutilizar: mostre como ícones os números que o aluno confere todo dia e leve o resto para um toque de distância.

Correção 2: dê à unidade um banner sólido

Antes

Depois

Uma linha de texto com Unidade 3 em negrito e Pedindo Comida em cinza, com um link Guia sublinhado à direita. Contra um banner roxo sólido com SEÇÃO 1, UNIDADE 3 em versalete, Pedindo Comida em branco de 20 px, um divisor fino e um ícone de livro, com uma borda mais escura na parte de baixo.

No rascunho, a unidade é um rótulo. "Unidade 3" e "Pedindo Comida" ficam numa linha com um link de texto, e nada diz que aquele é o título ao qual tudo abaixo pertence.

A correção faz dela um banner: 350 por 76, raio 12, roxo da marca, título de 20 px e uma borda inferior 4 px mais escura que faz parecer clicável. É o único bloco grande de cor na tela, então o aluno sabe em que unidade está sem ler. O link Guia vira o ícone de livro à direita, atrás de um divisor fino, e continua a um toque de distância.

Regra para reutilizar: quando uma tela tem um título ao qual tudo abaixo pertence, dê a ele um bloco de cor, não uma linha de texto.

Correção 3: transforme a lista em uma trilha

Antes

Depois

Doze linhas em uma lista, cada uma com ícone, nome e XP e porcentagem à direita: três com checks roxos e 100%, Pedindo Bebidas com um ícone de play e 0%, depois oito com cadeados cinza e 0%, de Pratos Principais a Revisão da Unidade. Contra uma trilha sinuosa de cinco círculos robustos: dois nós roxos marcados, um nó roxo com estrela e anel amarelo, e dois nós cinza bloqueados.

Esta é a correção que sustenta a tela inteira. No rascunho, cada aula é uma linha de 42 px com nome de 11 px e dois números de 9 px. Doze linhas do mesmo tamanho dizem que doze coisas são igualmente importantes, e o aluno precisa achar a que não foi feita.

A trilha diz isso só com forma e cor. Nós concluídos são roxos com check, o nó atual é roxo com estrela e anel de progresso, e os bloqueados são cinza com cadeado. Cada nó tem 64 px com borda inferior 5 px mais escura, e o anel em volta do atual tem 92 px, com três das doze aulas preenchidas em amarelo. Dá para ler o estado da unidade de longe, sem texto.

Nada se perde. Os nomes abrem a partir dos nós, o XP aparece no balão da aula atual, e os 100% viraram o check enquanto os 0% viraram o cadeado. As outras aulas estão mais adiante na trilha. O Duolingo tornou esse caminho o padrão dos apps de aprendizado, e ele funciona aqui pelo mesmo motivo: progresso é algo que você percorre, não algo que você lê.

Regra para reutilizar: quando itens têm estado e ordem, mostre o estado com forma e cor e a ordem com a posição.

Correção 4: coloque um balão Começar no nó atual

Antes

Depois

Um pequeno botão roxo com CONTINUAR em caixa alta no canto inferior direito, abaixo da lista. Contra um balão branco com borda fina com Pedindo Bebidas e Começar, 12 XP, com uma seta apontando para o nó roxo com estrela dentro do anel amarelo.

No rascunho, o próximo passo é um botão CONTINUAR de 91 por 30 embaixo de doze linhas. Fica longe da aula que inicia, então o aluno precisa ligar as duas coisas. Além disso, está em caixa alta, igual ao botão ASSINAR lá em cima, e por isso não parece a ação principal.

A correção põe a ação em cima da coisa que ela move. Um balão acima do nó atual dá nome à aula, "Pedindo Bebidas", e diz "Começar · 12 XP". Tem uma borda fina de 2 px e nenhuma sombra, então parece parte da trilha. Só a aula atual tem nome, então há só uma coisa a tocar.

Regra para reutilizar: ponha a ação principal ao lado do objeto sobre o qual ela age e dê o nome do objeto à ação.

As correções menores

• Toda função continua. O menu de espanhol é a bandeira. O título Meu Curso é a aba Aprender. A Liga Prata e a aba Liga foram para a aba Perfil. A oferta abre a partir da etiqueta PLUS.
• Uma margem só. O rascunho tem 14 px à esquerda e 12 px à direita. A tela corrigida usa 20 nos dois lados, com 16 entre os blocos.
• Um par de acentos. O roxo (#7C3AED) é a cor de ação no banner e nos nós. O Sun (#FFC53D) é só o anel de progresso e a etiqueta PLUS.
• Escala tipográfica. O rascunho vai de 9 a 15 px. A tela corrigida usa tamanhos maiores, com contadores de 16 px e título de unidade de 20 px.
• Uma barra de abas limpa. Cinco abas com ícones preenchidos e de contorno misturados viram quatro ícones em um só estilo, sem rótulos.
• Sem sombras. A profundidade vem das bordas inferiores mais escuras de 4 e 5 px, não de sombras projetadas.

Audite sua própria tela de aprendizado

Baixe o arquivo do Figma

O arquivo gratuito tem o rascunho júnior, a tela corrigida e cada parte como componente.

Arquivo Figma gratuito

Redesign de tela de aprendizado de idiomas, antes e depois

As duas telas e cada parte como componente do Figma. Grátis, somente visualização, duplique para os seus rascunhos.

Abrir no Figma

FAQ

Como deve ser projetada a tela inicial de um app de aprendizado de idiomas?

Mostre alguns contadores simples no topo, um banner sólido de unidade, uma trilha de nós de aula em que o estado aparece por cor e forma, e um balão Começar na aula atual. O aluno deve ver onde está e o que tocar sem precisar ler.

Por que apps de idiomas usam uma trilha em vez de uma lista?

Uma trilha mostra estado e ordem de relance. Aulas concluídas, atual e bloqueadas têm aparência diferente, então o aluno não precisa ler doze linhas para achar a próxima.

Quais estatísticas um app de idiomas deve mostrar na tela inicial?

As que o aluno confere todo dia: a sequência, as gemas ou pontos e os corações. Nível, XP e liga podem ficar na aba de perfil.

Onde deve ficar a oferta de upgrade em um app de aprendizado?

Como uma pequena etiqueta na linha de estatísticas que abre a oferta. Um banner grande acima das aulas disputa atenção com a aula.

Qual deve ser o tamanho de um nó de aula?

Cerca de 64 px, que é um alvo confortável para o polegar. A tela corrigida usa nós de 64 px com borda inferior 5 px mais escura e um anel de 92 px no atual.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O app, Hola, e todos os seus dados são inventados. Os números batem nas duas telas: a sequência de 41 dias, 320 gemas, 4 corações e a aula 4 de 12, Pedindo Bebidas, com 12 XP.
• Padrão estudado: a trilha de aprendizado do Duolingo e o Babbel.
• Os ícones são da Phosphor (MIT). O logotipo é em Baloo 2 ExtraBold. Não há fotos.
• Publicado originalmente como carrossel no App Brainy.