Pense no seu site ou app favorito. O que faz dele o seu favorito? Agora, pense em um site ou app que você não gosta. Do que você não gosta? A forma como os usuários interagem com seu design e a experiência deles no site e no app pode variar.
Essa experiência pode mudar com base no horário do dia, no tipo de dispositivo usado, se a pessoa dormiu o suficiente na noite anterior, se ela está doente, se está usando tecnologia adaptativa e muito mais. Com quase oito bilhões de pessoas no mundo todo, as possibilidades de como as pessoas usam e testam seus designs são ilimitadas.
Design inclusivo
Como podemos atender a todas as possíveis necessidades dos usuários de uma só vez? Adote o design inclusivo. O design inclusivo utiliza uma abordagem centrada no ser humano que combina inclusão, usabilidade e acessibilidade.
E, ao contrário do design universal, que se concentra em um único design que o maior número possível de pessoas pode usar, os princípios de design inclusivo se concentram em projetar para um indivíduo ou caso de uso específico e, em seguida, estender esse design para outras pessoas.
Existem sete princípios de design inclusivo focados em acessibilidade:
- Ofereça uma experiência comparável: verifique se a interface oferece uma experiência igual para todos, para que as pessoas possam realizar tarefas de uma maneira que atenda às necessidades delas sem prejudicar a qualidade do conteúdo.
- Considere a situação: garanta que sua interface ofereça uma experiência valiosa para as pessoas, independente das circunstâncias.
- Seja consistente: use convenções conhecidas e aplique-as de maneira lógica.
- Dê controle: garanta que as pessoas possam acessar e interagir com o conteúdo da maneira que preferirem.
- Oferecer opções: ofereça diferentes maneiras de concluir tarefas, principalmente as complexas ou não padronizadas.
- Priorizar o conteúdo: ajude os usuários a se concentrarem nas principais tarefas, recursos e informações organizando esses elementos na ordem preferida no conteúdo e no layout.
- Adicione valor: considere o propósito e a importância dos recursos e como eles melhoram a experiência para diferentes usuários.
Perfis
Ao desenvolver um novo design ou recurso, muitas equipes contam com personas de usuários para orientá-las durante o processo. Personas são personagens fictícios que usam seus produtos digitais, geralmente com base em pesquisas qualitativas e quantitativas de usuários.
As personas também oferecem uma maneira rápida e barata de testar e priorizar esses recursos durante o processo de design e desenvolvimento. Eles ajudam a tomar decisões relacionadas aos componentes do site, adicionando uma camada de consideração do mundo real à conversa para alinhar a estratégia e criar metas com foco em grupos de usuários específicos.
Incorporar deficiências
"As pessoas são todas diferentes. Só posso falar da minha experiência. Quando você conhece uma pessoa surda, você conhece uma pessoa surda, e não todas nós."
Meryl Evans, da ID24, fala Deaf Tech: Travel Through Time from Past to Future.
As personas podem ser usadas como uma ferramenta de design inclusiva quando você incorpora pessoas com deficiência nas suas personas. Há muitas maneiras diferentes de fazer isso. Você pode criar perfis específicos de pessoas com deficiência, adicionar deficiências a perfis de usuário existentes ou até mesmo criar um espectro de perfis para refletir a realidade dinâmica de deficiências situacionais, temporárias e permanentes.
Não importa como você incorpora pessoas com deficiência às suas personas, elas não podem ser baseadas em pessoas reais ou estereótipos. Além disso, as personas nunca substituem os testes com usuários.
- Nome: Jane Bennet
- Idade: 57 anos
- Local: Essex, Reino Unido
- Ocupação: engenheiro de UX
- Deficiência: tremor nas mãos devido à doença de Parkinson de início precoce (DIP)
- Metas: use a entrada de voz para texto para facilitar a adição de sugestões de código. Encontre equipamentos de ciclismo on-line com o mínimo de teclas.
- Frustração: sites sem suporte apenas para teclado; apps de design com pequenas áreas para interação por toque.
Como engenheira de UX, Jane projeta e cria páginas que são vitais para manter o site da empresa relevante. Ela apoia muitos membros da equipe ao longo do dia. Ela é a rainha de resolver problemas técnicos e é a pessoa que todos procuram no departamento quando algo falha inesperadamente.
A perda de habilidades motoras finas devido a tremores está dificultando cada vez mais o uso do mouse. Ela tem usado cada vez mais o teclado para navegar na Web. Jane sempre se dedicou ao condicionamento físico. Ela adora corridas de estrada e BMX. Por isso, foi um golpe ainda maior quando ela foi diagnosticada com doença de Parkinson precoce no ano passado.
Simuladores de deficiência
Tenha muito cuidado ao usar simuladores de deficiência para emular ou complementar seus perfis.
Simuladores de deficiência são uma faca de dois gumes, porque podem gerar simpatia ou empatia. Isso pode depender do indivíduo, do contexto em que o simulador é usado e de muitos outros fatores incontroláveis. Muitos defensores da acessibilidade são contra o uso de ferramentas de simulação de deficiência e recomendam procurar filmes, demonstrações, tutoriais e outros conteúdos criados por pessoas com deficiência e aprender sobre as experiências delas.
"Acho que precisamos ser completamente honestos de que nenhuma atividade de simulação não afeta alguns dos entendimentos mais importantes que queremos que as pessoas saibam no coração e na cabeça delas. A cegueira não é a característica que nos define, que os mal-entendidos e as baixas expectativas sobre a cegueira são nosso maior obstáculo.
Esses mal-entendidos criam barreiras artificiais que nos impedem de participar plenamente, e essas limitações falsas se transformam em algo que nos impede de avançar."
Mark Riccobono, presidente da National Federation of the Blind.
Heurística de acessibilidade
Considere adicionar heurísticas ao seu fluxo de trabalho à medida que cria personas e designs. Heurísticas são regras para design de interação, introduzidas em 1990 por Jakob Nielsen e Rolf Molich. Esses dez princípios foram desenvolvidos com base em anos de experiência no campo da engenharia de usabilidade e têm sido usados em programas de design e interação humano-computador desde então.
Em 2019, a equipe de design da Deque criou e compartilhou um novo conjunto de heuristicas com foco na acessibilidade digital. De acordo com a pesquisa, até 67% de todos os bugs de acessibilidade de um site ou app podem ser evitados quando a acessibilidade faz parte do processo de design. Isso é um grande impacto que pode ser feito antes mesmo de uma linha de código ser escrita.
Assim como no conjunto original de heurísticas, há dez heurísticas de acessibilidade a serem consideradas ao planejar seu design.
- Métodos e modalidades de interação: os usuários podem interagir com eficiência com o sistema usando o método de entrada escolhido (como mouse, teclado, toque etc.).
- Navegação e orientação: os usuários podem navegar, encontrar conteúdo e determinar onde estão, a qualquer momento, no sistema.
- Estrutura e semântica: os usuários podem entender a estrutura do conteúdo de cada página e entender como operar dentro do sistema.
- Prevenção e estados de erro: os controles interativos têm instruções persistentes e significativas para ajudar a evitar erros e fornecer aos usuários estados de erro claros que indicam quais são os problemas e como corrigi-los sempre que erros são retornados.
- Contraste e legibilidade: os usuários podem distinguir e ler facilmente textos e outras informações importantes.
- Linguagem e legibilidade: os usuários podem ler e entender o conteúdo com facilidade.
- Previsibilidade e consistência: os usuários podem prever a finalidade de cada elemento. É claro como cada elemento se relaciona com o sistema como um todo.
- Tempo e preservação: os usuários têm tempo suficiente para concluir as tarefas e não perdem informações se o tempo (ou seja, uma sessão) acabar.
- Movimento e piscar: os usuários podem parar elementos na página que se movem, piscam ou são animados. Os usuários não podem ser distraídos ou prejudicados por esses elementos.
- Alternativas visuais e auditivas: os usuários podem acessar alternativas baseadas em texto para qualquer conteúdo visual ou auditivo que transmita informações.
Depois de ter uma compreensão básica dessa heurística de acessibilidade, você pode aplicá-la a um perfil ou design usando a planilha de heurística de acessibilidade e seguindo as instruções fornecidas. Este exercício é mais esclarecedor quando você reúne várias perspectivas.
Um exemplo de análise heurística de acessibilidade para o ponto de verificação de navegação e orientação pode ser parecido com este:
| Pontos de verificação para navegação e orientação | Excels (+2 pt) | Aprovações (+1 ponto) | Falha (-1 ponto) | N/A (0 pt) |
|---|---|---|---|---|
| Um indicador claro e visível é definido em todos os elementos ativos quando eles recebem o foco? | ||||
| A página tem um texto de título significativo, com as informações específicas da página em primeiro lugar? | ||||
| O elemento de título da página e o H1 são iguais ou semelhantes? | ||||
| Há títulos significativos para cada seção principal? | ||||
| A finalidade dos links é definida pelo texto do link ou pelo contexto imediato? | ||||
| Há um link de pulo na parte de cima da página, que é revelado quando o foco é aplicado? | ||||
| A organização dos elementos de navegação facilita a orientação? |
Depois que todos na equipe analisarem a página ou o componente e realizarem a revisão heurística de acessibilidade, os totais serão somados para cada ponto de verificação. Neste ponto, você pode decidir como resolver os problemas encontrados ou corrigir as omissões que são essenciais para oferecer suporte à acessibilidade digital.
Anotações de acessibilidade
Antes de entregar seu design à equipe de desenvolvimento, considere adicionar anotações de acessibilidade.
As anotações, em geral, são usadas para explicar as escolhas de criativos e descrever diferentes aspectos do design. As anotações de acessibilidade se concentram em áreas em que os desenvolvedores podem fazer escolhas programáticas mais acessíveis com a orientação da equipe de design ou de um especialista com foco em acessibilidade.
As anotações de acessibilidade podem ser aplicadas em qualquer fase do processo de design, desde wireframes até modelos de alta fidelidade. Eles podem incluir fluxos de usuário, estados condicionais e funcionalidade. Eles costumam usar símbolos e rótulos para agilizar o processo e manter o design como foco principal.
Os exemplos de ilustrações de design abaixo são do kit de anotações de acessibilidade do Indeed.com para o Figma.
Dependendo do seu programa de design, você precisará ter vários kits iniciais de anotação de acessibilidade para escolher. Se preferir, crie seu próprio conjunto. Em ambos os casos, você precisa decidir quais informações precisam ser comunicadas à equipe de transferência e qual formato funciona melhor.
Algumas áreas a serem consideradas para anotações de acessibilidade incluem:
- Cor: inclua taxas de contraste de todas as diferentes combinações de cores na paleta.
- Botões e links: identifique os estados padrão, de passar o cursor, ativo, de foco e desativado.
- Links de pular: destaque os aspectos de design ocultos e visíveis e para onde eles estão vinculados na página.
- Imagens e ícones: adicione recomendações de texto alternativo para imagens essenciais e ícones.
- Áudio e vídeo: destaque áreas e links para legendas, transcrições e audiodescrição.
- Títulos: adicione níveis programáticos e inclua tudo o que se parece com um título.
- Pontos de referência: destaque as diferentes seções do design com HTML ou ARIA.
- Componentes interativos: identifique elementos clicáveis, efeitos de passar o cursor e área de foco.
- Teclado: identifica onde o foco precisa começar (parada Alfa) e a seguinte ordem de tabulação.
- Formulários: adicione rótulos de campo, textos auxiliares, mensagens de erro e mensagens de sucesso.
- Nomes acessíveis: identifique como a tecnologia adaptativa precisa reconhecer o elemento.