Navegação a preto e branco: como melhorar a UX para daltónicos
Que números vês na imagem?
Se te estás a perguntar “Quais números?”, é porque talvez possas ter daltonismo e é sobre isso que te vou falar neste artigo.
Não tenho esta incapacidade visual, mas como designer que desenvolve todos os dias peças de comunicação digitais ou físicas que vão ser vistas por muitos e deverão ser compreendidas por todos, tenho vindo a ter em conta alguns aspetos que não havia tido até então e que fazem toda a diferença na leitura e compreensão do que comunico.
Talvez por se tratar de uma pequena, mas significativa, percentagem de pessoas no mundo com esta característica, a verdade é que o mundo ainda não o tem muito em conta e o design de UI (User Interface) ainda não está completamente adaptado a estes utilizadores. Mas afinal o que é que nós, designers podemos fazer para acrescentarmos algum valor no que será a experiência de um utilizador daltónico num website ou numa app?
O que é afinal o daltonismo?
O daltonismo é uma alteração visual que faz com que não se consiga distinguir a 100% todas as cores, principalmente o verde e o vermelho. Segundo a OMS – Organização Mundial da Saúde – existem 350 milhões de pessoas daltónicas no mundo, estando em Portugal 500 mil homens e 27 mil mulheres desse grupo.
Esta condição visual não tem cura, mas o estilo de vida da pessoa daltónica pode ser adaptado para que não surjam tantas dificuldades no dia a dia.
Uma navegação para (quase) todos
Existem maneiras para garantir que a maioria das pessoas possa aceder e entender toda a comunicação e design, seja com a correta utilização de fontes, cores ou ícones.
Neste caso, como falamos do UX (User Experience) para utilizadores daltónicos trago-vos os seguintes exemplos que podem prejudicar toda a experiência do utilizador a navegar numa app ou num website.
Trago, como exemplo, este menu, que pode parecer normal e sem problemas. Mas vamos analisar mais detalhadamente e colocar-nos no lugar de quem não consegue identificar a alteração cromática na navegação.
A única diferença entre o ícone ativo e os ícones inativos é o tom. Este é considerado um problema grave de acessibilidade e utilização, que pode originar consequências negativas nas estatísticas, tornar o design fraco e diminuir o teu público, pois um utilizador daltónico vai acabar por se perder na navegação e, possivelmente, abandonar a app, como podemos ver a seguir.
Ao colocar este menu num rápido teste de daltonismo conseguimos perceber que a diferença entre a página ativa e as inativas é praticamente nula.
Este é um problema que pode muito facilmente ser contornado com uma das três soluções que te mostro aqui:
Baixo Contraste
Em vez de utilizarmos um cinza-claro nos ícones inativos sob a barra de menu, será melhor, constatada a diferença entre a página selecionada, se os restantes ícones estiverem com um menor contraste sob a secção mais escura. Ou seja, a solução passa por criar menos destaque com o fundo, mas aumentá-lo em comparação com o ícone ativo:
Contorno vs Preenchimento
Uma solução que muitas das aplicações e websites mais conhecidos já têm vindo a utilizar e que na minha opinião é, sem dúvida, a que resulta melhor não só em termos gráficos, mas também na usabilidade de pessoas com daltonismo, é o contraste entre ícones em outline e preenchidos. Aqui o destaque é muito facilmente notado entre o ícone ativo e os inativos.
Sublinhado
Nesta última solução que apresento, podemos manter o menu todo monocromático, pois a solução passa por destacar a página em que nos encontramos com uma linha por baixo ou por cima do ícone correspondente. É muito comum vermos esta solução em websites com menus horizontais, onde o web designer opta por destacar a página ativa com um outline por baixo do título da página ou à volta do mesmo.
Vê como um daltónico para criar para um daltónico
Para nós, designers responsáveis pela usabilidade de uma página web para alguém com uma condição visual como o daltonismo, pode ser complicado perceber como é interpretada aquela página e o que podemos fazer para a corrigir. Para nos ajudar a compreender melhor, existem algumas ferramentas que podem ser muito úteis para desenvolver o teu próximo website ou aplicação e torná-los mais inclusivos.
Existem imensas plataformas, websites, aplicações e ferramentas que te podem ajudar, como o Spectrum – uma extensão para o Google Chrome que podemos ativar para validar a usabilidade do nosso website. Esta ferramenta dá-nos a visão da interface de uma pessoa com daltonismo, tendo a possibilidade de variar entre os vários níveis desta condição. Dos que tenho vindo a experimentar desde que me alertei, pela primeira vez, para este problema, este é um dos meus preferidos e que melhor funciona.
No caso de estares a trabalhar no Photoshop, este software da Adobe também já te permite simular a visualização com deficiência de cor e funciona muito bem para uma breve validação.
Para utilizares esta ferramenta, acede através de Visualizar > Configuração de Prova > Deficiência de cor – tipo protanopia > Deficiência de cor – tipo deuteranopia. Podes também utilizar esta função do Photoshop através do atalho ⌘+Y no Mac e Ctrl+Y no Windows.
Caso não estejas a utilizar o Photoshop, também podes validar muito rapidamente a imagem em que estás a trabalhar no Color Blindness Simulator, um simulador online e que te permite escolher o tipo de daltonismo que queres avaliar.
Antes deste processo de validação de imagens e de websites, é também possível validar a nossa escolha de cores, ou seja, se esta é ou não uma boa opção a ser utilizada. Isto porque, nem todas as cores vão ser uma boa combinação, ou seja, há algumas combinações de cores que deves evitar se queres ter um website acessível a utilizadores com daltonismo, como:
Vermelho e verde
Verde e marrom
Verde e azul
Azul e cinza
Azul e roxo
Verde e cinza
Verde e preto
Para validares a paleta cromática que escolheste para o teu projeto, tens a Colorable uma ferramenta disponível online, que te dá a pontuação de contraste da escolha de cores para texto e fundo. Também te sugere a melhor cor para aplicar em texto conforme a cor que queiras aplicar no fundo.
Com qualquer uma destas ferramentas e plataformas, não há desculpas para não passarmos a comunicar da melhor forma e a sermos mais inclusivos dando uma boa resposta àquilo que é a nossa responsabilidade como designer: criar uma interface o mais acessível possível.
Apesar de ainda estarmos longe do que seria uma comunicação totalmente inclusiva, o mundo parece estar a adaptar-se e a criar soluções para comunicar com uma maior sensibilização. A prova disto é o Espaço Guimarães, que foi notícia no passado mês de março, tornando a Klépierre (proprietária do centro comercial), a primeira empresa no mundo a adotar o código de cores ColorADD ®. Este sistema universal de identificação de cores aplicado em todos os pontos de contacto com clientes e colaboradores, permite a pessoas com daltonismo a identificação das cores através de símbolos gráficos universais.
Na LCPA, trabalhamos também no sentido de tornar os nossos projetos e os dos nossos clientes o mais inclusivos possível, tendo em conta, não só o daltonismo, como falámos aqui, mas também outras condições que prejudicam a experiência do utilizador.
Porque, quer seja a utilizar cores, ícones, fontes ou outros elementos visuais, o que importa é que o utilizador tenha uma boa experiência a navegar no teu website, que se sinta incluído, representado e que, acima de tudo, consiga ter acesso àquilo que foi à procura!
Fontes:
Head of Design
