Balneabilidade SC infográfico

SISTEMA BARDDAL DE ENSINO
FACULDADE BARDDAL DE ARTES APLICADAS
CURSO DE DESENHO INDUSTRIAL
PROJETO DE PRODUTO E PROGRAMAÇÃO VISUAL

PATRICIA PRADO

DESIGN DE INFORMAÇÃO:
INTERFACE WEB PARA INFOGRÁFICO SOBRE
BALNEABILIDADE NO ESTADO DE SANTA CATARINA

FLORIANÓPOLIS
2012

PATRICIA PRADO

DESIGN DE INFORMAÇÃO:

Trabalho de Conclusão de Curso apresentado como requisito
à obtenção do título de bacharel em Desenho Industrial –
Programação Visual das Faculdades Barddal.

Orientador: Raphael Augustus

FLORIANÓPOLIS
2012
2

PATRICIA PRADO

Este Trabalho de Conclusão de Curso foi julgado
adequado como requisito para obtenção do grau de
bacharel em Desenho Industrial – Programação Visual e
aprovado em sua forma final pelo Curso de Graduação em
Desenho Industrial, da Faculdade Barddal de Artes
Aplicadas.

Florianópolis, 2 de dezembro de 2012.

_______________________________________________
Dulce América de Souza
Prof. Coordenadora do Curso de Desenho Industrial

_______________________________________________
Tatiane Passos
Prof. Coordenador de TCC – Presidente da banca examinadora

_______________________________________________
Carlos Eduardo Senna
Prof. Examinador 1

_______________________________________________
Juliana Silveira Anselmo
Prof. Examinador 2

_______________________________________________
Rafael Augustus Pacheco
Prof. Orientando
3

RESUMO
Para desenvolver a interface de uma infografia que mostre graficamente o índice de
poluição das praias de Santa Catarina explanou-se sobre a história da infografia e sua transição
para o meio digital. Ao percorrer o caminho trilhado pela transição, foi verificada a
possibilidade de linguagens, visualização de dados, conceitos de navegação e usabilidade. Por
fim, foram apresentadas algumas ferramentas possíveis para a construção e aplicação de uma
interface.
Palavras-chave: design de informação, infografia interativa, base de dados, interatividade, interface, visualização de dados, balneabilidade.

4

ABSTRACT
To develop an interface of a computer graphics that show graphically the state of pollution of the beaches of Santa Catarina expounded by the history of computer graphics and its
transition to digital media. However, go up the path trodden by the transition and, therefore,
there was the possibility of languages, data visualization, the concepts of navigation and
usability. Finally, some possible tools are presented for the construction and implementation of
an interface.
Keywords: information design, interactive computer graphics, databases, interactivity,
interface, data visualization, bathing.

5

LISTA DE ILUSTRAÇÕES

Figura 1. Infografia simples.
Figura 2. Representação geográfica e humana.
Figura 3. Ilustração e mapas.
Figura 4. Infográfico: acidente do Titanic.
Figura 5. Versão do aniversário de cem anos do naufrágio do Titanic.
Figura 6. Versão antiga do naufrágio do Titanic.
Figura 7. Gráfico de comparação.
Figura 8. Gráfico de comparação das eleições de 2008 nos EUA.
Figura 9. Visualização de dados do Gapminder.
Figura 10. Primeiro mapa historicamente registrado.
Figura 11. “A criação de Adão”, Michelangelo.
Figura 12. “Última Ceia”, Leonardo da Vinci.
Figura 13. Infografia de Michael van Langren’s.
Figura 15. A morte de Blight.
Figura 16. Fotografias de Eadweard Muybridge.
Figura 17. Fases da transição da infografia impressa para online.
Figura 18. Vôo 3054.
Figura 19. A guerra do século 20.
Figura 20. Ferramentas de visualização de dados
Figura 21. Ferramentas de visualização de dados.
Figura 22. Max Plank Institute.
Figura 23. Processo de formação de um bom infográfico.
Figura 24. Sketch de um infográfico no workshop do Malofiej 20.
Figura 25. Unificação.
Figura 26. Leis da Gestalt.
Figura 27. Elementos da forma.
Figura 28. Elementos da forma com textura.
Figura 29. Suástica.
Figura 30. Modos de Implantação X Variáveis Visuais X Níveis de Organização.
6

Figura 31. Ferramenta do Google aplicada em infográfico do New York Times.
Figura 32. Grupo de ferramentas do Google.
Figura 33. Fragmentação e minimalismo na informação.
Figura 34. Teste visual.
Figura 35. Mapa antigo do metrô de Londres.
Figura 36. Plano do metrô de Londres por Henry Beck, 1933.
Figura 37. Tríade de Pierce.
Figura 38. Desmembramento do signo.
Figura 39. Comparação de uso na web.
Figura 40. Cognição durante a navegação.
Figura 41. Sistema de navegação principal.
Figura 43. Tela inicial da infografia.
Figura 44. Navegabilidade e estética aplicadas em uma infografia.
Figura 45. Tela inicial da infografia.
Figura 46. Imagem de um trecho do vídeo.
Figura 47. Tela inicial da linha do tempo.
Figura 48. Trecho do vídeo sobre design de informação.
Figura 49. Distorções que podem aparecer em um mapa.
Figura 50. Trecho da entrevista com Erik Spiekermann.
Figura 51. Primeira fase da transição da infografia.
Figura 52. Visualização da Agenda Survey 2011.
Figura 56. Profile de Hans Rosling no TED.
Figura 58. Processo criativo da arquitetura da informação utilizada pela Magel.
Figura 59. NYT Labs.
Figura 61. Trecho do vídeo The fundamental elements of design.
Figura 63. Infográfico do jornal ZH sobre a Segunda Guerra.
Figura 64. Contextualização visual dos métodos da infografia impressa.
Figura 65. Relatório online da balneabilidade.
Figura 66. Informação líquida.
Figura 67. Showcase de quatro tipos de configuração do Gmaps.
Figura 68. Showcase de gráficos de bolhas.
7

Figura 69. Bubble Chart com diferenciação de cores.
Figura 70. Esboço e finalização de layout.
Figura 71. Ferramenta Kuler.
Figura 72. Diagrama de estudo tipográfico.
Figura 73. Ícones do Google.

8

LISTA DE SIGLAS
AV: Ambiente Virtual.
BD: Banco de Dados.
DI: Design de Informação.
IHC: Interação Homem-computador.
SBDI: Sociedade Brasileira do Design de Informação.
TI: Tecnologia da Informação.
TICs: Tecnologia da Informação e Comunicação.

9

SUMÁRIO
1. INTRODUÇÃO ........................................................................................................ 12
1.1. PROBLEMÁTICA .............................................................................................. 123
1.2. OBJETIVOS .......................................................................................................... 13
1.2.1. Objetivo Geral ...................................................................................................... 13
1.2.2. Objetivos Específicos ........................................................................................... 13
1.3. JUSTIFICATIVA .................................................................................................. 13
1.4. METODOLOGIA DA PESQUISA ...................................................................... 14
1.5. ESTRUTURAÇÃO DO TRABALHO ................................................................. 14
2. FUNDAMENTAÇÃO TEÓRICA ........................................................................... 15
2.1. INFOGRAFIA ....................................................................................................... 15
2.1.1. História ................................................................................................................. 25
2.2. TRANSIÇÃO E CONVERGÊNCIA DE MÍDIAS ............................................. 31
2.3. FACES DO DESIGN ............................................................................................. 38
2.3.1. Princípios básicos do design gráfico .................................................................... 39
2.3.2. Visualização da informação com bases de dados ................................................. 47
2.3.3. Interpretação da informação ................................................................................. 49
2.4. COGNIÇÃO APLICADA À ARQUITETURA DA INFORMAÇÃO.............. 56
3. REFERENCIAIS DE PROJETO............................................................................ 65
3.1. A bateria da Grande Rio ......................................................................................... 65
3.2. Behavioural Dynamics Institute ............................................................................ 65
3.3. Brasília 50 anos ....................................................................................................... 66
3.4. Design de informação .............................................................................................. 67
3.5. Diagramming/Mapping (complex) information: Theory and Practice .................... 68
3.6. El periodista y los mapas ......................................................................................... 68
3.7. Entrevista com Erik Spiekermann ........................................................................... 69
3.8. Estadão: O vírus da gripe suína ............................................................................... 70
3.9. Global Agenda Survey 2011.................................................................................... 70
3.10. Hans Rosling: profile on TED.com ....................................................................... 71
3.11. Hotsite Brasília 50 anos: como foi construído....................................................... 72
3.12. Map of New York City Police Stops: Interactive Feature ..................................... 73
3.13. Max Planck Research Networks ............................................................................ 74
3.14. Palestra de Moritz Stefaner.................................................................................... 75
10

3.15. The Fundamental Elements of Design................................................................... 75
3.16. Zero Hora: Especial Segunda Guerra .................................................................... 75
4. METODOLOGIA DE PROJETO .......................................................................... 77
4.1. Briefing/Pauta .......................................................................................................... 80
4.2. Apuração e levantamento de dados ......................................................................... 81
4.3. Arquitetura de informação ....................................................................................... 82
4.4. Interface ................................................................................................................... 83
4.5. Legibilidade ............................................................................................................. 85
4.5.1. Estudo de cores .................................................................................................... 85
4.5.2. Estudo de tipografia .............................................................................................. 86
4.5.3. Estudo iconográfico .............................................................................................. 87
4.6. Análise heurística ................................................................................................... 87
5. CONSIDERAÇÕES FINAIS ................................................................................... 89
REFERÊNCIAS............................................................................................................ 90

11

1. INTRODUÇÃO
Desde a concepção do computador pessoal e da inserção da tecnologia na vida cotidiana
das pessoas, muitos parâmetros culturais, sociais, organizacionais e até institucionais vem se
transformando e se adaptando a essa realidade. Essa nova identidade está em processo de
construção. As pessoas ainda estão aprendendo a se envolver nesse universo rico em
informação e, ao mesmo tempo, aprendendo selecionar o que é mais relevante.
Na administração e organização da informação na forma convencional, em meio impresso
ou offline, é de responsabilidade do designer ou artista gráfico a conversão da informação
textual em informação visual, e realizar o que é chamado de infografia.
Essa nomenclatura vem sendo discutida dentro do universo online. Alguns autores
chamam de infografia online, infografia animada, infografia interativa, design de informação
(DI), ou simplesmente infografia – termo que será utilizado neste trabalho.
Em um primeiro momento, a infografia passou por uma transposição, ou seja, migrou do
offline para o online levando apenas o conteúdo estático e usando poucos recursos multimídia,
como, por exemplo, vídeo, áudio e galeria de fotos. Atualmente, a infografia ultrapassou esses
limites e está sendo trabalhada junto à área de Tecnologia da Informação (TI), utilizando
cruzamento de dados. Com esse recurso, a infografia ganha mais significância e perenidade, ou
seja, passa a interpretar dados enviados pelo usuário ou leitor. Torna-se, assim, uma ferramenta
estatística de avaliação e interpretação de dados.
Com esse novo formato da infografia, é possível perceber uma forma não linear de
apresentar e consultar a informação. Os vínculos e o acréscimo de informação realizados pelo
usuário criam uma rede de associações inteligentes. Assim, o usuário pode desenvolver o
próprio percurso e a forma de divulgar uma informação.
A partir dessas rápidas observações, percebe-se uma oportunidade de trabalhar a
infografia online com um material que sempre está sempre à disposição da população - o
relatório de balneabilidade oferecido pela Fundação do Meio Ambiente (FATMA), que oferece,
em tabelas, a informação sobre a poluição das praias do litoral catarinense. Nota-se que tal
material é rico em informação, mas, em contrapartida, possui uma leitura lenta.
Atualmente, o jornal Diário Catarinense possui uma versão que já melhora a visualização
das informações, mas a interface utilizada tem uma visão estática da infografia, e não se alcança
o cruzamento de dados. Portanto, busca-se melhorar a visualização das informações por meio de
uma interface que comporte informações dinâmicas. Com isso, é possível criar, visualmente,
um índice mensal, semestral ou anual do estado de poluição das praias catarinenses.
12

1.1 PROBLEMÁTICA
Como criar uma interface gráfica que atenda aos requisitos de infografia online e
interprete os dados oferecidos pela FATMA, que mostram o índice de poluição das praias do
litoral de Santa Catarina?
1.2 OBJETIVOS
1.2.1 Objetivo Geral
Desenvolver uma interface gráfica para um infográfico online sobre a balneabilidade.
1.2.2 Objetivos Específicos
Traduzir os sentidos cognitivos de visualização de uma informação estatística;
Compreender a abstração da informação em formas visuais;
Fundamentar o comportamento da informação verbal em visual;
Desenvolver uma interface gráfica para uma infografia.
1.3 JUSTIFICATIVA
Com o foco cada vez mais voltado ao usuário, torna-se necessário um estudo dos
conceitos de infografia e comunicação, uma vez que a plataforma que leva a informação é outra
- o papel não é mais a principal plataforma de divulgação e disseminação da informação,
chamada no meio jornalístico de hard news. A agilidade com que a informação chega ao
receptor é muito maior. Atualmente, há uma linha crescente nas plataformas portáteis, como
telefone, tablets, notebooks, entre outras.
Machado (2007) alega que o design de interface tende a explorar o conhecimento do
usuário com bases de dados, ou seja, as bases servem para guardar informações enviadas pelos
usuários de um sistema. Na mesma visão, Machado afirma também que as bases ajudam a
compor uma nova ferramenta para outros modelos e formatos de narrativas multimídias. Além
disso, oferecem uma interface tipificada e espaço navegável que permite explorar, compor,
recuperar e interagir com a narrativa.
Portanto, busca-se compreender como a infografia pode facilitar a compreensão de dados
e atribuir valor informacional a estes, explorando a conexão da rede como forma de chegar a um
novo caminho de visualização de dados estatísticos.
13

1.4 METODOLOGIA DA PESQUISA
Ao focar as especificidades da infografia, esta pesquisa é definida como qualitativa, de
caráter exploratório delineado por meio de um levantamento bibliográfico. Com o estudo
exploratório é possível averiguar os novos conceitos e formatos que poderão atender às
necessidades do projeto, identificando, assim, o estado atual da infografia. Este trabalho é
embasado em pesquisa bibliográfica, com consulta a fontes relevantes ao tema que auxiliem não
só na coleta de dados, mas principalmente na reflexão concomitante à pesquisa exploratória e
aos estudos de caso. Nesta primeira etapa, os estudos de caso serão imprescindíveis para o
desenvolvimento da segunda etapa, que contará com a elaboração do design de interface para
um infográfico dinâmico.
1.5 ESTRUTURAÇÃO DO TRABALHO
O primeiro capítulo deste trabalho contempla uma visão geral da evolução da infografia e
da convergência de mídias - pontos de divergência e convergência, além dos benefícios da
agilidade trazida pelas plataformas portáteis.
O segundo capítulo traz um estudo aprofundado da infografia, e faz referência ao estado
da arte e à linguagem visual que tornam possível o desenvolvimento da interface de um
infográfico.
No desenvolvimento do terceiro capítulo, o foco será a análise do desenvolvimento de um
design baseado em dados: como se formula, desenvolve e conclui a partir da experiência de
autores que já estão se dedicando à infografia.
Já o quarto capítulo é direcionado para a metodologia do projeto gráfico, avaliando a
melhor cartografia, visualização e demonstração de gráficos sob a nova ótica da infografia. Esta
análise inclui elementos gráficos e tipografias que possuem melhor comunicação dentro do
ambiente virtual. Assim, direciona-se para uma melhor solução visual no desenvolvimento da
interface, usando os conceitos absorvidos pelos estudos acadêmicos.
No quinto capítulo concluem-se os conceitos e, desta forma, o desenvolvimento dos
estudos teóricos sobre infografia.

14

2. FUNDAMENTAÇÃO TEÓRICA
2.1 INFOGRAFIA
A infografia é muito utilizada em periódicos para a construção de diagramas ou
organogramas de informações. Cairo (2008) afirma que a infografia tem o objetivo de
organizar, estruturar e exemplificar visualmente qualquer tipo de informação, transmitindo a
mensagem de uma maneira didática e concisa.
A linguagem visual de um infográfico, segundo Silva (2010, p.16), “é o referente
principal da infografia e sua finalidade de comunicação, portanto, cabendo como argumento
estético”. Desta forma, pode-se compreender linguagem visual, segundo Dondis (1997, p.7),
examinando “elementos visuais básicos, as estratégias e opções das técnicas visuais, as
implicações fisiológicas da composição criativa e a gama de meios e formatos.” William (2010,
p.9) afirma que é uma linguagem não-verbal, analógica, habilitada a oferecer taxas
informacionais elevadas a partir da constituição de seus elementos.
A figura 1 mostra uma forma simples de infografia. Não traz nenhum texto explicativo e
passa a informação apenas com signos e numerais que mostram a sequência a ser seguida. Este
infográfico utiliza conceitos que a linguagem verbal teria que argumentar muito para alcançar.
Figura 1. Infografia simples.

Fonte: Google images. Disponível em http://bit.ly/AbzkPx. Acesso em 25/01/2012.

Cairo (2008, p.21) fundamenta que um “infográfico não tem porque incluir palavras
necessariamente. Em alguns casos, o texto de acompanhamento ou explicação não é necessário,
e pode mesmo impedir o entendimento do conteúdo.”
15

Segundo Sartre apud Émille Peillaube (2009, p.33):
“As imagens são necessárias à formação dos conceitos, não há um único conceito
que seja inato. A abstração tem precisamente por objetivo, em sua função original e
geradora do inteligível, elevar-nos acima da imagem e permitir-nos pensar seu
objeto sob uma forma necessária e universal. Nosso espírito não pode conceber
diretamente outro inteligível senão o inteligível abstrato, e o inteligível abstrato só
pode ser produzido da imagem e com a imagem pela atividade intelectual. Toda
matéria suscetível de ser explorada pela inteligência é de origem sensorial e
imaginativa...”

A composição de uma abstração inteligível pode ser um diagrama ou um mapa que
representa uma área geográfica e que dispensa detalhes não relevantes para a compreensão de
uma mensagem. Segundo Cairo (2008, p. 22), “um gráfico estatístico representa uma série
numérica e uma ilustração, uma representação abstrata de objetos físicos”.
A representação abstrata, segundo Costella, pode tornar-se uma composição semântica de
conceitos que são convencionados dentro de uma sociedade.
“A escrita pictográfica consistiu na representação desenhada de objetos concretos,
figuras de animais, etc., formando em sucessão, um relato coerente. Gradualmente,
alguns destes sinais tomaram um sentido convencional e passaram a designar
conceitos abstratos, tornando-se ideogramas. Em outros sistemas, acresceram-se as
sílabas que, articuladas, formaram palavras e, por fim, surgiram as letras, isto é, os
sinais alfabéticos que, correlacionando com fidelidade à escrita e à voz humana,
representaram graficamente a fala.” (COSTELLA:2002, p. 14)

Como continuidade ao mesmo argumento de Silva, Bourdieu afirma que as
representações de sinais tornam-se símbolos e que esses símbolos:
[...] “são os instrumentos por excelência da integração social: enquanto
instrumentos de conhecimento e decomunicação, eles tornam possível o consensus
acerca do sentido do mundo social e contribuem fundamentalmente para a
reprodução da ordem social: a integração lógica é a condição da integração
moral.”

Com isso, percebe-se que a abstração pode mostrar caminhos, transparecer ideias, criar
vínculos, atribuir valores, compor harmonia a partir de uma partitura, como na música. Os
símbolos podem assumir diversas formas, desde que a principal função, ou significação, não
seja mistificada e, sim, que o conceito seja pleno de significados.
Passos e Moura (2007) analisam a abstração por meio da aglutinação de dados
informacionais quando argumentam sobre como a informação deve ser encaminhada:
[...] o tratamento da informação pode se dar pelo processo de agrupamento das informações
semelhantes, e seus acessos devem ser configurados de acordo com as características
almejadas pelos usuários e suas forma de navegação.” (PASSOS E MOURA: 2007, p.1)

Ou seja, é possível notar que a abstração da informação pode acontecer por meio da
aglutinação ou agrupamento de dados semelhantes e que contenham as mesmas características.
Assim, pode-se analisar a figura 2: a abstração está na representação do corpo humano. A
silhueta de um corpo é utilizada para exemplificar a estatura dos jogadores e, caso não houvesse
16

os números mostrando a altura de cada jogador, ainda assim, seria possível perceber qual é o
mais alto. Outro item para se analisar é a área geográfica onde é mostrado o local de origem de
cada jogador.
Figura 2. Representação geográfica e humana.

Fonte: Jornal ANotícia.Publicado 6 de Junho de 2010.

Lévy amplia o entendimento, e inclui os símbolos em uma sociedade analisando os
sistemas de símbolos de uma cultura, quando afirma:
“É impossível exercermos nossa inteligência independentemente das línguas,
linguagens e sistemas de signos (notações científicas, códigos visuais, modos
musicais, simbolismos) que herdamos através da cultura e que milhares ou milhões
de outras pessoas utilizam conosco. Essas linguagens arrastam consigo maneiras de
recortar, de categorizar e de perceber o mundo, contêm metáforas que constituem
outros tantos filtros daquilo que é dado e pequenas máquinas de interpretar,
carregam toda uma herança de julgamentos implícitos e de linhas de pensamento já
traçadas. As línguas, as linguagens e os sistemas de signos induzem nossos
funcionamentos intelectuais: as comunidades que os forjaram e fizeram evoluir
lentamente pensam dentro de nós. Nossa inteligência possui uma dimensão coletiva
considerável porque somos seres de linguagens.” (Lévy: 2011, p.97)

Como se observa nos exemplos de infografia, mostrado anteriormente, percebe-se que
utilizar abstração de símbolos ou imagens pode representar objetos ao narrar fatos históricos,
uma linha do tempo ou a ordem cronológica de algum acontecimento, mostrar dados gráficos,
localizar situações, comparar informações graficamente.
17

Enfim, a infografia pode ter diversas faces e, segundo Rodrigues (2009, p.23), “consiste
em utilizar ferramentas visuais como mapas, tabelas, desenhos, ilustrações, legendas,
combinadas com texto no intuito de transmitir ao leitor informações de fácil compreensão”. Em
contrapartida, Cairo (2008, p.21) afirma que é uma representação diagramacional de dados e
Sancho (2000, p.21) assume uma definição mais extensa:
“é um comportamento informativo, realizado com elementos icônicos e tipográficos,
que facilitam a compreensão dos acontecimentos, ações ou fatos da atualidade com
alguns aspectos mais significativos, e acompanha ou substitui o texto informativo.”

Com uma concepção mais jornalística, Silva (2010, p.7) afirma que “qualquer informação
apresentada em forma de diagrama, isto é, desenho no quais se mostram as relações entre as
diferentes partes de um conjunto ou sistema, é uma infografia.”
Na figura 3 pode-se observar que as imagens também seguem a ideia de abstração sem
perder o foco no que realmente interessa e, assim, destacam pontos que são mais importantes.
Analisando os pormenores, percebe-se que as conchas da draga estão apresentadas em estágios
diferentes de uma forma abstrata, pois o desenho apenas representa o objeto verdadeiro, mas
que contém muito mais detalhes.
Figura 3. Ilustração e mapas.

Fonte: Jornal ANotícia.

O mapa de localização é outro ponto que pode ser analisado, pois mostra apenas as linhas
limítrofes e o ponto onde será feito o porto. Observa-se a falta das características básicas de

18

dados cartográficos que Loch (2006) apresenta, como, por exemplo, escala, projeção e
simbolismo. Dessa forma, apresenta apenas localização e abstração.
Com isso, pode-se perceber que as outras informações não são relevantes para o
entendimento do esquema, porém, não há nome da cidade nem o significado da marcação em
amarelo e da linha em vermelho. São informações aparentes, mas sem sentido.
Portanto, a infografia, segundo Passos e Moura apud Moura (2003a, p. 252), “envolve a
organização das informações e o planejamento da maneira como os usuários as encontrarão, o
que caracteriza um projeto de estrutura e acesso”.
A Sociedade Brasileira de Design da Informação (SBDI), em declaração disponível no
site oficial, disponibiliza uma visão de infografia que entra no contexto digital e na interface:
“é uma área do design gráfico que objetiva equacionar os aspectos sintáticos,
semânticos e pragmáticos que envolvem os sistemas de informação através da
contextualização, planejamento, produção de interface gráfica da informação junto
ao seu público alvo. Seu princípio básico é o de otimizar o processo de aquisição da
informação efetivado nos sistemas de comunicação analógicos e digitais”.

Em um plano virtual, os infográficos podem apresentar uma notícia com outros recursos
linguísticos. Segundo William (2010), esse processo se chama hibridismo, ou seja, no caso do
offline: fotos, ícones, gráficos, pictogramas, etc. No online, gráficos interativos, murais, fotos,
vídeos, áudios, jogos, entre outros. No mesmo prisma, SILVA (2010 p.7) afirma:
“Os infográficos baseiam-se na representação da notícia a partir de elementos
icônicos, ou seja, referente às imagens, constituindo-se do hibridismo de outros
ingredientes da prática do jornalismo, tais como a fotografia, o desenho e o texto.”

Um infográfico pode apresentar, tanto no meio impresso quanto no meio virtual, diversos
estilos, e Silva (2011, p.37) aponta alguns:
“Diagrama descritivo: “possibilita uma avaliação mais minuciosa de um
acontecimento por parte do leitor em razão dos recursos como vistas de corte,
análise passo a passo ou descrição tópica dos componentes e detalhes.”
Processos: que mostra uma reação em cadeia ou etapas de um projeto.
Arquitetônico: tem por função mostrar o espaço de algum lugar.
Gráficos: administra visualmente números estatísticos e comparativos.”

Na figura 4, é apresentado o naufrágio do Titanic e, é possível observar cada estilo
apresentado por Silva - há um diagrama descritivo, onde apresentam os principais detalhes do
navio e os pontos mais importantes. Os processos apontam os momentos antes, durante e depois
do acidente e as horas de resgate, e a tabela gráfica mostra o número de sobreviventes.
Analisa-se, nesse infográfico, que com a complexidade e a quantidade de dados, a sintaxe
e o planejamento das informações foram desempenhados com minúcia, pois se consegue
absorver e digerir visualmente todas as informações, sem que nenhuma atrapalhe a outra.

19

Neste ponto, é interessante ressaltar a colocação de Cairo (2008, p. 32): “a infografia é
uma ferramenta que reduz a complexidade da informação”. Nesses termos, pode-se imaginar a
dificuldade que seria explicar, na forma escrita e rapidamente, toda a gama de informações
apresentada no infográfico.
Figura 4. Infográfico: acidente do Titanic.

Fonte: Fábio Abreu

Nesse infográfico, é possível observar um mapa que localiza o naufrágio, as cidades onde
o navio esteve e o destino final. Além disso, também é representado o trajeto do navio que
afundou e o trajeto que o navio de resgate fez, mostrando, ainda, a cidade para onde foram
levados os sobreviventes.
Percebe-se que podem existir muitos estilos na representação e visualização de
informações. Por exemplo, a representação por meio de mapas geográficos, demonstrados no
naufrágio do Titanic, é traduzida por Cairo (2008) para a realidade dos infográficos em um
discurso sobre dados cartográficos, localização, escalas. O autor afirma que “a origem da
20

representação visual de informação se encontra na ideia de mapa, entendida de maneira ampla
como representação esquemática de relações entre elementos, geralmente geográficos.”
Esses mesmos elementos podem ser observados em infográficos no ambiente virtual,
porém, neste caso, apresentam outros mecanismos sensoriais, como interação, interface,
movimentos e áudio, apresentados por Passos e Moura, William, SBDI, entre outros autores
comentados anteriormente e que ainda terão questões aprofundadas no decorrer deste trabalho.
No entanto, é possível notar que as estruturas de construção de um infográfico também são
utilizadas no ambiente virtual, como nos infográficos feitos pela Veja online, e reproduzidos nas
figuras 5 e 6, que contam a história do naufrágio, utilizando a mesma base da figura 4.
Figura 5. Versão do aniversário de cem anos do naufrágio do Titanic.

Fonte: Veja online. Disponível em http://bit.ly/LxHlUr. Acesso em 20/04/2012.

Figura 6. Versão antiga do naufrágio do Titanic.

Fonte: Veja online. Disponível em http://veja.abril.com.br/historia/titanic/info/. Acesso em 20/04/2012.
21

Nesse infográfico, observa-se que existe um mapa, cronologia e demonstrações de como
era o navio e de onde se partiu. A particularidade no ambiente virtual é o acesso à galeria de
fotos e a vídeos, entre outros recursos.
Já na figura 7, mais um estilo de infografia - a comparação entre o republicando John
McCain e o democrata Barack Obama, candidatos a eleição presidencial do EUA em 2008. Os
gráficos comparam a diferença entre os candidatos na disputa, analisando o número de votos de
cada colégio eleitoral, que é composto por delegados.
Figura 7. Gráfico de comparação.

Fonte: A Notícia.
O jornal Publico, em Portugal, apresentou um infográfico na internet que priorizou o
mapa dos EUA com os respectivos estados, colocando a comparação entre os candidatos em
segundo patamar. Na figura 8, pode-se observar o mapa na totalidade – nota-se que a interface
esconde os dados de comparação entre o candidato que venceu e o que perdeu a eleição

22

americana. Com a seleção realizada, o comparativo é apenas do estado e não apresenta o
resultado do país inteiro. Assim, expõe outra forma de ilustrar a informação.
Figura 8. Gráfico de comparação das eleições de 2008 nos EUA.

Fonte: Publico. Disponível em http://bit.ly/M7xR3Z. Acesso em 24/02/2009.

Outro estilo que pode ser observado na internet é o de visualização de dados, apresentado
por Alberto Cairo em palestra no MidiaLab, por David McCandless no TED, pela revista
Smashing Magazine e, finalmente, pelo inspirador deste estudo, o professor sueco Rans
Rosling. Ainda há outras pessoas que falam sobre este estilo, como Rosana Hermann, jornalista
e fisica-nuclear.
Este estilo trabalha com milhares de informações e transforma os dados para que o olho
humano consiga interpretá-los sem precisar ver minuciosamente cada informação, ou seja, é
feita uma aglutinação em blocos. Assim explica Fernanda Viegas, que apresentou, no TEDxSP
2009, esta ideia e uma ferramenta que considera milhares de informação e transpõe de uma
maneira rápida, dinâmica e compreensível.
Na figura 9 é apresentada a ferramenta de visualização de dados do professor Roslin, o
Gapminder. Observa-se que cada ponto do gráfico representa dezenas de números aglutinados
que demonstram a saúde versus a riqueza dos continentes durante os anos desde 1800.
23

Cada círculo tem uma cor diferente que representa a região do mapa. Na barra inferior é
apresentado um botão de play que aciona os dados e estes se movimentam com a linha do
tempo.
Segundo o próprio Roslin no TEDx, “hoje temos muitos dados. Mas ter os dados não
basta. É necessário apresentá-los de forma que as pessoas consigam entendê-los e apreciá-los.”.
Esta foi a ideia que levou Rosling a projetar o Gapminder.

Fonte: Gapminder. Disponivel em http://bit.ly/MnyyE4. Acesso em 06/05/2007.

Sendo assim, as análises acima mostram que a infografia pode ser um suporte importante
ou, até mesmo, substituir uma informação escrita a partir do estilo de visualização de dados, e,
por isso, é tão respeitada.
Entretanto, em alguns casos a infografia pode ser usada como um esquema figurativo em
um contexto em que não precisaria existir.
Neste prisma, Cairo (2008, p.21) afirma que:
[...] não é um objeto decorativo, cujo principal objetivo é fazer as páginas mais
ágeis, dinâmicas, coloridas, mas deve funcionar como uma ferramenta de análise da
realidade a serviço dos leitores, melhorando sua compreensão.

24

Portanto, as infografias dentro do universo online ou offline podem ser apresentadas
com a mesma estrutura, porém, com distinção de linguagem. No ambiente impresso, percebe-se
que não é possível utilizar um vídeo, dezenas de fotos que formam galerias, áudios,
interatividade ou interação, entre outros.
Estes recursos, segundo Cairo (2008), são chamados de multimídia, que é um dos grandes
fatores que definem a infografia no ambiente virtual:
“Outro fator que define a visualização da informação online é o multimídia. As
mídias de comunicação para web têm uma grande capacidade de combinar
diferentes mídias e pacotes informativos integrados: texto, diagramas, vídeos,
áudio, fotogalerias, etc. Todas as ferramentas comuns nas mídias audiovisuais têm
ajudado na visualização interativa, e é interessante explorar seu uso
consciente.”(CAIRO: 2008, p.79)

Outra definição de multimídia vem de Levy (2010), quando afirma que o termo significa:
“aquilo que emprega diversos suportes ou diversos veículos de comunicação.
Infelizmente, é raro que seja usado nesse sentido. Hoje, a palavra refere-se
geralmente a duas tendências principais dos sistemas de comunicação
contemporâneos: a multimodalidade e a integração digital. (LEVY: 2010, p.67)

Levy (2010) interpreta as modalidades sensoriais como visão, audição, tato e as sensações
proprioceptivas. O autor defende a ideia de que multimídia não seja o termo apropriado para
este movimento de digitalização das mídias e que o emprego da palavra é uma emergência do
crescimento da internet.
Depois de compreender como pode ser apresentada uma infografia e, após analise de
estrutura, elementos, funções e comportamento, busca-se entender, a partir de agora, a questão
histórica. Assim, será possível localizar o momento em que este recurso chegou à internet, para,
posteriormente, entender os elementos semiológicos e desenvolver uma interface apropriada
para um infográfico que apresenta dados estatísticos.
2.1.1 História
A comunicação estabelecida visualmente, segundo Sancho (2001), é anterior à escrita,
pois era apenas visual e não linguística - muito anterior a qualquer codificação de linguagem.
Compreende-se que o surgimento histórico da infografia aconteceu na pré-história, e os
primeiros mapas foram criados muito antes da escrita.
No anexo1 – Marcos na história da visualização de dados, de Michael Friendly e Daniel
J. Denis,de York University, Canadá, traduzido por Mario Kann –, pode-se perceber
cronologicamente a evolução da infografia e dos estados estéticos: como eram usados os mapas,
tabelas, ilustrações e os detalhes estruturais.
25

No período de 6200 a.C até o século 17 surgem os primeiros mapas e diagramas, e Kanno
apresenta a origem da visualização a partir dos diagramas geométricos, tabelas de posição das
estrelas e mapas. O registro do primeiro mapa, reproduzido na figura 10, foi a representação,
por meio da escavação de uma pedra em 6200 a.C., de uma cidade da Babilônia encontrada na
região de Kirkuk, Iraque.
Figura 10. Primeiro mapa historicamente registrado.

Fonte: Marcos da história da visualização de dados. Anexo 1.

Itanel Quadros (2005, p.4) afirma que “é necessário relembrar que, enquanto suporte do
pensamento, o visual antecede qualquer linguagem utilizada na comunicação entre pessoas”.
Esta é uma história que começou nas cavernas há cerca de 30 mil anos e prossegue até os dias
de hoje. Santaella também (2012) discursa sob o mesmo prisma e afirma que:
“os desenhos rupestres, encontrados nas cavernas pré-históricas, que são formas de
expressão de conteúdo emocional e não racional ou de organização da informação,
também funcionam como um registro em suporte fixo de algo que o homem
contemporâneo pode relacionar como o tempo e o espaço. (SANTAELLA: 2012,
p33)

Peltzer (1992, p.98) reforça a ideia quando relata que:
“A escrita, desenhar letras é mais fácil que desenhar bisontes, tem códigos que
apareceram milhares de anos após os desenhos daqueles animais. Primeiro foi fala
e a língua, nessa ordem, segundo Saussure, depois a escrita, que é um modo de
representar a língua e seus fonemas (sistema fonético) ou por conceitos (sistema
ideográfico). A linguagem visual, a língua, a fala e a escrita são sistemas de signos
completamente diferentes. Um é visual, o outro lógico, o seguinte fonético e o último
lingüístico. A lembrança da ideia leão põe na minha cabeça a imagem do leão.
Posso tentar desenhá -lo (fá-lo-ia se fosse mudo e analfabeto) para comunicar o que
vi (o meu conceito de leão) a outra pessoa. Ou posso dizer a palavra leão: um
conjunto de fonemas que unidos significam esse animal; e também poderia escrever
26

as letras que correspondem a esses fonemas, unidos para significar o referente leão
(escrita fonética), ou desenhar o ideograma – se soubesse fazê-lo – para comunicar
a um chinês o conceito leão (escrita ideográfica).”

Segundo Silva apud Costella (2002, p. 14):
“escrita pictográfica que consistiu na representação desenhada de objetos
concretos, figuras de animais, etc., formando, em sucessão, um relato coerente.
Gradualmente, alguns destes sinais tomaram um sentido convencional e passaram a
designar conceitos abstratos, tornando-se ideogramas. Em outros sistemas,
acresceram-se as sílabas que, articuladas, formaram palavras e, por fim, surgiram
as letras, isto é, os sinais alfabéticos que, correlacionando com fidelidade à escrita
e à voz humana, representaram graficamente a fala”.

Outros autores, como Dondis (1997) e Clark (2003), relatam que grandes obras, como “A
criação de Adão”, de Michelangelo, e a “Última Ceia”, de Da Vinci, representadas nas figuras
11 e 12, respectivamente, são descrições e narrativas visuais de acontecimentos que tinham
objetivo utilitário, ou seja, transmitir mensagens às pessoas que não decodificavam as letras. Em
um prisma mais elaborado, assumem o caráter de realismo e dramaticidade que as letras não
alcançariam.
Figura 11. “A criação de Adão”, Michelangelo.

Fonte: Wikipedia.
Figura 12. “Última Ceia”, Leonardo da Vinci.

Fonte: Wikipedia.

Kanno (Anexo 1) aponta para a evolução no século 16 – com expansão marítima da
Europa, novas técnicas e instrumentos foram desenvolvidos e, assim, novas, e mais precisas
formas de apresentação visual do conhecimento apareceram.
27

Segundo Cairo (2008) e Peltzer (1992), o desenvolvimento de diversos equipamentos
auxiliou no aperfeiçoamento da infografia, que está relacionado à história da tecnologia, como a
prática da gravura, da fotomecânica, entre outros. Por fim, está ligado à organização dos
complexos sistemas e subsistemas necessários para impressão criados por Johan Gutenberg, em
1436.
Kanno (Anexo 1) relata que os maiores problemas do século 15 se referiam à “medição
física – do tempo, distância e espaço – para astronomia, navegação e expansão territorial.
Avançam as estimativas, as probabilidades, a demografia e todo o campo de estatísticas. No fim
do século, os elementos para iniciar um “pensamento visual” estão prontos”.
Na figura 13 é apresentada uma infografia, feita em 1644, por Michael van Langren’s,
que tem a intenção de mostrar as 12 referências de longitude de Toledo a Roma.

Fonte: Mario Kano. Anexo 1.

Na figura 14, em infografia do fim do século 16, percebem-se características mais
analíticas de dados. Esta infografia, segundo Kanno (Anexo 1), foi datada de 1786, feita por
William Playfair, na Inglaterra. Observa-se um gráfico de barras e de linhas com dados
econômicos e o uso de tipografias diferenciadas.

Fonte: Mario Kano. Anexo 1.
28

Pelzter (1992) registra também que o primeiro mapa publicado em jornal foi na Inglaterra,
no dia 29 de março de 1740, no Daily Post de Londres. Era uma gravura com informação visual
de um ataque realizado por Vernon, almirante inglês, à cidade de Portobello, nas Caraíbas,
durante uma incursão contra o tráfico de ouro espanhol.
Segundo Kanno (Anexo 1), a infografia moderna deu os primeiros passos no século 17,
com o primeiro gráfico informativo publicado em jornal na capa do “The Times”. Peltzer
(1992) afirma que, em abril de 1806, na cidade de Londres, a morte do Mr. Blight foi destaque
na capa do “The Times”. (Figura 15)
Quadros (2005, p.5) descreve a infografia da seguinte forma:
Era uma informação visual sobre como se dera o assassinato de um cidadão
chamado Isaac Blight, composta por uma vista da casa de Blight nas margens do
Tâmisa e um plano dela com referências numeradas dos passos do assassino, da
trajetória da bala e do deslocamento de Blight até onde caiu morto. No rodapé
aparecem legendas com explicações dos números postos no gráfico.

Figura 15. A morte de Blight.

Fonte: Quadros (2005, p.5)
29

Ainda no século 17 acontece, segundo Kanno (Anexo 1), a era de ouro da estatística. Uma
infografia considerada importante pelo fator científico, aponta Belém (2011), é a gravação do
movimento de uma corrida de cavalos por meio de câmeras acionadas por fios, criadas por
Eadweard Muybridge, nos EUA. (Figura 16)
Percebe-se que é usada a técnica de fotografia para captar as imagens do cavalo durante a
corrida, e o intuito é observar que o animal, em certo momento, deixa de encostar as quatro
patas no chão.
Figura 16. Fotografias de Eadweard Muybridge.

Fonte: Veja online. Disponível em http://bit.ly/MHqCit. Acesso em 20/01/2012

No século 19, argumenta Kanno (Anexo 1), “John W. Tukey reconhece a importância da
análise gráfica dos dados e lança novos padrões e inovações. Na França, Jacques Bertin publica
sua Semiologia Gráfica, organizando visão e percepção dos elementos gráficos. Por último, os
computadores começam a mostrar seu potencial”.
Kanno (Anexo1) finaliza as observações sobre a história dos infográficos afirmando que:
“o desenvolvimento de softwares e sistemas de computador, altamente interativos e de
fácil manipulação, foi a alavanca para tudo. Os novos paradigmas de manipulação de
30

dados, a invenção de técnicas gráficas e os métodos de visualização multidimensional
deixaram suas marcas”.

A consolidação das ferramentas técnicas e metodológicas da visualização da informação
veio durante a Guerra do Golfo1.
Esta evolução superou o papel e outras tecnologias começaram a surgir. A possibilidade
de envio de imagens via cabo ou antenas, e posteriormente via satélite, tornou a comunicação
entre mensageiro e receptor mais ágil, possibilitando a publicação de mapas, imagens e
informações. Peltzer (1992, p.115-116) acrescenta valor a essa descrição:
“Quando se dá a separação entre a fotografia e o visual não fotográfico, e a união
de ambos os sistemas num mesmo processo, a remissão de uma informação visual
começa a realizar-se de um modo digital e ampliam-se as possibilidades de
confecção diretamente segundo um código digital, ou mediante a digitalização dos
gráficos e desenhos realizados de forma clássica. (...) A digitalização permitiu o uso
generalizado, pela imprensa, da linguagem visual. (...) Foi então que a linguagem
reservada às enciclopédias e outras obras de divulgação científica e técnica pôde
ser transferida para a imprensa e para a urgência do jornalístico (...). “

Sancho (2001, p.54-57) concorda que o avanço tecnológico possibilitou um incrível
avanço na construção da infografia:
“Nos anos 80 se deu o renascimento dos gráficos explicativos, influenciados pelo
desenvolvimento dos computadores pessoais dotados de programas específicos para
gerar ilustrações. A aparição do computador Apple Macintosh, em 1984, facilitou
enormemente a criação de imagens e se converteu em boa medida no padrão de
trabalho para um grande número de ilustradores e designers gráficos (...) Nesse
contexto aparece uma nova infografia utilizando como ferramenta de trabalho a
informática adaptada às representações, ao tratamento da imagem etc. (...) Desde
1986 até o presente se produziram avanços espetaculares tanto nos programas
informáticos como nas redes de transmissão de gráficos, o que possibilitou que a
sua publicação se generalizasse nos jornais. A infografia se revelou como o meio
mais eficaz para transmitir de maneira rápida e concisa os aspectos fundamentais
da informação de temas, que por sua novidade, desconhecimento geral ou
distanciamento do leitor, precisariam de muitas palavras para serem explicadas.
Ela ampliou o universo cognitivo e incorporou elementos distantes.”

Percebe-se, portanto, que a infografia se redescobre e começa a utilizar a tecnologia a seu
favor, buscando aperfeiçoar técnicas e metodologias. No entanto, observa-se que a infografia
mostra alguns estágios dentro do próprio universo, distribuídos dentro da transposição da
informação.
2.2 TRANSIÇÃO E CONVERGÊNCIA DE MÍDIAS

1

Guerra do Golfo – Guerra ocorrida em 1991, entre a coalizão de países liderados pelos EUA, contra o
Iraque, de Saddam Hussein, em decorrência da invasão do vizinho Kuwait, em 1990.
2
Transposição, segundo Michaelis online, é o ato ou efeito de transpor, transferir, transmitir ou transportar, ou
Iraque, de Saddam Hussein, em decorrência da invasão do vizinho Kuwait, em 1990.
31

Com o suporte da tecnologia, pode-se perceber algumas transições na infografia até
chegar ao nível mais experimental no ambiente virtual. Esse comportamento ainda está sendo
analisado por alguns especialistas e profissionais, que ainda divergem quanto à nomenclatura
ideal. Rodrigues (2009, p.33) relata sobre os autores e as nomenclaturas:
“Alguns autores classificam de infografia “Interativa” (CAIRO, 2005, 2007, 2008,
SALAVERRÌA, 2005) ou “digital” (SANCHO, 2001), multimídia (RIBAS, 2005,
RODRIGUES, 2005, 2008, 2009a), infografia jornalística digital animada
(RIBEIRO, 2008, RANIERI, 2008), outros como infografia animada, porém todos se
direcionam ao mesmo objeto de estudo.”

Pode-se afirmar que a infografia é um concentrador de algumas mídias, fato observado
por Palacios (2003, p.3):
“refere-se à convergência dos formatos das mídias tradicionais (imagem, texto e
som) na narração do fato. A convergência torna-se possível em função do processo
de digitalização da informação e sua posterior circulação e/ou disponibilização em
múltiplas plataformas e suportes, numa situação de agregação e
complementaridade.”

Entretanto, os elementos que a compõe podem ir além dos formatos de mídias
tradicionais. Levy (2010) aponta outros formatos, como navegabilidade, interação, caminhos
multilineares e expõe aspectos como “tomar caminhos transversais, produzir dobras interditas,
estabelecer redes secretas, clandestinas, fazer emergir outras geografias semânticas”. Portanto,
pode-se subdividir esse trajeto para a internet.
Rodrigues (2009) explora alguns períodos da transposição2, sendo a primeira fase linear,
com a estrutura impressa utilizada dentro do mundo virtual. Em seguida, a fase multimídia ou
multimodal, que necessitava de galeria de fotos, vídeos e áudio. E a última etapa, que é a busca
pelo cruzamento de informações e pelos formatos que Levy (2010) descreve a partir de uma
base de dados que permite a criação, a recriação e a reatualização do mundo de significados que
o ciberespaço3 oferece.
Rodrigues (2009, p.35) descreve essas fases da seguinte forma, na figura 17:

2

Transposição, segundo Michaelis online, é o ato ou efeito de transpor, transferir, transmitir ou transportar, ou
seja, dentro do universo da comunicação visual é o momento em que a preocupação é de disponibilizar o
conteúdo na internet sem a preocupação estético-funcional de uma linguagem visual adequada para a internet.
3
Santaella assume uma descrição longa, porém, esclarecedora “o universo paralelo, que tem sua matriz na
internet, que abriga megalópoles, ou banco de dados comerciais, e uma infinidade de portais e sites de todas as
espécies, vem sendo chamado de ciberespaço. [...] O ciberespaço é como Oz – existe, chegamos a ele, mas não
tem ubiquação. [...] Consiste de uma realidade multidirecional, artificial ou virtual incorporada a uma rede
global, sustentada por computadores que funcionam como meios de geração e acesso. Nessa realidade, da qual
cada computado é uma janela, os objetos vistos e ouvidos não são nem físicos nem, necessariamente,
representações de objetos físicos, mas têm a forma, caráter e ação de dados, informação pura. [...] Como o
ciberespaço se relaciona com a realidade virtual, com a visualização da informação, com as interfaces gráficas
dos usuários, com as redes, com os meios de comunicação múltiplos, com a convergência das mídias, com a
hipermídia? Ele se relaciona com todos, inclui todos, pois tem a capacidade de reunir e concentrar todas essas
faces em um objetivo comum.
32

Figura 17. Fases da transição da infografia impressa para online.

Fonte: Rodrigues (2008). Disponível em http://bit.ly/pq3gqz. Acesso em 20/09/2010.

SILVA (2011, p.17) absorve as definições de Rodrigues e compreende:
“Primeira fase: tem por característica os infográficos lineares, de sequência
estática, linear; os primeiros modelos práticos no jornalismo, executados em
plataforma impressa e que podem ser encontrados também na internet. (TEIXEIRA,
2007, apud%TEIXEIRA, 2008; p. 164)
Segunda fase: envolvida no suporte da internet, baseia-se na multimidialidade dos
elementos constitutivos dos infográficos:“imagens em movimento, gravação sonora,
ilustração, fotografia, vídeos e outros recursos interativos” (RODRIGUES, 2009, p.
201). A forma de leitura também se altera em relação aos infográficos estáticos,
com variações multilineares, lineares ou não-lineares.
Terceira fase: tem como propriedade, segundo Rodrigues (2009), a introdução de
base de dados na formatação dos infográficos na plataforma web.”
33

Um exemplo de transposição linear é o infográfico sobre o acidente do avião Airbus
A320, voo JJ 3054, que vinha de Porto Alegre para São Paulo e explodiu no momento da
aterrissagem.
A revista Veja mostra como foi o acidente, o trajeto e as hipóteses, de uma forma linear.
Imagem e texto se complementam sem um tomar o lugar do outro. A estrutura mostra as
especificações técnicas e cada elemento tem importância e localização. (Figura 18)
Figura 18. Vôo 3054.

Fonte: Revista veja

Veja como aconteceu a transposição para a internet em http://glo.bo/woOEps transposição simples, sem recursos audiovisuais. Outro exemplo que pode caracterizar essa fase
é o primeiro modelo do infográfico sobre o naufrágio do Titanic, mostrado anteriormente
(Figura 6).
Posteriormente, percebeu-se a utilização de materiais audiovisuais, como galeria de fotos,
a presença de animação, interatividade e hiper-realidade. Portanto, entra-se na segunda fase que
Rodrigues apresentou.

34

No trabalho realizado pelo jornal Zero Hora sobre a Segunda Guerra, pode-se observar a
presença constante de áudio, vídeos e galerias de fotos, e este material apresenta recursos que
correspondem à segunda fase da transposição apresentada por Rodrigues. (Figura 19)
Figura 19. A guerra do século 20.

Fonte: ZH. Disponível em http://bit.ly/u1H92C. Acesso em 07/08/2011

A infografia pode assumir mais funções dentro do universo da web. Rodrigues (2009, p.3)
afirma que:
35

Pode ser pensada numa nova forma cultural e digital para os produtos jornalísticos,
com funções de indexar objetos multimídia (sons, imagens, gráficos), armazenar
material produzido e de arquivo (memória), agilizar produções, compor conteúdos
para a web, recuperar, informações e, principalmente, cruzar dados que gerem uma
nova informação visual e dinâmica.

Este contexto mostra que a infografia deixou de utilizar apenas texto, imagens, mapas e
ilustrações. A terceira fase da transposição apresenta mais do que a presença de mecanismos
audiovisuais, e passa a existir a retroalimentação, como chama Cairo (2008), que é a emissão de
uma resposta pelo usuário, ou seja, é realizado um feedback de uma ação. Além disso, são
coladas em prática todas as características comentadas por Santaella (2011): conexões e
controles perceptivos que resultam em uma gama de rotas semióticas.
Na revista online Smashing Magazine, algumas ferramentas de visualização de dados
com esses conceitos são apresentadas. (Figura 20)
Figura 20. Ferramentas de visualização de dados

Fonte: Visual.ly. Disponível em http://bit.ly/tjT4F4. Acesso em 23/09/2011.

Outro exemplo é apresentado pelo jornal New York Times, que utiliza esses conceitos no
NYT labs 4, onde são realizados estudos com base de dados e design de interface. Um projeto
elaborado pelo NYT Labs é o Cascade (Figura 21), que tem por finalidade analisar a
propagação de uma informação dentro das redes sociais e gerar visualização da análise dos
dados captados pela ferramenta, relacionando o comportamento da navegação com a atividade
4

The New York Times Company Research & Development Lab trabalha para inovar em novas tecnologias,
antecipando os comportamentos de consumo e construção de novas interfaces de notícias.
36

social relacionada com a matéria pesquisada, ou seja, rastreia a atividade por URL dentro da
internet.
Figura 21. Ferramentas de visualização de dados.

Fonte: Cascade. Disponível em http://nytlabs.com/projects/cascade.html. Acesso em 28/09/2011.

Outro projeto que pode exemplificar a terceira fase da transposição é a interface que
representa um mapa onde são apresentadas as publicações acadêmicas dos últimos dez anos nos
EUA. (Figura 22). A apresentação do projeto afirma que “a dinâmica de rede compõe um mapa
de alto nível do Instituto Max Planck e suas conexões.” Pode-se perceber que o mapa apresenta
ícones com tamanhos diferentes que representam os números de publicações. A largura das
linhas apresenta o número de publicações feitas em conjunto com o instituto, ou seja, quanto
maior for a largura da linha, maior é o número de publicações. Toda essa informação é
disponibilizada com tela touch screen - isso pode representar uma forma de interação com o
usuário, utilizando outra sensibilidade motora.
Observa-se neste exemplo a possibilidade de comunicar por meio de uma interface apenas
com linhas e círculos, contando com a ajuda de localizações em um mapa. Portanto, percebe-se
uma interface altamente abstrata, mas que disponibiliza uma gama de informações.

37


Fonte: Max Plank Institute. Disponível em http://bit.ly/wA8RNL. Acesso em 23/09/2011.

Rodrigues (2009) explana sobre o aprofundamento da participação da infografia online:
“[...]pode requerer do usuário uma interpretação, uma análise mais aprofundada
com níveis de interatividade maior, a depender de cada gráfico, funcionando como
um mecanismo de exploração da informação.
Com os infográficos de caráter mais analítico, onde há muitos dados se cruzando e
em alguns momentos em tempo real, exige-se, portanto, maior atenção e
interpretação do usuário, porque as possibilidades de leituras aumentam na medida
em que o relato noticioso contém mini-estórias, diagramas, entrelaçamento de
dados.” (RODRIGUES: 2009, p 37)

Portanto, avalia-se que a terceira fase da transposição atinge a visualização dos dados
informacionais transformando dados numéricos, históricos e informacionais em uma leitura
visual mais rápida e compreensível, com o trajeto livre para o usuário escolher o que é mais
interessante.
Após inferir sobre o que é a infografia e por quais estágios passou, a atual dialética
encontra-se no ciberespaço. Busca-se, adiante, entender como o design utiliza essas
informações e de que forma pode resolver a visualização dos dados sobre a balneabilidade em
SC.
2.3 FACES DO DESIGN
Campos e Silva (2008) levantam uma indagação sobre a personalidade estética das
interfaces do mundo digital e consideram que há um tempo o conteúdo da web era apenas
textual, estruturado com links e hiperlinks que se conectavam a outro conteúdo textual, o que
exemplificam com a Wikipédia. Entretanto, a tecnologia avançou, oferecendo novos

38

navegadores e permitindo que mais informações fossem disponibilizadas. A velocidade inserida
na navegação também cresceu, o que melhorou muito a interface.
Campos e Silva (2008) afirmam que:
As tecnologias surgidas a partir daí permitiram que uma página da web se tornasse
tão elaborada quanto uma página de revista ou de jornal impresso. A metáfora de
página de livro cedeu lugar à metáfora do conteúdo de publicação diária. A
biblioteca acadêmica cedeu lugar à banca de jornal, o jogo de papel e o cartão
impresso foram substituídos pelos videogames. (CAMPOS E SILVA: 2008, p.14):

Observa-se, portanto, que esse movimento foi um divisor de águas no sentido de
ferramenta para questões semiológicas, estéticas e de interações na apropriação das mídias
anteriores. Hoje, segundo Campos e Silva (2008), a estética de internet na verdade é uma
herança de jogos eletrônicos, da mídia impressa jornalística e dos CDs ROM.
Esta, por sua vez, ao reunir esses e outros elementos, implementou uma linguagem
própria, ao incorporar também a interatividade. O leitor espectador deixou de ser
um receptor passivo, podendo, agora, até mesmo interferir no conteúdo acessado,
seja acrescentando comentários, seja personalizando páginas que, amiúde, altera,
gerando conteúdos inéditos, algo que as outras mídias apenas faziam − ou
tentavam, indiretamente, fazer – com o uso de duas mídias em paralelo (televisão e
telefone, rádio e e-mail etc.). (CAMPOS E SILVA: 2008, p.15)

Percebe-se, então, que é neste ponto que a internet se diferencia e mostra a principal
característica que tem: a interação de pessoas por meio de uma interface que possibilita a
transição de informações. Portanto, podem-se fazer analogias:
Nas páginas da web se percebe que os ícones possuem uma função análoga a dos
sinais de trânsito. Assim como estes têm por finalidade orientar o fluxo de
automóveis e pedestres, aqueles têm por função orientar a navegação dos
internautas. Mas a analogia poderia parar aí, pois, no meio ‘físico’, os sinais se
relacionam com o espaço tridimensional, articulando-se como uma referência e um
referente, diversamente do (atual) espaço bidimensional da web. Não há como
relacionar elementos nesse espaço da maneira como se costuma fazer no mundo
real. (CAMPOS E SILVA: 2008, p.15)

Portanto, busca-se compreender melhor estes ícones e símbolos, e dar sentidos a eles para
orientar o fluxo de navegação dentro da interface sobre a balneabilidade. Assim, facilitar as
descobertas de novos caminhos que podem ser trilhados e, principalmente, poder transparecer
as informações analíticas visualmente.
2.3.1 Princípios básicos do design gráfico
O design visual pode interpretar informações e transpô-las em conceitos visuais como cor,
forma, contraste e luz. Isso permite construir uma composição visual clara e objetiva.
Conhecer e examinar, com afinco, os elementos visuais básicos, pode oferecer uma
estratégia de composição criativa de uma linguagem visual para qualquer plataforma ou suporte.
39

Carol Holfmann (2010) afirma que “tornar algo compreensível e não apenas fácil de
olhar, é função do design gráfico, design de interface e infografia. Todos têm por objetivo
principal transmitir informações e dados.” Na figura 23, Holfmann constrói um gráfico para
exemplificar a construção de um bom infográfico.
Figura 23. Processo de formação de um bom infográfico.

Fonte: abcDesign. Infográficos: da essência ao clichê na era da Informação Digital. Disponível em
http://bit.ly/JGB9Mp

Em um workshop no Malofiej 20 International Infographics, Alberto Cairo lançou o
desafio da construção de um infográfico em um prazo muito curto. O desafiante concluiu o
workshop impressionado com o resultado, e argumentou: “observe os desenhos bonitos e
as toneladas de canetas e papel sobre as mesas. Isto é o “Não fale, mostre”. Assim, finalizou o
40

workshop sobre planejamento, desenho, pensar e partilhar ideias antes mesmo de tocar um
teclado de computador. (Figura 24)
Figura 24. Sketch de um infográfico no workshop do Malofiej 20.

Fonte: The funcional art: Information Graphics Workshop in Spain. Disponível em http://bit.ly/I4Ri9y

A adequação dos elementos tem como objetivo atender, segundo Teixeira (2005), os
quatros itens mais importantes para a composição do infográfico:
“Agrupamento: a proximidade, segundo as leis da percepção, é um forte fator no
estabelecimento de uma relação entre os elementos visuais (...). Podemos conduzir
nosso leitor.
41

Adequação dos elementos visuais à informação: a capacidade de passar
mensagens subliminares, as imagens atuarão como elementos coadjuvantes na
leitura e compreensão dos infográficos (...). Toda informação visual quando lida, é
analisada e interpretada por um conjunto de parâmetros culturais individualizados
na experiência de cada leitor (...). A imagem informa para além da organização
racional. Ela busca também a harmonia estética e o ritmo neural.
Poluição visual: equilíbrio, contraste e harmonia são inconscientemente buscados
pelo leitor.
Exploração dos recursos estéticos: formas, cores, ilustrações, fotos, efeitos, tons,
composição, harmonia, ritmo e tantos outros são um conjunto de detalhes voltados
à necessidade de beleza do ser humano (...).” (TEIXEIRA: 2005, p.5)

Os elementos citados por Teixeira (2005) podem ser analisado junto às teorias da Gestalt,
que utilizam “pontos, linhas, planos, volumes, cores, sombras, brilhos, texturas, e outros
atributos – isolados ou combinados entre si”. (Gomes Filho: 2008, p.27).
O conceito de unificação, segundo os preceitos da Gestalt, e o agrupamento, citado por
Teixeira, são nomenclaturas diferentes, mas que tem uma relação. A unificação, citada pela
teoria da forma, pode ter uma gama de elementos ou ser apenas um só. Já na visão de Teixeira,
o agrupamento é a unificação formada por vários elementos.
Na figura 25, a teoria se apresenta verdadeira. No primeiro quadrado, composto por
outros quadrados, a harmonia é perfeita - todos têm o mesmo tamanho e formam um quadrado
maior com a mesma proporção. Assim, está de acordo com outras leis da Gestalt, como
“proximidade, semelhança, fechamento e boa continuidade”.
No segundo quadrado, a continuidade é interrompida pela diferença de cor, causando um
“ruído”. No terceiro, o mesmo acontece - não há continuidade por conta da falha de alguns
quadrados e o círculo não deixa que a leitura seja coerente.
Finalmente, o último representa o caos. Pelo movimento dos quadrados e as diversas
cores, a harmonia e a continuidade na legibilidade visual se perdem.
Para Suassuna (2011, p.53), “consiste na grandeza e na ordem”, referenciando, assim, a
harmonia das partes de um todo como unidade e totalidade.
Figura 25. Unificação.

Fonte: Filho (2008, p.31).

42

Na figura 26, são apresentadas as leis mais importantes da teoria Gestaltiana, como:
semelhança, proximidade, continuidade, pregnância e fechamento, que são utilizadas na figura
anterior para mostrar o funcionamento, entre outros. A figura também mostra a conceituação
sensível da forma, os aspectos metafísico, lógico, epistemológico, estético e formal.
Figura 26. Leis da Gestalt.

Fonte: Gomes Filho (2000).

A teoria da Gestalt pode fornecer ao designer o embasamento científico para o sistema de
leitura visual, que solidifica as diretrizes para construção de infográficos com a possibilidade de
ultrapassar os elementos técnicos, permeando os anseios da forma e tateando o campo estético.
A forma, como é descrita na figura 27, é definida por Filho (2000, p.41):
“como os limites exteriores da matéria de que é constituído um corpo e que confere
a este um feitio, uma configuração. A percepção da forma é o resultado de uma
interação entre o objeto físico e o meio de luz agindo como transmissor de
43

informação, condições e imagens que prevalecem no sistema nervoso do
observador, que é, em parte, determinada pela própria experiência visual.”

Wong (1998) divide a forma em quatro grupos básicos: elementos conceituais, visuais,
relacionais e práticos.
Figura 27. Elementos da forma.

Fonte: Wong (1998).

Wong (1998) relata a união dos conceitos da teoria da forma, e sugere adaptações que se
apresentam como o principal suporte do mecanismo de estruturação e organização de um
44

infográfico. Um exemplo prático é exposto por Munari, apenas utilizando a textura para mostrar
o funcionamento da teoria de Wong: (Figura 28)
Figura 28. Elementos da forma com textura.

Fonte: Bruno Munari (2006, p.11).

A interpretação destes elementos básicos e o contexto do meio ou suporte onde estão
inseridos, segundo Dondis (1997, p.5), atuam como “cenário para as decisões relativas ao
design”, estruturando os elementos conforme os significados.
O sistema de elementos organizados sistematicamente pela Gestalt e Wong apresenta-se
como um refinamento do que foram as percepções humanas em relação aos objetos. Esta
estrutura é chamada por Dondis (1997, p.16) de “alfabetismo coerente com regras sintáticas
básicas”. Seguindo as concepções de Dondis (1997), toda a percepção das definições acima
pode também ser influenciada pela psique formada por um grupo social.
Sartre (2009, p.39) comenta que “toda criação imaginativa exige um princípio de
unidade”, e que esta unidade passa por um processo de “dissociação externa e interna”:
1) a seleção tendo em vista a ação; 2) causas afetivas “que governam a atenção”;
3) razões intelectuais, “designando por esse nome a lei de inércia mental ou lei do
menor esforço”. As causas externas são as “variações da experiência” que
apresenta tal objeto, ora provido, ora privado de certa qualidade: “O que foi
associado ora a uma coisa, ora a outra, tende a se dissociar das duas”.

Aparentemente uma informação apresentada a um indivíduo ocidental pode ser
interpretada de uma forma diferente por um indivíduo oriental, que não tem acesso aos mesmos
costumes. Ou seja, quem mora no Sul do país tem uma palavra para identificar um objeto, e no
Norte a mesma palavra pode significar outra coisa.
Um bom exemplo é o símbolo da suástica, representada na figura 29, que traz mensagens
com mais de três mil anos, segundo dados do site Brasil Escola. O nome significava “cruz
gamada” e a suástica era gravada em moedas da antiga Mesopotâmia. O primeiro significado
nasceu dentro do hinduísmo como “aquilo que traz sorte” e, para os chineses, a suástica
representava o número 10.000. Na maçonaria, é a representação de uma constelação próxima à
45

estrela Ursa Maior, e os bascos representam por meio da suástica a imagem de uma dupla
espiral. Porém, o significado mais conhecido atualmente é símbolo do nazismo.
Figura 29. Suástica.

Fonte: Brasil Escola. Disponível em http://bit.ly/KBWjLl. Acesso em 21/06/2012

Nesse contexto, Ramos e Zago (2007, p.7) argumentam que:
Todo ato perceptivo subordina um fenômeno em conceitos visuais [...] é o
conhecimento sensorial das formas ou de totalidades organizadas e dotadas de
sentido e não a soma de sensações elementares. Sensação e percepção são o
mesmo. É o conhecimento de um sujeito corporal, uma vivência corporal. O mundo
exterior não é uma coleção ou soma de coisas isoladas. É organizado em formas e
estruturas complexas, dotadas de sentido. (RAMOS E ZAGO: 2007, p.7)

Em visão aprofundada, percebe-se que os elementos sistematizados ficam a priori dos
juízos empregados pela pessoa que recebe a informação. Assim, a percepção “não é uma
propriedade do objeto, algo que se encontra no objeto, e sim uma construção do espírito do
contemplador colocado diante do objeto” (SUASSUNA: 2011, p.30).
Ramos e Zago (2007) concluem que:
A percepção é uma relação do sujeito com o mundo exterior e não uma reação
físico fisiológico (empiristas) e nem uma idéia formulada pelo sujeito
(intelectualistas). A relação dá sentido ao percebido e aquele que percebe - um não
existe sem o outro. Uma experiência é dotada de significação. O percebido é dotado
de sentido, faz parte do nosso mundo e de nossas vivências. (RAMOS E ZAGO:
2007, p.7)

Portanto, com a percepção definida, pretende-se explorá-la com os conceitos de
comunicação que, segundo Júnior (2005), sem importar o suporte, acontece de corpo para
corpo, cada um interpretando a informação conforme o conhecimento intrínseco. Busca-se
interpretar os dados de balneabilidade e traduzir informações em dados visuais para se
comunicar com o maior número usuários, sem confusão ou ruído. Desta forma, ficam
46

compreendidos os estudos sobre como se comporta a informação desde a a construção até a
recepção pelo usuário.
2.3.2 Visualização da informação com bases de dados
Sunagawa (2010) apud Betin (1983) introduz os níveis de organização de um gráfico, que
são “divididos em quatro propriedades perceptivas ou níveis de organização: associativo,
seletivo, ordenado ou quantitativo”
Percebe-se que a autora aprofunda a questão sobre os elementos apresentados pelas leis
da Gestalt e de Wong, e converte para uma linguagem infográfica a partir de três níveis de
interpretação, como modos de implantação, variáveis visuais e organização visual de dados.
Segundo Sunagawa (2010), os modos de implantação estão relacionados aos quesitos
visuais, relacionais e práticos dos elementos das formas, apresentados por Wong (1998). Os
elementos conceituais de Wong se relacionam com as variáveis e com os níveis organizacionais
apresentados pela autora.
Portanto, Sunagawa (2010) apresenta, na figura 30, um exemplo prático que utiliza os
elementos da forma e transforma em visualização de dados.
Figura 30. Modos de Implantação X Váriáveis Visuais X Níveis de Organização.

Fonte: SUNAGAWA: 2010, p.59.
47

Cairo (2008) articula sobre a implantação dos dados variáveis do Google Maps, que se
tornou uma ferramenta importante para o desenvolvimento de mapas interativos, pelo fato de o
código de programação ser aberto e por oferecer possibilidades de manipulação dos dados.
Alguns sites jornalísticos já estão utilizando recursos oferecidos pelo Google, que usa as
variáveis visuais apresentadas por Sunagawa (2010).
Na figura 31, o NYT apresenta de uma forma interativa os lugares onde realiza, a cada
ano, uma inspeção sanitária. Em cada ponto do mapa é apresentado o nome do estabelecimento,
o grau de violação e, ao clicar, apresenta todo o relatório do local. Além disso, há um sistema de
busca na parte superior do infográfico.
Percebe-se que as variáveis visuais tornam-se gráficos mostrando o grau de reincidência
do estabelecimento nas inspeções. Ou seja, a informação numérica é transformada em dados
visuais.
Figura 31. Ferramenta do Google aplicada em infográfico do New York Times.

Fonte: Interactive Map. Disponível em http://nyti.ms/IrST9z

Cairo (2008) afirma que a ferramenta elaborada pela Google em 2005 condicionará o
futuro da infografia na web, pois define “a hibridação de serviços de diversos provedores para
criar um novo produto.” (CAIRO: 2008, p.7) Também afirma que, os dados são recombinados
de maneira que respondam às necessidades de cada infografia, e oferecem suporte para a
arquitetura da informação. Estes dados podem ser compartilhados, modificados e distribuídos,
utilizando os conceitos de inteligência compartilhada.
48

Na figura 32, o Google Development apresenta um showcase de vários modelos de mapas
interativos.
Figura 32. Grupo de ferramentas do Google.

Fonte: Google Code. Disponível em http://bit.ly/IrSjsi

Neste trabalho, portanto, foi descrito como os elementos visuais podem auxiliar a compor
uma interface que analise dados numéricos e os transforme em gráficos, apresentados por
Sunagawa (2010), prospectando a utilização das ferramentas oferecidas pelo Google Maps,
citada por Cairo (2008) como uma ferramenta de alta qualidade.
Percebe-se que a interface pode ser manipulada conforme os dados oferecidos pela Fatma,
e que é, com a sugestão de Cairo (2008), uma ferramenta com alto desempenho para
administrar estes dados graficamente.
Nos estudos, foi encontrada uma ferramenta brasileira chamada SAD-EE, que utiliza
dados do Google Earth para mostrar um gráfico geográfico do desmatamento que acontece no
Brasil. A visualização que se busca com este trabalho tem como objetivo mostrar a
balneabilidade em um mapa geográfico e desmembrar a análise conforme a necessidade do
usuário.
Portanto, observa-se que, apenas conhecer a ferramenta e saber o caminho do design pode
não ser suficiente para enviar uma informação visual. Além disso, busca-se a interpretação da
informação e de como o usuário pode utilizar os recursos e navegar.
2.3.3 Interpretação da informação
A visualização da informação depende também dos conhecimentos de comunicação,
portanto, conhecer apenas a aplicabilidade dos elementos da forma pode ser insuficiente na
49

comunicação de uma mensagem. Dondis (1997) acredita que a forma pode ser modificada ou
interpretada de forma diferente por pessoas diferentes.
“O resultado final de toda a experiência visual, na natureza e, basicamente, no
design, está na interação de polaridades duplas: primeiro as forças do conteúdo
(mensagem e significado) e da forma (design, meio e ordenação); em segundo
lugar, o efeito recíproco da articulação (designer, artista e artesão) e do receptor
(público). Em ambos os casos, um não pode se separar do outro. A forma é afetada
pelo conteúdo; o conteúdo é afetado pela forma. A mensagem é emitida pelo criador
e modificada pelo observador.” (DONDIS: 1997, p.131)

Santaella acrescenta de uma forma mais filosófica que:
De todas as aparências sensíveis, o homem — na sua inquieta indagação para a
compreensão dos fenômenos — desvela significações. E no homem e pelo homem
que se opera o processo de alteração dos sinais (qualquer estímulo emitido pelos
objetos do mundo) em signos ou linguagens (produtos da consciência).
(SANTAELLA: 1985, p.7)

Percebe-se que os infográficos podem agregar informações textuais com representações
visuais que sofrem influências objetivas e subjetivas. “Compreender a engedração do
infográfico, suas relações com o interpretante, tornaram evidente seu poder simbólico e de
produção de sentido.” (SILVA: 2010, p.10).
Dias e Carvalho apud Freitas (2011) afirmam que a visualização de dados é:
“uma área da Ciência que tem por objetivo o estudo das principais formas de
representações gráficas para apresentação de informações, a fim de contribuir para
o entendimento delas, bem como ajudar a percepção do consumidor a fim de
deduzir novos conhecimentos baseados no que está sendo apresentado. É uma
ciência que combina aspectos de computação gráfica, interação humanocomputador, cartografia e mineração de dados.”

Toda a visualização de uma informação pode ser abstrata, o que se vê no papel ou na tela
de um computador seria uma representação do real, uma interpretação de fatos e dados. Cairo
(2008, p7) confirma que “um diagrama é uma representação abstrata de uma realidade.” Ou
seja, representa números em forma de gráfico, podendo, assim, ser comparado visualmente.
Quanto maior o poder de abstração de uma infografia, maior o grau de compreensão de
uma informação. Na figura 33, de um lado há um quadro com vários números e, no outro, são
destacados no quadro apenas os números necessários.
Figura 33. Fragmentação e minimalismo na informação.

Fonte: Cairo (2008, pg.21)
50

Dias e Carvalho, seguindo a mesma concepção de Cairo, propuseram a dois profissionais
das áreas de matemática e desenvolvimento de games, o teste presente na figura 34. Foram
propostas quatro formas de visualização de uma informação, e posteriormente os profissionais
foram questionados sobre o que identificavam no resultado do desenho - cada um deles
interpretou a informação conforme a compreensão particular.
Figura 34. Teste visual.

Fonte: CARVALHO e DIAS (2007)

51

A abstração é um componente importante para a composição de informações em um
mapa. Para exemplificar essa ideia, Cairo (2008) utiliza os mapas do metrô de Londres,
demonstrado na figura 35. Muitos destes mapas costumavam mostrar o trajeto exato percorrido
pelo veículo. Vários seguiam a mesma ideia:
Mapas de metrô têm sido parte da vida de Londres, desde o nascimento do
Underground, e foram inicialmente tão confusos quanto a própria cidade: um
emaranhado de linhas diferentes tecidos ao redor do rio Tamisa. Harry Beck, um
engenheiro que em 1931 surgiu com a ideia radical de apresentar a rede cada vez
maior como um diagrama de circuito, em vez de um mapa geográfico – para criar
um ícone do design modernista que nunca foi superado. (THE GUARDIAN: 2009,
http://bit.ly/IrIuOs)
Figura 35. Mapa antigo do metrê de Londres.

Fonte: The Guardian. Disponível em http://bit.ly/IrIuOs. Acesso em 20/09/2011.

Beck utilizou a linguagem e a sintaxe para desenvolver um mapa, exposto na figura 36,
que dispensa a geografia do solo, a distância entre as estações, o trajeto e muitos outros
detalhes que o usuário de metrô não necessita saber. Na realidade, o usuário precisa saber onde
está e para onde quer ir – a partir disso, observar um mapa simples.
52

Figura 36. Plano do metrô de Londres por Henry Beck, 1933.

Fonte: The Guardian. Disponível em http://bit.ly/IrIuOs. Acesso em 20/09/2011.

Cairo (2008) cita outros exemplos semelhantes, como a inserção de montanhas e vales em
um mapa estático, o que não é relevante para mostrar um roteiro, ou o uso de uma ilustração representação abstrata de objetos físicos.
Para compreender a abstração em plenitude, os aspectos da fenomenologia podem ser
significativos. Segundo Santaella (1983, p.2), torna possível conhecer como o “homem opera no
processo de alteração dos sinais (qualquer estímulo emitido pelos objetos do mundo) em signos
ou linguagens (produtos da consciência).” O termo linguagem se estende, também, à linguagem
binária utilizada nas máquinas para comunicar o homem. Desta forma, o homem se vale de
signos para interpretar algum objeto.
Percebe-se, então, que para o homem entender ou interpretar alguma informação, ele tem
a lógica, os aspectos sensíveis e o social como aliados para formular uma ideia, concepção,
compreensão, entre outros.
A fenomenologia tem a tarefa “dar a luz às categorias mais gerais, simples, elementares e
universais de todo e qualquer fenômeno, isto é, levantar os elementos ou características que
pertencem a todos os fenômenos e participam de todas as experiências”. (SANTAELLA: 1985,
p.7).
A concepção de Santaella (1985) sobre os fenômenos são baseados nas teorias de Pierce,
que atuavam em três campos:
53

1) a capacidade contemplativa, isto é, abrir as janelas do espírito e ver o que está
diante dos olhos; 2) saber distinguir, discriminar resolutamente diferenças nessas
observações; 3) ser capaz de generalizar as observações em classes ou categorias
abrangentes (SANTAELLA: 1985, p.7).

Para fins científicos, Pierce resolveu fixar a terminologia de primeiridade, secundidade e
terceridade, pelo fato de ser palavras livres de outros significados ou associações. Santaella
explica, baseada na teoria perciania:
Primeiridade: é a categoria que dá à experiência sua qualidade distintiva, seu
frescor, originalidade irrepetível e liberdade
Secundidade: é aquilo que dá à experiência seu caráter factual, de luta e confronto.
Ação e reação ainda em nível de binariedade pura, sem o governo da camada
mediadora da intencionalidade, razão ou lei.
Terceridade: que aproxima um primeiro e um segundo numa síntese intelectual,
corresponde à camada de inteligibilidade, ou pensamento em signos, através da
qual representamos e interpretamos o mundo (SANTAELLA: 1985, p.11).

Para Messa (2005, p.15):
A primeiridade refere-se a todo aspecto de qualidade que você vivenciar nessa
experiência, a secundidade é a reflexão envolvida nesse processo e a terceiridade é
a representação que você fará.

Assim, constata-se que para interpretar algo o homem passa por estas três etapas: os
sentidos, a interpretação e a conclusão. Perante os fenômenos, para conhecer, compreender e
reagir, a “consciência produz um signo” (SANTAELLA: 1985, p.11), isto é, um pensamento.
Na figura 37 é apresentada, graficamente, a tríade pierceana.
Figura 37. Tríade de Pierce.

Fonte: SANTAELLA, Lúcia. O que é semiótica. São Paulo: Brasiliense, 1985
54

A intenção do signo é representar as formas e simbolizar ideias da percepção do mundo e
das coisas. Para isso, existe a necessidade de abstração de imagem, mas não de conteúdo, como
verificado nos exemplos das páginas anteriores.
Cabe ressaltar que a semiologia, que posteriormente passa a ser semiótica5, “de Ferdinand
de Saussure, é a ciência com origens na linguística que estuda vida dos signos como parte da
vida social. A relação entre as duas semiologias refere-se à estruturação do pensamento e as
leituras das relações significante-significado.” (SUNAGAWA: 2010, p.70)
Santaella (1983, p12) assume a ideia, originalmente de Pierce:
O signo só pode representar seu objeto para um intérprete, e porque representa seu
objeto, produz na mente desse intérprete alguma outra coisa (um signo ou quasesigno) que também está relacionada ao objeto não diretamente, mas pela mediação
do signo.

Niemeyer (2007, p25) considera que a união dos signos constitui a linguagem:
O signo tem o papel de mediador entre algo ausente e um interprete presente.
Pela articulação dos signos se dá a construção do sentido.
Os signos se organizam em códigos, constituindo sistemas de linguagem. Esses
sistemas constituem a base de toda e qualquer forma de comunicação.

Além da tríade apresentada, existem outras explorações de Pierce: a relação do signo com
o signo, com o objeto e, finalmente, com o interpretante. Assim é possível observar outra tríade
na figura 38:
Figura 38. Desmembramento do signo.

Fonte: SANTAELLA, Lúcia. O que é semiótica. São Paulo: Brasiliense, 1985
5

Semiótica. A semelhança e afinidade da Semiologia à Semiótica: ambas tratam do estudo dos signos e surgiram
em momentos muito próximos (início do século XX). A semiologia teve suas origens na Suíça e estendeu seus
domínios aos países de língua francesa, enquanto a Semiótica iniciou nos Estados Unidos por meio do filósofo
Charles Sanders Peirce (1939-1914). Por força de novas posturas metodológicas, os semiologistas criaram outro
movimento, chamados estruturalismo. Em 1969, o comitê fundador da Associação Internacional de Estudos
Semióticos, resolveu que as duas ciências fossem fundidas, passando a designar-se somente Semiótica.
(SUNAGAWA: 2010, p.70).
55

Tais conceitos discursados podem ser aplicados à estrutura da comunicação humana,
segundo Watzlawick (2011, p.18 e 19):
O estudo da comunicação humana pode ser subdividido nas mesmas três áreas de
sintaxe, semântica e pragmática para o estudo da semiótica (a teoria geral de sinais
e linguagens). [...] a primeira dessas três áreas abrange os problemas de
transmissão de informação [...]. O seu interesse reside no problema de código,
canais, capacidade, ruído, redundância e outras propriedades estatísticas da
linguagem.[...] para que seja perfeitamente possível transmitir séries de símbolos
desprovidos de significado se o emissor e o receptor não tivessem antecipadamente
concordado sobre sua significação. Nesse sentido, toda a informação
compartilhada pressupõe uma convenção semântica.

Percebe-se que surge outra tríade considerada o núcleo da teoria da comunicação6:
A trilogia emissor-receptor-mensagem – repetindo, assim, muitos séculos depois, o
modelo da Retórica de Aristóteles, de acordo com a qual as “provas de persuasão”
residem seja “no carácter moral do orador [ethos]”, seja “no modo como se dispõe
o ouvinte [pathos]”, seja, ﬁnalmente, “no próprio discurso, pelo que este demonstra
ou parece demonstrar [logos].

O grande desafio de comunicar uma mensagem com mais precisão é “decodificar
elementos e a linguagem proporcionada pelo objeto, sobretudo no campo analógico (a
linguagem não-verbal)” (SILVA: 2010, p.11).
Ferrara (2004, p. 53) afirma que, para o desenvolvimento de projetos em design, “o ver
semiótico é uma arma imprescindível ao designer, que incorpora a dimensão cultural à
competência técnica e isso lhe permite aliar o uso funcional do objeto à sugestão informativa de
outros valores culturais”.
Desta forma, busca-se a abstração da forma, com uma grande quantidade de conceitos e
informações sem ruídos, para que os dados sejam interpretados rapidamente. Os elementos
estéticos funcionam como uma massa de modelar na realização de uma interface.
2.4. COGNIÇÃO APLICADA À ARQUITETURA DA INFORMAÇÃO
Com o encaminhamento deste estudo é possível que algumas das percepções visuais que
acontecem na realidade se aplicam ao ambiente virtual. Toda a teoria da forma, as teorias de
Pierce, da informação e de visualização podem embasar teoricamente e, inclusive, de forma
prática, a construção de uma interface dinâmica, interessante, interativa e com informação.

6

Resumidamente, por Serra (2007, p.78), os principais elementos da comunicação são o comunicador (emissor),
o conteúdo (da mensagem), o canal, a audiência (o receptor) e os efeitos (sobre os receptores). Outro desses
modelos, formulado por Roman Jakobson nos anos 60, procuram descrever a comunicação verbal a partir de seis
elementos essenciais, a cada um dos quais corresponde uma determinada função: o destinador (função expressiva
ou emotiva), o destinatário (função apelativa), a mensagem (função poética), o código (função metalinguística),
o contexto (função referencial) e o contato (função fática).
56

Afinal, busca-se com toda essa dialética e experiência de estudos no campo visual, a base para
aplicação no ambiente web.
Devido à explosão do uso de computadores pessoais, as aplicações e os softwares
puderam evoluir e se tornar intuitivos. Com isso, percebe-se um crescimento de profissionais
que aparentam ser, em maioria, provenientes da área de tecnologia. Em virtude disso, percebese que os conhecimentos específicos sobre percepção, visualização e compreensão da forma
ainda estão em processo de acomodação no que se refere ao uso da arquitetura da informação7,
usabilidade, interface, entre outros.
Estas informações sugerem que há uma preocupação em comum: “melhorar o fluxo de
intercâmbio de informações entre o indivíduo e um dispositivo. Em outras palavras: converter a
interação de um dispositivo em algo fácil de aprender.” (CAIRO: 2008, p.63).
Bell (2010, p.113) acrescenta que “os aspectos de navegação da arquitetura da informação
são bastante úteis para se ter uma ideia de quais páginas funcionam como vias de
comunicação”. Portanto, percebe-se que para desenhar uma interface navegável, os conteúdos
respectivos à arquitetura da informação podem ser importantes.
Lévy (1999) aprofunda ainda mais ao desenvolver uma tese de que o termo interfaces é
designado “a todos os aparatos materiais que permitem a interação entre o universo da
informação digital e o mundo ordinário”.
Para Agner (2009, p.29), existem nove conceitos básicos aplicados à interface:
Consistência: sequências de padrões e a construção de linguagem;
Atalhos: atalhos e comandos para diminuir o tempo de resposta;
Retroalimentação: agilidade na ação e reação do sistema;
Diálogos precisos: mensagens de finalização a uma sequência de cliques que
deixam o usuário satisfeito e pronto para a próxima etapa;
Prevenção de erros: comunicar ao usuário uma ação inapropriada;
Reversão: o usuário poder voltar ao estado inicial;
Auto-controle: o usuário deve ter sempre a sensação de controlar o sistema e
reconhecer as respostas do sistema;
Memória humana: deixar sempre os itens importantes para a navegação visíveis;
Design centrado no usuário (UCD8): saber como o usuário do sistema se
comporta, o que ele espera e quais são seus métodos de navegação.

Alguns autores, como Krug, Kalbach, Belle Cairo, respeitam estes conceitos para o
desenvolvimento de projetos, porém não na mesma sequência. Kalbach (2009), por exemplo,
acrescenta que tais conceitos afetam a credibilidade de informação no site e, consecutivamente,
7

Segundo Bell (2010, p.112), uma das primeiras influências do IHC não veio da psicologia, mas da arquitetura e
do design. A arquitetura de informação usou ideias do planejamento urbano para ajudar no entendimento sobre
sistemas de informação de hipertexto. Segundo Moraes e Rosa (2008, p.23), arquitetura da informação pode ser
definida como o design estrutural de grupos de informações relacionadas [...] se difere do design ou da
programação visual pelo fato de focalizar na estrutura.
8
UCD:!Acrônimo do original em inglês User Centered Design.
57

a rentabilidade. Cairo (2008) assume um lado mais estético/funcional, afirmando que quanto
mais visíveis estão as funções de um objeto, mais fácil é a criação de um modelo mental de
navegação. Krug (2008) já é prático e afirma que o usuário é mais ativo e que quer respostas
rápidas. Para Bell (2010, p.67):
“Criar limites simples e óbvios para ação dá às pessoas noções claras em relação
ao que é possível de se fazer em uma pagina. (...) Em termos de navegação,
organizar elementos para que possam ser usados como ferramentas de navegação
funciona bem.”

Segundo Moraes e Rosa (2008), para estabelecer o intercâmbio entre os indivíduos e o
dispositivo são necessários o entendimento dos princípios de interação e a arquitetura da
informação. O princípio básico é desenvolver sistemas nos quais os usuários possam executar as
tarefas com segurança, eficiência e satisfação – o que é definido como usabilidade.
Krug (2008) sugere que a usabilidade deve ser um fator comum em todo o projeto e que a
intuição precisa se constituir como algo predominante no desenvolvimento de uma interface.
Na figura 39, Krug mostra a reação do usuário em tipos de usabilidade diferentes. Ao
visualizar a imagem, é possível concluir que o uso da percepção e interpretação do usuário é
muito explorado no ambiente virtual.

Fonte: Krug (2008, p.15)

Agner (2009, p.12) chama a atenção do desenvolvedor para o detalhe de que muitas vezes
um projeto é construído para um cliente, e nem sempre é o cliente que vai ser usuário do
sistema. Desta forma, o desenvolvedor tem que estar atento para conhecer diretamente o
usuário. Kalbach (2009) concorda com Agner quando afirma que:
Ele consiste de metodologias que tornam o usuário uma parte integral do processo
de desenvolvimento, com atividades como entrevistas, observações e vários tipos de
testes. Isso substitui o trabalho de adivinhar o comportamento do usuário e fazer
suposições sobre isto baseadas em pesquisa. No final, o design geral do site deve
espelhar como os usuários entendem o assunto e como eles esperam encontrar as
informações que precisam. (KALBACH: 2009, p.38)

Braga (2004) sintetiza que os usuários:
58

detêm o controle de todas essas funções através da utilização das Interfaces
Gráficas de Usuário (G.U.I.), ou simplesmente Interface. Este termo, de acordo com
o dicionário, significa um ponto comum, uma divisa ou fronteira entre duas coisas.
Isso direciona as G.U.I.s para a função de ponto de interconexão entre o usuário e
a tecnologia, para um sistema de interação entre o homem e a máquina. O que
explica, então, as funções de qualquer interface homem-máquina é a definição de
sistemas. (BRAGA: 2004, p.10)

Em conformidade à linha de raciocínio de Braga, Moraes e Rosa (2008) comentam que o
projeto de interfaces interativas é para fazer o usuário participar e ter uma experiência
confortável e satisfatória. Em função disso, é preciso criar mecanismos para diminuir o excesso
de cargas cognitivas, estéticas e de usabilidade.
Assim, percebe-se que a cognição9 é importante para que a navegabilidade funcione com
êxito. Segundo Bell (2010, pg67), “organizar elementos para que possam ser usados como
ferramentas de navegação” pode ser um verdadeiro desafio para o designer. Já para Rodrigues
apud Machado é o principal instrumento para composição de novos modelos e formatos de
narrativas multimídia.
Quando o projeto de navegação está sendo construído, tudo está organizado para o
usuário encontrar o que necessita. Krug (2008) mostra que, na realidade, é um caos, porque os
olhos não seguem o caminho convencional como na leitura de um livro (a imagem à direita na
figura 40), da direita para a esquerda e de cima para baixo. A leitura feita no meio virtual é
aleatória (figura 40, à esquerda) - os olhos percorrem todo o ambiente como se estivessem
procurando algo interessante que acione o mecanismo de percepção.
Figura 40. Cognição durante a navegação.

Fonte: Krug (2008, p.21)

9

Santaella (2004, p.73) explica que cognição é o ato de delinear quais habilidades motoras, perceptivas e
mentais são colocadas em ação pelo leitor imersivo, habilidades que se distinguem daquelas que são empregadas
por um leitor de livro e por um espectador de imagens.
59

Balneabilidade SC infográfico

Balneabilidade SC infográfico

Recommended

Recommended

More Related Content

Similar to Balneabilidade SC infográfico

Similar to Balneabilidade SC infográfico (20)

More from Patricia Prado

More from Patricia Prado (10)

Balneabilidade SC infográfico