Design de app de corrida: a tela inicial de um app de transporte, antes e depois

Quem abre um app de corrida geralmente está em algum lugar e quer estar em outro. O primeiro rascunho abaixo funciona, mas pede muito antes do primeiro toque: um mapa vestindo seis controles flutuantes e um banner amarelo, uma folha com dois campos de endereço, seis serviços em seis cores e uma fileira de chips. A correção mantém toda capacidade que importa e faz uma única pergunta.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

À esquerda, o mapa está coberto de controles e a folha é um formulário. À direita, o mapa é um mapa, e a folha tem um campo, quatro linhas e quatro serviços. O mapa também ficou mais baixo, de 380 px para 270 px de altura, então a folha que importa começa mais acima.

Correção 1: dois botões no mapa

Antes

Depois

Seis controles em quatro formas e um banner, contra um menu e um botão de localização.

O rascunho põe um quadrado de menu, um círculo de busca, um quadrado de camadas, uma pílula Trânsito, uma pilha de zoom e um círculo verde de localização por cima das ruas, e um banner promocional em maiúsculas no topo. Tudo isso é algo que o passageiro poderia querer. Nada disso é o que o passageiro veio fazer, e juntos cobrem o mapa que a pessoa está tentando ler.

A correção mantém dois botões de 44 px: o menu e a sua localização. O círculo de busca era uma segunda porta de entrada para a mesma busca que a folha já tem. O banner desceu para a folha como uma linha.

Camadas, Trânsito e a pilha de zoom não estão nesta tela, e este redesenho não mostra onde elas moram, então um app real precisa de um lar para elas. Zoom com pinça em um mapa não precisa de dois botões.

A regra para reutilizar: coloque no mapa só os controles que mudam o que você vê agora, e dê aos demais outro lugar.

Correção 2: uma pergunta em vez de dois campos

Antes

Depois

Dois campos de endereço e um botão de trocar, contra um campo que pergunta Para onde.

O rascunho abre um formulário: um campo de embarque com um ponto verde, um campo de destino com um ponto preto e uma seta de trocar. O mapa acima já tem um ponto azul que mostra onde o passageiro está, então o primeiro campo pede algo que a tela já diz.

A correção pergunta "Para onde?" em um campo de 52 px. À direita fica um chip Agora, que é onde mora o horário: quem quer uma corrida mais tarde o muda, e todos os outros nem chegam a lê-lo. O botão de trocar foi embora junto com o campo de embarque.

A regra para reutilizar: pergunte a única coisa que você não sabe, e transforme o que dá para adivinhar em um chip que pode ser alterado.

Correção 3: quatro serviços em um só estilo

Antes

Depois

Seis serviços em seis cores, contra quatro em um cinza e um verde.

Quando cada serviço tem a sua própria cor, a cor deixa de significar qualquer coisa. Os seis cartões do rascunho são verde, laranja, azul, roxo, rosa e ciano, e cada ícone repete a cor do seu cartão, com texto de 9 a 12 px. Nada na fileira diz qual deles o passageiro costuma querer.

A correção desenha quatro serviços, Corrida, Encomenda, Reserva e Aluguel, como cartões grandes em um único cinza suave com ícones no verde da marca, #16A34A. Eles são largos o bastante para tocar e ler de uma vez. Moto e XL não estão nesta tela inicial, uma troca que este redesenho não esconde, porque não desenha para onde eles vão.

A regra para reutilizar: deixe uma cor de marca significar "este é o app", e deixe forma e ícone distinguirem as opções.

Correção 4: lugares salvos como linhas, com o endereço

Antes

Depois

Chips sem endereços e duas linhas longas de recentes, contra linhas com nome, endereço e área de toque.

Um chip que diz "Casa" só diz ao passageiro para onde ele vai se ele confiar nisso. Os chips do rascunho não mostram endereço, e os recentes abaixo deles são linhas longas como "Ferry Building, The Embarcadero, San Francisco, CA 94111", escritas até o CEP em 12 px.

A correção transforma cada um em uma linha: um ícone, o nome em negrito e um endereço curto embaixo, "Casa, 24 Hayes St". Ferry Building é um lugar recente, com "The Embarcadero" embaixo, e a cidade e o CEP sumiram porque o passageiro já está nessa cidade. Os 30% de desconto viraram a quarta linha, com uma etiqueta verde e "Código NEWRIDE" embaixo, no mesmo tamanho dos lugares.

A oferta continua lá. Só não grita mais por cima do mapa.

A regra para reutilizar: um atalho deve mostrar para onde leva, e uma promoção pode ser uma linha.

As correções menores

• Uma borda esquerda. A folha do rascunho usava 14 px à esquerda e 12 px à direita. A correção usa 20 px nos dois lados.
• Um destaque. O rascunho usava amarelo no banner, verde no botão de localização e seis tons nos serviços. A correção usa o verde da marca na aba ativa, nos ícones dos serviços e na etiqueta da oferta, e cinza no resto.
• Uma escala tipográfica de verdade. O texto passou de 9 a 12 px para os tamanhos do iOS, de 13 a 17 pt.
• Quatro abas, não cinco. Início, Corridas, Carteira, Ofertas e Conta viraram Início, Atividade, Carteira e Conta. Ofertas saiu, porque a oferta agora é uma linha no Início.
• Um mapa mais baixo. O mapa foi de 380 px para 270 px de altura, então a pergunta fica mais acima.

Faça a auditoria do seu próprio app de corrida

Baixe o arquivo do Figma

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

Arquivo gratuito do Figma

Tela inicial de app de corrida, 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 a tela inicial de um app de transporte deve mostrar?

Um mapa com dois botões, um único campo "Para onde?" e alguns atalhos embaixo. Serviços, lugares salvos e ofertas pertencem à folha, não ao mapa.

Quantos controles uma tela de mapa deve ter?

Dois bastam na tela inicial: o menu e a sua localização. Camadas, trânsito e zoom podem morar em outro lugar, já que mapas dão zoom com pinça.

Como projetar o campo de busca "Para onde"?

Faça um campo grande com a pergunta dentro e um chip Agora à direita para o horário. Não peça o embarque primeiro quando o mapa já mostra onde a pessoa está.

Como um app de corrida deve mostrar serviços como Corrida, XL e Encomenda?

Em um só estilo, como cartões grandes, com ícones na cor da marca. Quatro cabem na tela inicial; o resto precisa de um lugar próprio.

Como mostrar códigos promocionais em um app de corrida?

Como uma linha no mesmo estilo dos lugares, com um título curto e o código embaixo. Um banner no mapa cobre aquilo que os passageiros vieram ler.

Que tamanho de fonte um app de corrida deve usar?

A escala de texto da plataforma. A tela corrigida usa tamanhos do iOS de 13 a 17 pt, com botões de mapa de 44 px.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O mapa é um desenho vetorial nosso de ruas, um parque e um riacho. Ferry Building e Oracle Park são marcos públicos de San Francisco; os endereços de casa e trabalho são inventados. Sem fotos.
• Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS usados na tela corrigida.
• Apple Human Interface Guidelines: Accessibility, para o tamanho de área de toque de 44 pt.
• Publicado originalmente como carrossel no App Brainy.