• Lygia Canelas

Alguns princípios para uma ótima experiência da leitura na web



Esse post traz um pouco de design pra quem não é designer e um pouco de técnica jornalística pra quem não é jornalista, e foi escrito pra quem precisa organizar texto e elementos visuais em uma tela ou página, seja impressa ou digital.


E por que isso é importante? Ao conhecer e aplicar alguns princípios básicos do design em conteúdos impressos ou digitais é possível melhorar a experiência da leitura em relação a serviços e produtos, como por exemplo:


  • manuais

  • tutoriais

  • comunicados

  • regulamentos

  • cartazes

  • mensagens de e-mail

  • atendimento presencial

  • atendimento virtual

  • entre outros


Todes nós, produzimos conteúdo textual em nossa comunicação diária: mensagens em aplicativos, emails, posts em redes sociais, documentos, apresentações, folhetos, comunicados, informativos. Precisamos comunicar essas mensagens de forma clara e objetiva, certo?


Mais do que isso. Os textos e os elementos visuais (imagens, marcadores, figuras e legendas etc) precisam de uma organização estratégica para que a informação seja lida, compreendida e aplicada.


Esse trabalho de organizar os elementos em uma página é chamado de diagramação, é um conceito de design.


Para ser satisfatória, a experiência do usuário durante a leitura deve considerar um design que captura a atenção, controla o movimento dos olhos, transmite as informações além de evocar emoções positivas.


Uma das primeiras coisas que você precisa aprender para organizar os elementos visuais e textuais é a lógica de agrupar informações por semelhança, ou seja, agrupar aquilo que está relacionado.


Pessoas bibliotecárias terão facilidade pra entender esse conceito, pois já estudaram sobre vocabulários controlados e categorizações.



1. Proximidade


Vamos falar do primeiro princípio, a Proximidade. Veja o exemplo abaixo de lista de higiene para alguém que vai viajar:


  • shampoo

  • condicionador

  • secador

  • elástico de cabelo

  • lixa para unhas

  • necessaire

  • creme de depilação

  • maquiagem

  • demaquilante

  • sabonete para rosto

  • sabonete para o corpo

  • pente

  • repelente

  • protetor solar

  • bandaid

  • aspirina

  • removedor de esmalte

  • pinça

  • escova de dentre

  • enxaguatório bucal

  • perfume

  • cortador de unha

  • esmaltes

  • batom

  • cotonete

  • fio dental


As informações, ou seja, todos os elementos da lista estão juntos e dessa forma fica difícil identificar qual a relação entre eles. Porém, podemos separar essa lista visualmente em grupos.

  • necessaire


  • shampoo

  • condicionador

  • secador

  • elástico de cabelo

  • pente


  • maquiagem

  • batom

  • demaquilante

  • perfume


  • creme de depilação

  • pinça


  • sabonete para rosto

  • sabonete para o corpo

  • cotonete


  • fio dental

  • escova de dentre

  • enxaguatório bucal


  • bandaid

  • aspirina


  • removedor de esmalte

  • cortador de unha

  • lixa para unhas

  • esmaltes


  • repelente

  • protetor solar


Ainda assim, a lista pede por mais elementos de organização visual, você não acha?



2. Contraste


Contrastar os elementos ajuda e identificá-los e a enfatizar algumas informações. No exemplo abaixo vamos adicionar um nome para cada um dos grupos de informações e enfatizar o nome desses grupos com um pouco mais de contraste.


Lembrar de colocar na necessaire:



Cuidados com o cabelo

  • shampoo

  • condicionador

  • secador

  • elástico de cabelo

  • pente

Cuidados com a pele

  • protetor solar

  • maquiagem

  • batom

  • demaquilante

  • creme de depilação

  • pinça


Cuidados com as unhas

  • removedor de esmalte

  • cortador de unha

  • lixa para unhas

  • esmaltes

Itens de higiene

  • sabonete para rosto

  • sabonete para o corpo

  • perfume

  • cotonete

  • fio dental

  • escova de dentre

  • enxaguatório bucal

É sempre bom ter

  • bandaid

  • aspirina

  • repelente


O item "necessaire" virou elemento de título, pois é um elemento agrupador geral dessa lista. Os demais itens foram agrupados por uma lógica específica que vai ser útil para a proprietária da lista.


Com o destaque em negrito e itálico pode-se identificar imediatamente os grupos de informações na lista. O contraste costuma ser o elemento mais atrativo em uma página. O contraste é responsável por atrair o olhar em primeiro lugar.



3. Repetição


O tipo do contraste se repete em todos os títulos dos grupos, percebe? Isso passa uma ideia de consistência no padrão visual. Outros elementos podem ser repetidos seguindo essa lógica da consistência no padrão visual, como por exemplo: cores, fontes, tamanhos, estilo de ilustração, localização de determinadas informações ou elementos etc.


E então, ficou mais fácil de ler ou procurar as informações agora?



4. Alinhamento


Agora vamos ver esse exemplo, retirado do livro "Design para quem não é designer", da autora Robin Williams.


Exemplo de alinhamento centralizado com baixo contraste. Fonte: Livro Design para quem não é designer. Página 12.

Todas as informações na imagem acima estão muito próximas umas das outras, como se pertencessem a um único bloco, porém, podemos reconhecer que nesse bloco existem pelo menos três grupos de informações distintas. Também estão alinhadas de forma centralizada, o que é não é muito legal.


Ao aproximar os elementos de cada um dos grupos e aplicar um pouco de contraste e alinhamento à esquerda, temos uma nova estrutura muito mais agradável de se ler.



Exemplo de alinhamento à esquerda com alto contraste. Fonte: Livro Design para quem não é designer. Página 12.

Os elementos inseridos em uma página acabam passando uma ideia de conexão visual entre si. É preciso identificar se essa conexão está fazendo sentido e se está agradável de se olhar.



4. 1 Tipos de alinhamento


O alinhamento centralizado geralmente é mais seguro e fácil de ser criado, porém não passa a ideia de um visual interessante de se olhar. Ele é fácil demais, enfadonho...


Os espaços em branco também são elementos estratégicos para ajudar nessa ideia de criar conexão visual, agrupar e alinhar.


O alinhamento passa a ideia de uma unidade coesa. (Robin Willians)

Sobre os espaços em branco: evite deixar o mesmo espaçamento em branco entre os elementos, a menos que façam parte do mesmo conjunto.


Exemplo retirado do livro "Design para quem não é designer":






5. Hierarquização


Organize as informações partindo da ideia da informação mais importante para a menos importante e divida o conteúdo textual em pequenos blocos de informação.


Perceba que dessa forma, o usuário vai ler o conteúdo na ordem de importância que você der para as informações.


Mas também não exagere criando muitos níveis e subníveis de títulos, caso contrário a leitura fica confusa e o visual poluído. Conduza o texto a partir de uma sequência que permita uma leitura fluida.


Uma fórmula bacana pra você seguir é essa aqui que aprendi estudando técnicas jornalísticas e redação para web:


Título: subtítulo
Lide (síntese daquilo que será tratado ao longo do texto. Nesse começo você deve inserir a ideia geral do texto incluindo a conclusão! Isso mesmo! Essa técnica, utilizada principalmente para fisgar os leitores mais apressados, é chamada de pirâmide invertida).
intertítulo 1 (3 a 4 palavras)
bloco magro de texto
intertítulo 2 (3 a 4 palavras)
bloco magro de texto
intertítulo 3 (3 a 4 palavras)
bloco magro de texto

Com esse roteiro o texto fica arrumado, organizado e os intertítulos auxiliam a pausar a leitura e a identificar rapidamente na página os assuntos que de desejar consultar.


Leia também sobre a técnica da pirâmide invertida.



6. Identidade


Ao escolher a fonte, o tamanho, as cores e elementos gráficos, pesquise se existe um padrão de identidade visual a ser seguido na empresa. Se não existir, elabore um padrão e converse com os demais setores, principalmente a área comercial e de marketing, para que se estabeleça um guia de estilo e identidade visual para os conteúdos publicados pela empresa.


A identidade visual carrega as orientações para aplicação de cor, logotipos, fontes, tamanhos, e acaba trazendo de forma intrínseca os princípios e os valores da marca. Estabeleça:


um conjunto de fontes (tipografias), combináveis entre si
o tamanho das fontes para título, subtítulo, intertítulo, legendas, corpo do texto
as cores que representam a marca
os ícones, elementos gráficos e um estilo de ilustração
o logotipo a ser aplicado

Siga esse padrão escolhido ao longo de todo o conteúdo textual e para os demais conteúdos produzidos pelo seu setor, empresa, projeto etc.


7. Cores


Utilize cores escuras em fundos claros, pense nisso na hora de escolher uma cor para o texto para que a leitura não canse os olhos do leitor.


Vou te indicar duas ferramentas que ajudam a testar se o contraste entre as cores escolhidas está adequado:



Indico demais a leitura desse post no canal DesignOn: Manual do Designer: Quando e Como usar Contraste de Cor.




8. Imagens e legendas


Um imagem de qualidade precisa ter nitidez, ou seja, é preciso poder identificar o que tem na imagem sem borrões ou partes que parecem embaçadas.


Não esqueça de identificar na legenda alguma informação sobre a imagem que seja relevante. Não escreva apenas o que se vê na imagem, ninguém quer ler o óbvio. Além de descrever a imagem com o verbo sempre no presente, adicione uma informação sobre o que está sendo visto.


Exemplo:


Fonte: Notícia do Jornal Estadão. em 18-05-2021.



9. Quantidade de texto


Escreva somente o que for necessário. Não há necessidade de rodear o leitor com palavras desnecessárias para parecer formal ou sofisticado.


"A palavra não foi feita para enfeitar, brilhar como ouro falso; a palavra foi feita para dizer”. (Graciliano Ramos).


Algumas dicas podem ser úteis:

  1. Escreva sempre parágrafos curtos, assim você não enrola o leitor nem se enrola com a colocação de vírgulas.

  2. Divida textos longos em blocos magros de texto. Exemplo: esse post aqui que você já está lendo é um exemplo de como fazer isso ; )

Utilize essa contagem de texto abaixo como medida:

  • 250 palavras: cerca de 1 minuto de leitura;

  • 500 palavras: cerca de 2 minutos de leitura;

  • 1.000 palavras: cerca de 5 minutos de leitura;

  • 1.500 palavras: cerca de 8 minutos de leitura;

  • 2.000 palavras: cerca de 11 minutos de leitura;

  • 3.000 palavras: cerca de 16 minutos de leitura.

Não está conseguindo desenvolver sua ideia só com essas medidas?


Talvez você deva pensar em criar outro tipo de conteúdo, como por exemplo, gravar um vídeo sobre o assunto. Ou ainda, escrever um livro, criar um curso, etc.


10. Aplique negrito nos dados relevantes


Seja criterioso, apenas 2 ou 3 dados por parágrafo.


Exemplo: novamente, esse post aqui que você já está lendo é um exemplo de como fazer isso ; )



gif


11. Destaque os links em um mesmo padrão


Deixe os links em azul e sublinhado, esse é um padrão já conhecido e consolidado no modelo mental das pessoas.


Ex.: Saiba mais

(pegadinha, não tem link aqui! rs)



12. Evite siglas ou explique as siglas


Se usar siglas, explique o que elas significam entre parênteses logo após a sigla. Exemplo:


A ABDR (Associação Brasileira de Direitos Reprográficos) está localizada no bairro Paraíso, na cidade de São Paulo.

Se usar a sigla novamente no mesmo texto, não precisa explicar novamente. ; )



13. Evite justificar o texto


Alinhe textos longos, principalmente de artigos e blog posts preferencialmente à direita ou esquerda.



14. Use bullets ou marcadores para listas


Bem, é isso: use bullets ou marcadores para listas. ; )



15. Quando usar o recurso itálico?


"É usado tanto para dar ênfase quanto para advertir o leitor de que uma palavra ou frase pode não lhe ser familiar, seja por ser estrangeira ou por fazer parte de uma grupo de gírias ou expressões específicas: "supervisionaremos o merchandising da empresa" ou "é preciso ler o documento ab integro".


O recurso serve ainda para quando empregamos uma palavra em sentido metalinguístico, ou seja, não por seu significado em si, mas para nos referirmos a suas formas e funções. Você vai entender melhor com estes exemplos: "a palavra juiz começa com j" ou "acadêmico é uma palavra proparoxítona".


Fonte: De onde veio o itálico e qual seu uso correto na escrita (BBC News Brasil).



16. Cuidado com o sublinhado


Não use o recurso sublinhado para destacar, o leitor vai pensar que a palavra é um link.



17. Títulos


Deixe claro visualmente a diferença entre título, substitulo e intertítulos:


Título

Subtítulo


Intertítulo

Corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto corpo do texto


18. Utilize imagens


Insira imagens em meio ao texto para deixar a leitura mais agradável. Observe os direitos de imagem, se preferir, utilize bancos de imagens e vídeos gratuitos.



Sobre ícones:

Sobre comidinhas:

Sobre padrões:

Sobre viagens:


19. Leituras importantes sobre design e diagramação


Tenho duas leituras pra indicar, são livros pra você consultar sempre que precisar realizar um trabalho de formatação ou diagramação de um conteúdo que tenha texto e imagem.


Os dois livros foram escritos em uma linguagem simples e tranquila de ser compreendida por quem é leigo no assunto. Tenho certeza que serão referências muito úteis.


O primeiro livro que indico é o "Design para quem não é designer", eu o acho fantástico, tem ótimas dicas pra quem não entende nada (nadinha mesmo) sobre Design Gráfico.


O livro foi feito justamente para quem precisa cuidar do design de algum conteúdo, mas não tem formação em design.




O segundo livro é o "Espaço em branco não é seu inimigo: guia de comunicação visual para iniciantes em design gráfico, web e multimídia".


Essa é uma leitura mais completa e profundada sobre o tema. No entanto, os dois livros têm vários exemplos visuais, além de índice e glossário ao final, o que ajuda bastante a entendermos o vocabulário utilizado em Design.





Embora tenhamos atualmente várias ferramentas online que trazem templates prontos para gente aplicar em apresentações, cartazes, postagens em redes sociais, etc, nem sempre conseguimos um template ajustado completamente às nossas necessidades ou ao nosso gosto e nem sempre dá tempo de pesquisar por um modelo.


Outro detalhe é que por mais que existem modelos e templates prontos para diagramar conteúdos, é preciso ter o olhar aguçado para identificar qual modelo se adequará melhor ao que você precisa, ao público, ao orçamento disponível rs, entre outras questões.


Bom, até aqui falamos de organizar elementos visuais e textuais, mas se quiser entender como melhorar a linguagem utilizada você provavelmente vai gostar de ler o artigo: Linguagem clara: o que isso tem a ver com Experiência do Usuário?



93 visualizações0 comentário

Posts Relacionados

Ver tudo