O sistema foi aprovado numa sala com ar-condicionado, num monitor grande, com mouse. Depois foi pro pátio. Lá, a pessoa usa de pé, com o celular numa mão e a peça na outra, às vezes de luva, às vezes com o sol batendo na tela. O botão que era fácil de clicar com o mouse fica pequeno pro dedo. O cinza elegante vira invisível. E a equipe volta a gritar pro balcão em vez de olhar o sistema.
Este texto junta o que importa pra um sistema funcionar no celular de quem trabalha na rua, no pátio ou no balcão. Com as medidas que a Apple, o Google e o padrão internacional de acessibilidade recomendam, e com o que a Apol usa.
O tamanho do toque
Dedo não é mouse. A ponta do mouse acerta um ponto. O dedo cobre uma área, e cobre o que está embaixo dele. Por isso as três referências mais usadas definem um tamanho mínimo pra qualquer coisa tocável:
- A WCAG 2.2, o padrão internacional de acessibilidade da web, pede no mínimo 24 por 24 pixels, ou espaço suficiente em volta.
- A Apple recomenda 44 por 44 pontos pra um botão ser fácil de acertar.
- O Google recomenda 48 por 48 dp, que dá uns 9 milímetros no aparelho.
Tamanho de toque
Três réguas pro tamanho mínimo de um botão
O mínimo da WCAG é o piso, não a meta. Pra quem usa com pressa, de pé, o confortável está mais perto do que a Apple e o Google pedem. A Apol usa 44 em todo botão e campo de sistema no celular.
A distância entre os botões
Tamanho não basta. Dois botões grandes colados um no outro ainda geram toque errado. E o pior toque errado é o que apaga. Regra simples: a ação perigosa, como excluir ou cancelar, fica longe da ação comum, e pede confirmação. Salvar e apagar nunca moram lado a lado.
Uma mão, de pé
Quem segura o celular com uma mão alcança com o polegar a parte de baixo da tela com facilidade. O topo fica longe. Por isso, em sistema de trabalho:
- A ação principal fica embaixo, na largura toda, sempre visível, sem precisar rolar até ela.
- Um passo por tela quando a tarefa tem etapas. Melhor três telas simples do que uma tela longa.
- Voltar é grande e fica sempre no mesmo lugar.
- Campo com altura de dedo, e com o formato de exemplo dentro.
A letra
Letra pequena demais cansa, e no celular cansa mais. Não use texto menor do que o que o próprio celular usa nas mensagens. E deixe o sistema respeitar o tamanho de letra que a pessoa escolheu no aparelho: muita gente aumenta a letra do celular, e um sistema que ignora isso exclui exatamente quem mais precisa.
Número merece cuidado especial. Valor, placa, horário e quantidade são o que a equipe mais confere. Eles devem ser grandes, em letra com os algarismos todos da mesma largura, pra coluna de valores alinhar e o olho comparar rápido.
O contraste
Contraste é a diferença de luz entre o texto e o fundo. A WCAG mede isso numa razão: quanto maior, mais fácil de ler. Pra texto normal, ela pede pelo menos 4,5 pra 1. Pra texto grande, 3 pra 1.
O sol piora tudo. A tela reflete a luz, e as cores parecem mais lavadas do que no escritório. Um contraste que passa raspando dentro da loja some no pátio. Por isso vale mirar acima do mínimo em tudo o que a equipe usa na rua.
Contraste calculado
A mesma cor passa ou não passa dependendo do fundo
- AaLaranja da Apol no branco2,1:1 · Não serve pra texto2,1:1Não serve pra texto
- AaÂmbar que o site usa no tema claro6,4:1 · Passa pra texto6,4:1Passa pra texto
- AaLaranja da Apol no preto8,6:1 · Passa pra texto8,6:1Passa pra texto
- AaCinza claro de placeholder2,5:1 · Não serve pra texto2,5:1Não serve pra texto
- AaCinza escuro7,0:1 · Passa pra texto7,0:1Passa pra texto
Um exemplo da casa: o laranja da Apol é ótimo sobre fundo escuro e não serve pra texto sobre fundo branco. O diagrama acima calcula isso na hora, pela fórmula da própria WCAG. Por isso, no tema claro do site da Apol, o texto que seria laranja vira um âmbar escuro. A cor da marca continua no fundo dos botões, com letra escura por cima, e nos detalhes que não precisam ser lidos.
Vale pra qualquer marca. Cor de marca clara, como amarelo, laranja ou verde-limão, raramente funciona como cor de texto. Use a cor pra destacar, e deixe o texto em preto, branco ou cinza escuro.
Cor não pode ser o único sinal
Tem gente que não distingue bem verde de vermelho, e o sol apaga a diferença pra todo mundo. Então "pago" e "atrasado" não podem ser só uma bolinha verde e uma vermelha. Junte a cor com uma palavra ou um ícone. Se a tela continua clara em preto e branco, está certa.
Um teste de dez minutos
Pegue o celular de alguém da equipe, não o seu (o mesmo princípio do teste de usabilidade), e saia pro lugar onde o trabalho acontece.
- Faça a tarefa mais comum com uma mão só, de pé.
- Conte quantas vezes errou o toque.
- Vire a tela pro sol e tente ler o valor mais importante.
- Num Android, aumente a letra nas configurações e abra o sistema de novo. No iPhone, essa configuração quase não muda os sites.
- Veja se alguma informação depende só de cor.
Cada "não deu" dessa lista é uma mudança simples, que muda o dia de quem usa.
Faça hoje: faça o passo 3 do teste com o sistema, o site ou até o cardápio digital da sua empresa. Saia no sol com o celular e tente ler o preço ou o valor mais importante da tela. Se precisou fazer sombra com a mão, o contraste está baixo.
Se quiser ver, área por área, onde a sua empresa perde tempo hoje, o diagnóstico grátis da Apol mostra por onde começar.