# O mapa que ninguém entendia **Design e experiência do usuário: quem pensa no que a pessoa vê e no caminho que a pessoa faz** > Capítulo 6.8 de *Antes do Código*, livro aberto e gratuito de Marcelo Castelo Branco. > > Leia esta página no site: https://marcelocastelo.io/livros/antes-do-codigo/secao-6/capitulo-6-8 --- ![A placa estava no alto, e os passageiros olhavam para baixo. O caminho foi para o chão.](https://marcelocastelo.io/assets/livros/antes-do-codigo/6-8-a-faixa-no-chao.webp) *A placa estava no alto, e os passageiros olhavam para baixo. O caminho foi para o chão.* O capítulo dos programas terminou com o Edson passando dez dias combinando com o resto do metrô, para depois escrever o programa em dois dias. Uma das conversas do Edson foi com a equipe que desenha o que o passageiro vê, e este capítulo segue essa equipe. Você já largou uma compra no meio sem saber direito por quê. A tela pedia uma coisa que você não entendeu, e você fechou. Do outro lado, alguém tinha certeza de que a tela estava óbvia. > — Design é deixar bonito. > > — Se a pessoa não entendeu, a pessoa não prestou atenção. > > — Eu sei o que o usuário quer, não preciso perguntar. > > — Essa parte de tela e de cor é para quem não sabe programar. > A tela que parece óbvia para quem fez é a que mais engana quem chega. ## A escada errada No corredor da imagem que abre este capítulo, placas em branco pendem do teto, e no chão uma faixa larga, em verde, faz uma curva até a escada da direita. Três passageiros andam olhando para baixo, dois com o celular na mão. Num banco encostado na parede, um homem sentado escreve num caderno. O corredor fica na estação de baldeação do mesmo metrô, onde duas linhas se cruzam. A Lúcia desenha os mapas e as placas do metrô há doze anos. A equipe da Lúcia decide também o que quase ninguém repara: a altura dos bancos, a distância entre as portas do trem, o espaço para a cadeira de rodas e o tom de voz dos alto-falantes. Naquela baldeação, muita gente descia pela escada errada, chegava à plataforma da outra linha e voltava, no meio da multidão. As reclamações chegavam toda semana. A diretoria pediu à Lúcia uma placa maior, com letras maiores, no alto do corredor. Pare aqui um segundo e responda como se você fosse da diretoria. Você mandava fazer a placa maior, ou mandava alguém passar três manhãs sentado no corredor, olhando os passageiros? ## Três manhãs no banco A Lúcia pediu três manhãs. O Fábio, que trabalha com a Lúcia, sentou no banco do corredor, das sete às dez, com um caderno. O Fábio não consertou nada. **O Fábio contou quem errava a escada, e olhou para onde as pessoas olhavam**. Na contagem do Fábio, uma em cada cinco pessoas errava a escada. E o Fábio viu o motivo. Na pressa da manhã, as pessoas andavam olhando para o chão, para o celular ou para os pés de quem ia na frente. Quase ninguém levantava a cabeça para a placa. A Lúcia não aumentou a placa. A Lúcia pintou no chão uma faixa larga, saindo da entrada do corredor até a escada da linha que as pessoas mais confundiam. Um mês depois, o Fábio voltou ao banco e contou uma pessoa errando a escada a cada vinte. **As pessoas não erravam por desatenção, e sim porque o caminho não tinha sido feito para o jeito como elas andavam**. > A faixa no chão funcionou porque alguém olhou para onde os passageiros olhavam. ## A escolha do setor Na empresa de ingressos, a Marlene é designer. A Marlene cuida do design de interface, que em inglês se chama UI design, e da experiência do usuário, que o mercado chama de UX. **Design de interface e experiência do usuário é o trabalho de pensar no que a pessoa vê e no caminho que a pessoa faz**, do primeiro clique até o ingresso chegar. Nas vendas anteriores, trinta em cada cem pessoas desistiam na escolha do setor do estádio. A Marlene fez o que o Fábio fez no banco: chamou cinco pessoas, pediu que cada uma comprasse um ingresso, e olhou sem ajudar. O mercado chama esse jeito de olhar de teste com usuários (usability testing). Três das cinco pessoas não acharam o mapa do estádio. O mapa aparecia só depois de a pessoa descer a página, e as pessoas procuravam o setor pelo nome, que não dizia nada. A Marlene levou o mapa para o alto da página. Na venda seguinte, a desistência caiu para doze em cada cem. ## Quem conta onde as pessoas se perdem O Fábio não aprendeu sozinho onde ficavam os problemas. Os atendentes das estações contavam ao Fábio as perguntas que mais ouviam, e cada pergunta repetida mostrava um caminho mal desenhado. A Marlene usa o teste com usuários para achar a pergunta antes que a pergunta chegue ao suporte. Na véspera da venda, o teste mostrou que as pessoas fechavam a tela da fila virtual achando que a tela tinha travado, e a Marlene pôs em letras grandes o aviso de não fechar a página. **Cada pergunta repetida no atendimento é um caminho que alguém desenhou sem olhar quem anda por ele**. > Quando muita gente faz a mesma pergunta, o problema está no caminho, e não nas pessoas. ## Como saber se o caminho do passageiro combina com você ### Quatro perguntas para saber se desenhar o caminho é o seu lugar *Se você pensa em trabalhar com design* As quatro perguntas cabem numa manhã de banco, e mostram se você tem o olhar que a área pede. **1. Você repara onde as pessoas hesitam?** O Fábio contou quem voltava da escada errada. O trabalho começa por perceber a hesitação que a própria pessoa nem nota. **2. Você aguenta ver alguém errar sem ajudar?** A Marlene olhou cinco pessoas sem dizer onde estava o mapa. **Ajudar na hora esconde exatamente o problema que você queria ver**. **3. Você muda de ideia quando a observação contradiz você?** A placa maior parecia certa até o Fábio contar quem olhava para o chão. A área pede gente que larga a própria certeza diante do que viu. **4. Você explica uma escolha com o que viu, e não com o seu gosto?** A faixa no chão não ganhou por ser bonita. A faixa ganhou por um número: uma pessoa errando a cada vinte, em vez de uma a cada cinco. > No design, o argumento mais forte é o que você viu alguém fazer. ## Levar para a entrevista *Três perguntas que mostram se você entende o trabalho de quem desenha o caminho de quem usa.* Nas três perguntas abaixo existe a mesma tentação: mostrar a tela mais bonita que você fez e falar de cor e de tipo de letra. Só que nenhuma das três perguntas está medindo o seu gosto. As três estão medindo se você olha para onde as pessoas olham, como o Fábio no banco. ### “Como você sabe se uma tela está boa?” A pergunta parece ser sobre estética, e é sobre o jeito como você confere o seu trabalho. **O que quem entrevista quer ouvir** - Que você olha alguém usar a tela - Que você mede onde a pessoa para ou desiste - Que você muda a tela pelo que viu **O que derruba** - Dizer que a tela está boa quando fica bonita - Dizer que você sabe pela experiência, sem testar - Falar só de cor e de tipo de letra **Boa resposta** “No cardápio digital de uma pastelaria, eu contei os pedidos errados. Um em cada dez vinha com cebola para quem não queria. O botão de tirar a cebola ficava no fim da tela. Levei o botão para perto do pastel, e em duas semanas o erro caiu para um em cada cinquenta. A tela ficou menos limpa.” **Resposta ruim** “Quando a tela fica bonita e moderna.” A placa maior no alto do corredor também parecia boa para quem pediu. **A resposta mede a tela pelo olho de quem fez, e não pelo caminho de quem usa**. ### “A pessoa que pediu a tela quer uma coisa que você acha que vai confundir quem usa. O que você faz?” Esta pergunta é a placa maior da diretoria, contada com outras palavras. **Boa direção** - Levar a pessoa para ver alguém usando - Deixar a observação decidir, e não a discussão - Aceitar se a observação mostrar que você errou **Direção ruim** - Fazer o que pediram, mesmo achando que vai confundir - Discutir gosto contra gosto - Fazer do seu jeito sem avisar **Boa resposta** “Na ONG em que fui voluntário, a coordenadora queria todas as informações na primeira página do site. Em vez de discutir, sentei com duas pessoas que procuravam a ONG pela primeira vez e anotei onde cada uma clicava, com a permissão delas. As duas se perderam. A coordenadora leu as anotações e escolheu ela mesma o que tirar.” **Resposta ruim** “Eu faço o que a pessoa pediu. Quem pede é quem manda.” A resposta evita a briga e entrega a placa maior, e quem paga a escolha é o passageiro que vai continuar errando a escada. ### “Para quem você está desenhando quando desenha uma tela?” A pergunta procura saber se você pensa numa pessoa de verdade, ou num usuário imaginário. **O avaliador técnico quer ver** - Que você conhece quem vai usar a tela - Que você pensa em quem tem mais dificuldade - Que você ajusta a tela por causa dessa pessoa **O avaliador de pessoas quer ver** - Que você respeita quem usa devagar - Que você não culpa a pessoa pela dificuldade - Que você aceita uma tela menos elegante se ela servir melhor **Boa resposta** “Quando fiz a tela de encomendas da papelaria da minha tia, desenhei pensando em mim. A cliente mais antiga da papelaria, de setenta anos, não conseguiu ler os preços. Aumentei a letra e troquei o cinza claro por preto. A tela ficou menos elegante, e a cliente passou a fazer a encomenda sozinha.” **Resposta ruim** “Eu desenho para o usuário médio.” O usuário médio não existe, e a cliente de setenta anos existe. Desenhar para a média deixa de fora justamente quem mais precisa do caminho bem feito. ## Levar para o trabalho *Três situações do dia a dia de quem cuida do design e da experiência de quem usa.* ### Muita gente desiste no meio de uma tela, e ninguém sabe por quê Essa situação aparece em toda empresa que vende pela internet. O erro comum é mudar a tela por palpite, ou fazer a placa maior. **Esperam de você** - Que você diga quantas pessoas desistem, e em que ponto - Que você olhe algumas pessoas usando antes de mudar - Que você conte o que viu antes de propor a solução **Não esperam de você** - Que você mude a tela inteira por palpite - Que você culpe as pessoas pela desistência - Que você espere a próxima venda para olhar **O que dizer** “No último mês, trinta em cada cem pessoas desistiram na escolha do setor. Quero ver cinco pessoas comprando, sem ajudar, e anotar onde cada uma para. Faço esse teste na quinta, e na sexta trago o que vi e uma proposta.” A fala pede o banco do Fábio antes da placa da diretoria, e promete voltar com o que viu. ### Pediram para deixar a tela mais bonita Esse pedido é comum, e às vezes esconde outro problema. O erro comum é obedecer só à palavra "bonita", sem perguntar o que está incomodando. **Esperam de você** - Que você pergunte o que está incomodando de verdade - Que você separe tela velha de tela que atrapalha - Que você comece pelo que atrapalha quem usa **Não esperam de você** - Que você recuse o pedido por achar beleza menos importante - Que você troque só as cores e entregue - Que você refaça tudo sem olhar ninguém usando **O que dizer** “Posso deixar mais bonita, sim. Antes, me conta o que está incomodando: as pessoas estão desistindo, ou a tela só parece velha? Se for desistência, eu começo olhando cinco pessoas comprando, e a beleza vem junto.” A pergunta descobre se o pedido é sobre a placa ou sobre a escada errada, e as duas coisas pedem trabalhos diferentes. ### O suporte recebe sempre a mesma pergunta sobre uma tela Essa situação é o recado dos atendentes ao Fábio. O erro comum é escrever uma resposta pronta para o suporte copiar, e deixar a tela como está. A resposta pronta acalma o cliente de hoje, e o cliente de amanhã faz a mesma pergunta. **Esperam de você** - Que você leia algumas das conversas - Que você ache na tela o ponto que gera a pergunta - Que você mude a tela, e confira se a pergunta diminuiu **Não esperam de você** - Que você ache que o problema é de quem pergunta - Que você entregue só uma resposta pronta ao suporte - Que você mude a tela sem medir o efeito **O que dizer** Para o Beto, do suporte: “Você disse que quarenta pessoas por dia pedem o reenvio do ingresso. Posso ler três dessas conversas? Se o ingresso já está no aplicativo e a pessoa não acha, o problema está na tela, e é meu.” > Quarenta pedidos de reenvio por dia são quarenta pessoas olhando para o lugar errado da tela. ## O que muda daqui em diante **Design** - Antes: Deixar bonito - Agora: Pensar no que a pessoa vê e no caminho que a pessoa faz **A pessoa que erra** - Antes: Uma pessoa desatenta - Agora: Uma pessoa andando por um caminho mal desenhado **Olhar alguém usar** - Antes: Perda de tempo - Agora: O jeito mais curto de achar onde a tela engana **A placa maior** - Antes: A solução óbvia - Agora: Um palpite, até alguém observar - Olhar alguém usar a tela sem ajudar - Contar onde as pessoas desistem - Mudar de ideia quando a observação contradiz você - Explicar cada escolha com o que você viu - Ouvir o suporte, que sabe onde as pessoas se perdem > A placa no alto estava certa, e estava no lugar para onde ninguém olhava. --- *Capítulo 6.8 de **Antes do Código** — O guia para quem quer entender a tecnologia — e não só usá-la.* *O livro inteiro, de graça: https://marcelocastelo.io/livros/antes-do-codigo*