Pense no seu site ou app favorito. Por que ele é seu favorito? Agora, pense em um site ou app de que você não gosta. Do que você não gosta nele? A forma como os usuários interagem com seu design e a experiência deles no seu site e aplicativo pode variar.
Essa experiência pode mudar com base na hora do dia, no tipo de dispositivo usado, se ela dormiu o suficiente na noite anterior, se não está bem, se está usando tecnologia adaptativa e muito mais. Com quase oito bilhões de pessoas em todo o mundo, as possibilidades de como elas usam e experimentam seus designs são ilimitadas.
Design inclusivo
Como podemos atender a todas as necessidades potenciais do usuário de uma só vez? Insira o design inclusivo. O design inclusivo usa uma abordagem centrada no ser humano que reúne inclusão, usabilidade e acessibilidade.
E, diferentemente do design universal, que se concentra em um único design que pode ser usado por muitas pessoas, os princípios de design inclusivo se concentram em projetar para um indivíduo ou caso de uso específico e depois estender esse design para outros.
Existem sete princípios de design inclusivo focados na acessibilidade:
- Proporcione uma experiência comparável: garanta que sua interface ofereça uma experiência igual para todos, para que as pessoas possam realizar tarefas de acordo com as necessidades delas sem prejudicar a qualidade do conteúdo.
- Considere a situação: verifique se sua interface oferece uma experiência valiosa para as pessoas, independentemente das circunstâncias.
- Seja consistente: use convenções conhecidas e as aplique de maneira lógica.
- Passar o controle: garanta que as pessoas possam acessar e interagir com o conteúdo da maneira que preferirem.
- Opção de oferta: ofereça maneiras diferentes para as pessoas concluírem tarefas, especialmente aquelas complexas ou fora do padrão.
- Priorize o conteúdo: ajude os usuários a se concentrarem nas tarefas, nos recursos e nas informações principais organizando esses elementos na ordem preferida no conteúdo e no layout.
- Agregue 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 contam com personas de usuário para orientá-los durante o processo. Personas são personagens fictícios que usam seus produtos digitais, geralmente baseados em pesquisas quantitativas e qualitativas de usuários.
Os perfis também oferecem uma maneira rápida e barata de testar e priorizar esses recursos em todo o processo de design e desenvolvimento. Eles ajudam a concentrar as decisões em torno dos componentes do site, adicionando uma camada de consideração do mundo real à conversa para ajudar a alinhar a estratégia e criar metas focadas em grupos de usuários específicos.
Deficiências de incorporação
"As pessoas são todas diferentes. Só posso falar por experiência própria. Quando você conhece uma pessoa surda, então conheceu uma pessoa surda, não todos nós."
Meryl Evans, do ID24, fala Deaf Tech: Travel Through Time from Past to Future.
Personas podem ser usadas como uma ferramenta de design inclusivo quando você incorpora pessoas com deficiência nelas. Há muitas maneiras diferentes de fazer isso. Você pode criar personas específicas para deficiências, adicionar deficiências a personas de usuário existentes ou até mesmo criar um espectro de persona para refletir a realidade dinâmica das deficiências situacionais, temporárias e permanentes.
Não importa como você incorpora pessoas com deficiência em suas personas, elas não devem ser baseadas em pessoas reais ou estereótipos. E as personas nunca substituem os testes dos usuários.
- Nome: Jane Bennet
- Idade: 57 anos
- Local: Essex, Reino Unido
- Ocupação: engenheiro de UX
- Deficiência: tremor de mão devido à doença de Parkinson no início da infância (YOPD, na sigla em inglês)
- Objetivos: usar a conversão de voz em texto para facilitar a adição de sugestões de código; encontrar equipamentos de ciclismo on-line pressionando poucas teclas.
- Frustrações: sites que não oferecem suporte apenas ao teclado, apps para design com áreas pequenas para interação por toque.
Como engenheira de UX, Jane projeta e cria páginas essenciais para manter a relevância do site da empresa. Ela apoia muitos membros da equipe durante todo o dia. Ela é a rainha de apagar incêndios técnicos e todos são conhecidos no departamento quando algo acontece de forma inesperada.
Devido à perda das habilidades motoras finas e tremores, está cada vez mais difícil para ela usar um mouse. Ela tem confiado cada vez mais no teclado para navegar na Web. Jane sempre se dedicou ao condicionamento físico. Ela adora corridas de estrada e BMX. Isso tornou tudo ainda mais um golpe quando ela foi diagnosticada com doença de Parkinson no estado jovem 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 no sentido de que podem gerar simpatia ou empatia. Eles podem depender do indivíduo, do contexto em que o simulador é usado e de muitos outros fatores incontroláveis. Muitos defensores da acessibilidade não usam ferramentas de simulador 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 de que qualquer 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 é uma característica que nos define, que os mal-entendidos e as baixas expectativas sobre a cegueira são o nosso maior obstáculo.
Esses mal-entendidos criam barreiras artificiais que nos impedem de participar plenamente, e essas falsas limitações se transformam em algo que nos impede."
Mark Riccobono, presidente da National Federation of the Blind
Heurística de acessibilidade
Considere adicionar heuristics ao fluxo de trabalho ao criar personas e designs. Heurísticas são regras simples de 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 de 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 na acessibilidade digital (link em inglês). 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. É um impacto enorme que pode ser feito antes mesmo de uma única linha de código ser criada.
Semelhante ao conjunto original da heurística, 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 maneira eficiente com o sistema usando o método de entrada que escolherem (como mouse, teclado, toque etc.).
- Navegação e orientação: os usuários podem navegar facilmente, 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 em cada página e entender como operar no sistema.
- Estados e prevenção de erros: os controles interativos têm instruções persistentes e significativas para evitar erros. Além disso, oferecem aos usuários estados claros de erro que indicam quais são os problemas e como fazer a correção sempre que eles aparecerem.
- Contraste e legibilidade: os usuários podem distinguir e ler facilmente o texto e outras informações significativas.
- Idioma 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) se esgotar.
- Movimento e flashes: os usuários podem interromper elementos da página que se movem, piscam ou são animados. Os usuários não devem se distrair ou serem prejudicados de alguma forma por esses elementos.
- Alternativas visuais e auditivas: os usuários podem acessar alternativas 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 uma persona 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 checkpoint de navegação e orientação pode ter esta aparência:
Depois que todos da equipe analisarem a página ou o componente e realizarem a revisão heurística de acessibilidade, os totais serão apurados para cada checkpoint. Agora, você pode decidir como corrigir 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 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 focado na acessibilidade.
As anotações de acessibilidade podem ser aplicadas durante qualquer etapa do processo de design, de wireframes a simulações de alta fidelidade. Eles podem incluir fluxos de usuários, estados condicionais e funcionalidades. Muitas vezes, usam símbolos e rótulos para agilizar 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 o Figma.
Dependendo do seu programa de design, você precisa ter vários kits iniciais de anotação de acessibilidade para escolher. Ou, se preferir, você pode criar seu próprio conjunto. Em ambos os casos, é preciso decidir quais informações precisam ser comunicadas à equipe de transferência e qual formato funciona melhor.
Estas são algumas áreas a serem consideradas para anotações de acessibilidade:
- Cor: inclua taxas de contraste de todas as diferentes combinações de cores da paleta.
- Botões e links: identifica os estados padrão, em foco, ativo, em foco e desativado.
- Pular links: destaque os aspectos de design ocultos/visíveis e o destino deles na página.
- Imagens e ícones: adicione recomendações alternativas de texto para imagens/ícones essenciais.
- Áudio e vídeo: destacar áreas/links para legendas, transcrições e audiodescrições.
- Títulos: adicione níveis programáticos e inclua tudo que se pareça com um cabeçalho.
- Pontos de referência: destaque as diferentes seções do design com HTML ou ARIA.
- Componentes interativos: identificar elementos clicáveis, efeitos de passar o cursor e áreas de foco.
- Teclado: identifique onde o foco deve começar (parada alfa) e a seguinte ordem de tabulação.
- Formulários: adicione marcadores de campo, texto auxiliar, mensagens de erro e mensagens de sucesso.
- Nomes acessíveis: identifique como a tecnologia adaptativa precisa reconhecer o elemento.