Design de app de navegação: redesign de uma tela de direção, antes e depois

Uma tela de direção tem uma regra: o motorista tem cerca de um segundo por olhada, e a próxima curva precisa ser legível nesse segundo. O primeiro rascunho abaixo coloca a curva numa frase de 11 px em uma barra verde e depois cerca a estrada com dezessete controles, um anúncio e quatro pins no mapa. Tem todos os recursos que um motorista poderia querer, e nenhum deles dá para ler em movimento.

A correção mantém todas as funções. Faz da próxima curva a maior coisa da tela e tira da estrada tudo que não diz respeito ao próximo minuto.

A tela inteira, antes e depois

Rascunho júnior

Corrigido

À esquerda, a instrução é uma frase. O motorista precisa ler "Em 400 ft vire à direita na 16th St, depois continue por 0,2 mi e vire à esquerda na Mission St" em 11 px com o carro em movimento. A rota é uma linha fina de 4 px, o carro é um ponto de 13 px, e um anúncio de café e quatro pins disputam atenção com a estrada. A barra de abas ocupa o rodapé da tela, embora ninguém troque de aba enquanto dirige.

À direita, a tela tem três blocos: a curva no topo, a estrada no meio e a viagem embaixo. A rota é larga o bastante para ser seguida, o carro é um disco bem visível, e o mapa mostra só a estrada.

O que mudou, medido

Correção 1: transforme a frase em uma instrução grande

Antes

Depois

Uma barra verde fina com uma linha de texto pequeno que nomeia duas curvas, contra um cartão verde com uma grande seta de curva, "400 ft" e "16th St", e um pequeno chip "Depois" com uma seta à esquerda colado embaixo, na borda esquerda.

O motorista precisa de três fatos: para que lado, a que distância e onde. A frase contém os três, mas na ordem em que uma pessoa fala, então o olho precisa ler da esquerda para a direita para achar o que importa. A segunda curva fica enterrada no final, onde é lida por último ou nunca.

A correção dá a cada fato o seu próprio tamanho. A seta diz para que lado, os 400 ft dizem a distância, e o nome da rua fica embaixo em tamanho menor porque é a parte que você confere com a placa da rua. A segunda curva vira um chip pequeno preso ao cartão, então se lê como "e depois" e não como uma segunda instrução de peso igual.

Regra para reutilizar: quando a pessoa tem um segundo, transforme a frase em uma forma e um número.

Correção 2: deixe dois botões no mapa

Antes

Depois

Um mapa com cinco botões na borda direita (camadas, carro, bússola, bandeira e volume, alguns redondos e outros quadrados), uma pilha de zoom à esquerda, um anúncio de café e quatro pins, contra um mapa limpo com só dois botões brancos redondos no canto inferior direito: recentralizar e volume.

Todo botão na estrada é algo que o motorista pode ser tentado a tocar em movimento. O rascunho tem cinco à direita, dois de zoom à esquerda, e uma mistura de círculos e quadrados que faz cada um parecer um tipo diferente de coisa. O anúncio e os quatro pins somam mais alvos e mais cor por cima da rota.

A correção mantém os dois que o motorista usa no meio da viagem: recentralizar, quando o mapa foi arrastado, e volume. Zoom é um pinça. Os botões de camadas, trânsito, bússola e reportar vão para trás de uma seta na barra de viagem, então nada foi apagado, só foi movido para onde um passageiro ou um carro parado alcança. O anúncio e os pins saíram da estrada, porque a rota é a única coisa que deve ter cor.

Regra para reutilizar: quanto menos coisas puderem ser tocadas com o carro em movimento, menos toques acontecem.

Correção 3: desenhe o limite de velocidade como a placa

Antes

Depois

Uma caixa pequena com LIMITE 25 e um círculo escuro com 23 mph empilhados na borda esquerda do mapa, contra um chip branco com uma placa de limite de velocidade com VELOCIDADE MÁXIMA e um 25 grande, ao lado de um 23 grande e um mph pequeno.

Os motoristas já sabem como é uma placa de limite de velocidade: branca, borda preta, as palavras de limite, um número grande. O rascunho usa uma caixinha minúscula e um círculo escuro que não lembram nada que o motorista já viu, e ainda os empilha para que precisem ser comparados.

A correção desenha a placa de verdade com 48 por 60 pt, borda de 2 px e o número em 26 pt, e coloca a velocidade atual bem ao lado, em 32 pt. Lado a lado, os dois números respondem a uma pergunta: estou acima? Isso leva um relance, sem leitura.

Regra para reutilizar: quando um objeto real já carrega o significado, desenhe o objeto real.

Correção 4: reduza a viagem ao que você confere

Antes

Depois

Uma linha de 10 px com 18 min (4,2 mi), Chegada 9:59 AM, Rota mais rápida, Trânsito leve, acima de cinco botões iguais: Sair, Passos, Compartilhar, Buscar e Adicionar parada, contra uma folha branca com 18 min em tipo verde grande, 4,2 mi e 9:59 AM embaixo, um botão vermelho Encerrar e uma seta.

Durante uma viagem o motorista confere três coisas: quanto tempo falta, quanta distância e a que horas chega. O rascunho as coloca numa linha de 10 px com mais dois fatos, e depois soma cinco botões iguais em maiúsculas de 9 px, então "Sair", o que encerra a viagem, parece igual a "Compartilhar".

A correção põe o tempo restante em 24 pt verde, a distância e a chegada embaixo, e uma única pílula vermelha de Encerrar. Vermelha porque encerrar a viagem é a única ação com custo. Passos, Compartilhar, Buscar e Adicionar parada vão para trás da seta, a um toque de distância para um passageiro.

Regra para reutilizar: dê mais espaço ao número que as pessoas mais conferem, e dê a única cor de alerta à única ação com custo.

As correções menores

• Um segundo mapa. A tela corrigida tem seu próprio mapa, recortado mais largo e com o carro baixo na tela, de modo que a rota sobe e se afasta do carro e mostra a estrada à frente em vez da que acabou de ser percorrida.
• Um contorno limpo. A rota tem um contorno branco de 14 px sob uma linha azul de 9 px, então continua legível sobre ruas amarelas e quarteirões cinza.
• Sem barra de abas. As cinco abas saíram da visão de direção. Dirigir, Explorar, Salvos, Viagens e Perfil são para quando o carro está parado.
• Uma forma para os botões. Só círculos, de 40 pt, para que os alvos pareçam alvos.

Audite a sua própria tela de direção

Pegue o arquivo do Figma

O arquivo gratuito tem as duas telas, com cada parte corrigida como componente.

Arquivo Figma gratuito

Redesign da navegação de direção, 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

O que a tela de um app de navegação deve mostrar enquanto se dirige?

A próxima curva, a distância até ela, o nome da rua, a velocidade atual e o limite de velocidade, o tempo restante e uma forma de encerrar a viagem. Todo o resto pode ficar a um toque de distância.

Qual deve ser o tamanho da instrução de curva em um app de direção?

Grande o bastante para ser lida num relance: neste redesign a seta tem 52 pt e a distância tem 28 pt. Uma frase de uma linha em 11 px precisa ser lida, e o motorista não tem tempo para ler.

Quantos botões uma tela de mapa deve ter enquanto se dirige?

Dois bastam: recentralizar e volume. Zoom é uma pinça, e camadas, trânsito e reportar podem ficar atrás de uma seta para um passageiro ou um carro parado.

Como o limite de velocidade deve ser mostrado em um app?

Como a placa que os motoristas já conhecem, com borda, as palavras de limite de velocidade e um número grande, ao lado da velocidade atual para que os dois sejam comparados num relance.

Por que remover a barra de abas de uma tela de navegação?

Ninguém troca de aba enquanto dirige, e a barra tira espaço e atenção da estrada. Ela volta quando a viagem termina.

Que cor deve ter o botão de encerrar viagem?

Vermelho, e deve ser o único vermelho da tela. Encerrar a viagem é a única ação com custo, então ela recebe a única cor de alerta.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O app, Waymark, é fictício, e 23 mph, limite de 25, 18 min, 4,2 mi e 9:59 AM são ilustrativos e iguais nos dois lados.
• A rota segue ruas reais do bairro Mission, em San Francisco: Valencia St, 16th St e Mission St. Dados do mapa: colaboradores do OpenStreetMap.
• Ícones: Phosphor Icons (MIT).
• Publicado originalmente como carrossel no App Brainy.