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

Atualizado: há 2 dias



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 confus