Desenhando novos cards

Otimizando a experiência e trazendo novas funções

Vinícius Miraglia
Design Team Zap Viva Real

--

O problema

Passar as principais informações de um imóvel em um único card não é simples. São muitos dados que precisam ser passados para o usuário para que ele possa escolher a melhores opções dentre as oferecidas. É preciso ter a medida certa, pois, o excesso ou a falta de informação pode prejudicar o poder de escolha e por consequência, a experiência dentro da plataforma.

Outra questão é o modo como isso será visualizado, ou seja, estruturar as informações mais relevantes sem exigir uma curva de aprendizado.

Nosso processo

Parar encontrar a melhor solução, identificamos os problemas que os cards antigos tinham e começamos a listar os possíveis ruídos que poderia haver na comunicação e percepção do usuário quando ele visualizasse a lista de resultados e encontramos os seguintes problemas:

  • Falta de compreensão dos ícones de características do imóvel;
  • Arquitetura de informação prejudicada para inserir novas funcionalidades;
  • Iconografia não otimizada para cada plataforma (iOS/Android);
  • Ausência da função one click lead.

Com esses pontos levantados, começamos a explorar diversas alternativas no processo de design para resolver esses problemas.

Antigo modelo dos cards

Desenhando e testando

A prototipação iniciou-se pelos ícones, pois, além de causarem um ruído na comunicação, estavam prejudicando a organização de novas funcionalidades.

O primeiro passo foi redefinir a proposta e substituir os ícones por texto para deixar o mais claro possível as características do imóvel, sem exigir interpretação. Com isso, tivemos que encontrar o melhor local para essa informação, sem prejudicar a visualização e garantir a integridade do card. Testamos diversas opções e chegamos a conclusão que agrupar o preço com as características facilitaria a compreensão e a comparação com outras opções na lista de resultados.

O segundo passo foi trazer a função de one click lead para o card. No antigo modelo, o usuário precisava pressionar o coração para habilitar essa função. Tornar mais prático o processo para que a pessoa encontre o imóvel de seus sonhos é nossa missão e isso precisa ser refletido em todas as nossas plataformas. Portanto essa função é essencial para os nossos usuários.

O terceiro passo foi estudar as novas funções que poderiam tornar a experiência mais completa, principalmente para os "exploradores" (usuários que estão explorando várias opções para formar a sua opinião sobre um imóvel ideal para o seu perfil). A curto prazo encontramos duas: compartilhar e favoritar. O compartilhar é extremamente importante, pois, quando as pessoas estão procurando imóveis naturalmente elas separam os mais interessantes e depois validam as opções com outras pessoas, sendo essas alguém da família ou amigos. Não queremos formar um novo comportamento, mas sim, potencializar o já existente.

Para finalizar o novo design, adotamos nova forma e cor para o status de lançamentos. O pill foi a forma escolhida para se alinhar melhor com a família de ícones e outras composições arredondadas do aplicativo. Para a cor, substituimos o vermelho pelo roxo por ser uma cor análoga ao azul e por obter melhor feedback de nossos usuários.

Resultado final

Concluimos nosso design e alcançamos os objetivos propostos, melhorando a experiência de visualização e facilitando ações para o usuário.

Novo modelo dos cards

Lições aprendidas

Cards são excelentes componentes de visualização, mas é preciso tomar cuidado com as informações que estão presentes e a forma como isso será exibido. Ícones são divertidos e quando bem trabalhos tornar a experiência mais agradável e intuitiva, porém, nem sempre são fáceis de serem compreendidos pelos usuários. Alguns podem gerar confusão sobre seu significado e prejudicar a experiência da plataforma. Quanto menor for a curva de aprendizado e interpretação de quem está utilizando, melhor será o uso da solução proposta.

--

--