18/07/09 | Comments Off on legibilidade na web
Entrevista concedida à revista webdesign para a reportagem: legibilidade na web [pdf], Mar/09.
1 – Quais são os principais fatores que exercem influência na leitura visual de conteúdos digitais?
Conteúdos digitais normalmente são consumidos em concorrência com outros atrativos por estarem na web/pc/mobile, onde temos uma vasta gama de possibilidades para dispersão.
Ao navegar, estamos sempre "com pressa", com frequência praticamos a leitura genérica e apenas se o conteúdo nos prender, damos atenção específica. Esse comportamento já é bastante conhecido e por isso devemos preparar conteúdos digitais para nos comunicar na forma mais breve, simples e incisiva possível.
Dessa forma, a tendência de se utilizar "menos" também se aplica ao conteúdo.
É pertinente lembrar que a leitura de textos na tela não é uma prática confortável, assim, podemos facilitar essa tarefa, se evitarmos uma disposição em que os textos atravessam a tela de ponta a ponta.
O uso de colunas, bem como quebrar o conteúdo em partes menores e utilizar tópicos em listas sempre que possível, são alguns recursos úteis para buscar maior clareza na apresentação dos textos e torná-los mais atraentes.
Além da legibilidade, temos que prover uma boa 'leiturabilidade', ou seja, garantir um bom nível de fluência durante a leitura dos elementos visuais da interface, buscando uma composição consciente e equilibrada.
2 – Um dos caminhos para garantir uma boa legibilidade em uma interface é a aplicação de espaçamentos e margens, além do adequado alinhamento dos objetos. De que maneira estes "conceitos" devem ser aplicados na concepção de uma interface?
Utilizar corretamente as áreas "em branco" é fundamental. Quando exploramos bem as áreas sem conteúdo, conseguimos destacar com maior facilidade as áreas de Informação. Áreas de respiro protegem os elementos de informação e acomodam o olhar durante a leitura.
O uso de grids também é um recurso inteligente para uma boa disposição dos elementos na interface.
3 – Outra questão fundamental envolve a escolha do tamanho da fonte e da família tipográfica a ser utilizada no projeto. Em termos de legibilidade, o que deve ser levado em consideração na hora de se definir esta etapa no processo de criação?
Atualmente é comum resoluções de tela maiores, isso nos permite utilizar com maior liberdade tamanhos diversos de fontes. Facilmente encontramos sites que utilizam chamadas e destaques textuais em tamanhos grandes, o que contribui com que determinadas informações sejam rapidamente notáveis. Dessa forma, podemos, apenas com o uso da tipografia, hierarquizar o conteúdo visualmente.
Ao escolher uma família, devemos ter atenção se ela foi projetada em determinadas formatações (bold/italic). Quando uma fonte não tiver algumas dessas variações, forçá-las pode trazer um resultado visualmente impreciso. É o que chamamos de "Faux Bold and Italics".
Ao atribuir certas famílias tipográficas em textos com corpo reduzido pode fazer com que detalhes fiquem serrilhados, pois não se encaixaram perfeitamente na grade de pixels da tela. Neste caso, utilizar fontes não-serifadas (menor índice de detalhes gráficos nos tipos) ou projetadas especificamente para mídia digital são alternativas para se precaver de um resultado indesejado.
4 – Não podemos nos esquecer ainda do contraste de cores a serem utilizadas como plano de fundo e no uso das fontes. Em relação à percepção visual na web, quais seriam as recomendações na hora de se definir a combinação cromática de um site?
Uma boa prática é utilizar paletas com número reduzido de cores, com isso adquirimos com maior facilidade harmonia e consistência gráfica da interface como um todo.
Cores reagem de maneiras diferentes quando utilizadas em conjunto (contraste simultâneo), portanto, ao definí-las devemos evitar vibrações no contato entre as cores selecionadas. Um exemplo comum é o vermelho e verde, que, dependendo dos tons, podem apresentar vibrações que geram desconforto visual quando justapostas.
Dar atenção específica para a seleção das cores é essencial para adquirir um bom nível de legibilidade, além de contribuir com a acessibilidade do projeto.
5 – Quais são os erros mais comuns que podem prejudicar a legibilidade de um projeto interativo?
É bastante comum encontrar interfaces que não priorizam visualmente as informações de forma clara. As partes mais importantes do conteúdo devem ser facilmente notadas e nem sempre essa organização é feita com cuidado.
O uso inadequado de cores, contrastes, texturas (imagens), entre outros, são vistos todos os dias, além da frequente prática de saturar a interface com elementos decorativos, na maioria das vezes, desnecessários.
6 – Que tipo de testes você costuma realizar para medir a legibilidade de um projeto interativo?
Um método empírico que utilizo com frequência é visualizar o projeto em tons de cinza, assim, consigo analisar contrastes sem a interferência das cores. Testes básicos em diferentes OSs e browser também garantem a legibilidade em diferentes ambientes.
Mas o teste que considero o mais importante é o coletivo, pedindo opiniões e, de preferência, analisando reações das pessoas usando a interface.
7 – Citar dois bons exemplos de projetos interativos com boa legibilidade, justificando o porquê de sua escolha.
A List Apart – Site de artigos longos e grande quantidade de informações. Em um formato tradicional, mas que com a utilização de linhas e áreas em branco distingue claramente cada bloco de informação.
O uso de cores e variações tipográficas para links, títulos e outros, é bastante sutil e funcional. Informa visualmente a hierarquia do conteúdo.
twistori – Minimalista e vibrante, cada cor representa um filtro de sentimento, muito bem definido no menu.
Com a utilização do fundo escuro as cores se destacam e aguçam o sentidos que relacionam a cor selecionada às suas sensações.
O tamanho das fontes torna fácil a leitura e faz do texto o único elemento de composição da interface.
8 – Que tipo de bibliografia você indicaria para o profissional que deseja se aprofundar neste assunto?
Legibilidade é a clareza na identificação de elementos visuais, não se restringindo apenas ao uso de textos e está diretamente ligado à funcionalidade de uma interface. Leituras referentes a diagramação, o uso da tipografia como forma e composição são recomendáveis.
Para quem está começando, um livro bastante abrangente e que trata de assuntos fundamentais da comunicação gráfica de forma objetiva é o 'Sintaxe da Linguagem Visual', de Donis Dondis. Abrange temas como gestalt, semiótica, teoria da cor, tipografia, entre outros.
Já quem quiser uma abordagem mais prática e simplificada, uma boa pedida é o 'Não me Faça Pensar', do Steve Krug. O livro é bem-humorado e interpreta situações do dia a dia na prática do desenvolvimento de interfaces e também aborda formas eficientes de utilizar textos na web.
Especificamente sobre o uso da tipografia, há o 'Tipografia: origens, formas e uso das letras' de Paulo Heitlinger em que o autor discute a funcionalidade e estética das letras.