Estudo WCAG

Um app que funciona para a maioria, mas deixa os mais idosos para trás

Num estudo, avaliei o app do Uber com base na WCAG, o padrão internacional de acessibilidade, pensando em um público específico: pessoas idosas.

Os problemas seguiam um padrão claro. Textos difíceis de ler. Ações confusas. Tempo de chegada pouco claro. Nenhuma forma óbvia de trocar o pagamento. Pequenos atritos que afetam todo mundo, mas principalmente os mais idosos.

Início

Falta foco na ação de chamar uma corrida.

A ação principal fica abaixo de um banner promocional e de quatro atalhos, então justamente o que a maioria procura ao abrir o app está mais difícil de achar.

Escolha da corrida

Textos difíceis de ler e ações confusas.

Os nomes no mapa são difíceis de ler, nada explica a diferença entre as categorias, o tempo de chegada é ambíguo e nada indica que dá para trocar o pagamento.

Menu da conta

O app não funciona direito com a fonte maior.

Com a fonte no tamanho que uma pessoa idosa costuma usar, os textos são cortados no meio da palavra e o painel se sobrepõe ao conteúdo.

Busca de endereço

O campo de origem já vem preenchido.

Preencher a origem sozinho vai rápido demais para uma pessoa idosa, e a lista logo abaixo fica com contraste abaixo do que a WCAG pede.

1. 01 Ação principal sem destaque
2. 02 Leitura, ações e pagamento
3. 03 Quebra com fonte maior
4. 04 Campo pré-preenchido, contraste baixo

01 / 04

Usar a WCAG como referência e planejar as telas a partir dos seus critérios

Três critérios da WCAG, as diretrizes de acessibilidade do W3C, guiaram o redesign. A partir deles, refiz o fluxo de pedido em wireframes, uma etapa por tela.

1. 1.4.3

   Contraste mínimo

   Conferi o contraste de textos e elementos interativos com o mínimo da WCAG, para que tudo continue legível para quem tem baixa visão.

2. 1.3.5

   Propósito dos campos

   Identifiquei os campos dos formulários de um jeito que leitores de tela entendam para que servem, o que ajuda o preenchimento automático e as tecnologias assistivas.

3. 2.4.6

   Títulos e rótulos

   Escrevi títulos e rótulos que dizem com clareza do que se trata cada parte, para quem usa leitor de tela poder navegar sem precisar adivinhar.

Botões maiores, textos mais simples e nada que quebre com a fonte maior

Trouxe áreas de toque maiores, ações principais mais claras e textos maiores para todo o fluxo: pedido, escolha de origem e destino e confirmação da corrida.

Início

Uma ação principal, com área de toque maior.

Pedir uma corrida vira o maior destaque da tela, e os outros serviços passam para atalhos secundários, com mais espaço para o toque.

Destino

Funciona bem com a fonte maior.

Os textos quebram linha em vez de serem cortados, e a tela continua funcionando no tamanho de fonte que uma pessoa idosa costuma usar.

Escolha da corrida

Leitura mais fácil e a ação bem explicada.

O tempo de chegada aparece em linguagem simples, com um texto de apoio ao lado, preço e tempo ficam bem separados, o pagamento ganha uma seção própria e sempre há um jeito claro de voltar.

Busca de destino

Contraste aumentado para 4.5:1.

A lista de resultados atinge o contraste mínimo, a etapa de escolher destino aparece identificada no topo e voltar é uma opção visível, não um chute.

Escolha de origem

A etapa diz onde você está, e nada vem pré-preenchido.

“Onde estamos?” faz a pergunta direta e sem dúvidas e a pessoa escolhe na lista, com o mesmo contraste de 4.5:1 e a opção de voltar sempre à vista.

1. 01 Foco e área de toque
2. 02 Funciona com fonte maior
3. 03 Leitura e ações mais claras
4. 04 Contraste e etapas claras
5. 05 Etapa identificada, sem pré-preenchimento

01 / 05

As telas finais que desenhei, de ponta a ponta.