Design de app de aluguel de carros: redesign da tela inicial, antes e depois

Um app de aluguel tem uma única missão na tela inicial: levar alguém até um carro que a pessoa queira. O primeiro rascunho abaixo tem tudo o que um motorista precisa, mas abre num formulário de cinco campos, grita 25% de desconto num banner que aponta para o nada e deixa os carros para o final, com 100 por 60 pixels e as especificações em texto de 8 px.

A correção mantém todas as funções e coloca os carros em primeiro lugar. Ela segue o layout do Turo: fundo branco, um campo de busca e cards de carro em largura total com o preço embaixo da foto. Cada mudança abaixo é uma que você pode copiar.

A tela inteira, antes e depois

Rascunho júnior

Corrigido

À esquerda, os carros são a coisa menor da tela. Antes de o motorista ver um, ele passa por cinco campos de formulário, uma caixa de seleção, um botão, um banner e três dropdowns. Cada carro é uma miniatura de 100 por 60 com especificações de 8 px e um botão RESERVAR.

À direita, a tela se lê na ordem em que o motorista decide: onde, que tipo, qual carro. A busca é um campo de 48 px, as fotos dos carros têm 350 por 190 e o texto vai de 13 a 18 px, contra os 8 a 15 px do rascunho.

O que mudou, medido

Correção 1: dobre o formulário em um campo

Antes

Depois

Encontre um carro para alugar com local de retirada, local de devolução, data de retirada, data de devolução, uma caixa de seleção de idade do motorista com um link Alterar, um botão laranja Buscar carros e uma linha de letras miúdas. Contra um único campo arredondado: uma lupa, Retirada no SFO e 8 a 10 de nov na borda direita.

O rascunho pede que o motorista preencha um formulário antes de mostrar um único carro. A maioria das respostas já é conhecida: a devolução é no mesmo lugar da retirada, a idade é 25 ou mais e as datas são este fim de semana. O formulário pergunta tudo mesmo assim, com o mesmo peso, então a única coisa que o motorista precisa decidir não ganha mais atenção do que as quatro que ele não vai tocar.

A tela corrigida mantém as duas respostas que importam, onde e quando, e as coloca em um único campo. É o mesmo padrão que o Uber usa no campo de destino. Toque nele e abre uma folha com devolução, horário de retorno e idade do motorista, então nada foi removido, só movido a um toque de distância.

Regra para reutilizar: mostre os padrões, pergunte só o que muda.

Correção 2: coloque a oferta num carro de verdade

Antes

Depois

Um banner laranja em largura total: ATÉ 25% OFF NESTE FIM DE SEMANA!!! com *T&C apply à direita. Contra um card de carro alto: uma etiqueta de 25% off na foto, Sport Coupe, 2 lugares e Automático, US$ 89/dia e US$ 119 riscado.

Um banner que diz "até 25% off" não diz em quê. O motorista precisa rolar e adivinhar a que carro ele se aplica, e os três pontos de exclamação e o "T&C apply" em texto de 10 px parecem mais um aviso do que uma oferta.

Na tela corrigida, o desconto fica no carro a que pertence. Uma pequena etiqueta na foto diz 25% off, e a linha de preço mostra US$ 89/dia com os US$ 119 antigos ao lado. US$ 119 menos 25% dá US$ 89,25, então o número é honesto, e a oferta finalmente tem algo para vender. O Turo faz o mesmo, com a promoção dentro do anúncio em vez de acima dele.

Regra para reutilizar: uma oferta precisa de um objeto. Prenda-a àquilo que ela desconta.

Correção 3: troque três dropdowns por uma fileira

Antes

Depois

Três dropdowns iguais com os textos Tipo, Preço e Lugares, cada um com uma seta. Contra uma fileira de chips em pílula: Todos selecionado em preto, depois Elétrico, SUV, Cupê e Conversível saindo pela borda direita.

Um dropdown esconde as opções até ser tocado, então o motorista precisa abrir Tipo para descobrir que existem Elétrico, SUV e Cupê. Três lado a lado também dão a Preço e Lugares o mesmo peso do único filtro que as pessoas realmente usam, o tipo de carro.

Os chips mostram as opções sem um toque. O chip selecionado é preenchido de preto, a fileira desliza e o último chip é cortado pela borda da tela, o que avisa ao motorista que há mais. Preço e Lugares continuam existindo, agora abrem pelos filtros do campo de busca.

Regra para reutilizar: se um filtro tem cinco valores ou menos, mostre-os. Não os esconda atrás de um menu.

Correção 4: dê a cada carro uma foto em largura total

Antes

Depois

Quatro linhas sob Carros populares, cada uma com uma foto de 100 por 60, um nome, uma linha de especificações em 8 px, um preço e um botão laranja RESERVAR. Contra dois cards em largura total: uma foto de 350 por 190 com um coração, depois o nome e o preço na mesma linha e uma linha de detalhe embaixo.

Este é o produto, e o rascunho lhe dá o menor espaço. Com 100 por 60, um carro é uma forma colorida. A linha de especificações enfia lugares, câmbio, combustível, tempo de 0 a 100, seguro e uma avaliação em 8 px, então nada disso é legível e tudo compete com o preço.

O card corrigido dá ao carro uma foto de 350 por 190 com cantos arredondados e põe o nome e o preço diário na mesma linha. Embaixo vai uma linha de detalhe de 13 px, lugares e câmbio. O botão RESERVAR sumiu porque o card inteiro é o botão: toque nele e a página do próprio carro mostra as especificações, as avaliações e o Reservar.

Regra para reutilizar: uma lista de produtos é uma lista de fotos. Tudo o que não for a foto, o nome ou o preço fica um toque mais fundo.

As correções menores

• Uma cor de marca. O laranja (#FF5A1F) marca a etiqueta de 25% off e mais nada. O rascunho o usa no banner, no botão de busca, na caixa de seleção, no link Alterar, em quatro botões RESERVAR e na aba ativa.
• Uma margem maior. 20 px nos dois lados no lugar de 14 à esquerda e 12 à direita, com 14 entre os blocos.
• Um cabeçalho mais calmo. O coração e o sino do rascunho ficam ao lado do logotipo. O cabeçalho corrigido mantém o sino, e o coração agora é a aba Salvos.
• Uma barra de abas flutuante. Quatro abas (Explorar, Viagens, Salvos, Perfil) numa barra flutuante de 62 px, e o terceiro carro passa por baixo dela, o que indica que a página continua.
• Um estilo de ícone. Ícones preenchidos e de contorno estavam misturados na barra de abas do rascunho, agora são todos de contorno.
• Nomes que combinam com tarefas. Reservas virou Viagens, e Busca virou o campo no topo.
• Texto cortado. "Carro da semana" e a linha de 0 a 100 sumiram, já que nenhum dos dois ajudava alguém a escolher um carro.

Audite o seu próprio app de aluguel

Pegue o arquivo do Figma

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

Arquivo grátis do Figma

Redesign da tela inicial de aluguel de carros, 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 desenhada a tela inicial de um app de aluguel de carros?

Abra com um campo de busca com o local de retirada e as datas, depois uma fileira de tipos de carro, depois cards de carro em largura total com nome e preço embaixo de cada foto. Deixe devolução, horário de retorno e idade do motorista um toque atrás do campo de busca.

Quantos campos deve ter a busca de um app de aluguel de carros?

Tão poucos quanto a primeira tela precisa: onde e quando. Devolução, horário de retorno e idade do motorista normalmente mantêm seus padrões, então podem ficar numa folha que abre a partir do campo de busca.

Onde deve ficar o desconto de um aluguel de carros?

No carro ao qual ele se aplica. Uma etiqueta na foto e o preço antigo riscado ao lado do novo, como US$ 119 e US$ 89/dia, diz ao motorista o que tem desconto e de quanto. Um banner que aponta para o nada não diz.

Tipos de carro devem ser dropdowns ou chips?

Chips, quando são cerca de cinco. Uma fileira deslizante mostra Todos, Elétrico, SUV, Cupê e Conversível sem um toque, e um chip cortado pela borda da tela mostra que há mais.

Qual deve ser o tamanho das fotos de carro num app de aluguel?

Largura total da coluna, cerca de 350 por 190 pixels num celular. Uma miniatura de 100 por 60 transforma um carro numa forma colorida, e o motorista não consegue avaliá-lo.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O app, Torque, os preços e as especificações são inventados, e nenhuma marca ou modelo é citado. O layout segue o Turo: fundo branco, um campo de busca e cards de carro em largura total com o preço embaixo da foto. A busca de um campo segue o campo de destino do Uber.
• US$ 119 menos 25% dá US$ 89,25, mostrado como US$ 89/dia.
• Os ícones são do Phosphor (MIT). A barra de status foi desenhada a partir de uma captura de tela medida de um iPhone real.
• As fotos são do Pexels: Dextar Studio, Jae Park, miata7 MX-5, Furkan Ceylan e Can AGBULUT.
• Publicado pela primeira vez como carrossel no App Brainy.