Testes de usabilidade e acessibilidade – usuários simulados e WCAG

ComputaçãoAplicativos digitaisIdades 17–18

Carregando…

Usar com minha turma ✨ Personalizar com IA Relatar um problema

Usuários simulados com necessidades diferentes (um usuário típico, uma pessoa idosa com baixa visão, uma pessoa com tremor na mão, uma pessoa cega que usa leitor de tela, alguém que só usa o teclado, uma pessoa surda e uma pessoa daltônica) fazem a mesma tarefa em dois designs de interface, A e B. A simulação mede tempo, erros, ações e taxa de conclusão e desenha cada toque sobre os botões. Mude o tamanho dos botões, o espaçamento, o tamanho da fonte, as cores, os rótulos, a profundidade do menu, o texto alternativo, a ordem dos títulos, a ordem de leitura e as legendas e teste de novo; o verificador de acessibilidade calcula o contraste e confere critérios da WCAG 2.2.

Aula: Design de interfaces centrado no usuário: testes de usabilidade, acessibilidade e critérios da WCAG

O que mostra

Usabilidade é a rapidez e a segurança com que as pessoas concluem tarefas em uma interface; acessibilidade significa que pessoas com deficiência também conseguem usá-la. Designers testam com usuários de necessidades diferentes e medem tempo, erros e sucesso. O tempo de toque segue a lei de Fitts: alvos pequenos e distantes levam mais tempo e são errados com mais frequência. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.2) definem critérios verificáveis: contraste de texto de pelo menos 4,5:1, texto alternativo em imagens e botões de ícone, títulos em ordem, ordem de leitura lógica, legendas em vídeos, alvos de pelo menos 24 px e nenhuma informação transmitida só pela cor.

Como usar

Escolha uma Tarefa e um Grupo de usuários e decida qual design editar com A ou B. Mude Tamanho do botão, Espaçamento, Tamanho da fonte, Profundidade do menu, as cores, Rótulos dos botões, Títulos e Ordem de leitura, e marque Texto alternativo, Legendas do vídeo ou Status só pela cor. A tabela e o gráfico se atualizam na hora; clique em Executar teste para animar uma nova amostra de usuários. Compare os dois designs no Verificador de acessibilidade e leia a lista do leitor de tela.

Parâmetros que você pode mudar

  • Tarefa Renovar um livro atrasado, Ver o horário de hoje, Assistir ao vídeo de ajuda
  • Usuários simulados Todos os grupos, Usuário típico, Pessoa idosa com baixa visão, Pessoa com tremor na mão, Pessoa cega (leitor de tela), Só teclado, Pessoa surda, Daltonismo vermelho-verde
  • Usuários por grupo 5–40 usuários
  • Designs iniciais A ruim, B melhorado, A e B iguais (melhore B você mesmo)
  • Design em edição Design A, Design B
  • Mostrar o verificador de acessibilidade

Perguntas para explorar

  1. Por que botões maiores ajudam mais a pessoa com tremor do que o usuário típico?
  2. O texto cinza #9e9e9e sobre branco atinge o nível AA da WCAG, e como você corrigiria isso?
  3. Por que botões só com ícone e sem texto alternativo fazem quem usa leitor de tela desistir?