Design de app imobiliário: redesign da tela inicial, antes e depois

Uma tela inicial de app imobiliário tem uma única missão: levar a pessoa de "estou procurando" até um anúncio que ela queira abrir. O primeiro rascunho abaixo não quebra nada. Todas as funções funcionam. Ele só pede que o leitor absorva tudo de uma vez: um campo de busca, cinco categorias redondas, quatro botões diferentes, um banner e um card com nove detalhes minúsculos.

A correção mantém todas as funções e muda a ordem, o tamanho e o número de estilos.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

À esquerda, o olho encontra um campo de busca, cinco círculos de categoria, quatro controles em três estilos diferentes, um banner azul de largura total, uma estrela, uma seta, dois botões empilhados em cada foto e um botão Mapa flutuante sobre os detalhes do anúncio. Nada está errado isoladamente. Juntos, não existe uma primeira coisa para ler.

À direita, a tela se lê de cima para baixo: quem é você, o que buscar, alugar ou comprar, que tipo de imóvel, e então um anúncio grande. O banner continua lá, mas espera embaixo, menor, onde não compete com a busca.

Correção 1: uma linha de busca, um controle Alugar ou Comprar

Antes

Depois

Um campo de busca com contorno e microfone, cinco ícones redondos de categoria, depois um botão Alugar preenchido, a palavra Comprar solta, um botão Ordenar com contorno e um link Filtrar. Contra um campo de busca cinza com um botão de filtro azul, e Alugar e Comprar como as duas metades de um único controle segmentado.

O rascunho coloca quatro controles em uma linha e dá a cada um uma aparência diferente: Alugar é um botão preenchido, Comprar é texto puro, Ordenar tem contorno e Filtrar é um link simples com ícone. O leitor precisa descobrir quais são botões, quais são abas e quais são alternadores antes de usar qualquer um.

A correção dá uma forma para cada função. Busca e filtro ficam na mesma linha, porque filtrar faz parte de buscar. Alugar ou Comprar é uma escolha entre exatamente duas coisas, que é para o que serve um controle segmentado: as duas opções ficam visíveis e a selecionada fica claramente acesa. Ordenar sai do caminho, porque só importa quando já existem resultados.

Regra para reaproveitar: se dois controles fazem o mesmo tipo de trabalho, devem ter a mesma aparência. Se fazem trabalhos diferentes, não devem.

Correção 2: categorias que mostram o que está selecionado

Antes

Depois

Cinco círculos finos com contorno e um pequeno rótulo embaixo de cada um, onde só o rótulo azul indica que Apartamento está selecionado. Contra chips preenchidos com ícone e palavra na mesma linha, onde Apartamentos está em azul sólido e os próximos chips continuam além da borda.

No rascunho, o único sinal do que está selecionado é um rótulo azul em texto pequeno embaixo de um círculo. Os círculos em si parecem idênticos, então o olho precisa ler os rótulos um a um para achar o ativo.

Um chip com preenchimento sólido responde à pergunta antes de ela ser feita. O estado selecionado tem cor e peso diferentes, não uma pequena diferença no texto. Os chips também são mais largos que altos, então o ícone e a palavra ficam na mesma linha e a fileira inteira ocupa menos altura. O chip cortado na borda direita mostra que a fileira rola, sem precisar de setas.

Correção 3: um card de anúncio que se lê em ordem

Antes

Depois

Anúncios em Destaque com uma estrela e uma seta, uma foto com selo "1 Ano" e botões de mais e coração, um $2.400 por mês em azul, pílulas Venda e Aluguel, um endereço, e detalhes de quartos e banheiros cortados por um botão Mapa flutuante. Contra uma foto grande de cantos arredondados com um só coração, depois $2.400 por mês, apartamento de 2 quartos, Alfama, Lisboa e 2 quartos, 2 banheiros, 91 m².

Quem olha um imóvel faz quatro perguntas na mesma ordem: quanto custa, o que é, onde fica e qual o tamanho. A correção monta o card nessa ordem, uma resposta por linha. O preço é o maior texto, depois o tipo do imóvel, depois linhas mais leves para o lugar e os detalhes.

O rascunho mistura as respostas. O preço divide a linha com duas pílulas que dizem Venda e Aluguel em um imóvel que é só para alugar. O endereço fica acima dos detalhes mas abaixo do preço, em outra cor. Os detalhes são texto pequeno de 9 pontos e o último fica escondido sob o botão Mapa, então o leitor perde a área, um número que a maioria das pessoas compara.

Também saíram da foto o selo "1 Ano" e o botão de mais. Dois botões flutuantes em cada imagem pedem decisões que o leitor ainda não tomou. Um coração basta, e a foto fica maior porque é a foto que vende o imóvel.

Regra para reaproveitar: um card é uma frase. Decida a ordem das palavras, depois dê um estilo a cada palavra.

Correção 4: quatro abas em um só estilo de ícone

Antes

Depois

Início, Meus Imóveis, Mensagens, Favoritos e Mais, com ícones preenchidos e de contorno misturados. Contra Início, Salvos, Mensagens e Perfil, todos com ícones de contorno, só Início em azul.

O rascunho tem cinco abas, e três delas se parecem: Meus Imóveis, Favoritos e Mais soam como lugares onde um imóvel salvo ou próprio poderia estar. Os ícones também misturam formas preenchidas (a casa, as mensagens) com contornos (o prédio, o coração), então a aba ativa é difícil de distinguir de uma aba apenas desenhada mais pesada.

A correção usa quatro abas com um só estilo de ícone, então a única diferença entre as abas é qual está ativa. "Favoritos" vira "Salvos", uma palavra mais curta que combina com o coração do card. "Mais" vira "Perfil", um nome que diz o que há por trás. As diretrizes da Apple descrevem a barra de abas como navegação entre seções de nível superior, então um destino que na verdade é um menu de sobras não pertence a ela.

As correções menores

• Um cabeçalho com uma pessoa nele. A correção adiciona uma saudação, um avatar de iniciais em um círculo azul sólido e um sino com ponto vermelho. O rascunho não tem cabeçalho, então nada diz de quem é o app.
• Uma só margem. O rascunho usa 12 à esquerda e 16 à direita, então nada se alinha com a borda da tela. A correção usa 20 dos dois lados de cada linha.
• Uma só escala de espaçamento. Os intervalos são 4, 8, 12 ou 16. Quando todo intervalo vem da mesma lista curta, as linhas parecem relacionadas sem nenhum divisor.
• Uma escala de texto da plataforma. O texto do rascunho vai de 9 a 15 px sem padrão. A correção usa os tamanhos do iOS, de 11 a 22 pt, tamanhos que as pessoas conseguem ler.
• Um banner mais calmo. "Anuncie seu imóvel de graça" perdeu a palavra de destaque em itálico, o contorno de casa e o segundo botão dentro dele. Agora é uma única linha com uma seta.

Audite seu próprio app imobiliário

Pegue o arquivo Figma

O arquivo gratuito traz as duas telas, cada parte da tela corrigida como componente, as variáveis de cor, os estilos de texto do iOS e um leia-me com os créditos das fotos.

Arquivo Figma gratuito

Tela inicial de app imobiliário, antes e depois

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

Abrir no Figma

FAQ

O que a tela inicial de um app imobiliário deve mostrar primeiro?

Um campo de busca com um botão de filtro, depois Alugar ou Comprar e o tipo de imóvel. Coloque os anúncios logo abaixo, com o banner e as ofertas secundárias depois deles.

Como Alugar e Comprar devem aparecer em um app de imóveis?

Como um controle segmentado de duas metades, para que as duas opções estejam sempre visíveis e a escolhida fique claramente destacada. Quatro estilos de botão diferentes em uma linha fazem as pessoas adivinhar.

O que um card de anúncio de imóvel deve incluir?

Preço primeiro, depois o tipo do imóvel, o lugar e os detalhes principais, como quartos, banheiros e área. Um botão de favorito na foto basta.

Quantas abas um app imobiliário deve ter?

Quatro é um bom número: Início, Salvos, Mensagens e Perfil. Evite duas abas que soem como o mesmo lugar, como Favoritos e Meus Imóveis.

Como mostrar qual categoria está selecionada?

Preencha o chip selecionado com a cor da marca e mantenha os outros neutros. Uma pequena mudança na cor do texto embaixo de um círculo passa facilmente despercebida.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma.
• Fotos via Unsplash de Luke van Zyl, A. L. Brown e Annie Spratt, sob a Licença Unsplash.
• Apple Human Interface Guidelines: Tab bars.
• Apple Human Interface Guidelines: Typography, os tamanhos de texto do iOS.
• Publicado originalmente como carrossel no App Brainy.