Design de app de chat: redesign de uma lista de conversas, antes e depois

Uma lista de conversas tem uma única função: mostrar quem escreveu, o que disse e se precisa de resposta. O primeiro rascunho abaixo tem todos os recursos que um app de mensagens poderia querer, e mostra todos ao mesmo tempo: quatro ícones na barra de título, um campo de busca que se explica sozinho, seis filtros que escapam pela borda e uma data completa em cada linha. A correção mantém as mesmas pessoas e as mesmas mensagens e dá a cada parte da tela uma só função.

A tela inteira, antes e depois

Rascunho júnior

Corrigido

À esquerda, o olho encontra quatro ícones, uma dica de busca de 47 caracteres, cinco anéis arco-íris idênticos, uma linha de filtros que não termina e sete linhas de mensagens de uma só linha, cada uma com data e selo. À direita, o olho encontra um título grande, um botão, um campo de busca, cinco rostos, quatro chips e cinco linhas que se leem como frases.

Correção 1: uma ação no título, uma busca que diz Buscar

Antes

Depois

Quatro ícones e um campo de busca que lista o que busca, contra um botão e a palavra Buscar.

A barra de título do rascunho tem uma câmera, um lápis, uma lupa e um menu. A lupa fica acima de um campo de busca que já tem a sua própria lupa, então a tela oferece a mesma busca duas vezes.

A correção mantém a ação pela qual as pessoas vêm aqui, escrever uma nova mensagem, e a coloca em um botão redondo e suave no azul da marca. O título cresce para um título grande, o mesmo padrão que o iOS usa, para que a tela diga onde você está antes de qualquer outra coisa. O campo de busca diz "Buscar". Os 47 caracteres do rascunho, "mensagens, pessoas, grupos e mais", descreviam um campo que todo mundo já sabe usar.

A regra para reutilizar: uma barra de título tem uma ação, e um campo chamado Buscar não precisa de uma frase.

Correção 2: um anel que significa novo

Antes

Depois

Cinco anéis arco-íris idênticos e nomes cortados, contra azul para novo, cinza para visto e primeiros nomes inteiros.

Quando todos os anéis são iguais, um anel não carrega informação. O rascunho dá aos cinco stories o mesmo gradiente, então um story que você já viu parece idêntico a um que não viu, e os nomes são cortados para "Jessica M..." e "Daniel Ro...".

A correção dá significado ao anel. Um anel azul de 2,5 px significa novo. Um anel cinza de 1,5 px significa visto.

Seu próprio story vem primeiro com um pequeno sinal de mais, e cada nome é um primeiro nome inteiro: Jessica, Daniel, Amara, Leo. Nomes curtos cabem, e o primeiro nome é como as pessoas se chamam.

A regra para reutilizar: use cor para separar dois estados, e mostre em cor apenas o estado que precisa de atenção.

Correção 3: quatro chips, um estilo, a contagem no próprio chip

Antes

Depois

Seis chips com contorno em uma linha mais larga que a tela, contra quatro chips que cabem, com a contagem como selo.

O rascunho tem seis chips em uma linha de 434 px numa coluna de 364 px. O sexto é cortado ao meio, então a tela mostra à pessoa que há mais e não dá pista do que é. As contagens ficam entre parênteses nos rótulos, "Não lidas (12)" e "Grupos (3)", o que deixa cada rótulo com um comprimento diferente.

A correção mantém quatro: Todas, Não lidas, Favoritas e Grupos. O escolhido é preenchido de azul, os outros são cinza suave. A contagem de não lidas vai para o próprio chip como um pequeno selo azul, porque é o único número que as pessoas querem e é o mesmo selo que verão nas linhas abaixo. Grupos perdeu sua contagem.

Canais e Arquivadas saíram da linha. São recursos reais, e este redesign não desenha para onde vão, então um app completo ainda precisa de um lugar para eles.

A regra para reutilizar: uma linha de filtros deve terminar dentro da tela, e o escolhido deve ser o único preenchido.

Correção 4: linhas com a pessoa, duas linhas e um horário curto

Antes

Depois

Uma linha cortada, um carimbo de data completo e um selo vermelho com ícone, contra duas linhas, um horário curto e um selo discreto.

Uma linha é uma mensagem em miniatura, e o rascunho corta a mensagem depois de umas cinco palavras: "Haha sim!! Me manda as fotos da...". O espaço foi para a data, "10/24/26 9:41 AM", e para um pequeno ícone de fixado ou de som ao lado de um selo vermelho. Uma data com ano e segundos é a coisa menos útil numa linha de uma mensagem que chegou esta manhã.

A correção dá duas linhas à prévia, então "Haha sim! Me manda as fotos de ontem à noite quando puder" é legível sem abrir a conversa. O horário é curto: "9:41" hoje, "Ontem", depois "Qui".

Uma conversa não lida tem o horário em azul e um selo azul de 17 px. O grupo silenciado, Design Team, ganha um selo cinza para contar sem chamar. Os avatares crescem para 52 px, e uma mensagem de voz ganha um pequeno microfone antes da duração.

A regra para reutilizar: gaste o espaço da linha com a mensagem, e escreva o horário do jeito que as pessoas falam.

As correções menores

• Uma borda esquerda. O rascunho usava 14 px à esquerda e 12 px à direita. A correção usa 20 px dos dois lados, com os divisores começando depois do avatar.
• Uma cor para atenção. Os selos do rascunho são vermelhos, os anéis vão de laranja a roxo e o chip de não lidas tem contorno. A correção usa o azul da marca #2E7CF6 para novo, selecionado e não lido, e cinza para tudo que é quieto.
• Uma escala tipográfica de verdade. O texto passou de 9 a 20 px para tamanhos de texto do iOS de 11 a 28 pt, com o título grande no topo.
• Quatro abas, não cinco. Conversas, Chamadas, Câmera, Status e Ajustes do rascunho viraram Conversas, Chamadas, Novidades e Ajustes. A câmera saiu da barra de abas.
• Rostos maiores. Os avatares na lista cresceram para 52 px, então a pessoa é a primeira coisa que uma linha mostra.

Audite a sua própria lista de conversas

Baixe o arquivo do Figma

O arquivo grátis tem as duas telas como componentes, cada correção como um par de antes e depois, as variáveis de cor e os estilos de texto do iOS.

Arquivo grátis do Figma

Lista de conversas, 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 uma tela de lista de conversas deve mostrar em cada linha?

A pessoa, duas linhas da última mensagem, um horário curto e um pequeno selo de não lida. Deixe de fora a data completa, os ícones extras e qualquer segundo selo.

Quantos filtros um app de mensagens deve mostrar?

Quatro chips bastam na lista principal: Todas, Não lidas, Favoritas e Grupos. Coloque o resto, como Arquivadas, atrás de um menu ou em outra tela, e garanta que a linha nunca fuja da borda.

Como projetar anéis de stories em um app de chat?

Use uma cor para novo e uma cor discreta para visto, para que o anel carregue informação. Nossa correção usa um anel azul para novo e um anel cinza fino para visto, com primeiros nomes inteiros sob os rostos.

Como um app de chat deve mostrar o horário de uma mensagem?

Tão curto quanto uma pessoa diria: o horário para hoje, depois "Ontem", depois o dia da semana. Guarde as datas completas para a própria conversa.

Quais tamanhos de fonte um app de chat deve usar?

Use a escala de texto da plataforma. A tela corrigida usa tamanhos do iOS de 11 a 28 pt, com um título grande para o nome da tela.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. Os nomes e as mensagens são inventados para o exercício.
• Fotos via Pexels por Татьяна Танатова, Iphanyi Ezemenari, pessoas uem, Son Hoa Nguyen, Ajan Yogi, Tamra Creatives Agency, Kenneth Surillo e kaleef lawal.
• Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS e o título grande usado na tela corrigida.
• Apple Human Interface Guidelines: Accessibility, para o tamanho de área de toque de 44 pt.
• Publicado primeiro como carrossel no App Brainy.