Ebook Salll · Nº 25 · Corpo e interface
O controle está na tela. Isso não significa que a pessoa consiga encontrá-lo, alcançá-lo, acioná-lo e confirmar a ação. Um guia baseado em evidência para PDPs disponíveis ao corpo.
Imagine um interruptor visível atrás de um móvel. Ele não sumiu. A casa não quebrou. Mesmo assim, você precisa inclinar o corpo, esticar o braço e contornar o obstáculo para acender a luz.
No telefone, o obstáculo muda de forma. Pode ser um botão no limite da pega, uma miniatura pequena, um cinza que parece desabilitado, um seletor que depende de cor ou um zoom que só funciona com pinch. O elemento existe. A tarefa não está necessariamente disponível.
O controle foi renderizado e está no fluxo?
Parece interativo e importante?
Rótulo, estado e consequência são claros?
A mão chega sem reorganização extrema?
O alvo aceita variação e evita o vizinho?
A mudança foi percebida e anunciada?
A Lei de Fitts relaciona o tempo de movimento à distância e à largura efetiva do alvo. No estudo original de 1954, 16 homens universitários destros alternaram um estilete entre placas metálicas de diferentes larguras e distâncias. O trabalho fundou um modelo de movimento. Não estudou smartphones, polegar nem compra online.
D representa distância. W representa a largura efetiva na direção do movimento. Um botão visualmente grande pode continuar difícil se sua área clicável for pequena ou se a dimensão útil estiver no eixo errado.
Em 2006, Parhi, Karlson e Bederson testaram 20 pessoas usando um HP iPAQ com uma mão. Alvos maiores ficaram mais rápidos. Nas condições estudadas, a conclusão recomendou cerca de 9,2 mm para alvos discretos e 9,6 mm para teclas seriais. Isso é evidência em milímetros num aparelho e numa amostra específicos. Não é uma ordem para transformar 9,6 mm em CSS.
Estilete, placas físicas, quatro distâncias e quatro larguras. Tempo variou com a dificuldade da relação distância e tolerância.
Limite: homens jovens, mesa e antebraço. Use o mecanismo, não um número de interface.
Uma mão, polegar, nove posições e alvos de 3,8 a 11,5 mm. Tamanho melhorou velocidade e, até certo ponto, erro.
Limite: PDA antigo, destros e amostra majoritariamente masculina.
Mapas de “zona verde” são úteis como lembrete e perigosos como verdade universal. Um modelo ajustado com 160 trajetórias de 20 participantes mostrou que tamanho da mão, tela e ponto de apoio do indicador alteram a região alcançável. Outro estudo, com 10 destros, encontrou pior desempenho perto da base do polegar no canto inferior direito. Mais perto não significou automaticamente mais confortável.
Comprimento do polegar, destreza, força e mão preferida mudam a trajetória.
A âncora do indicador e a altura em que o aparelho repousa reorganizam o arco.
Largura, altura, capa e orientação mudam distâncias reais.
Andar, segurar uma bolsa, apoiar o telefone e usar duas mãos mudam o corpo disponível.
Em um estudo externo com 16 jovens num Nokia resistivo, caminhar elevou tempo, erro e carga percebida. Os percentuais daquele aparelho não podem ser tratados como constantes modernas. A conclusão durável é mais simples: uma auditoria feita apenas com o avaliador parado, destro e usando a mão dominante testa um corpo, não a população.
Mão direita e esquerda, telefone pequeno e grande, pega baixa e alta, conteúdo no topo e no fim da página.
Sentado, em pé e caminhando num ambiente controlado. Registre troca de pega, segunda mão, erro e desconforto.
Uma área de toque invisível ajuda quem já encontrou o controle. Não ajuda quem o confundiu com texto, decoração ou estado desabilitado. Num experimento de eye tracking em desktop com 71 pessoas, elementos com significantes fracos receberam menos atenção e exigiram mais esforço de busca. O contexto não era mobile, mas a pergunta atravessa telas: o elemento parece acionável?
Botão precisa parecer botão. Link precisa parecer acionável. Ícone crítico precisa de nome compreensível.
Não basta: ampliar a caixa clicável mantendo o controle visualmente fantasma.
Rótulo, preço, condição e estado precisam sobreviver a brilho, baixa visão e ampliação.
Não basta: usar cinza fraco para “organizar” informação comercial necessária.
Selecionado, indisponível e erro precisam de texto, forma, ícone ou padrão além da cor.
Não basta: trocar borda laranja por borda cinza e esperar que todos leiam a diferença.
Mudança de quantidade, filtro aplicado e item no carrinho precisam aparecer e ser anunciados.
Não basta: uma animação curta fora do campo visual.
Um estudo com 20 pessoas idosas comparou botões físicos simulados de 3 e 9 mm. O menor foi mais lento, cansou antes e exigiu mais atividade muscular. Num estudo com seis pessoas de 70 a 87 anos e tremor de intenção, uma técnica de deslizar até o alvo reduziu erros, mas aumentou tempo em grades densas. A potência estatística era baixa. O achado mostra trade-off, não uma solução pronta.
Botão de 3 mm foi mais lento e levou à fadiga antes do botão de 9 mm, com braço apoiado.
Limite: sensores físicos simulados e participantes sem hábito de touchscreen.
No Touch Guard, uma lista de desambiguação reduziu erros em 65%, abaixo de 10%, mas levou mais tempo que o toque direto.
Limite: amostra clínica pequena e técnica experimental.
Pessoas relataram elementos pequenos persistindo em interfaces densas mesmo com recursos de texto e contraste.
Limite: levantamento por autorrelato, sem tarefa controlada de compra.
Em gliding com leitor de tela, alvos menores produziram mais overshoot, tempo e erro.
Limite: tarefa unidimensional artificial em tablet.
O objetivo não é desenhar uma interface “para idosos” ou “para tremor” como categorias homogêneas. É remover exigências desnecessárias de precisão, oferecer rotas alternativas e testar com pessoas cujos corpos desafiam a interface.
Define critérios verificáveis de conformidade. No nível AA, 2.5.8 exige alvo de 24 por 24 CSS px ou uma exceção válida. No AAA, 2.5.5 usa 44 por 44 CSS px com exceções.
Apple recomenda região de hit de 44 por 44 pt. Android recomenda touch target de 48 por 48 dp. São diretrizes de plataforma e unidades próprias.
Estudos medem tempo, erro, fadiga ou preferência em aparelhos, amostras e contextos específicos. Informam decisão, mas não viram padrão universal.
| Requisito WCAG 2.2 | O que muda na PDP |
|---|---|
| 2.5.8 Target Size, AA | Alvo mínimo ou espaçamento equivalente para miniaturas, swatches, stepper, fechar e chips. |
| 2.5.7 Dragging, AA | Carrossel, slider e pan precisam de alternativa de ponteiro simples quando o gesto não é essencial. |
| 2.5.1 Pointer Gestures, A | Pinch e swipe não podem ser a única rota para a função implementada pelo conteúdo. |
| 1.4.1 Use of Color, A | Seleção, indisponibilidade e erro usam mais que cor. |
| 1.4.3 e 1.4.11, AA | Texto, contorno, estado, foco e ícone necessário mantêm contraste. |
| 1.4.4 e 1.4.10, AA | 200% de texto e 320 CSS px sem perder função nem exigir rolagem em dois eixos. |
| 2.4.7 Focus Visible, AA | Todo controle operável por teclado conserva foco visível. |
| 4.1.3 Status Messages, AA | Carrinho, quantidade e resultado de filtro são anunciados sem mudança forçada de foco. |
A pesquisa aplicada de Baymard ajuda a localizar problemas recorrentes em e-commerce. Seus testes qualitativos mostram mecanismos e seus benchmarks mostram implementação de sites. Percentual de sites não é percentual de usuários, nem prova de conversão.
Pontos sem prévia escondem o conteúdo restante da galeria.
Dropdown esconde disponibilidade. Swatch só por cor esconde significado.
Texto livre e dropdown podem criar entrada inválida ou atualização silenciosa.
Não existe posição universal. Existe uma ação que precisa sobreviver ao corpo.
Pinch é útil e insuficiente como única forma de ampliar.
Drawer, slider e chips concentram alvos pequenos e mudanças de contexto.
O controle não foi descoberto ou não pareceu interativo.
A pessoa entendeu, mas a posição exigiu pega ou extensão inviável.
Toque, swipe, pinch ou drag falhou ou ativou o vizinho.
A ação ocorreu sem feedback percebido ou anunciado.
Preço, frete, estoque ou confiança impediram a compra. Não é falha motora.
Inspecione o tamanho real, a sobreposição e a distância dos alvos vizinhos. Faça isso em cada breakpoint.
Teste sem cor, com baixo brilho, fonte ampliada, zoom e alto contraste. Estado e função continuam claros?
Sem swipe, pinch ou drag, a pessoa ainda navega na galeria, amplia imagem e ajusta filtro?
Mão direita, esquerda, uma mão, duas, telefone apoiado, tela grande, pessoa idosa, tremor e baixa visão.
Quantidade, variante, carrinho e resultado de filtro mudam visualmente e são anunciados por tecnologia assistiva.
Registre sucesso, tempo, toque errado, troca de pega, segunda mão, retorno por falta de feedback e desconforto.
Presença no DOM é começo. Conformidade é piso. Ergonomia é uma hipótese informada. Evidência experimental descreve condições. A decisão final precisa juntar as quatro coisas e voltar à tarefa real de compra.
Não procure a coordenada perfeita para toda mão. Remova precisão desnecessária, crie alternativas, preserve percepção e teste o fluxo com corpos que desobedecem ao seu mockup.
Nota de transparência: estudos controlados explicam mecanismos em condições específicas. Diretrizes de plataforma são recomendações. WCAG define conformidade. Pesquisa qualitativa de e-commerce identifica problemas, mas não prova uplift universal de conversão. O dossiê completo preserva amostra, método, efeito e limitação de cada fonte.