mai
14
2021
por Isabela Sanchez e Raphael Calais
0 comentários

Acessibilidade no Design de Interfaces Episódio 3: o texto

Acessibilidade no Design de Interfaces Episódio 3: o texto
por Isabela Sanchez e Raphael Calais
0 comentários

Quando se fala em acessibilidade no design de interfaces, o texto obviamente é essencial! Mais do que pensar no contraste das cores e nas formas utilizadas, o tipo e tamanho de fonte também devem fazer parte de sua lista para ficar atento.

Recapitulando…

Nos últimos 2 textos do blog falamos sobre como as formas e cores que compõem sua criação podem ajudar ou atrapalhar a visualização por pessoas diferentes, nos diversos tipos de dispositivos.

Se você ainda não conferiu ou não absorveu todo conteúdo, corre lá antes de dar início ao último episódio da nossa série sobre Acessibilidade no Design de Interfaces com o Episódio 3: o texto.

Um fato importante a destacar é que, de acordo com pesquisa feita pelo Movimento Web para Todos e pela plataforma BigDataCorp, apenas 0,74% do conteúdo dos sites brasileiros são acessíveis, um número extremamente baixo e que precisamos mudar urgentemente! Continue a leitura e vamos mudar essa realidade juntos.

E como é que o texto entra nessa história?

Seu conteúdo é o que o seu cliente quer ver mas, de que adianta investir na produção, se as pessoas têm dificuldade na leitura? Letras pequenas são difíceis de serem lidas por qualquer pessoa com visão reduzida, como idosos ou míopes, por exemplo. O tipo de fonte também pode atrapalhar a leitura, causando confusão ao leitor ou impedindo sua compreensão, principalmente para quem tem dislexia, por exemplo.

Boas práticas no uso do texto

Tabela de Snellen. Uma tabela que mostra as letras para fazer testes de visão.
Tabela de Snellen

Em primeiro lugar, lembre-se do que já falamos sobre cor e forma, tudo aquilo vai ser aplicado aqui também! Agora, confira nossas dicas e continue fazendo testes com diversas pessoas.

  1. Tamanho da fonte: segundo a W3C, a principal organização de padronização da World Wide Web, devemos trabalhar com fontes em 3 níveis, A, AA e AAA, mas o mínimo recomendado é o tamanho AA.
  2. Use a fonte OpenDyslexic: faça o download gratuito no site https://opendyslexic.org/ e crie uma versão amigável para quem tem dislexia.
  3. Não esqueça do contraste: os textos no nível AA devem ter no mínimo 4.5:1 de taxa de contraste de cor e os AAA 7:1. Isso significa que a cor dos textos AA devem ter no mínimo 4,5 x mais luminosidade que o fundo e os textos AAA devem ser 7x mais luminosos.
    Importante: este cálculo é feito incluindo pessoas com visão moderada e que não precisam de assistente de contraste e também de pessoas que têm daltonismo. Pessoas que têm perda de visão acima de 20/80 (segundo a Tabela de Snellen) precisam de tecnologia assistiva para aumentar o contraste e ampliar o texto.
  4. Analise: o contraste vai variar de acordo com o tipo de família que estiver sendo usada, fontes Light ou Extra Light podem apresentar mais problemas.
  5. Destaque os links: pelo menos duas características gráficas que o diferenciem dos outros elementos.
  6. Foco no zoom: confira como seu site e os textos ficam com 200% de zoom.

Então, só devo pensar nas cores, formas e textos?

Não! Quando falamos de acessibilidade devemos pensar em todas pessoas e em responsividade do layout (fator indispensável em qualquer aplicação ou site).

  1. Função Alt Text: criar um texto alternativo nas imagens para adicionar sua descrição auxilia quem tem deficiência visual e utiliza ferramentas de leitura (de bônus, seu rankeamento no Google ainda aumenta).
  2. Audiodescrição: também ajudam a descrever as imagens.
  3. LIBRAS: disponibilizar uma tradução na Língua Brasileira de Sinais é importante e existem avatares capazes de fazer essa função nos sites, como por exemplo o VLibras, disponível em https://www.gov.br/governodigital/pt-br/vlibras/.
  4. Legenda: colocar a legenda nos vídeo auxiliam na compreensão do que é dito.

A acessibilidade não atrapalha o design!

Agora que você já viu várias dicas e está pronto para dar início às suas criações, tenha em mente que a acessibilidade não é inimiga da beleza (não vamos entrar nessa discussão, apenas tenha em mente que é possível seguir princípios estéticos e promover acessibilidade ao mesmo tempo).

Colocar estética acima da acessibilidade é uma maneira de criar barreiras sociais e excluir aqueles que têm deficiência, ao ponto que, interfaces minimalistas e acessíveis são estéticas e ainda abraçam a todos (além de ser uma tendência atual).

Ficou com alguma dúvida sobre acessibilidade no design de interfaces ou precisa de ajuda em seu projeto? Conte com a gente! Pensamos em tudo para facilitar sua criação!

https://performait.com/servicos/lean

Compartilhe
mai
7
2021
por Isabela Sanchez e Raphael Calais
0 comentários

Acessibilidade no Design de Interfaces – Episódio 2: as cores

Acessibilidade no Design de Interfaces – Episódio 2: as cores
por Isabela Sanchez e Raphael Calais
0 comentários

No segundo episódio da nossa série sobre Acessibilidade no Design de Interfaces, abordaremos as cores. Muito além da estética, elas desempenham um papel essencial no desenvolvimento de sites e aplicações e merecem nossa atenção.

Mas, o que é Acessibilidade no Design mesmo?

Antes de continuar com o assunto, vamos relembrar o que Acessibilidade significa e o porquê pensar nesse assunto é tão importante!

Quando vamos a um estabelecimento é comum vermos rampas ou elevadores que possibilitam o acesso de cadeirantes, certo? Isso é acessibilidade: desenvolver um projeto que inclui pessoas portadoras de deficiências ou com mobilidade reduzida.

No mundo digital o mesmo princípio é válido! Um site ou aplicação precisa ir além da estética para contemplar usuários com dislexia, idosos ou qualquer pessoa com dificuldade visual.

E onde as cores entram na Acessibilidade no Design de Interfaces?

Nem todos nós vemos as cores da mesma forma. Isso acontece por conta dos dispositivos que usamos e também devido a problemas como daltonismo, catarata ou baixa visão.

Vamos analisar o diagrama abaixo e pegar o daltonismo como exemplo.

Mapa de cores para daltônicos, aqui falamos da visão normal em comparação da Protanopia, deuteranopia, tritanopia.

Você consegue notar o quanto as cores “universais”, verde e vermelho, são difíceis de serem reconhecidas? Logo elas, que estão presentes em tantos formulários espalhados por aí!
Outro caso comum e que dificulta a leitura é o uso de um contraste baixo entre uma cor e outra, como por exemplo um fundo cinza com o texto em branco, que não só dificulta a leitura de quem tem baixa visão, como para quem usa monitores com pouco brilho e contraste ou está em um ambiente com iluminação intensa.

Boas práticas para cores mais acessíveis no design

Você não consegue olhar com os olhos de todos e pensar na escolha das cores parece uma tarefa impossível? Calma, resolver o problema das cores na acessibilidade é mais fácil do que parece, basta seguir alguns princípios básicos e testar seus designs em diferentes telas.

1- Não confie apenas na cor!
Sim, a cor é importante, mas não deve ser a única a guiar o usuário. Utilize também ícones, texto e texturas para tornar as informações mais claras.

2- O contraste é seu amigo!
Garanta sempre um bom contraste entre as cores e os outros elementos.

3- Às vezes, mais é mais!
Não tenha medo de usar mais brilho, mais saturação e mais matiz! Aumentar um pouco cada um deles pode ser a diferença na hora de proporcionar a experiência visual que você deseja para todos.

Como saber se estou no caminho certo?

Depois que escolher as cores desejadas, teste! Veja seu design em diferentes telas e peça para que outras pessoas dêem sua opinião (garanta que sejam de diferentes idades e que tenham dispositivos diferentes).

Além disso, conte com ferramentas gratuitas que mostram se suas cores e fontes estão legais! Confira alguns exemplos:

  1. Colour Contrast Analyser
  2. Contrast Ratio3
  3. Color Safe4
  4. Contrast Checker5
  5. CoblindorIamcal Color Vision

Você está quase lá!

Agora que você já refletiu a respeito das formas e das cores e estudou como usá-los a favor de todos, você está a um passo de criar um design que vai além da estética e da responsividade! No próximo episódio vamos finalizar falando sobre o texto e a tarefa de levar a acessibilidade às suas criações ficará ainda mais fácil!

Ah! Se você ficou com dúvidas, pode falar que nós ajudamos!

https://performait.com/#sobre

Compartilhe
abr
30
2021
por Raphael Calais e Isabela Sanchez
0 comentários

Acessibilidade no Design de Interfaces – Episódio 1: As Formas

Acessibilidade no Design de Interfaces – Episódio 1: As Formas
por Raphael Calais e Isabela Sanchez
0 comentários

A Acessibilidade no Design de interfaces é um assunto bem amplo e, para facilitar o entendimento, resolvemos dividir o assunto por elementos: as formas, as cores e os textos.

Esse é o primeiro episódio, dedicado as formas e elementos que, dependendo de suas proporções, podem causar frustração e mal uso da plataforma por usuários com deficiências visuais ou mecânicas e até mesmo pessoas sem deficiências, mas com aparelhos eletrônicos limitados. 

O conceito das formas

As formas no Design de Interface definem como as informações no site ou aplicativo serão demonstradas, por exemplo: na imagem abaixo conseguimos identificar claramente onde está o botão simplesmente pela sua forma.

Não importa a língua que o site seja escrito, é possível identificar onde devemos clicar e sabemos que, ao fazer isso, seremos direcionados para algum lugar, assim como, conseguimos nos localizar pelos ícones e encontramos facilmente o campo de busca e nem precisamos entender japonês, o idioma do site no exemplo abaixo. 

Home do site rakuten que mostrar que mesmo estando escrita em japonês, sabemos onde clicar e o que fazer pelos ícones e botões. Ótimo exemplo de acessibilidade no design de interfaces.
Home do site rakuten.co.jp em abril de 2021.

Ainda no mesmo exemplo, é possível distinguir as informações que aparecem imediatamente na home do site, pois a forma define os cartões de cada item, não deixando assim as informações dispersas na página.

O mal uso das formas: 

Como podemos ver, um simples retângulo possui uma enorme importância para o entendimento e funcionamento da plataforma, mas muitas vezes, a forma é mal usada, impossibilitando até mesmo uma pessoa sem deficiências visuais ou mecânicas de se conectar ou preencher as informações requeridas.  
 
Ao tentar buscar por um estilo que remete sofisticação e modernismo, os clientes acabam por optar por formas mais simples, esbeltas e delicadas, impossibilitando assim sua visualização e entendimento por parte dos usuários, tornando mais difícil entender as informações, que antes eram intuitivas.

Antiga home do site Evernote onde o botão está escondido pelo plano de fundo.
Antiga home do site Evernote. (evernote.com)

O botão call to action, o chamariz da capa, está escondido pelo plano de fundo, perdendo seu contraste e impossibilitando diversas pessoas de vê-lo ou associar a forma com um botão.  
 
Quando falamos de acessibilidade no design de interfaces, falamos inevitavelmente de um design mais robusto, maior, mais preenchido e claro. Falamos de botões com um bom tamanho e contraste, com sombreado para destacá-lo do plano achatado da tela e que não dependem somente do famoso “hover effect” para aparecerem. 
 
Aqui, precisamos que as formas conversem e sejam visíveis e entendíveis para todos e que não priorizem somente as telas em HD dos novos monitores.  

Algumas soluções para uma melhor acessibilidade no design de interfaces: 

Investir em Acessibilidade no Design de Interfaces e no estudo da dimensionalidade das formas, junto com a sua capacidade de responsividade na maioria das telas dos smartphones e dos desktops, não é uma questão de persona ou de um visual sofisticado e comprimido, é uma questão de empatia.  
 
Se levarmos em conta que ao menos 18,6% de toda a população brasileira possui uma deficiência visual (6,7% da população possui alguma deficiência física – IBGE), estamos falando de uma boa parcela de pessoas que podem estar tentando acessar o site, aplicativo ou sistema e se frustrando constantemente.  
 
Também não podemos ignorar as pessoas que estão acessando a plataforma por um celular menos tecnológico.  
 
Logo, o primeiro passo é aceitar e investir na acessibilidade do Design e o segundo , seguir algumas regras de acessibilidade nas formas como: 
       
⦁ Faça os botões visíveis e capriche no contraste; 
⦁ Deixe o botão bem localizado e tente copiar essa fórmula da sua localização para que o usuário não tenha que procurá-lo sempre. 
⦁ Crie os cards e campos visíveis. Não use cores claras para passar informação (caso o fundo seja branco) ou cores escuras (caso o fundo seja preto); 
⦁ Mantenha as formas bem marcadas e, caso não haja um bom contraste, acrescente contornos nela ou no hover effect da forma.  
⦁ Respeite a lei do “font size = 16px;” 
⦁ Não crie botões menores do que 48px de altura, evite que os campos de clique e interação estejam escondidos. Pense, se você está tentando escondê-los, seria melhor nem os mostrar, certo?  

Por fim, teste seu produto com a maior quantidade de pessoas possível para que cada uma, com sua particularidade, consiga ter acesso total à sua plataforma. 

Compartilhe
mar
12
2021
por Isabela Sanchez e Raphael Calais
0 comentários

Hierarquia Visual e a Sua Importância em Aplicações

Hierarquia Visual e a Sua Importância em Aplicações
por Isabela Sanchez e Raphael Calais
0 comentários

Uma página ou aplicativo vai além das funcionalidades criadas. Ao pensar em desenvolvimento, devemos também pensar a respeito do layout utilizado, de forma que seja possível atrair o olhar dos usuários para o lugar que se deseja no momento certo, estimulando-os a agir conforme o esperado.

Hierarquia visual

A Hierarquia visual é o princípio de organizar os elementos para mostrar sua ordem de importância, distribuindo-os de forma lógica e estratégica para influenciar as percepções dos usuários e os orientar para as ações desejadas.

De modo geral, é a hierarquia visual que determina quais elementos receberão atenção do usuário, atraindo seus olhos diretamente para o foco desejado no momento correto.

Isso pode acontecer para incentivar inscrições em newsletters, promover algum conteúdo específico, destacar um produto novo ou até mesmo guiar uma sequência de ações em uma aplicação ou cliques em call to actions (CTAs).

Outro fator relevante é a experiência do usuário. Na construção de um layout responsivo, deve sempre ser levada em conta uma visita agradável e intuitiva, fazendo com que o usuário realmente goste de fazer o que é pedido.

“A hierarquia visual controla a entrega da experiência. Se você tiver dificuldade em descobrir onde olhar em uma página, é mais do que provável que seu layout não tenha uma hierarquia visual clara.” – Grupo Nielsen Norman.

Objetivos da hierarquia visual

Na prática, o cuidado com o design e o estudo da hierarquia visual tem 3 funções básicas que devem ser levadas em conta:

Orientação:

Construir um layout pensando em conduzir o usuário de ação em ação, sem que ele se sinta pressionado ou forçado a navegar.

Comunicação:

criar links na mente do usuário com o intuito de diminuir a carga cognitiva que ele recebe, diminuindo o seu esforço para achar informações e o caminho que deve trilhar.

Impacto emocional:

sua aplicação deve conter elementos que envolvam o usuário de forma que ele se conecte com o conteúdo e as ações, tornando sua experiência divertida e mais leve.

Os princípios da hierarquia visual

Para auxiliá-lo em seu design, existem algumas regras de ouro nas quais você deve ficar atento:

  1. Tamanho e escala: elementos maiores são mais importantes.
  2. Cor e contraste: cores vivas se destacam mais do que cores escuras.
  3. Tipografia: o tamanho e o tipo de fonte proporcionam diferenciações e destaques.
  4. Proximidade: separa os elementos uns dos outros e cria sub-hierarquias.
  5. Espaço em branco: torna mais fácil a visualização.
  6. Alinhamento: cria ordem entre os elementos.
  7. Repetição: atribui significado em relação aos elementos.
  8. Linha principais: guiam o olhar.
  9. Regra dos terços: imagine a tela dividida em 9 quadrados (como um jogo da velha) e descentralize o objeto, colocando-o na intersecção das linhas.

Estude cada um dos princípios e entenda que você não precisa (e às vezes não deve) utilizar todos eles ao mesmo tempo, mas sim, analisar o design de acordo com suas necessidades, aplicando o que cabe em cada caso.

Ao lado direito, post it mostrando uma má hierarquia visual, onde o texto do site não possui distinção de tamanho, fonte ou espaçamento. Já na imagem ao lado mostra uma boa hierarquia visual, seguindo um grid (regra dos terços) e diferenciando a fonte dos títulos para o restante do texto.

Para facilitar a compreensão e o seu trabalho, vamos abordar mais profundamente 3 dos aspectos mais importantes para que você dê o start que seus projetos precisam.

Hierarquia tipográfica

O texto está presente em grande parte das interfaces que se relacionam com o usuário e é por isso que ele desempenha um papel fundamental quando falamos de hierarquia.
Sabendo disso, talvez você pense “então é só colocar tudo grande e pronto, terminei o trabalho?” Bom, não funciona dessa forma. Para dar ênfase e importância precisamos trabalhar com várias características do texto além do tamanho. É uma mistura de tamanho, estilo, peso e cor que vão influenciar no resultado final.

Além disso, para definirmos isso da melhor maneira para o usuário, é preciso ter atenção nos diferentes tipos de elementos contidos em um texto, que vão desde o título, subtítulo, parágrafos, captions, citações, entre outros.


Crie uma ordem que faça sentido para o conteúdo, é aí que teremos os diferentes níveis de importância, fazendo o usuário compreender por onde ele começa a escanear os elementos.

Dessa forma garantimos a eficácia da transmissão da mensagem e isso reflete diretamente na experiência e relação do usuário com o produto.

Hierarquia com cores

A cor contribui bastante para a hierarquia como um todo. As cores possuem sua própria hierarquia, isso quer dizer que um preto ou um azul escuro chamarão menos atenção se comparados com tons claros, tal como amarelo e tons pastéis. Cada cor tem um peso diferente na interface e é o seu bom uso que irá garantir a hierarquia ideal.

Hierarquia com tamanhos

Ao trabalhar em uma interface com tamanhos, temos a necessidade de ter um cuidado para não exagerar ou achar que o fato de um elemento estar grande é o suficiente para uma boa hierarquia. É necessário haver harmonia na composição para que os elementos não sejam desproporcionais.


Tenha em mente que, embora o grande seja mais perceptível, isso nem sempre é o melhor. O título, por exemplo, não é mais importante que o texto, mas ele ser visto primeiro norteia o entendimento sobre o assunto abordado. Vale destacar que elementos maiores favorecem o clique e merecem cuidado dobrado, sobretudo em dispositivos mobile no quais as telas são menores e precisamos usar os dedos para completar as ações.

Essa hierarquia pode influenciar, nas formas, objetos e tipografias. Veja na Netflix, por exemplo, o tamanho define a relevância dos filmes, dando ênfase aos filmes originais do streaming.

Outro princípio importante relacionado a esse conceito é a escala, relacionada ao tamanho de um objeto em relação a outro. Um único objeto, não importa o quão grande ou pequeno seja, não tem escala até ser comparado a outro. Isso nos permite criar equilíbrio em um design e foco nos elementos dominantes. Quanto maior a escala de diferença, maior a ênfase.

Execução e testes

Destacamos 3 elementos que são os principais e mais recorrentes em interfaces, prestar atenção neles nos auxilia a ter uma boa hierarquia, mas é necessário que você leve em conta todos os aspectos na construção de seu site ou aplicativo.


Ao desenvolver soluções, faça testes A/B e use ferramentas que auxiliam na análise do comportamento, como o Hotjar, que representa visualmente como os usuários interagem com seu site. Não tenha medo de falhar e entenda como funciona a mente de seus clientes, cada situação é única e demanda estratégias personalizadas.

Definir uma hierarquia ideal auxilia no bom posicionamento da sua marca e de seu negócio. Vale lembrar que tudo em uma interface é importante e essa organização apenas fornece a importância que você precisa, no momento correto.

Não sabe por onde começar? Entre em contato com nossa equipe! Estamos prontos para entregar a melhor solução para você!

Saiba mais sobre nossa Torre de Lean
@performaitsolutions

Compartilhe