{"id":191,"date":"2009-07-18T17:58:38","date_gmt":"2009-07-18T20:58:38","guid":{"rendered":"http:\/\/www.dialeticavisual.com.br\/?p=191"},"modified":"2010-04-22T22:25:25","modified_gmt":"2010-04-23T01:25:25","slug":"entrevista-legibilidade-na-web","status":"publish","type":"post","link":"https:\/\/blumenthal.com.br\/d\/2009\/entrevista-legibilidade-na-web","title":{"rendered":"legibilidade na web"},"content":{"rendered":"

Entrevista concedida \u00e0 revista webdesign<\/a> para a reportagem: legibilidade na web [pdf]<\/a>, Mar\/09.<\/p>\n

\n

1 – Quais s\u00e3o os principais fatores que exercem influ\u00eancia na leitura visual de conte\u00fados digitais?<\/p>\n

Conte\u00fados digitais normalmente s\u00e3o consumidos em concorr\u00eancia com outros atrativos por estarem na web\/pc\/mobile, onde temos uma vasta gama de possibilidades para dispers\u00e3o.<\/p>\n

Ao navegar, estamos sempre “com pressa”, com frequ\u00eancia praticamos a leitura gen\u00e9rica e apenas se o conte\u00fado nos prender, damos aten\u00e7\u00e3o espec\u00edfica. Esse comportamento j\u00e1 \u00e9 bastante conhecido e por isso devemos preparar conte\u00fados digitais para nos comunicar na forma mais breve, simples e incisiva poss\u00edvel.
\nDessa forma, a tend\u00eancia de se utilizar “menos” tamb\u00e9m se aplica ao conte\u00fado.<\/p>\n

\u00c9 pertinente lembrar que a leitura de textos na tela n\u00e3o \u00e9 uma pr\u00e1tica confort\u00e1vel, assim, podemos facilitar essa tarefa, se evitarmos uma disposi\u00e7\u00e3o em que os textos atravessam a tela de ponta a ponta.<\/p>\n

O uso de colunas, bem como quebrar o conte\u00fado em partes menores e utilizar t\u00f3picos em listas sempre que poss\u00edvel, s\u00e3o alguns recursos \u00fateis para buscar maior clareza na apresenta\u00e7\u00e3o dos textos e torn\u00e1-los mais atraentes.<\/p>\n

Al\u00e9m da legibilidade, temos que prover uma boa ‘leiturabilidade’, ou seja, garantir um bom n\u00edvel de flu\u00eancia durante a leitura dos elementos visuais da interface, buscando uma composi\u00e7\u00e3o consciente e equilibrada.<\/p><\/blockquote>\n

2 – Um dos caminhos para garantir uma boa legibilidade em uma interface \u00e9 a aplica\u00e7\u00e3o de espa\u00e7amentos e margens, al\u00e9m do adequado alinhamento dos objetos. De que maneira estes “conceitos” devem ser aplicados na concep\u00e7\u00e3o de uma interface?<\/p>\n

Utilizar corretamente as \u00e1reas “em branco” \u00e9 fundamental. Quando exploramos bem as \u00e1reas sem conte\u00fado, conseguimos destacar com maior facilidade as \u00e1reas de Informa\u00e7\u00e3o. \u00c1reas de respiro protegem os elementos de informa\u00e7\u00e3o e acomodam o olhar durante a leitura.<\/p>\n

O uso de grids tamb\u00e9m \u00e9 um recurso inteligente para uma boa disposi\u00e7\u00e3o dos elementos na interface.<\/p><\/blockquote>\n

3 – Outra quest\u00e3o fundamental envolve a escolha do tamanho da fonte e da fam\u00edlia tipogr\u00e1fica a ser utilizada no projeto. Em termos de legibilidade, o que deve ser levado em considera\u00e7\u00e3o na hora de se definir esta etapa no processo de cria\u00e7\u00e3o?<\/p>\n

\nAtualmente \u00e9 comum resolu\u00e7\u00f5es 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\u00e7\u00f5es sejam rapidamente not\u00e1veis. Dessa forma, podemos, apenas com o uso da tipografia, hierarquizar o conte\u00fado visualmente.<\/p>\n

Ao escolher uma fam\u00edlia, devemos ter aten\u00e7\u00e3o se ela foi projetada em determinadas formata\u00e7\u00f5es (bold\/italic). Quando uma fonte n\u00e3o tiver algumas dessas varia\u00e7\u00f5es, for\u00e7\u00e1-las pode trazer um resultado visualmente impreciso. \u00c9 o que chamamos de “Faux Bold and Italics”.<\/p>\n

Ao atribuir certas fam\u00edlias tipogr\u00e1ficas em textos com corpo reduzido pode fazer com que detalhes fiquem serrilhados, pois n\u00e3o se encaixaram perfeitamente na grade de pixels da tela. Neste caso, utilizar fontes n\u00e3o-serifadas (menor \u00edndice de detalhes gr\u00e1ficos nos tipos) ou projetadas especificamente para m\u00eddia digital s\u00e3o alternativas para se precaver de um resultado indesejado.<\/p><\/blockquote>\n

4 – N\u00e3o podemos nos esquecer ainda do contraste de cores a serem utilizadas como plano de fundo e no uso das fontes. Em rela\u00e7\u00e3o \u00e0 percep\u00e7\u00e3o visual na web, quais seriam as recomenda\u00e7\u00f5es na hora de se definir a combina\u00e7\u00e3o crom\u00e1tica de um site?<\/p>\n

Uma boa pr\u00e1tica \u00e9 utilizar paletas com n\u00famero reduzido de cores, com isso adquirimos com maior facilidade harmonia e consist\u00eancia gr\u00e1fica da interface como um todo.<\/p>\n

Cores reagem de maneiras diferentes quando utilizadas em conjunto (contraste simult\u00e2neo), portanto, ao defin\u00ed-las devemos evitar vibra\u00e7\u00f5es no contato entre as cores selecionadas. Um exemplo comum \u00e9 o vermelho e verde, que, dependendo dos tons, podem apresentar vibra\u00e7\u00f5es que geram desconforto visual quando justapostas.<\/p>\n

Dar aten\u00e7\u00e3o espec\u00edfica para a sele\u00e7\u00e3o das cores \u00e9 essencial para adquirir um bom n\u00edvel de legibilidade, al\u00e9m de contribuir com a acessibilidade do projeto.<\/p><\/blockquote>\n

5 – Quais s\u00e3o os erros mais comuns que podem prejudicar a legibilidade de um projeto interativo?<\/p>\n

\u00c9 bastante comum encontrar interfaces que n\u00e3o priorizam visualmente as informa\u00e7\u00f5es de forma clara. As partes mais importantes do conte\u00fado devem ser facilmente notadas e nem sempre essa organiza\u00e7\u00e3o \u00e9 feita com cuidado.<\/p>\n

O uso inadequado de cores, contrastes, texturas (imagens), entre outros, s\u00e3o vistos todos os dias, al\u00e9m da frequente pr\u00e1tica de saturar a interface com elementos decorativos, na maioria das vezes, desnecess\u00e1rios.<\/p><\/blockquote>\n

6 – Que tipo de testes voc\u00ea costuma realizar para medir a legibilidade de um projeto interativo?<\/p>\n

Um m\u00e9todo emp\u00edrico que utilizo com frequ\u00eancia \u00e9 visualizar o projeto em tons de cinza, assim, consigo analisar contrastes sem a interfer\u00eancia das cores. Testes b\u00e1sicos em diferentes OSs e browser tamb\u00e9m garantem a legibilidade em diferentes ambientes.
\nMas o teste que considero o mais importante \u00e9 o coletivo, pedindo opini\u00f5es e, de prefer\u00eancia, analisando rea\u00e7\u00f5es das pessoas usando a interface.<\/p><\/blockquote>\n

7 – Citar dois bons exemplos de projetos interativos com boa legibilidade, justificando o porqu\u00ea de sua escolha.<\/p>\n

A List Apart<\/a> – Site de artigos longos e grande quantidade de informa\u00e7\u00f5es. Em um formato tradicional, mas que com a utiliza\u00e7\u00e3o de linhas e \u00e1reas em branco distingue claramente cada bloco de informa\u00e7\u00e3o.
\nO uso de cores e varia\u00e7\u00f5es tipogr\u00e1ficas para links, t\u00edtulos e outros, \u00e9 bastante sutil e funcional. Informa visualmente a hierarquia do conte\u00fado.<\/p>\n

twistori<\/a> – Minimalista e vibrante, cada cor representa um filtro de sentimento, muito bem definido no menu.
\nCom a utiliza\u00e7\u00e3o do fundo escuro as cores se destacam e agu\u00e7am o sentidos que relacionam a cor selecionada \u00e0s suas sensa\u00e7\u00f5es.
\nO tamanho das fontes torna f\u00e1cil a leitura e faz do texto o \u00fanico elemento de composi\u00e7\u00e3o da interface.<\/p><\/blockquote>\n

8 – Que tipo de bibliografia voc\u00ea indicaria para o profissional que deseja se aprofundar neste assunto?<\/p>\n

Legibilidade \u00e9 a clareza na identifica\u00e7\u00e3o de elementos visuais, n\u00e3o se restringindo apenas ao uso de textos e est\u00e1 diretamente ligado \u00e0 funcionalidade de uma interface. Leituras referentes a diagrama\u00e7\u00e3o, o uso da tipografia como forma e composi\u00e7\u00e3o s\u00e3o recomend\u00e1veis.<\/p>\n

Para quem est\u00e1 come\u00e7ando, um livro bastante abrangente e que trata de assuntos fundamentais da comunica\u00e7\u00e3o gr\u00e1fica de forma objetiva \u00e9 o ‘Sintaxe da Linguagem Visual’, de Donis Dondis. Abrange temas como gestalt, semi\u00f3tica, teoria da cor, tipografia, entre outros.<\/p>\n

J\u00e1 quem quiser uma abordagem mais pr\u00e1tica e simplificada, uma boa pedida \u00e9 o ‘N\u00e3o me Fa\u00e7a Pensar’, do Steve Krug. O livro \u00e9 bem-humorado e interpreta situa\u00e7\u00f5es do dia a dia na pr\u00e1tica do desenvolvimento de interfaces e tamb\u00e9m aborda formas eficientes de utilizar textos na web.<\/p>\n

Especificamente sobre o uso da tipografia, h\u00e1 o ‘Tipografia: origens, formas e uso das letras’ de Paulo Heitlinger em que o autor discute a funcionalidade e est\u00e9tica das letras.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Utilizar corretamente as \u00e1reas “em branco” \u00e9 fundamental. Quando exploramos bem as \u00e1reas sem conte\u00fado, conseguimos destacar com maior facilidade as \u00e1reas de Informa\u00e7\u00e3o.
\n[ … ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52,5,6,8],"tags":[34,71,48,49,72],"class_list":["post-191","post","type-post","status-publish","format-standard","hentry","category-1st-life","category-artigos","category-design","category-long","tag-midia","tag-revista","tag-tipografia","tag-type","tag-webdesign"],"_links":{"self":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts\/191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/comments?post=191"}],"version-history":[{"count":9,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts\/191\/revisions"}],"predecessor-version":[{"id":429,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts\/191\/revisions\/429"}],"wp:attachment":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/media?parent=191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/categories?post=191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/tags?post=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}