Seu Daily UI é acessível?

Para quem está fazendo a transição de carreira ou tem curiosidade sobre o universo da usabilidade, é comum ver desafios e exercícios diários de UX/UI design. São telas lindíssimas com transições de cores, fontes elegantes, sombras, mockups que vendem bem; realmente podem encher os olhos. Mas esses projetos são acessíveis? Essa é uma pergunta que gostaria de deixar no ar, mas sem deixar de fornecer recursos interessantes para prolongar o assunto.

Descrição: Pica-pau lendo um quadro escrito “Não consigo ler nada”.

Antes de tudo, exercícios como Daily UI são um ótimo começo.

Eu não vou reclamar desses exercícios porque são bons para conhecer ferramentas de prototipagem, para entender que tipo de tarefa você pode receber no dia-a-dia, desenvolver o imaginário e a criatividade, aprender a solucionar problemas de usabilidade em qualquer contexto, aprender sobre cores, conhecer fontes, criar portfólio, etc. Eu mesma fiz e recomendo. Mas às vezes o que está elegante pode estar ilegível e essas coisas eu percebi enquanto fazia um curso de UX Acessível e acompanhava as telas postadas na timeline do meu LinkedIn.

Variações sutis entre um botão e outro podem exigir um esforço de percepção até por quem não é portador de nenhum problema de visão, por exemplo. Diferenciar uma área da outra só pela cor não fornece a informação necessária que um leitor de tela precisa para transmitir para uma pessoa cega ou com baixa visão — outro exemplo. E algumas fontes, principalmente as variações “light”, em certos contextos, podem tornar a leitura difícil também, provocando a desistência do leitor — mais um exemplo. Neste texto decidi elencar o que a instrutora Talita Pagani transmitiu durante as aulas.

Arquitetura da informação

Seja numa página de internet ou em um app, os conteúdos precisam estar dispostos hierarquicamente. Um título precisa estar bem destacado de um texto, por exemplo. Destacar as ações principais, como um botão de cadastro ou login, facilitam a busca do usuário. Essa parte inicial é importante porque dá a lógica de acesso ao conteúdo.

Descrição: Email marketing da Amazon com título “Ofertas em Livros Importados” e botão terciário “confira”; logo abaixo um botão primário de mesma ação “confira”. Legenda da autora: Confira aqui. Mas caso não veja aqui, confira ali também.

Os passos precisam estar descritos de forma clara, o usuário não precisa gastar tempo e raciocínio para entender o que ele precisa ou pode fazer. Facilitar a navegação não se prende só ao layout, mas precisa dispor de meios diversos para que o usuário se situe, como textos, cores, cooperação com leitores de tela, entre outros. Uma copy divertida pode ser uma copy confusa.

O texto precisa estar separado por blocos, e, aqui, o uso moderado do espaçamento pode ser um grande aliado. É possível separar as informações por cards e cores, também. Colocar peso em fragmentos do texto pode motivar a leitura e destacar informações importantes. O agrupamento adequado de informações é uma ferramenta que melhora a experiência de leitura.

Cores

A combinação de cores pode ser um momento de experimentação incrível para o designer. As cores também podem representar o estado de um elemento, como um botão desativado que precede o preenchimento de um formulário completamente. Mas, se o usuário não enxerga as cores como o projetado, pode acontecer dele nem mesmo conseguir ler as informações da página. O uso de ferramentas que emulem a várias percepções de cores pode ser uma mão na roda na hora de montar a paleta de cores.

Ainda que a intenção seja aumentar o contraste entre as cores para que o leitor não perca nenhuma informação, o alto contraste também pode dificultar a visualização. Cores brilhantes e saturadas podem ser bem aplicadas em um botão específico, mas ainda assim precisa ter uma análise do que é agradável aos olhos.

Descrição: botão de publicar do Medium. Legenda da autora: Qual melhor exemplo do que a própria header do Medium?

Dessa forma, a combinação deve ser feita observando as razões de contraste entre cores. O contraste também deve ser feito independente do tamanho da fonte, de modo que haja clareza em qualquer tipo de texto. A cor não deve ser o único elemento que destaque uma informação — o uso de sombras pode gerar um peso maior ao que se quer destacar e o uso de ícones apropriados ao lado do texto gera reconhecimento visual. A pluralidade de apresentações faz parte do princípio de aprendibilidade. As várias apresentações do mesmo conteúdo melhoram a comunicação.

Os componentes podem ser dispostos de modo a serem manipulados pelo usuário. Dark mode, por exemplo, é um recurso que muitos usuários gostam de utilizar para aumentar o conforto na leitura.

Fontes

O tamanho da fonte precisa ser minimamente suficiente para que a leitura seja confortável. Em desktops, o mínimo é de 16px, mas 20px é ideal para textos. O espaçamento também é importante — no mínimo 25% do tamanho da fonte, sendo 1,5 o espaçamento ideal entre linhas. Espaçamentos menores que esse geram mais esforço para leitura e espaçamentos maiores podem ser ruins para quem tem dislexia assimilar a informação.

Fontes light e thin podem ser fontes elegantes, leves, mas devem ser usadas em alguns conteúdos específicos, não para texto corrido. Em um contexto de um usuário lendo sob sol forte, é possível que haja um esforço maior para compreender o texto, causando desconforto.

No mesmo assunto do conforto na leitura, a largura da linha é um elemento a ser levado em consideração. O olho percorre o caminho do texto para assimilar informações e, se a linha é muito grande, o esforço é maior. Mas, se a linha é muito curta, haverá dificuldade em assimilar informações correspondentes. O ideal é uma linha de cerca de 80 caracteres para desktop.

Quanto ao alinhamento do texto, textos à esquerda geram facilidade de compreensão, porque é o natural para muitos alfabetizados no padrão ocidental. Por esse mesmo contexto, textos alinhados à direita dificultam a leitura. Textos centralizados não possuem padrão de largura entre as linhas, tornando a compreensão difícil. Textos justificados podem parecer uma boa alternativa, mas a falta de padronização na separação entre palavras dificultam a localização no texto.

Destacando elementos

O título precisa ser autoexplicativo. O título deste bloco de texto e o elemento “título” precisam ser autoexplicativos. Pode ser destacado por um tamanho de fonte maior que o texto, e pelo peso maior, como o negrito. Da mesma forma o rótulo. Lembrando de manter a informação acessível, rótulos podem vir com a ação descrita. No lugar de “favoritos”, usar “adicionar aos favoritos”, por exemplo.

Descrição: pop-up com mensagem título “Rejeitar convite?”, mensagem “Você não poderá refazer essa ação”. com botão secundário “Cancelar” e botão primário “Rejeitar”. Legenda da autora: Prevenção de erros aqui. Título que se refere à ação que o usuário solicitou, descrição do que pode acontecer, botão de cancelar (caso ele desista no meio do caminho) e o botão de “Rejeitar”, confirmando a ação destrutiva.

Enfatizar expressões é uma forma de hierarquizar as informações, como falado anteriormente. Destacar fragmentos importantes do texto te ajudam a alcançar esse objetivo. Neste mesmo contexto, mensagens de erro destacadas por vermelho atingem o objetivo de informar e alertar o usuário sobre o estado da interação.

Muita coisa? A prática leva à evolução

Pode ser que ao final desse texto você pense “é muita coisa, não vou me lembrar de colocar isso em prática”. Mas a prática leva à perfeição, ou evolução, em termos de design. Se tratando de experiência do usuário, estudo, pesquisa e teste são grandes aliados na hora de avaliar a acessibilidade do produto com o qual você trabalha.

Descrição: botão amarelo com mensagem em azul em inglês “You can do it! (Você consegue)”. Legenda da autora: Você consegue!

Durante o curso eu identifiquei vários erros que passaram despercebidos desde que comecei a trabalhar como product designer; e durante a confecção deste texto eu encontrei alguns outros. É perfeitamente normal errar. Essa expressão é até curiosa se você se propõe a falar em voz alta.

Links interessantes sobre o assunto

• O curso que fiz na Alura foi o de UX Acessível: projetando interfaces inclusivas com a Talita Pagani.
• Projeto Gaia, criado pela Talita Pagani.
• Site para identificar quais cores possuem bons contrastes de acordo com a cor principal: Color Safe.
• Guia para design acessível Horcel.
• Daily UI.
• Daily UX Writing Challenge.