Pense no seu site ou app favorito. O que faz dele seu favorito? Agora pense em um site ou app que você não gosta. O 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 podem variar.
Essa experiência pode mudar de acordo com a hora do dia, o tipo de dispositivo usado, se a pessoa dormiu bem na noite anterior, se ela está doente, se está usando tecnologia assistiva e muito mais. Com quase oito bilhões de pessoas no mundo, as possibilidades de como as pessoas usam e vivenciam seus designs são ilimitadas.
Design inclusivo
Como podemos atender a todas as necessidades potenciais dos usuários de uma só vez? Insira o design inclusivo. O design inclusivo usa uma abordagem com foco nas pessoas que une inclusão, usabilidade e acessibilidade.
Ao contrário do design universal, que se concentra em um único design que o maior número possível de pessoas possa usar, os princípios do 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.
Há sete princípios de design inclusivo focados em acessibilidade:
- Ofereça uma experiência comparável: garanta que sua interface ofereça uma experiência igual para todos. Assim, as pessoas podem realizar tarefas de acordo com as necessidades delas sem prejudicar a qualidade do conteúdo.
- Considere a situação: verifique se a interface oferece uma experiência valiosa para as pessoas, independente das circunstâncias.
- Seja consistente: use convenções conhecidas e aplique-as de maneira lógica.
- Controle: garanta que as pessoas possam acessar e interagir com o conteúdo da maneira preferida.
- Ofereça opções: considere oferecer diferentes maneiras de as pessoas concluírem tarefas, especialmente as complexas ou não padronizadas.
- Priorize o conteúdo: ajude os usuários a se concentrar nas principais tarefas, recursos e informações organizando esses elementos na ordem preferida dentro do conteúdo e do layout.
- Adicione valor: considere a finalidade e a importância dos recursos e como eles melhoram a experiência de diferentes usuários.
Perfis
Ao desenvolver um novo design ou recurso, muitas equipes usam personas de usuário para orientar o processo. Personas são personagens fictícios que usam seus produtos digitais, geralmente com base em pesquisas de usuários quantitativas e qualitativas.
As personas também oferecem uma maneira rápida e barata de testar e priorizar esses recursos durante o processo de design e desenvolvimento. Elas ajudam a focar as decisões sobre os componentes do site, adicionando uma camada de consideração do mundo real à conversa para alinhar a estratégia e criar metas focadas em grupos de usuários específicos.
Incorporar deficiências
"As pessoas são diferentes. Só posso falar da minha experiência. Quando você conhece uma pessoa surda, você conhece uma pessoa surda, não todas nós".
Meryl Evans, da palestra ID24 Deaf Tech: Travel Through Time from Past to Future.
As personas podem ser usadas como uma ferramenta de design inclusivo quando você incorpora pessoas com deficiência a elas. Há muitas maneiras diferentes de fazer isso. Você pode criar personas específicas para pessoas com deficiência, adicionar deficiências às personas de usuários atuais ou até mesmo criar um espectro de personas para refletir a realidade dinâmica das deficiências situacionais, temporárias e permanentes.
Não importa como você incorpora pessoas com deficiência nas suas personas, elas não podem ser baseadas em pessoas reais ou estereótipos. e nunca substituem os testes com usuários.
- Nome: Jane Bennet
- Idade: 57 anos
- Local: Essex, Reino Unido
- Profissão: engenheiro de UX
- Deficiência: tremor nas mãos devido à doença de Parkinson de início precoce (YOPD, na sigla em inglês)
- Metas: use a entrada de texto por voz para facilitar a adição de sugestões de código e encontre equipamentos de ciclismo on-line com o mínimo de pressionamentos de tecla.
- Frustrações: sites sem suporte exclusivo para teclado; apps de design com áreas pequenas 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 ajuda muitos membros da equipe ao longo do dia. Ela é a rainha de resolver problemas técnicos, e todo mundo recorre a ela no departamento quando algo dá errado.
A perda das habilidades motoras finas devido a tremores está dificultando cada vez mais o uso de um 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 rua e BMX. Por isso, foi ainda mais difícil quando ela recebeu o diagnóstico de doença de Parkinson de início precoce no ano passado.
Simuladores de deficiência
Tenha muito cuidado ao usar simuladores de deficiência para emular ou complementar suas personas.
Os simuladores de deficiência são uma faca de dois gumes, porque podem gerar simpatia ou empatia. Isso depende da pessoa, 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 em primeira mão.
"Acho que precisamos ser completamente honestos: nenhuma atividade de simulação afeta alguns dos entendimentos mais importantes que queremos que as pessoas com visão tenham em mente. A cegueira não é a característica que nos define, e 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ísticas de acessibilidade
Considere adicionar heurísticas ao seu fluxo de trabalho ao criar 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 na área de engenharia de usabilidade e são 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 heurísticas focadas em acessibilidade digital. De acordo com a pesquisa deles, 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. Esse é um impacto enorme que pode ser causado antes mesmo de escrever uma linha de código.
Assim como o 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 de forma eficiente com o sistema usando o método de entrada de sua escolha (como mouse, teclado, toque etc.).
- Navegação e orientação: os usuários podem navegar, encontrar conteúdo e determinar onde estão no sistema a qualquer momento.
- Estrutura e semântica: os usuários conseguem entender a estrutura do conteúdo em cada página e como operar no sistema.
- Prevenção de erros e estados: os controles interativos têm instruções persistentes e significativas para ajudar a evitar erros e oferecem 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 deles (ou seja, uma sessão) acabar.
- Movimento e intermitência: 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 entender essas heurísticas de acessibilidade, você pode aplicá-las a uma persona ou design usando a planilha de heurísticas de acessibilidade e seguindo as instruções fornecidas. Esse exercício fica mais esclarecedor quando você reúne várias perspectivas.
Um exemplo de revisão heurística de acessibilidade para o ponto de verificação de navegação e orientação pode ser semelhante a este:
| Pontos de controle para navegação e orientação | Excelente (+2 pontos) | Aprovações (+1 ponto) | Falhas (-1 ponto) | N/A (0 ponto) |
|---|---|---|---|---|
| Um indicador claro e visível é definido em todos os elementos ativos à medida que eles são selecionados? | ||||
| O texto do título da página é significativo e tem informações específicas da página primeiro? | ||||
| 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? | ||||
| O propósito dos links é definido apenas pelo texto do link ou pelo contexto imediato? | ||||
| Há um link de navegação rápida na parte de cima da página? Ele aparece quando está em foco? | ||||
| A organização dos elementos de navegação facilita a localização? |
Depois que todos na equipe analisam a página ou o componente e fazem a revisão heurística de acessibilidade, os totais são somados para cada checkpoint. Nesse ponto, você pode decidir como corrigir os problemas encontrados ou as omissões que são fundamentais para oferecer suporte à acessibilidade digital.
Anotações de acessibilidade
Antes de entregar o design à equipe de desenvolvimento, considere adicionar anotações de acessibilidade.
As anotações, em geral, são usadas para explicar escolhas criativas 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 em acessibilidade.
As anotações de acessibilidade podem ser aplicadas em qualquer etapa do processo de design, desde wireframes até simulações de alta fidelidade. Eles podem incluir fluxos de usuários, estados condicionais e funcionalidades. Eles costumam usar símbolos e rótulos para simplificar o processo e manter o design como foco principal.
Os exemplos de ilustrações de design a seguir são do kit de anotações de acessibilidade do Indeed.com para Figma.
Dependendo do seu programa de design, você terá vários kits iniciais de anotação de acessibilidade para escolher. Se preferir, você pode criar seu próprio conjunto. Em qualquer caso, decida 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.
- Pular links: destaque os aspectos de design ocultos e visíveis e onde eles estão vinculados na página.
- Imagens e ícones: adicione recomendações de texto alternativo para imagens e ícones essenciais.
- Áudio e vídeo: destaque áreas e links para legendas, transcrições e audiodescrições.
- Cabeçalhos: adicione níveis programáticos e inclua tudo que parece um cabeçalho.
- 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: identifique onde o foco deve começar (parada alfa) e a ordem de tabulação a seguir.
- Formulários: adicione rótulos de campo, texto de ajuda, mensagens de erro e mensagens de sucesso.
- Nomes acessíveis: identificam como a tecnologia adaptativa deve reconhecer o elemento.