design de informação 3

Prévia do material em texto

DESIGN DA INFORMAÇÃO 
AULA 3 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Profª Caroline Winkelmann 
 
 
2 
CONVERSA INICIAL 
Vindo das aulas anteriores, construindo conhecimento sobre este campo 
do Design, linguagem e cognição, nesta aula refletiremos sobre como projetar 
a informação, traduzindo conteúdo para uma linguagem visual. 
O objetivo desta aula é aprender como pensar e projetar a informação 
de maneira visual, indo do planejamento e organização do conteúdo até sua 
representação em uma composição visual. Para isto, vamos primeiro abordar 
considerações funcionais e estratégicas a serem pensadas antes de partirmos 
para um layout. Após esta etapa de planejamento, veremos como traduzir o 
conteúdo de acordo com o que foi planejado, considerando algumas questões 
como a cor e a tipografia. 
CONTEXTUALIZANDO 
O design da informação se caracteriza, em parte, como método para 
informar um conteúdo específico para o usuário. Dada esta característica, não 
seria incomum perceber que algumas questões de metodologia e estratégia já 
comuns no design podem ganhar corpo ou serem usadas como ferramenta 
para a informação. Não há, no entanto, regras absolutas: o interessante é 
construir um repertório de possíveis ferramentas, mídias e técnicas para 
entender o usuário e seu contexto e, com isso, projetar da maneira mais eficaz 
possível. Hoje, o que desenvolveremos são reflexões sobre algumas coisas 
que são prudentes avaliar quando o objetivo é informar. 
O trabalho com informação pode tomar diferentes formas. Em aplicativos 
de delivery, o usuário consegue manipular os dados que precisa, como custo 
da refeição ou tempo de entrega. Neste caso, cabe ao designer desenvolver 
uma interface que facilite essa transição e observação de muitos dados ao 
mesmo tempo. Em um projeto de sinalização, o usuário deve transitar pelo 
ambiente de maneira natural, intuitiva, mesmo que possa não ter pleno 
conhecimento de tudo que um parque, hospital, cidade, shopping ou qualquer 
que seja o local possa oferecer. Com este tipo de projeto, o desafio pode ser 
imaginar e sugerir quais caminhos os transeuntes farão e garantir que o 
encontro de pontos relevantes, como banheiros, seja facilitado. Já placas de 
advertência, especialmente quando há risco de vida (por eletrocussão, por 
exemplo), ou orientações para emergências precisam estar e serem muito 
 
 
3 
visíveis, sem margens para acidentes. Nesse tipo de comunicação, o essencial 
é uso de todos os artifícios possíveis (cores chamativas, ícones, tipografia 
legível, entre outros) para chamar a atenção e serem imediatamente 
compreendidas. 
TEMA 1 – CONTEXTO DE USO 
O designer não deve se limitar aos processos gráficos. Deve abranger 
todo processo organizacional do projeto e da informação, incluindo a pesquisa 
sobre o público, o contexto de uso, a mídia e afins (Frascara, 2004, p. 98). 
Uma das primeiras coisas a ser considerada quando for planejar a 
execução de um material informativo é o seu contexto de uso, em que 
circunstâncias o usuário vai acessar aquela informação. Algumas questões que 
devem ser consideradas incluem a familiaridade com o material, seu tempo de 
uso, se é algo para situações emergenciais ou não, entre outros. É uma 
informação a ser consultada? Ou é uma informação nova a ser estudada por 
período prolongado? Para Pettersson (2012) e para Twyman (1985), o contexto 
e circunstância de uso serem pautados na construção do material influencia, 
inclusive, a eficácia da comunicação. 
Para exemplificar o contexto de uso, observe o material gráfico a seguir 
(Figura 1), que contém uma série de instruções em linguagem pictográfica e 
esquemática, orientando procedimentos em caso de emergência para viajantes 
de avião. Este tipo de material costuma estar disponível para os passageiros 
nos aviões, ficando acessível para a leitura durante a viagem. Estando nos 
bancos dos passageiros, também é um material de acesso rápido em caso de 
emergências. 
 
 
 
4 
Figura 1 – Material com instruções em caso de emergências em viagens de 
avião. A primeira fileira de instruções se refere à “pouso de emergência”. A 
seguir, o texto indica as instruções para “evacuação na água” 
 
Crédito: T.B. photo/Shutterstock. 
Perceba que, neste material, as escolhas estéticas foram feitas para 
uma leitura rápida, independente de idioma (excluindo o texto no canto superior 
esquerdo), com uso estratégico das cores. O desenho simplificado com os 
objetos mencionados com destaque em amarelo e as instruções em vermelho 
facilitam a leitura rápida em uma situação emergencial, em que o usuário 
precisa compreender tudo muito rapidamente. 
Este material possui, no entanto, algumas questões a serem revistas 
pensando no uso internacional, como parece ser o caso, já que o texto 
referente às instruções está em inglês e em língua árabe. Sendo um material 
cujo contexto de uso é internacional, seria relevante o uso de números ou 
letras para orientar a ordem de leitura das instruções. Neste caso, parece ser 
assumida a leitura da esquerda para a direita, como é o padrão ocidental de 
leitura. Outras culturas leem da direita para a esquerda, como é o caso da 
escrita árabe. As instruções serão lidas por cada usuário, como é o padrão de 
leitura aprendido por este, estando em linguagem verbal ou linguagem pictórica 
e esquemática. Por este motivo, no caso deste exemplo, é fundamental a 
 
 
5 
análise do contexto de uso. Para um usuário cujo padrão de leitura seja da 
direita para a esquerda, a falta de ordenação dos passos pode atrasar ou até 
impossibilitar a compreensão deste material, que, aparentemente, deveria se 
adequar para um uso mais amplo. 
TEMA 2 – TIPOS DE INFORMAÇÃO 
Retomando o que foi visto na aula anterior, devemos reconhecer como 
designers atuam na manipulação do conteúdo na comunicação de 
informações. Isto implica analisar como representar determinados dados e o 
que é relevante em determinado material. Nas palavras de Katz (2012, p. 33), 
saber como algo é não é a mesma coisa de saber como aquilo funciona. Parte 
do trabalho do designer de informação é filtrar e organizar os dados, o que dá 
certa autoria ao profissional, coisa de imensa responsabilidade, a depender do 
que está sendo tratado. É preciso estratégia para projetar o tipo de informação 
a ser trabalhado e como apresentar apenas o essencial sem descontextualizar 
e gerar desinformação ou ruído na comunicação. 
Considere a produção de uma peça gráfica de suporte para material 
didático sobre o sistema digestivo. Como você faria este tipo de projeto para 
uma apostila de uso no curso de medicina? E se fosse para uma apostila do 
ensino fundamental? É um material para compreender como este sistema 
funciona ou como ele é? Caso seja uma peça apenas para demonstrar o 
funcionamento, é possível usar alguma metáfora visual ou o realismo da 
representação deve estar presente? 
O mapa do metrô de Londres (Figura 2) projetado por Harry Beck em 
1931 é um case interessante da área. Este, na realidade, é um diagrama 
simplificado que conta com as informações resumidas de acordo com o que é 
necessário para alguém se informar sobre o transporte público. Para orientação 
de passageiros sobre as linhas do metrô, este modelo resume as informações 
que são necessárias e as distorce, a fim de simplificar a visualização, 
facilitando assim compreensão dos trajetos feitos por cada linha pela cidade. 
Porém, se este mapa fosse usado no planejamento urbano ou para ensino de 
geografia, o modo como o conteúdo foi apresentado caracterizaria 
desinformação. 
 
 
 
6 
Figura 2 – Mapa do metrô de Londres desenhado por Harry Beck (1931) 
 
Crédito: T.B. photo/Shutterstock. 
Geograficamente, as estações do metrô e seu itinerário não se 
acomodam de um jeito tão cartesiano, tendo rotas retas e diretas. Veja que as 
indicações do mapa sinalizam de maneira muito linearo caminho das linhas do 
metrô. Neste caso, a simplificação e distorção da informação do trajeto foi 
benéfica e importante para dar ao usuário o dado que ele precisa de maneira 
rápida e simples. O mapa geograficamente correto poderia exigir mais tempo 
dos transeuntes, tentando interpretar as direções das linhas. Já o diagrama de 
Harry Beck apresenta a informação do trajeto das linhas de metrô de maneira 
rápida e simples. 
TEMA 3 – TRABALHANDO COM A INFORMAÇÃO 
O tipo de informação que quer se representar, e seu contexto de uso, 
guia o tipo de representação visual que será usada na composição visual. Além 
de se saber o que está sendo exposto e em que contexto, o designer deve 
considerar o repertório visual do seu público para projetar as representações 
visuais mais adequadas para o conteúdo. 
 
 
7 
É preciso atenção para não distorcer a interpretação dos dados ou os 
representar de uma maneira incorreta, dificultando sua compreensão. 
Representar informações de tempo não é a mesma coisa que representar 
informações de causa e consequência, por exemplo. Pensando nestes 
requisitos, podemos planejar qual configuração melhor se adapta ao conteúdo. 
Talvez você esteja pensando na representação de dados quantitativos 
representados em gráficos de barra ou de pizza. No entanto, a representação 
visual não se limita a dados numéricos e estatísticos. Roam (2008, p. 96-107) 
propõe um esquema para planejar a apresentação visual de informações que 
chama de SQVID (Simple, Quality, Vision, Individual atributes, Delta). Esta sigla 
é traduzida como “Simplicidade, Qualidade, Visão, Atributos Individuais e 
Delta”. Por Delta, o autor se refere ao símbolo grego Delta (Δ), que representa 
“mudança”. A legenda serve ao propósito de orientar cinco variáveis a serem 
ponderadas quando queremos explicar algo através do desenho, sendo estas: 
a) Simplicidade ou elaboração: Demonstração de algo simples ou de algo 
elaborado. Se o que queremos apresentar precisa ser interpretado em 
um contexto ou pode ser visto isolado; 
b) Qualitativo ou quantitativo: Dados referentes à qualidade de algo, 
suas características ou dados numéricos e estatísticos; 
c) Visão ou execução: Apresentação de um exemplo ou dos 
procedimentos para realização de alguma coisa, como exemplo na 
Figura 3; 
d) Atributos individuais ou comparação: Abordar as características de 
algo ou fazer a comparação de diferentes objetos; 
e) Mudança ou status quo: Representação de algo como é ou suas 
transformações. 
 
 
 
8 
Figura 3 – Execução: como preparar café com a prensa francesa em cinco 
passos ilustrados 
 
Crédito: Andy Chipus/Shutterstock. 
Além destas considerações, pode-se contemplar o que determinado 
conteúdo ou informação quer responder ou explicar. As seis perguntas básicas 
a serem respondidas, de acordo com Roam (2008, p. 134-136), são: 
a) Quem: Representação qualitativa de alguém; 
b) Quanto: Representação quantitativa de números em gráficos, por 
exemplo; 
c) Onde: Posição no espaço geográfico em mapas; 
d) Quando: Posição no espaço temporal com linhas do tempo; 
e) Como: Causa e efeito, representados em diagramas; 
f) Porquê: Dedução e predição. 
Essas representações podem acontecer de maneira isolada ou 
simultânea, a depender do conteúdo e de sua complexidade. 
Você pode conhecer diversas maneiras de representar diferentes dados 
e informações pelo Projeto Dataviz. 
TEMA 4 – HIERARQUIA DA INFORMAÇÃO 
Parte do pensamento durante um projeto gráfico informativo, e que ajuda 
a traduzir o conteúdo em algo visual, são a organização, categorização e, 
principalmente, a hierarquia da informação. No caso de conteúdos complexos, 
a categorização e organização dos dados e informações facilitam a leitura do 
público. A hierarquização estipula uma ordem de leitura e/ou de importância, 
guiando o processo cognitivo do usuário. 
Este planejamento se transpõe no material gráfico, de acordo com o uso 
de recursos como texto em diferentes pesos e escala, ou com cores para 
https://www.shutterstock.com/pt/g/chipus
 
 
9 
contraste, numeração para ordem de leitura, posicionamento no layout, entre 
outros. Inclusive, para Coates & Ellis (2014, p. 66), a organização da 
informação deveria ser o primeiro passo da estruturação da composição visual. 
Como foi visto no tema anterior, o conteúdo pode ser acessado dentro 
de diferentes contextos, simbolizar diferentes tipos de informação e responder 
diferentes questões. Organizar e categorizar o conteúdo é a etapa fundamental 
em que o designer avalia estas questões e planejar como fará a tradução do 
conteúdo para a forma visual. Esta etapa é estratégica pois a própria 
organização e categorização das informações guia sua hierarquização e, 
consequentemente, a composição visual. 
Com isto feito, é possível hierarquizar o conteúdo. A hierarquização 
pode ser usada tanto para guiar a leitura do usuário, como para destacar 
alguma informação mais relevante, ou ainda para chamar a atenção do 
usuário. 
Figura 4 – Hierarquia da informação: o peso e tamanho das tipografias e a 
numeração dos blocos de leitura da página direita cumprem o papel de orientar 
a ordem de leitura do usuário 
 
Crédito: MITstudio/Shutterstock. 
 
 
10 
Como é colocado por Frascara (2004, p. 93), “a organização de um 
projeto de design é um problema de design”. A parte de comunicação e 
visualização são o estudo do problema e o desenvolvimento de estratégias de 
acordo com os objetivos do projeto. O mapeamento e organização do conteúdo 
acontece de acordo com cada projeto, visto que diferentes projetos e diferentes 
públicos terão diferentes necessidades e requisitos. 
TEMA 5 – ASPECTOS GRÁFICOS 
Tendo a parte de planejamento, vista nos temas anteriores, 
concretizada, o designer pode projetar a composição visual da informação. 
Com a experiência, a tendência é fazer isto até de maneira intuitiva, ou nas 
palavras de Frascara (2004, p. 2), com “uso instruído da intuição”. Aspectos 
gráficos como formas, ícones, cores, estilos e até o uso da tipografia são 
poderosas ferramentas neste momento. Como já havia sido colocado, a 
estética, para o design da informação, é uma ferramenta para a comunicação. 
Um caso interessante para pensarmos neste tema foi levantado por Katz 
(2012, p. 45-47): a representação da pirâmide alimentar. A forma triangular 
elenca os grupos alimentares a serem consumidos e em qual quantidade pode 
implicar a ideia de “superioridade” para grupos alimentares posicionados no 
topo, mesmo que não seja esta a intenção. 
Uma alternativa para a representação dos grupos alimentares como 
partes igualmente importantes da alimentação poderia ser a sua representação 
em um gráfico circular. O uso desta forma permite a visualização dos grupos 
alimentares como partes de um todo, como está exemplificado na Figura 5. 
Além disto, apropria-se de uma forma que relacionamos à comida, ao prato e 
deixa mais intuitiva a visualização da proporção de cada grupo alimentar que é 
aconselhável consumir. 
 
 
 
11 
Figura 5 – Roda alimentar simbolizando os grupos alimentares 
 
Crédito: ilusmedical/Shutterstock. 
O exemplo da Figura 1, visto no tema 1 desta aula, mostrava um uso 
moderado de cor para ressaltar apenas as informações necessárias. A cor é 
um aspecto gráfico de extrema relevância para a informação. Não só por 
escolhas estéticas para simplificar e direcionar o conteúdo, como no caso da 
Figura 1, como também por ser um elemento com significados próprios por si 
só. 
Além dos fatores culturais que guiam a interpretação da cor – e que 
devem ser levados em conta no projeto –, alguns usos da cor já são 
convencionados, e este é outro ponto importante no planejamento da 
comunicação. Imagine uma placa de “pare” em outra cor que não o vermelho, 
por exemplo. O uso de convenções, inclusive da cor, auxilia na compreensão. 
A cor pode ser usada para categorizar elementosdo conteúdo e facilitar 
a navegação do usuário entre diversas categorias de informação. O uso 
consistente de uma mesma cor para representar partes de uma interface digital 
interativa, como botões em sites e aplicativos, facilita a navegação do usuário. 
 
 
12 
Figura 6 – Interface digital de aplicativo com uso consistente de cores para 
informar o usuário partes interativas do layout 
 
Crédito: AlexanderTrou/Shutterstock. 
Perceba na Figura 6 como o laranja e o roxo foram usados, junto do uso 
consistente da forma de retângulos com cantos arredondados, para demarcar 
partes do layout em que o usuário pode “clicar”, enquanto áreas de 
preenchimento ficam destacadas em branco. 
Retomamos aqui um ponto visto na aula anterior: a comunicação visual 
pode persuadir ou informar, e materiais gráficos podem acomodar estes dois 
objetivos. Nestes casos, é necessário cuidado para não gerar ruído na 
comunicação ao usar um mesmo aspecto para organização e para decoração. 
Pettersson (2012, p. 55) reforça que “deve ser sempre claro e fácil para o 
receptor quando a cor e a tipografia são usadas para decoração e quando o 
uso deve ter alguma importância cognitiva”. 
Sobre a tipografia, Lupton (2013, p. 83) afirma que: 
O texto pode ser visto como um objeto – impávido e robusto – ou 
como um fluido derramado nos continentes da página e da tela. [...] 
Os designers abrem caminhos para dentro – e para fora – do fluxo de 
palavras, quebrando o texto em partes e oferecendo atalhos e rotas 
alternativas através da massa de informação. [...] a tipografia auxilia 
os leitores a navegarem pela correnteza do conteúdo. Eles podem 
procurar um dado específico ou esforçar-se para processar 
rapidamente um volume de conteúdo e dele extrair elementos para 
uso imediato. Embora muitos livros vinculem o propósito da tipografia 
à melhoria da legibilidade da palavra escrita, uma das funções mais 
refinadas do design é de fato ajudar os leitores a não precisar ler. 
Em outras palavras, o uso da tipografia deve propiciar a compreensão 
do conteúdo mesmo quando um leitor visualiza rapidamente o material, apenas 
 
 
13 
“passando os olhos” pelo conteúdo. Organizar o texto a fim de facilitar a leitura, 
com adequação de tamanho de fonte, espaço entrelinha, tamanho das linhas 
em si, contraste e respiro etc., é tão relevante quanto trabalhar diferentes 
pesos e tamanhos de uma fonte para hierarquizar a informação e esquematizar 
a leitura. Essa esquematização permite o “não precisar ler” citado por Lupton, e 
permite que o material possa ser consultado rapidamente se necessário. O uso 
estratégico da tipografia permite agilidade na leitura e rápido entendimento da 
hierarquia da informação, como pode ser visto na Figura 7, comparando o 
mesmo conteúdo trabalhado de diferentes maneiras. 
Figura 7 – Hierarquia da informação estabelecida apenas com uso da tipografia 
 
Fonte: Winkelmann, 2021. 
Provavelmente, você já tentou consultar a bula de algum medicamento 
para encontrar alguma informação específica e se frustrou ao desdobrar uma 
folha repleta de texto sem uma hierarquia clara. A depender do caso e da 
medicação, a falta de design da informação das bulas pode ainda agravar 
riscos de vida para os usuários, como em situações em que é preciso encontrar 
o que fazer em caso de sobredose – é uma informação que precisa ser 
encontrada com urgência e acaba “camuflada” diante de tantas outras em um 
bloco de texto corrido. 
 
 
14 
Por fim, é preciso ressaltar que é indispensável para comunicação de 
informações considerar diferentes requisitos que diferentes usuários possam 
ter, como o daltonismo ou baixa visão. Por isto, questões de usabilidade e 
acessibilidade serão vistas dentro de temas específicos nas próximas aulas, 
mesmo que estes assuntos não tenham entrado na discussão na presente 
aula. 
TROCANDO IDEIAS 
Comentamos, nesta aula, como organizar, hierarquizar e pensar 
visualmente a informação. Vamos debater com os colegas no fórum online o 
conteúdo aprendido hoje através da análise de materiais gráficos. Procure ao 
menos um exemplo de interface aplicativo, embalagem ou página inicial de 
algum site e avalie o uso das cores, tipografia, grid e formas. As cores estão 
categorizando algo ou são decorativas? A tipografia foi usada para hierarquizar 
a informação? O grid colabora para a leitura ou visualização do conteúdo? Há 
alguma informação em destaque? Que formas estão presentes na composição 
visual? São decorativas ou informam algo? 
Compartilhe suas impressões sobre como os aspectos gráficos foram 
usados em favor (ou não) da informação. Colabore também com as avaliações 
dos colegas, complementando o que cada um analisou. 
NA PRÁTICA 
Solicitamos para a atividade desta aula a construção de um perfil 
ilustrado para uma revista ficcional. A partir das respostas básicas de Roam 
(2008) vistas no tema 3, você deve organizar, categorizar e configurar o perfil 
de uma personalidade da história do Design da Informação para a revista, e a 
partir daí projetar uma página A4 (210x297mm) como julgar necessário. O texto 
com o conteúdo pode ser replicado inteiramente ou ser usado em partes, 
dependendo do seu projeto. A seguir, o texto que seu colega jornalista da 
revista imaginária enviou para a produção do material: 
“Florence Nightingale foi uma enfermeira e estaticista britânica do Século 
XIX. Durante seu serviço cuidando de soldados feridos na Guerra da Criméia 
(1853-1856), Nightingale registrou dados sobre as mortes e protocolos de 
atendimento nos cuidados médicos. Após estes eventos, Florence percebeu 
 
 
15 
que a taxa de morte dos soldados era influenciada pelas condições sanitárias 
dos hospitais, tendo menor mortalidade com maior cuidado sanitário. Se tornou 
famosa no campo do Design da Informação por apresentar estes dados de 
maneira visual, uma atitude pioneira na época. Usou de um gráfico de pizza 
adaptado, que hoje chamamos de Nightingale Rose Graph (ou, gráfico de rosa 
Nightingale)”. 
Se achar necessário, consulte os conteúdos das aulas anteriores, sobre 
tipos de linguagem gráfica, Gestalt e ISOTYPE, para auxiliar o seu projeto. 
FINALIZANDO 
Nessa aula, estudamos como pensar a informação de maneira visual. 
Projetar o conteúdo de maneira estratégica envolve ponderar contexto de uso, 
tipo de informação e como a representar antes do desenvolvimento da 
composição visual. Ao longo dos temas, desenvolvemos os tópicos 
relacionados ao planejamento de projetos gráficos com conteúdo informacional: 
o contexto de uso, o tipo de conteúdo a ser trabalhado, como representar estas 
informações e como usar de alguns aspectos gráficos para o design destas 
informações. 
Na produção de materiais gráficos com objetivo de informar, é 
importante planejar com atenção a organização do conteúdo e observar bem o 
contexto de uso do material; afinal, estes requisitos interferem na composição 
visual. Nesta aula, pudemos ver como a estética pode ser usada como uma 
ferramenta da informação. Isso transparece quando considerado que o uso de 
cores, grid, peso visual e escolhas tipográficas guiam a leitura de um usuário. 
As cores ainda possuem próprios significados ou ainda aumentam ou 
diminuem a atenção para informações específicas. 
Nas próximas aulas, com base neste repertório construído até agora na 
disciplina, vamos estudar infografia, visualização de dados, wayfinding, 
sequências pictóricas de procedimento e tantas outras possibilidades de 
trabalho com o design da informação. 
 
 
 
16 
REFERÊNCIAS 
COATES, K; ELLISON, A. An introduction to Information Design. London: 
Laurence King Publishing, 2014. 
FRASCARA, J. Communication design: principles, methods, and practice. 
Allworth Communications, Inc., 2004. 
KATZ, J. Designing Information: human factors and common sense in 
information design. New Jersey, Published by John Wiley & Sons, Inc. 
Hoboken, 2012. 
LUPTON,E. Pensar com tipos. 2. ed. São Paulo: Cosac Naify, 2013. 
PETTERSSON, R. It Depends: Principles and Guidelines. Viena: Internacional 
Institute For Information Design, 2012. 
ROAM, D. The back of the napkin: solving problems and selling ideas with 
pictures. Nova Iorque: Penguin Group, 2008. 
TWYMAN, M. Using pictorial language: a discussion of the dimensions of the 
problem. In: DUFTY, T. M.; WALLER, R. (eds.). Designing usable texts. 
Orlando: Academic Press, 1985, p. 245-312.