Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa...

119
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

description

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.

Transcript of Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa...

Page 1: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

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

Page 2: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

2

PATRICIA PRADO

DESIGN DE INFORMAÇÃO: INTERFACE WEB PARA INFOGRÁFICO SOBRE

BALNEABILIDADE NO ESTADO DE SANTA CATARINA

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

Page 3: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

3

PATRICIA PRADO

INTERFACE WEB PARA INFOGRÁFICO SOBRE BALNEABILIDADE NO ESTADO DE SANTA CATARINA

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

Page 4: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

4

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, interativida-

de, interface, visualização de dados, balneabilidade.

Page 5: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

5

ABSTRACT

To develop an interface of a computer graphics that show graphically the state of pollu-

tion 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.

Page 6: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

6

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 14. 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.

Page 7: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

7

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 42. Comparação de uso na web.

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 57. Visualização de dados do Gapminder.

Figura 58. Processo criativo da arquitetura da informação utilizada pela Magel.

Figura 59. NYT Labs.

Figura 60. Max Plank Institute.

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.

Page 8: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

8

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.

Page 9: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

9

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.

Page 10: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

10

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

Page 11: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

11

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

Page 12: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

12

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.

Page 13: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

13

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.

Page 14: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

14

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.

Page 15: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

15

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.”

Page 16: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

16

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

Page 17: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

17

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.

Page 18: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

18

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

Page 19: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

19

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.

Page 20: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

20

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

Page 21: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

21

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.

Page 22: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

22

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

Page 23: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

23

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.

Page 24: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

24

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.

Figura 9. Visualização de dados do 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.

Page 25: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

25

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.

Page 26: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

26

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

Page 27: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

27

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.

Page 28: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

28

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.

Figura 13. Infografia de Michael van Langren’s.

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.

Figura 14. Infografia de Michael van Langren’s.

Fonte: Mario Kano. Anexo 1.

Page 29: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

29

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)

Page 30: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

30

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

Page 31: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

31

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.

Page 32: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

32

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.

Page 33: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

33

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.”

Page 34: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

34

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.

Page 35: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

35

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:

Page 36: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

36

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.

Page 37: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

37

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.

Page 38: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

38

Figura 22. Max Plank Institute.

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

Page 39: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

39

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.

Page 40: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

40

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

Page 41: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

41

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.

Page 42: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

42

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).

Page 43: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

43

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

Page 44: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

44

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

Page 45: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

45

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 à

Page 46: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

46

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

Page 47: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

47

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.

Page 48: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

48

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.

Page 49: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

49

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

Page 50: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

50

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 humano-computador, 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)

Page 51: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

51

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)

Page 52: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

52

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.

Page 53: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

53

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:

Page 54: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

54

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

Page 55: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

55

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 quase-signo) 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).

Page 56: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

56

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, finalmente, “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).

Page 57: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

57

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, percebe-

se 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.

Page 58: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

58

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.

Figura 39. Comparação de uso na web.

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:

Page 59: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

59

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.

Page 60: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

60

Krug (2008) ressalta que a leitura no ambiente virtual acontece rapidamente, e faz uma

comparação: é como se o usuário que navega estivesse passando por uma mídia externa em um

carro a 140km/hora. Ou seja, o usuário capta pouca informação e só fixa atenção em algo que

realmente seja importante para ele. O design mostra os caminhos, mas é o usuário que vai

escolher o trajeto que quer percorrer, modificar ou participar.

A navegação é o espaço por onde o usuário acessa um mecanismo de interação, como

software, página, aplicativo, e, no caso deste trabalho, infográfico. Agner (2009) afirma que a

navegação é o movimento cognitivo através dos espaços de informações e conhecimentos. “Os

documentos eletrônicos não são apenas observados, agora os usuários têm o poder de interagir e

modificar.” (AGNER: 2009, p.17).

Para Cairo (2008, p.25), “se o designer é consciente de que a percepção humana

discrimina com mais rapidez as variações de cores, texturas (variações da intensidade da luz

refletidas pelos objetos) e diferentes formas”, entenderá como trabalhar cada conceito na

composição visual. Como resultado, atrairá a atenção para locais específicos do projeto.

Para navegar, alguns elementos são considerados em um primeiro estágio de análise.

(Figura 41)

Figura 41. Sistema de navegação principal.

Fonte: Agner (2008, p.24)

Para o Instituto Asilomar, a arquitetura da informação pode ser definida como design

estrutural de grupos de informações relacionadas à ciência ou às artes. A organização estrutural

de sites, aplicativos e software tem como foco trazer princípios de design e arquitetura para o

ambiente digital. O instituto disponibiliza um trabalho feito por Jesse James Garrett (anexo 2),

onde é estruturada cada etapa, que, segundo os resultados dos estudos, são os itens mais

importantes da arquitetura de informação.

Agner (2008) mostra um sistema simples de arquitetura, apenas em um sistema inicial que

introduz ao de interação, mais elaborado, que Kalbach explora mais profundamente. Na figura

42, sugere ir além da navegação de uma página inicial e alcançar um sistema de navegação

entre conteúdos e páginas.

Page 61: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

61

Figura 42. Comparação de uso na web.

Fonte: Kalbach (2009, p.6 – 10)

Para Bell (2010, p.112): “A arquitetura de informação descreve como as informações são organizadas para que sejam relevantes a diferentes grupos de usuários. Organização e forma de informações é o grupo de ferramentas principais, mas a biblioteconomia tem contribuído muito. Vocabulários controlados, taxonomias e descrições formais de conteúdo como objetos oferecem uma boa forma de lidar com grande volume de conteúdo. (...) Os aspectos de navegação da arquitetura de informação são bastante úteis para se ter uma ideia de quais páginas funcionam como vias de comunicação.”

Todos estes conceitos são suportes para o desenvolvimento de projetos de interação e

interface, principalmente para infográficos. Na figura 43, é possível analisar uma infografia,

Page 62: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

62

feita pelo IG, como é o comportamento da informação dentro destes sistemas, a partir de um

conteúdo sobre a bateria da escola de samba Grande Rio.

Figura 43. Tela inicial da infografia.

Fonte: Portal IG. Disponível em http://bit.ly/zOXnWe

Observa-se que os elementos de navegação estão visíveis na parte superior, junto ao

elemento onde estão informações sobre o que o usuário vai encontrar em cada componente

(comande a bateria, os instrumentos, mestre de bateria, a bateria na avenida e os créditos).

Abaixo, os elementos gráficos mostram o comportamento da bateria na avenida.

Próximo ao ícone do apito há uma mensagem explicando como o usuário deve operar o

sistema. O infográfico fornece apenas uma sugestão de navegação, mas um internauta mais

experiente pode usar os elementos de navegação para explorar toda a plenitude de informações.

As figuras acima mostram a aplicação de alguns conceitos de navegabilidade pela criação

de padrões estéticos, simbólicos e organizacionais. Assim, a linha de menu se mantém igual do

começo ao final da sequência, como mostra a figura 44, auxiliando na criação de um modelo

mental para o usuário - separa os instrumentos usados pelos integrantes da bateria em cores

diferentes, e com sinais mostra o trajeto feito durante o momento mais importante da

apresentação da bateria, o recuo. Logo abaixo do menu “A bateria na Avenida” existe a

subnavegação que expõe em qual etapa do processo o usuário está. Por fim, nota-se que em

Page 63: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

63

cada processo existe um pequeno texto explicando cada etapa, caso o usuário necessite de

auxílio verbal.

Figura 44. Navegabilidade e estética aplicadas em uma infografia.

Fonte: Portal IG. Disponível em http://bit.ly/zOXnWe

A infografia também explora os conceitos de interação, e encaminha o usuário para ser

um mestre de bateria – é possível comandar musicalmente a bateria com o se estivesse na

avenida.

Portanto, este infográfico do IG sugere vínculos de interação com o usuário, mas é polido

se esclarecer a diferença entre as palavras interativo e interação. Percebe-se o uso contínuo sem

conhecimento do significado. As duas palavras se diferem pelo fato de que interativo é indireto

e a interação é direta, ou seja: Interação na sociologia: nenhuma ação humana ou social existe separada da interação. (...) designando a influência recíproca dos atos de pessoas ou grupos. (FERNANDES: 2006 p.25). Interação na ciência da computação: na ciência da comunicação, interação é definida como a relação entre eventos comunicativos. Essa definição considera “comunicação interpessoal”, “relacionamento humano” e “interação humanos” como sinônimos. O conceito de interação vem de épocas remotas; entretanto, o de interatividade é recente. (FERNANDES: 2006, p.26).

O significado da interação veio muito antes da interatividade, pois esta surgiu depois da

disseminação dos computadores pessoais, segundo Fragoso (2001, p.10): Em 1954, propunha-se um programa que permitia desenhar num monitor. Porém, o verdadeiro impulso para uma interatividade nessa área foi dado por Ivan Sutherland, em 1963, com o programa Sketchpad, onde o usuário podia desenhar diretamente no monitor através de uma caneta (pen light). A partir disso, ainda nos anos 1960, o termo interatividade foi cunhado como uma derivação do neologismo inglês interactivity.

Page 64: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

64

Entretanto, Lévy (1999) sugere que interação são atividades humanas com articulação de

pensamento e ação entre: pessoas, entidades materiais naturais e artificiais, ideias e

representações. É impossível separar o humano de seu ambiente material, assim como dos signos e das imagens por meio dos quais ela atribui sentido à vida e ao mundo. Da mesma forma, não podemos separar o mundo material - e menos ainda sua parte artificial - das ideias por meio das quais os objetos técnicos são concebidos e utilizados, nem dos humanos que os inventam, produzem e utilizam. (LÉVY: 1999, p.22).

Segundo as próprias definições, Lévy (1999) também assegura que ao procurar aumentar

a autonomia, as experiências interativas multiplicam as faculdades cognitivas do usuário.

Kotler (2010, p. 37) faz um adendo sobre a interatividade no mundo do marketing,

afirmando que “a experiência de um produto jamais é isolada. É o acúmulo das experiências

individuais do consumidor que cria maior valor para o produto. Quando os consumidores

individuais experimentam o produto, personalizam a experiência de acordo com necessidades e

desejos singulares”.

Já Quéau afirma que: “a verdadeira revolução reside, no entanto, nas possibilidades

específicas da infografia, notadamente na sua capacidade de interação com o espectador e na

sua possibilidade de geração em tempo real, dando assim o sentimento de uma “imersão” na

imagem”.

Em linhas gerais, conclui-se que para poder haver interação são necessárias duas pessoas

conectadas por um dispositivo, como um canal de bate-papo, por exemplo, ou um jogo online

ou em dupla. Na interatividade, a resposta de uma ação vem do mecanismo utilizado, um

sistema, uma ferramenta, um dispositivo móvel, ou seja, um jogo que se joga com um

computador sem a participação de outro ser humano. Portanto, a ação do usuário ao controlar a

Bateria da Grande Rio está em um processo de interatividade.

Desta forma, é possível avaliar a importância deste processo dentro da infografia, pois,

conforme análise, a interatividade é um instrumento que instiga a curiosidade e a liberdade na

navegação de um conteúdo informativo.

Page 65: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

65

3. REFERENCIAIS DE PROJETO

3.1 A bateria da Grande Rio.

A infografia composta pelo portal IG é de entretenimento - informa e diverte no mesmo

instante em que o usuário interage com os recursos. Durante o trajeto percorrido, é descrito o

comportamento da bateria e quais instrumentos são utilizados, além de explicar como o mestre

deve se comportar. O mais interessante é a interatividade oferecida para o usuário assumir o

comando a escola, o que torna explícita a terceira fase da transposição da infografia.

O objetivo deste trabalho foi desenvolver uma interface com liberdade para navegação e,

principalmente, proporcionar interatividade ao transformar o usuário em ator do infográfico,

deixando ele comandar a escola de samba.

Outro ponto interessante são as informações – são apresentados os instrumentos, os

componentes da escola e a forma como acontece o desfile na passarela. Acredita-se que este

exemplo alcança a forma informacional e de entretenimento.

Figura 45. Tela inicial da infografia.

Fonte: Portal IG. Disponível em http://bit.ly/zOXnWe

3.2 Behavioural Dynamics Institute.

Page 66: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

66

Vídeo que mostra como se comporta a percepção dos indivíduos frente a informações que

são construídas de formas diferentes. Ad informação é interpretada e processada, e o sentimento

é exposto pelo indivíduo.

A linguagem do vídeo é acessível, pois utiliza exemplos simples para descrever esse

processo perceptivo. As informações são direcionadas para o mercado, ou seja, publicidade ou

marketing, no entanto, o vídeo apresenta como o comportamento pode mudar de acordo com a

forma que a informação é utilizada ou manipulada.

Busca-se, com este vídeo, compreender como a informação pode ser interpretada e qual é

a melhor forma de enviar uma mensagem visual. Além disso, é possível entender como a

informação pode ser recepcionada pela cognição e percepção do usuário, e, com isso, direcionar

a interface para uma visualização mais acertiva.

Figura 46. Imagem de um trecho do vídeo.

Fonte: Youtube. Disponível em http://bit.ly/xlDSS2. Acesso em 22/09/2011

3.3 Brasília 50 anos.

Este é um especial desenvolvido pelo Governo Federal para o aniversário de 50 anos de

Brasília. Apresenta sistema de busca com filtro de categorias, o que atende a visão estudada

neste trabalho, mas deixa a estética e os sentidos cognitivos em segundo plano. Outra

Page 67: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

67

característica importante é a linha do tempo secundária, logo abaixo da principal, que mostra a

cidade e os fatos políticos ocorridos naquele momento da história.

O objetivo de analisar este material é a forma externa ao conteúdo, ou seja, os elementos

de busca. A proposta deste trabalho é uma interface que possibilita ao usuário buscar e cruzar os

dados entre balneário em que está e os outros do Estado.

Figura 47. Tela inicial da linha do tempo.

Fonte: Governo Federal. Disponível em http://bit.ly/x6rc1w. Acesso em 03/11/2011.

3.4 Design de informação.

O vídeo discute alguns dos principais quesitos da infografia e do estado que apresenta no

ambiente virtual. Utiliza cores e símbolos para exemplificar os conceitos, como contar uma

história e compartilhá-la. Alguns destes conceitos foram apresentados neste trabalho:

visualização de dados, cognição e percepção da forma e dos elementos psíquicos, e de que

forma abstrair os dados de uma informação retirando as partes que causam ruídos ao

interpretante.

Neste vídeo é possível verificar formatos de análise de dados, conforme apresentados por

Sanagawa (2010), porém com outra linguagem, como modos de implantação versus variáveis

visuais versus níveis de organização.

Page 68: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

68

Figura 48. Trecho do vídeo sobre design de informação.

Disponível em http://vimeo.com/29684853#. Acesso 09/11/2011.

3.5 Diagramming/Mapping (complex) information: Theory and Practice. Disponível

em http://bit.ly/wQIGkH. Acesso 13/03/2012.

Artigo de um blog que fala sobre infografia, mapas e a origem destes na cartografia. O

texto mostra que diagramas e mapas unidos trabalham com informações complexas que podem

ser trabalhadas apenas visualmente. Segundo o artigo, na era da informação, o boom é da

visualização de dados - quase tudo o que é produzido, é visualizado. Infografia, design de

informação, representações esquemáticas, diagramação e visualização de dados de mapeamento

estão no auge. No entanto, estes métodos nasceram há anos, e renascem com o uso de

ferramentas digitais.

O que se busca neste artigo é o aprofundamento em diagramação e em mapeamento de

dados. O artigo discute sobre o estado da arte e a história da infografia no ambiente virtual.

3.6 El periodista y los mapas.

Post do blog Periodismo con futuro, do El País, escrito por Alberto Cairo, que explica e

mostra a evolução do uso de mapas em textos, jornais, livros ou manuscritos. Cairo cita toda a

importância e a mentira dos mapas na história.

Com esse artigo foi possível compreender formas de localização, métodos para utilizar

um mapa, distorções, ícones e linguagens diferenciadas para cada mapa. Neste trabalho será

utilizado um mapa localizando as praias analisadas pelo relatório de balneabilidade da Fatma.

Page 69: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

69

Figura 49. Distorções que pode aparecer em um mapa.

Fonte: El periodista y los mapas. Disponível em http://bit.ly/xJZXjS. Acesso em 08/12/2011.

3.7 Entrevista com Erik Spiekermann.

Spiekermann é um typedesigner e arquiteto da informação e explica sobre a metodologia

que utiliza e o processo criativo. Afirma que um bom líder é formado por uma boa equipe e que

nada se constrói sozinho.

Neste vídeo, Spiekermann comenta sobre novas linguagens visuais, processo de design,

analogias entre música e tipografia. Por isso, justifica que é necessário melhorar a cultura para

visualizar novas ideias e oportunidades. O que se analisou neste vídeo é a metodologia que ele

utiliza para desenvolver as tipografias. Também se buscou compreender os sentidos metafísicos

de uma ideia e como esta ideia pode ser esboçada ou construída de forma concreta.

Figura 50. Trecho da entrevista com Erik Spiekermann.

Fonte: Vimeo. Disponível em http://vimeo.com/gestalten/erik-spiekermann. Acesso em 23/01/2012.

Page 70: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

70

3.8 Estadão: O vírus da gripe suína.

Este trabalho do Estadão é típico do início da transição dos infográficos para a internet.

Apresenta apenas dois movimentos de interatividade, um de avançar e outro de voltar. Neste

infográfico, buscou-se contextualizar as etapas de transição, e foi possível observar que

representa a primeira fase.

Figura 51. Primeira fase da transição da infografia.

Fonte: Estadão. Disponível em http://bit.ly/upc1PO. Acesso em 27/04/2009.

3.9 Global Agenda Survey 2011.

A Global Agenda Survey 2011 foi um trabalho encomendado aos membros da Agenda do

Conselho Global para identificar as tendências mundiais mais importantes que provavelmente

impactariam a economia global, a sociedade e o meio ambiente nos próximos 12-18 meses. Esta

apresentação destacou as principais conclusões da pesquisa.

Na apresentação, buscou-se analisar a utilização dos conceitos de visualização de dados

traçados, o comportamento destes quando transformados em informação, o cruzamento de

dados e o visual da interface. Também foi analisada a utilização dos recursos apresentados pelas

leis da Gestalt, os conceitos expostos por Wong e por Sanagawa. Assim, foi possível verificar

como se comportam as cores, os ícones, os gráficos de dados, a navegabilidade e a cognição.

Page 71: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

71

Figura 52. Visualização da Agenda Survey 2011

Fonte: Report. Disponível em http://bit.ly/zZgXPp. Acesso em 08/01/2012.

3.10 Hans Rosling: profile on TED.com.

Grande inspirador desse trabalho, Hans Rosling é um médico sueco que visualizou

informações estatísticas sobre a humanidade e fez comparações em diferentes países, utilizando

técnicas de visualização de dados. Inovador e muito espirituoso, Rosling interage com o gráfico

e explica alguns pontos importantes. É o criador do GapMinder, que utiliza a manipulação de

dados online a partir do cruzamento, contextualizando os dados mais importantes da história

desde 1800 até 2011.

As concepções adquiridas a partir das análises históricas feitas por Rosling mostraram que

os dados de balneabilidade podem ser armazenados e recuperados em uma interface, conforme

o projeto GapMinder. Desta forma, foi o que direcionou este trabalho.

Figura 56. Profile de Hans Rosling no TED.

Fonte: Ted. Disponível em http://bit.ly/rxLsL6. Acesso em 04/06/2011.

Page 72: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

72

Figura 57. Visualização de dados do Gapminder

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

3.11 Hotsite Brasília 50 anos: como foi construído.

O hotsite do aniversário de Brasília foi produzido pela Magel Studio, e este link mostra a

metodologia utilizada pelo escritório.

Para este trabalho, buscou-se compreender a metodologia utilizada pela Magel ao

construir o hotsite em comemoração aos 50 anos de Brasília: os processos criativos, as

alterações necessárias durante o desenvolvimento do projeto, alinhamentos, linha do tempo,

navegação, interface, entre outros tópicos.

Page 73: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

73

Figura 58. Processo criativo da arquitetura da informação utilizada pela Magel.

Fonte: Magel Studio. Disponível em http://bit.ly/ywXXnQ. Acesso em 03/11/2011.

3.12 Map of New York City Police Stops: Interactive Feature.

Este é um dos primeiros trabalhos construídos pelo NYT labs que tem como característica

o estudo com base de dados e design de interface. Também considera o compartilhamento –

com o uso da barra superior, os usuários podem compartilhar a informação entre si. Neste caso,

procurou-se entender o mecanismo de manipulação de dados junto à utilização da ferramenta do

Google Maps, e se realmente a interface poderia ser manipulada conforme a necessidade de um

projeto.

Page 74: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

74

Figura 59. NYT Labs.

Fonte: NYT Labs. Disponível em http://nyti.ms/vrhDuE. Acesso em 03/04/2011.

3.13 Max Planck Research Networks.

Mapa construído para mostrar as publicações acadêmicas dos últimos dez anos nos EUA.

A dinâmica de rede compõe um mapa de alto nível do Instituto Max Planck e as conexões

referentes a este. O mapa apresenta ícones com tamanhos diferentes que representam o número

de publicações, e a largura das linhas expõe o número de publicações feitas em conjunto com o

instituto. Estas informações são disponibilizadas em tela touch screen – o que representa uma

nova forma de interatividade com o usuário.

Figura 60. Max Plank Institute

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

Page 75: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

75

3.14 Palestra de Moritz Stefaner : Designer de informação. Disponível em

http://vimeo.com/28443920. Acesso em 23/01/2012.

Stefaner apresenta a metodologia e o processo criativo que utiliza durante um congresso

da Organization for Economic Co-operation and Development (OECD). Mostra quatro

exemplos de metodologia para visualização da informação e explana sobre os detalhes de cada

projeto.

3.15 The Fundamental Elements of Design.

Vídeo que apresenta os elementos fundamentais do design, como ponto, linha, forma, e

cores, além de mostrar como se transformam em um mecanismo de comunicação. Utilizou-se

este vídeo para compreender como se introduz os conceitos de design na infografia online.

Figura 61. Trecho do vídeo The fundamental elements of design.

Fonte: Erica Gorochow. Disponível em http://bit.ly/AvZDjK. Acesso em 27/01/2012.

3.13. Zero Hora: Especial Segunda Guerra.

Este infográfico, composto pela Zero Hora, utiliza a segunda fase da infografia no Brasil,

com recursos de vídeos, fotos e hiperlinks, para transmitir informações sobre a Segunda Guerra

Mundial.

Este trabalho é referência da segunda fase da transição da infografia online, em que se

percebe a utilização da convergência de mídias, como jogos eletrônicos, vídeos, hiperlinks,

entre outros.

Page 76: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

76

Figura 63. Infográfico do jornal ZH sobre a Segunda Guerra.

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

Page 77: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

77

4. METODOLOGIA DE PROJETO

Em um planejamento de viagem, por exemplo, é estabelecido qual é o destino, tempo de

estadia, transporte, quanto de dinheiro é necessário, entre outras questões. Mas alguns itens

podem passar despercebidos, ou até mesmo pode acontecer de aparecer roteiros alternativos

interessantes em certo momento da viagem.

Qualquer metodologia, como Panizza (2004) comenta, é passível de adaptações. No do

universo do design, as metodologias são aplicadas para sugerir e especificar um trajeto ou os

processos de forma que se atinjam os objetivos de um projeto - neste caso, desenvolver uma

interface para um infográfico online.

O desenvolvimento do projeto tem como possibilidade mesclar várias metodologias,

portanto, a utilização de vários autores pode ser necessária. Panizza (2004) argumenta que o

grau satisfatório de uma metodologia em um projeto não significa necessariamente que esta

metodologia pode ser aplicada em outros projetos.

Contudo, as metodologias engessaram alguns processos e, na sociedade pós-moderna,

segundo Panizza (2004), os projetos obtiveram liberdade quase que total, criando, assim,

processos únicos e produtos inovadores com grande valor de mercado. Dentro desta avaliação

de Panizza (2004, p.81), é importante ressaltar que durante o pós-moderno “a forma sobrepujou

a função, a expressividade, o método e a valorização de objetos "conceituais" cresceu

dramaticamente.”

Ferrara (2004, p.55 a 57) sugera que: Para o design, essa experimentação se confirma por meio de um diagrama que usa o desenho analógico ou digital para testar, em interfaces complementares, materiais, tecnologias, técnicas, resistências, formas, funções, volumes, espaços, visualidade, legibilidade ou identidade cabendo, em cada caso, uma ampla discriminação de características e, sobretudo, uma complementaridade responsável por uma interface que, atualmente, se impõe pela possibilidade de sincretizar linguagens e veículos, tecnológicos ou não. Mas, em qualquer caso, pensa-se em produção nova e capaz de intervir para mudar. [...] Interfaces de procedimentos e de linguagens, associações contínuas, interatividade entre produção e consumo constituem a tarefa rotineira do designer e concretizam uma atividade de recombinações que a semiótica já propõe como atividade sistêmica, e que a moderna hipermídia só faz reconhecer ou reapresentar.

A metodologia pode ser uma poderosa ferramenta na redução de erros, tempo e custo.

Entretanto, observa-se que a prática profissional não pode ser negligenciada, pois é por meio

desta prática que as regras são quebradas. Bonsiepe (1997, p.187) segue no mesmo prisma, e

defende uma visão mais suave: “a teoria pode ser caracterizada como domínio no qual se

desenvolvem distinções que contribuem para uma auto-interpretação refletida na prática

projetual”.

Page 78: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

78

A metodologia no design busca resolver problemas e, segundo Munari (1981), se um

problema não tem solução então não é um problema. Para falar sobre metodologia, é preciso ter

um problema passível de solução. Busca-se, com a metodologia, responder os requisitos do

projeto que pretendem fornecer usabilidade e navegabilidade a uma interface para um

infográfico que apresenta dados sobre a balneabilidade do litoral catarinense.

Como todo o projeto de design precisa seguir planos e metodologias, segundo Cardoso

(2004), há necessidade de gerar objetivos, planos, esboços ou modelos.

O processo do projeto se assemelha com uma receita gastronômica, em que o chef segue a

receita sem desconsiderar a intuição e a experiência. Munari (1983, p.20) afirma que “o método

projetual não é mais que uma série de operações necessárias, dispostas em ordem lógica, ditada

pela experiência. O objetivo é atingir o melhor resultado com o menor esforço.”

Ao iniciar um projeto de design, é muito importante definir os valores e objetivos

essenciais do projeto por meio do briefing, como afirma Phillips (2007). Mas nem todos os

valores são absolutos e imutáveis – acontecem adaptações conforme o andamento do projeto.

Munari (1983) concorda com essa ideia quando afirma que as regras e os métodos do design

não bloqueiam o projetista, pelo contrário, aguçam a percepção e estimulam a criatividade.

Segundo Phillips (2007), no processo de elaboração do briefing todas as etapas do projeto

são analisadas e estipuladas para evitar perda de tempo e recursos. É uma importante ferramenta

para que o projeto atenda as metas estratégicas. Geralmente, neste processo, é especificado o

tipo do trabalho (produto, web, editorial, embalagem), a quem se destina, quais as

especificações do projeto, o cronograma e os orçamentos, além de outras informações

pertinentes ao projeto.

Em entrevista concedida à Juliana Guimarães Carvalho, Fabio Abreu, editor de arte do

Jornal A Notícia, afirma que o ideal é que o infografista participe de todo o processo, desde a

ideia, apuração, pesquisa e consulta de fontes. Nem sempre a produção acontece assim, a

“demanda e as urgências de um jornal diário não permitem um processo perfeito”. Assume que

o infografista “algumas vezes influencia e organiza todo o processo, em outras recebe um

pacote pronto”. Quando este último caso acontece, já existe um estilo pré-definido, chamado

template.

Abreu comenta que o processo de criação começa no briefing (ou pauta para o

jornalismo), independente se é verbal ou descritivo. O responsável pelo trabalho desenvolve um

esboço, “para ter uma ideia de como vai organizar a informação” e ver o comportamento da

leitura, define as cores, pesquisa imagens, entra em contato com fontes, por meio de entrevistas,

leitura e livros. Depois revisa o layout e avança para a estética, revisões, correção e o

Page 79: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

79

acabamento. Segundo Abreu, este processo só acontece com prazos “elásticos” - no cotidiano,

as infografias mais simples são solucionadas com os templates, para agilizar o trabalho e

cumprir o horário de fechamento do jornal.

Observa-se que algumas etapas de elaboração de um infográfico impresso podem atender

a estruturação do infográfico online. Carvalho (2007, p.58) estruturou a infografia impressa da

seguinte forma: Pauta/Briefing: discussão e definição do tema; Apuração e levantamento de dados: pesquisa e consulta de fontes; Análise de similares: inspiração e referencias estéticas; Elaboração de conteúdo: o texto em si; Arquitetura da informação: texto, imagem, forma; Arte final: esboço é convertido para o layout final. Cores, texto e imagem ganham propriedade informacional; Acabamento: ajustes, tratamento nas imagens e preparação para a impressão; Revisão: todo o texto e legibilidade é revista; Publicação: enviado para o suporte que deverá ser publicado; Análise crítica: avaliação do produto final para o crescimento e amadurecimento com intuito de aprendizagem.

Todos estes métodos foram pesquisados por profissionais da área e ajudaram na

composição de um organograma de procedimento estruturado por Carvalho (2007). Na figura

64, Carvalho (2007) exemplifica visualmente as etapas de elaboração do infográfico estático na

mídia impressa. Desta forma, pode ser que sejam utilizadas metodologias de interface junto à de

Carvalho (2007).

Figura 64. Contextualização visual dos métodos da infografia impressa.

Fonte: CARVALHO (2011, p.60).

Page 80: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

80

Para sintetizar, a infografia é constituída por linguagem visual composta por regras

estabelecidas por meio da semiótica e estética e com o objetivo de enviar alguma informação.

Entretanto, no momento da análise de execução e acabamento, parte destacada na figura

7, da metodologia projetual sugeria por Carvalho (2011), percebeu-se que, para a interface

atingir os objetivo, é necessário verificar os modelos de estruturas da arquitetura da informação

apresentadas por Kalbach (2009), de legibilidade propostos por Nielsen e Loranger (2007).

Além disso, também é preciso averiguar o escopo da produção do desenho exposta pelo Projeto

E, que apresenta itens que podem facilitar a finalização e análise heurística da interface final.

Assim, é possível analisar algumas mudanças na estrutura projetual, a partir da estrutura

básica da infografia apresentada por Carvalho (2011), que utiliza o mesmo embasamento da

metodologia impressa. Ou seja, no meio impresso precisa-se de um briefing e a apuração é

comumente utilizada, mas ao mudar a plataforma de publicação, a execução é necessária uma

adaptação dos métodos de execução e acabamento.

4.1 Briefing/Pauta

Caio Maia, presidente e fundador da Chilli Beans, em entrevista ao professor José

Dornelas, afirma que para que um bom projeto dê certo “é necessário ter uma base sólida”.

Alberto Cairo sempre comenta, em palestras e workshops, que um bom infográfico começa por

uma boa pergunta.

Portanto, se a internet tem a capacidade de armazenar, atualizar e recuperar dados, por

qual razão não arquivar e utilizar essa capacidade? Este valor que a internet pode trazer para a

interpretação de dados lembra o questionamento original desta pesquisa. Como criar uma

interface gráfica que atenda aos requisitos de infografia online e que interprete os dados

disponibilizados pela Fatma, mostrando o índice de poluição das praias do litoral de Santa

Catarina?

Durante o verão, os dados sobre a balneabilidade são divulgados toda sexta-feira e são

disponibilizados em tabelas no meio impresso, conforme o anexo 4. Com este trabalho, busca-

se transformar tais dados tabelados em gráficos, oferecendo à população catarinense uma forma

de visualizar o índice de poluição da praia que cada usuário frequenta. São dados que podem

gerar gráficos semestrais e anuais.

Ou seja, o trabalho em questão pretende adaptar os dados fornecidos pela Fatma sobre a

balneabilidade do Litoral Catarinense, localizando cada praia e gerando gráficos semanais,

durante o verão, sobre os índices de poluição nas praias analisadas.

Page 81: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

81

4.2 Apuração e levantamento de dados

O objetivo da apuração de dados é disponibilizar visualmente os dados apresentados pela

Fatma durante o verão em um relatório semanal sobre as condições das praias no litoral

catarinense - durante o inverno, o relatório é quinzenal.

Durante a produção serão utilizados recursos de software de diagramação, ilustração e

arte final. As informações necessárias para compor a interface do infográfico são apresentadas

na figura 65, em que são apontados os balneários pertencentes a cada município do litoral

catarinense e a condição das praias é destacada como própria ou imprópria - estes dados são os

geradores dos gráficos. Abaixo da lista apresenta-se um pequeno gráfico mostrando o índice do

município escolhido.

Figura 65: Relatório online da balneabilidade.

Fonte: Fatma. Disponível em http://bit.ly/LebCXu. Acesso em 26/06/2012.

Page 82: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

82

Esta interface é disponibilizada para todos que tenham interesse em saber como está a

saúde do balneário que tem interesse de conhecer ou onde possuam residência de veraneio.

No desenvolvimento do projeto, será necessário um período para analisar os dados,

converter os dados em sistema de linguagem visual e analisar quais são importantes para a

população, além de concepção de busca, navegabilidade e implantação. Por fim, será publicado

no ambiente web.

4.3. Arquitetura de informação

O modelo, apresentado por Kalbach (2011), de informação líquida, possibilita ir de um

estado a qualquer outro, e isto proporciona acesso ágil ao usuário experiente, que vai estabelecer

o trajeto de navegação com a interface. (Figura 66)

Figura 66. Informação líquida

Fonte: Kalbach (2008, p.25)

Desta forma, a arquitetura da informação líquida parece responder às necessidades do

projeto. Esta escolha pode ser embasada segundo o projeto GapMinder do professor Hans

Rosling, em que o usuário acessa todas as informações em uma plataforma, e pode navegar por

conforme a necessidade.

Percebe-se, por meio da arquitetura da informação, que alguns itens serão utilizados na

interface, como mapas, gráficos, gráficos de comparação, linha do tempo, compartilhamentos e

um relato projetual.

Principal

Mapas

Visualização de dados

Período do arquivo dos

dados

Compartilhamento dos

dados

Histórico

do projeto

Page 83: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

83

4.4 Interface

Após verificar a arquitetura da informação, é possível perceber que, para levar a

informação ao usuário, podem ser necessários mapas, gráficos e linha do tempo. Portanto,

analisa-se que, por meio da ferramenta apresentada pelo Google Maps, pode-se usar um mapa já

existente, modificando as configurações. Na figura 67, é apresentado um showcase de quatro

configurações do Google Maps. Nota-se que cores, estradas, vegetação, entre outras

configurações, podem ser manipuladas, conforme critérios do projeto.

Figura 67. Showcase de quatro tipos de configurações do Gmaps.

Fonte: Google Maps Develpment.

Os gráficos comparativos podem utilizar bolhas com índice de porcentagem, apresentadas

por outra ferramenta disponível - a FusionCharts, apresentada na figura 68. Os gráficos podem

também ser aplicados como uma camada superior do mapa, como é possível notar em um

modelo real apresentado pelo NYT nos referenciais de projeto.

Figura 68. Showcase de gráficos de bolhas.

Page 84: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

84

Fonte: Fusioncharts. Disponível em http://bit.ly/MW7Gg2. Acesso em 28/06/2012.

De acordo o relatório de balneabilidade da Fatma, pode-se perceber que existem duas

variáveis - própria e imprópria. Desta forma, a ferramenta Fusion oferece a visualização

diferenciando por cor ou símbolo, e, neste caso, opta-se pela diferenciação de cor, pois além das

duas variáveis, o gráfico terá uma terceira, que analisa o maior índice de ocorrência dos termos

própria e imprópria em determinado balneário.

Nesta terceira variável pode ser utilizado o mesmo conceito que o NYT utiliza no gráfico

Map of New York City Police Stops: Interactive Feature, em que, conforme a incidência das

bolhas, aumenta ou diminui. Outra forma de analisar este dado é por saturação de cor: quanto

maior a incidência do impróprio, o vermelho fica mais evidente, ou quanto mais próprio para

banho é o balneário, a cor tende a ficar verde.

Figura 69. Bubble Chart com diferenciação de cores.

Fonte: Fusioncharts. Disponível em http://bit.ly/MW7Gg2. Acesso em 28/06/2012.

A análise dos dados pode também ser apresentada por período, conforme é apresentado

pela base do gráfico do GapMinder. Para este trabalho, foi feita uma comparação entre a linha

do tempo apresentada pelo Gapminder e pela equipe Magel, no aniversário dos 50 anos de

Brasília. Observou-se que o Gapminder é mais sucinto, abstrai a informação e apresenta com

uma sensação visual mais simples e informativa.

Page 85: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

85

4.5 Legibilidade

Após a explanação sobre a arquitetura da informação, segundo metodologia apresentada,

parte-se para arte final. Como referência, será considerado o método da equipe da Magel e do

Projeto E, estruturando o layout conforme a hierarquia da informação. Na figura 70, evidencia-

se como será a página, a partir da definição de cores, tipografia e ícones, e da construção do

layout além do esboço do papel, partindo efetivamente para o desenvolvimento.

Figura 70. Esboço e finalização de layout.

Fonte: Magel Estudio.

4.5.1 Estudo de cores.

A escolha das cores utilizadas no projeto foi feita com a ajuda da ferramenta Kuller, da

Adobe, exposta na figura 71, que faz analogias com outros recursos dentro do círculo

cromático, facilitando e agilizando a escolha cromática do projeto.

Conforme os conceitos da psicodinâmica das cores, é possível evidenciar que cores

quentes podem ser usadas em sinais de navegação ou de itens que precisam de mais atenção.

Também podem ser utilizadas puras ou saturadas, com matiz maior ou menor.

Figura 71. Ferramenta Kuller.

Page 86: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

86

Fonte: Adobe. Disponível em http://www.kuler.com. Acesso em 28/06/2012

4.5.2 Estudo de tipografia

A interface do relatório de balneabilidade busca ter a mesma coerência textual utilizada

pela infografia impressa, em que se observa título, subtítulo e texto explicativo.

Segundo Lupton (2006, p. 68), a internet tem forçado um trabalho inventivo com novas

modalidades de “microconteúdo” (títulos de página, palavras-chave), que permitem

visualização da busca, marcação e conversão de dados, o que cria um espaço informacional,

mais do que simplesmente uma sequência linear (como em livros e revistas, por exemplo).

O início da leitura no ambiente virtual é diferente do que em um livro, pois no

computador a superfície de leitura é escura e com tipos de cores diferentes. Em 1980, com

estudos de HCI, percebeu-se que se a superfície da tela fosse branca, e o tipo preto, a leitura

seria facilitada.

Entretanto, Lupton (2006, p.74) afirma que a “impaciência do leitor digital vem da

cultura, não da natureza da tela. Os usuários de sites têm expectativas diferentes dos usuários de

impressos. Eles querem sentir-se “produtivos”, não contemplativos; não querem processar,

querem buscar; esperam ser desapontados, distraídos e atrasados por pistas falsas.” O autor

conclui afirmando que “a tipografia é uma interface com o alfabeto”.

Na figura 72, é possível observar que os testes de tipografia podem ser realizados

com diagramas, pois se pode analisar juntamente título, subtítulo e blocos de textos.

Figura 72. Diagrama de estudo tipográfico.

Fonte: Anexo 4.

Nielsen e Loranger (2007) sugerem que a interface pode oferecer controle que permita o

redimensionamento do texto para se adequar à necessidade visual do usuário e garanta o

contraste, também sugerido por Lupton. Os autores analisam que textos curtos e explicativos

ajudam na leitura.

Page 87: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

87

4.5.3 Estudo iconográfico

Para o uso de ícones no mapa e no site, pode-se usufruir da ferramenta de ícones do

Google. Como será utilizado o visual do Google Maps, os ícones internos podem ser utilizados

na mesma plataforma de construção, como se verifica na figura 73.

Figura 73. Ícones do Google.

Fonte: Google. Disponível em http://code.google.com/p/google-maps-icons/. Acesso em 10/09/2012

4.6 Análise Heurística

A avaliação heurística foi um termo criado por Jakob Nielsen e Molich, e, segundo

Moraes e Rosa (2010), identifica pontos problemáticos em uma interface. Esta análise também é

apresentada por diversos autores, como Krug (2008), Agner (2009) e Cairo (2008). Um bom

projeto de interface, que tenha a interação como foco, precisa ter, basicamente, alguns critérios:

Visibilidade: funções e objetos importantes bem visíveis;

Retroalimentação: cada ação pede uma reação, rápida e concisa;

Restrições: guiar a navegação com funções visíveis, ou seja, links e botões bem

posicionados que indicam a direção correta, mas sem restringir o clique livre do usuário

experiente;

Page 88: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

88

Consistência: linguagem visual padronizada para que o usuário se sinta na mesma

plataforma;

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;

Autocontrole: o usuário deve ter sempre a sensação de controlar o sistema e reconhecer

as respostas;

Memória humana: deixar sempre visíveis os itens importantes para a navegação;

Design centrado no usuário (UCD): saber como o usuário do sistema se comporta, o

que espera e quais são os métodos de navegação.

Como avaliação final, a metodologia pode facilitar e agilizar o desenvolvimento de um

projeto de interface para visualização de dados da balneabilidade em Santa Catarina. Mostra-se

interessante a pesquisa e descoberta de ferramentas já disponíveis para construção de mapas e

gráficos. Portanto, percebe-se que, com os elementos construídos, a analise heurística pode

validar os conceitos e mostrar quais poderão ser úteis.

Page 89: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

89

5. CONSIDERAÇÕES FINAIS

Neste trabalho, buscou-se percorrer os caminhos que a infografia trilhou, além de

compreender a função desta na internet e os estilos utilizados, como gráficos de comparação,

que contam fatos históricos, linha do tempo, entre outros. Foi possível perceber que a

construção da infografia impressa e digital têm elementos em comum, e a estrutura de

construção podem ter analogias, como ocorre em um mapa, que é elemento de construção tanto

para o meio impresso quanto para o digital.

Com a exploração da transição da infografia do meio impresso para o digital, percebeu-se

que o contato do usuário com a informação e com os dados acontece por meio da interface

gráfica, em que usuário busca, cruza e compartilha informação.

Também aprofundadas neste trabalho as peculiaridades da informação na infografia,

independentemente de ser publicada em papel ou na internet, o que foi possível por meio da

história da comunicação visual, estudando a origem e o sentido das imagens. Na transição da

infografia para a internet, percebeu-se que nas duas plataformas a finalidade é comunicar algum

fato, dado, ou contar cronologicamente uma historia. Com os estudos, observou-se que a forma

de enviar a informação na internet necessita de outros mecanismos motores, como tato, audição

e visão.

A infografia na internet possibilita a utilização de recursos audiovisuais e explora muito

mais a cognição, aumentando a leitura e a movimentação visual. Ao percorrer o caminho

trilhado pela infografia, foi possível notar os estágios de evolução e o comportamento que a

informação gráfica pode alcançar.

Também se observam outras possibilidades de infográficos que podem usufruir de

ferramentas já disponíveis e desenvolvidas para a construção de interface. Portanto, o desafio de

desenvolver uma interface para mostrar o índice de poluição das praias de Santa Catarina,

utilizando o relatório de balneabilidade fornecido pela Fatma, mostrou-se uma maneira bastante

interessante de explorar as novas ferramentas que a internet oferece e de comunicar algo

importante para as pessoas que vivem e gostam das praias.

Page 90: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

90

REFERÊNCIAS

AGNER, Luiz. Ergodesign e arquitetura da informação: trabalhando com o usuário. Rio

de Janeiro: Quartet, 2ª ed.2009.

BAITELLO JR, Norval. A era da iconofagia: ensaios de comunicação e cultura. São Paulo:

Hacker, 2005.

BARBOSA, Suzana. Banco de Dados como metáfora para o jornalismo digital de terceira

geração. In: Ciências da Comunicação em Congresso na Covilha. III Sopcom, VI Lusocom, II

Ibérico, UBI (CD-ROM), 2004.

BELL, Gavin. Criando aplicações para redes sociais; tradução Thaís Cristina Casson. São

Paulo: Novatec; Sebastopol, O’Reilly, 2010.

BELÉM, Alexandre. Eadweard Muybridge. Disponível em http://bit.ly/MHqCit. Acesso em

20/01/2012.

BUARQUE de Holanda Ferreira, Aurélio. Dicionário Aurélio básico da língua portuguesa.

São Paulo: Folha de São Paulo/Nova Fronteira, 1994-95.

CAIRO, Alberto. Infografia 2.0: Visualización interactiva de información em prensa.

Madrid: Alamut, 2008.

CAIRO, Alberto. Information Graphics Workshop in Spain. Disponível em:

http://www.thefunctionalart.com/2012/03/information-graphics-workshop-in-spain.html.

Acesso em 26/04/2012.

CAMPOS, Jorge L. SILVA, Wallace V. O design e a representabilidade dos signos dentro

da world wide web. Disponível em http://bit.ly/Ljm3gO. Acesso em 21/06/2012.

Page 91: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

91

CARDOSO. Rafael. Uma introdução à história do designer. São Paulo: Edgard Blüeher,

2004.

CARVALHO, José O. F., DIAS, Mateus Pereira. A Visualização da Informação e a sua

contribuição para a Ciência da Informação. DataGramaZero: Revista de Ciência da

Informação: v.8, n.5, out/07.

CLARK, Kenneth. Leonardo da Vinci, Rio de Janeiro, Ediouro,2003.

COSTELLA, Antônio F. Comunicação – do grito ao satélite. 5a. ed. São Paulo: Mantiqueira,

2002.

DONDIS, Donis A. Sintaxe da linguagem visual. Traduação Jeferson Luis Camargo. São

Paulo: Martins Fontes, 1997.

FILHO, João G. Gestalt do Objeto: sistema de leitura visual da forma. São Paulo: 2000.

FRIENDLY, Michael e DENIS, Daniel J. Milestones in the History of Thematic Cartog-

raphy, Statistical Graphics, and Data Visualization. Disponível em

http://datavis.ca/milestones/. Acesso em 23/04/2012.

JENKINS, Henry, Cultura da Convergência. São Paulo :Aleph, 2008.

HOFFMANN, Carol. Infográficos - Da essência ao clichê na era da informação digital,

2010. Disponível em http://bit.ly/JGB9Mp. Acesso em 24/6/2012

KANNO, M., Marcos na História da Visualização de Dados, 2008. Disponível em

http://bit.ly/NrOQhG. Acesso em 15/02/2012.

KALBACH, James. Design de Navegação Web: Otimizando a experiência do usuário. Por-

to Alegre: Bookman, 2009.

Page 92: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

92

KIRSH, David. Metacognition, Distributed Cognition and Visual Design, em Cognition,

Education and Communication Technology. Peter Gärdinfors & Petter Johansson, Lawrence

Erlbaum (eds.), 2004.

KOTLER, Philip. Marketing 3.0: as forças que estão definindo o novo marketing centrado

no ser humano. Tradução H. de Barros. Rio de Janeiro: Elsevier, 2010.

KRUG, Steve. Não me faça pensar! Uma abordagem de bom senso à usabilidade na web.

Rio de Janeiro: Alta Books, 2008.

LÉVY, Pierre. Cibercultura. Tradução Carlos Irineu da Costa. São Paulo: Ed 34, 1999.

NIELSEN, Jacob; LORANGER, Hoa. Usabilidade na Web: Projetando Websites com

Qualidade. Rio de Janeiro: Campus, 2007. NIEMEYER, Lucy. Elementos da semiótica aplicados ao design. Rio de Janeiro: OAB, 2007.

MARTINEZ, Maria L. Um método de web design baseado em usabilidade. Disponível em

http://www.swlivre.org/site/cpweb/martinez03a.pdf. Acesso em 29/09/2010.

MEGGS, Philip B. História do design gráfico. São Paulo: Cosac Naify, 2009.

MUNARI, Bruno. Das coisas nascem coisas. Apontamentos por uma metodologia

projetual. Barcelona: Editorial Gustavo Gili, 1983.

MUNARI, Bruno. Design e Comunicação visual. Tradução Daniel Santana, São Paulo:

Martins Fontes, 1982 (©1968).

PANIZZA, Janaína Fuentes. Metodologia e processo criativo em projetos de comunicação

visual. São Paulo: ECA/USP, 2004.

PABLOS, José Manuel de. El Nuevo periódico Del Plomo a la luz. Tenerife, Ediciones Idea,

1993.

Page 93: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

93

PABLOS, José Manuel de. Infoperiodismo. El periodista como creador de infografía, Santa

Cruz de Tenerife, Ed. Idea, 1999.

PABLOS, José Manuel de. La infografía, el nuevo género periodístico. Editorial Sanz y

Torres, 1991.

PELTZER, Gonzalo. Jornalismo iconográfico. Lisboa, Planeta Editora Ltda., 1992.

PHILLIPS, Peter L. Briefing: a gestão do projeto de design; tradução. Revisão técnica:

Whang Pontes Teixeira. São Paulo: Edüora Blucher, 2007.

QUÉAU, Philippe. Imagem Máquina: A era das tecnologias do virtual. Trad. Henri

Gervaiseau. In: PARENTE, André (org.). Rio de Janeiro: Ed. 34, 1993. 304 p. 91-99p.

RODRIGUES, Adriana A. Infografia em base de dados no jornalismo digital, 2008.

Disponível em http://bit.ly/pQ5gQz. Acesso em 20/9/2010.

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

SILVA, William Robson Cordeiro. O Desenho da Notícia: Uma Análise Semiótica da

Infografia do Jornal de Fato. 2010. Disponível em http://bit.ly/tN0dIa. Acesso em

14/09/2011.

SUNAGAWA, Walkiria K. Análise das relações entre as representações gráficas da

cartografia temática e o design gráfico.São Paulo, 2010.

Tim, BROWN. Design Thinking: uma metodologia poderosa para decretar o fim das

velhas ideias. Tradução Cristina Yamagami. Rio de Janeiro: Elsevier, 2010.

WONG, Wucius. Princípios de forma e desenho. Tradução: Alvamar Helena Lamparelli. São

Paulo: Martins Fontes, 1998.

Page 94: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

95

ANEXO1

Page 95: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

http://kanno-infografia.blogspot.com/

Marcos na História daVisualização

de Dados

BASEADO EM ”Milestones in the History of Thematic Cartography,

Statistical Graphics, and Data Visualization”

An illustrated chronology of innovations Tradução autorizada pelos autores

Michael Friendly and Daniel J. Denis, York University, Canada

TRADUÇÃO E ORGANIZAÇÃO: MÁRIO KANNO

http://kanno-infografia.blogspot.com/

Page 96: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

http://kanno-infografia.blogspot.com/

Marcos na História da Visualização de Dados• Até o séc. 17: Primeiros Mapas e diagramasAs origens da visualização estão nos diagramas geométricos, nas tabelas de posição das estrelas e nos mapas. Noséculo 16, com expansão marítima da Europa, novas técnicas e instrumentos foram desenvolvidos e, com eles, novas,e mais precisas, formas de apresentação visual do conhecimento. Em 1436, Johannes Gutenberg inventa a imprensa

c. 6200 a.C. O mapa mais antigo?(Representação de uma cidadeda Babilônia encontrado naregião de Kirkuk, Iraque. Ooriginal era escavado em pedra)

c. 550 a.C. O primeiro mapa-múndi? Não há cópias, apenasdescrições nos livros de Heródoto. Anaximandro deMileto (c.610 a.C.- 546 d.C.), Grécia

c. 950 Primeiro registro conhecido amostrar variáveisgraficamente (posição do sol,lua e planetas durante o ano)

c. 1500 O italiano Leonardo da Vinci(1452-1519) transpõe seuconhecimento em ilustraçõesdetalhadas para retratar aanatomia, máquinas emovimentos

c. 1350 O bispo francês Nicole Oresme (1323-1382) propõe o uso de gráficos debarras para demonstrar uma variávelque depende de outro valor

1375 Livro Catalão reúne, emvisual deslumbrante,cosmografia, calendárioperpétuo erepresentações temáticasdo mundo conhecido.Abraham Cresques (1325-1387), Mallorca, Espanha

1569 Invenção da projeção cilíndricapara retratar o globo terrestre.Obelga Gerardus Mercator (1512-1594), também dividiu seu mapa-múndi em páginas para facilitar ouso e estampou a imagem dodeus Atlas na capa

1595Rumold Mercator (1545-1599),filho de Gerardus continua seutrabalho e publica este mapa-múndi em 1595, um ano após amorte do pai

c. 150 Projeção esférica da Terra usando latitudes e longitudesfeita por Ptlomeu (c. 85-c. 165), Alexandria, Egito. O mapaacima é uma reprodução do mapa-múndi de Ptlolomeufeita por Johan Scotus em 1505

Page 97: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

http://kanno-infografia.blogspot.com/

• 1600 a 1699: Medições e teoriasOs maiores problemas do século se referiam a 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

• 1700 a 1799: Novas fórmulas gráficasCartógrafos começam a mostrar mais do que a posição geográfica. Até o fim do século aparecem tentativas de mapearinformações de geologia, economia, demografia e saúde. A medida que o volume de dados avança, novas formas de visualização aparecem. Inovações tecnológicas como a cor, litografia e imprensa abrem novos caminhos

1644 Descrição feita por Michael van Langren's das12 referências delongitude de Toledo a Roma

1686 Primeiro mapameteorológico conhecidomostra a prevalecência dosventos em um mapageográfico. Edmond Halley(1656-1742), Inglaterra

1765 Linha do tempo: vida de 2.000 pessoasfamosas de 1200 a.C. até1750. O tempo de vida foirepresentado por barras.Joseph Priestley (1733-1804), Inglaterra

1782 Uso da geometria, figuras proporcionais (quadrados)para comparar dados demográficos em superposição.Charles de Fourcroy, França

1669Gráfico de função mostra comoencontrar os anos de vida restantes deacordo com a idade atual, de ChristiaanHuygens (1629-1695)

1779 Análise gráficade variaçãoperiódica natemperatura dosolo. JohannHeinrich Lambert(1728-1777),Alemanha

1782 O primeiro mapatopográfico.Marcellin du Carla-Boniface, França

1786 Gráfico debarras e delinhas comdadoseconômicos.William Playfair(1759-1823),Inglaterra

Page 98: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

http://kanno-infografia.blogspot.com/

• 1800-1849: O início da infografia modernaA primeira metade do século 19 foi responsável por uma explosão no crescimento de gráficos estatísticos e de mapeamento temático,graças às inovações obtidas no século anterior.Todas as formas de gráficos estatísticos conhecidos hoje foram desenvolvidos nestaépoca; na cartografia, mapas simples foram transformados em atlas complexos baseados em grande variedade de dados

1801 O primeiro mapa geológico da Inglaterra e do País de Galesdesenvolveu um padrão para a cartografia geológica. Tambémconhecido como o “mapa que mudou o mundo” (para os geólogos, pelomenos). Desenhado em 1801, versão final de 1815. William Smith(1769-1839), Inglaterra

1801 Gráfico de pizza circular, de WilliamPlayfair (1759-1823), Inglaterra

1820 Um grande número de de publicaçõescientíficas começam a contar comgráficos e diagramas paradescrever, e não analisar, fenômenosnaturais (variação magnética, clima,etc.). Michael Faraday (1791-1867),Inglaterra

1836 Mapeamento das prostitutasem Paris. Alexandre JeanBaptiste Parent-Duchatelet (1790-1836), França

1843 O uso de coordenadas polares em umgráfico (direção da freqüência dos ventos).Léon Lalanne (1811-1892), França

1844 “Tableau-graphique” mostrando o transporte comercialcom as variáveis distância (horizontal),quantidade (barras divididas) e custo por área.Charles Joseph Minard (1781-1870), França

1838Atlas físico com adistribuição de plantas,animais, clima, etc. , umdos mais extensivos edetalhados atlastemáticos. Inclui tabelase gráficos ilustrados.Heinrich Berghaus (1797-1884), Alemanha

1819 Cartograma, mapa comsombras em preto ebranco, mostrando adistribuição doanalfabetismo na França.Talvez o primeiro mapaestatístico. Baron PierreCharles Dupin (1784-1873), França

Page 99: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

http://kanno-infografia.blogspot.com/

• 1850 a 1900: Era de Ouro das EstatísticasPor volta de 1850 todas as condições para um rápido crescimento da visualização estavam estabelecidos. Escritórios de análise seespalhavam pela Europa com o aumento da importância das informacões numéricas para planejamento social, indústria, comércioe transportes. A teoria estatística iniciada por Gauss e Laplace deu os meios para fazer sentido a um grande número de dados

1855Mapeando os casos da epidemiade cólera em Londres, Dr. JohnSnow concluiu que eles seconcentravam próximos a um únicolocal de abastecimento público deágua, que foi fechado

1857 Os mortos por doença eram mais numerososque os mortos devido a ferimentos emcombate. Este gráfico foi usado emcampanha para melhoria das condiçõessanitárias no exército. Florence Nightingale(1820-1910), Inglaterra

1861 Mapa do tempo mostrando áreas depressão através de ícones que seassemelham ao atuais. Francis Galton(1822-1911), Reino Unido

1879 Estereograma tridimensional dapopulação em forma de pirâmide,baseado em dados do Censo Sueco(1750-1875). Luigi Perozzo, Itália

1869O melhor gráfico estatístico já feito? O engenheiro francês, Charles Minard (1781-1870), ilustrou graficamente a desastrosa campanhade Napoleão contra a Rússia em 1812. A largura do trajeto é proporcional ao número de soldadossobreviventes na campanha de guerra. Em cinza o caminho de ida e, em preto, a volta

1872 Gravação do movimento de uma corrida decavalo por meio de de câmeras acionadas por

fios. Eadweard Muybridge (1830-1904), EUA

1896 Uso de retângulos em mapa para representarduas variáveis e o produto delas (população dos

arredores de Paris, porgentagem de estrangeiros;área do retângulo = nº absoluto de estrangeiros).

Jacques Bertillon (1851-1922), França

Page 100: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

http://kanno-infografia.blogspot.com/

• 1900 a 1949: Período Negro dos Gráficos de EstatísticaAconteceram poucas inovações gráficas e o entusiasmo vivido no século passado foi suplantado pelo crescimento da quantifi-cação e modelos formais. Durante esse período, no entanto, tudo que foi alcançado consegue se popularizar, seja no governo,no comércio e nas ciências. A visualização gráfica é consagrada para explicar novas descobertas e teorias

• 1950 a 1974: Esboço de renascimento da visualizaçãoA visualização de dados começa a sair da dormência por volta de 1960. Nos EUA, John W. Tukey reconhece a importância da análise gráfica dosdados e lançam novos padrões e inovações. Na França, Jacques Bertin publica sua Semiologia Gráfica, organizando visão e percepção dos ele-mentos gráficos. Por último, os computadores começam a mostrar seu potencial

1911 A primeira exposição deHigiene em Dresdenreúne 259 figurasgráficas estatísticas de35 expositores nacionais einternacionais. Emil EugenRoesle (organizador) (1875-1962), Alemanha

1920 Invenção do diagrama em setas paramostrar a relação entre variáveis,formando um sistema estrutural.Sewall Wright (1889-1988), EUA

1933Mapa do metrô deLondres se tornou umsímbolo reconhecidomundialmente por suasimplicidade e clareza.Harry Beck baseou omapa em um diagramade circuitos que eleusava no dia-a-dia

1924 Otto Neurath (1882-1945)organiza o Museu Socialde Gráficos Estatísticosem Viena, Áustria eintroduz o Isotype(International System ofTypographic PictureEducation)

1965Evolução nos histogramas de análisesde contas, novas propostas decomparação visual. John W. Tukey(1915-2000), EUA

1967Teoria de símbolos e modelosde representação gráfica. JacquesBertin, França

1971Polígono irregular para representar a multivariedade dedados (com vértices de iguais intervalos, distânciados docentro proporcionalmente ao valor da variável). J. H.Siegel, R. M. Goldwyn and Herman P. Friedman, EUA

Page 101: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

http://kanno-infografia.blogspot.com/

1981Vista do olho de peixe: permite focar edetalhar mais uma área de interesse de umtodo, deixando as imagens secundárias emvolta, mas com bem menos detalhes. GeorgeW. Furnas, EUA

1993Estabelecida nos EUA a Xplane, empresaespecializada em visualização de dadosaplicado ao comércio e administraçãode empresas.

1996Software de dados cartográficos, comferramentas que permitem vários tiposde mapeamento simultâneos.Jason Dykes, Reino Unido

1999Explosão da internet e novas tecnologiaspermitem que a visualização passa a serinterativa e/ou animada. Os jornal espanhóis “El Pais” e “El Mundo” se tornamreferências internacionais no segmento

1999Alguns dos melhores artistasgráficos dos EUA sãoreunidos por Richard SaulWurman no livro“Understandig USA”, umcompêndio visual de dadossocio-econômicos do país. Acima, páginas de NigelHolmes

1999Leland Wilkinson escreve “A Gramática dosGráficos” neste ano, uma espécie de dicionáriosistemático e de fácil compreensão com regrasgramaticais para dados e gráficos. Acima, mapacontornado em 3D em estrutura computadorizada.Leland Wilkinson (1944-), EUA

• De 1975 até hoje: O computador como nova fronteiraAs inovações ocorridas nesta época foram muitas e em diversas áreas: o desenvolvimento de softwares e sistemas de computador,altamente interativos e de fácil manipulação, foram a alavanca para tudo. Os novos paradigmas de manipulação de dados, ainvenção de técnicas gráficas e os métodos de vizualização multidimensional deixaram suas marcas também

1982Página da previsãodo tempo do jornalnorte-americano USAToday, desenvolvidopor George Rorick. Odiário inaugura umaera de impressãocolorida nos jornaisque se espalha pelomundo. Logo, osinfográficos setornam parte do dia-a-dia da imprensa.

http://kanno-infografia.blogspot.com/

Page 102: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

96

ANEXO2

Page 103: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Proposta de metodologia para produção de infográficos Parte integrante da Monografia “Infografia: conceito e prática”

Pauta

Elaboraçãode conteúdo

Arquitetura da informação

PropósitoConteúdo

InformacionalRecursos

Meios deprodução

Circunstânciade uso

Usuário

Análise desimilares

Apuração de dados

Arte-Final RevisãoAcabamento Publicação Análise crítica

O infográfico tem início com a sugestão de uma tema a ser discutido e publicado. Pode

ser um tema de estudo, um fato ou uma notícia. Tal tema deve ser relavante para

determinada publicação ou público.

Definido o tema, parte-se para a pesquisa do que é relevante ser exposto, e como o conteúdo deve ser exposto. Propõe-se aqui, o uso da classificação de Twyman (1985), editada da seguinte maneira:

Nesta fase, buscam-se referências do que já foi feito com o tema em questão, além de

inspirações estéticas.

Após avaliação daquilo que deve ser transmitido, elabora-se o conteúdo

informacional: o texto.

Início do processo de organizar as informações no espaço disponível. São esboços que podem ser feitos manual ou digitalmente.

O esboço é convertido para peça finalizada. Ilustrações ganham cores, estilos. Fotografia são produzidas. Textos e formas ganham propriedades.

Realização de ajustes da integração entre texto, imagens e/ou formas. Tamanho de legendas, e demais ajustes são realizados.

Revisão final do artefato. Se necessário, realizam-se novos ajustes.

Envia-se o infográfico para a produção, onde será publicado na mídia: internet, jornal, revista, livro, etc.

Após publicado, é recomendado fazer uma análise dos pontos positivos e negativos do processo, no intuito de gerar aprendizagem.

Propósito: Qual o objetivo do infográfico? O que se deseja transmitir

ao leitor?

Meio de produção: Como será desenvolvido? Ilustração? Fotografia?

Em quais softwares?

Conteúdo informacional: Quais informações são necessárias para

realizar o objetivo?

Usuário: Para quem é destinado o infográfico?

Recursos: Avaliação de tempo, verba, profissionais disponíveis, além de outras limitações, como mídia, cores, etc.

Circunstâncias de uso: Em qual mídia será vista, e como será vista a publicação?

Page 104: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Arquitetura da informação

Descrição detalhada sobre a fase de Arquitetura da informação

Se trata da organização espacial e definição dos elementos gráficos que estarão no infográfico. A abordagem sintática dos elementos do infográfico busca enfatizar a descrição estrutural deles. Aqui, são tratados como elementos sintáticos:

Ao combinar todos os elementos da linguagem visual, geram-se peças com algum sentido. Para Horn (1998), a função semântica é o estudo da função de cada unidade de comunicação, o que ela pretende dizer para o leitor. No quinto capítulo do livro “Visual Language” o autor mostra quais funções cada unidade pode assumir.Aqui, há alguns exemplos baseados nestas funções, como sugestão de representação.

Mostrar “quem”: Indicar pessoas envolvidas e as informações que forem relevantes sobre ela, como emoções, atitutes, identidade, etc. A figura acima exemplifica esta função com três possibilidades: através da representação física da personalidade em questão, através da representação de algo que seja do interesse desta pessoa e da representação da profissão exercida por ela. As três representações são feitas com imagens.

Mostrar “o que”: Indicar objeto ou local e descrever a aparência de objetos físicos. Acima, há três sugestões de uso. Primeiro, associar a imagem de um objeto com a sua descrição verbal. Depois, mostra-se a aparência de algo através da exposição de suas perspectivas, utilizando imagem e forma. Por fim, aponta-se uma parte do objeto, para indicar sua representação completa, fazendo uso de imagem e formas.

Mostrar “o que há dentro”: Permitir visualização do interior de objetos. Pode ser feita, por exemplo, com uma representação em perspectiva do objeto, que permita uma abertura no mesmo; com a visualização do interior através de cortes laterais, longitudinais,etc; e através da transparência de sua camada externa, representada por traços (wireframe).

Mostrar “onde”: Dizer a localização espacial das pessoas ou objetos. Sugere-se indicar diretamente a localização, através de um mapa, por exemplo; através da posicão relativa entre dois objetos, representada na figura por imagem, forma e texto; ou pela localização dentro de um sistema.

Mostrar “quando”: Indicar tempo. Pode ser um horário, época ou a duração de um evento. É possível representar esta função através de objetos conhecidos por determinado grupo, como o relógio; através da representação das estações; ou pela contextualização em uma linha do tempo, composta aqui por texto e forma.

Mostrar “como funciona”: Dizer o funcionamento de um sistema natural ou não. A figura ilustra o funcionamento de peças dentro de um conjunto.

Texto- Título, abertura, subtítulo, legenda e texto.

Imagem – representação de pessoas, lugares ou objetos.

Forma – Quais formas são importantes para a integração de texto e imagem? Ponto, linha, formas abstratas, espaço entre formas.

Representaçãofísica

Interessespessoais

Profissão

Quem?

Abertura Cortes Wireframes

O que há dentro?

Descriçãoverbal

Perspectivas Partes

O que?

Flor

Mapa Distância Parte de umsistema

Onde?

Relógio Estação Linha dotempo

Quando?

Diagrama processualde um sistema

Como funciona?

x2011

Text

o1998 Palavra não leva a nada.

Form

aIm

ag

em

Page 105: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Mostrar “onde”: Dizer a localização espacial das pessoas ou objetos. Sugere-se indicar diretamente a localização, através de um mapa, por exemplo; através da posicão relativa entre dois objetos, representada na figura por imagem, forma e texto; ou pela localização dentro de um sistema.

Mostrar “quando”: Indicar tempo. Pode ser um horário, época ou a duração de um evento. É possível representar esta função através de objetos conhecidos por determinado grupo, como o relógio; através da representação das estações; ou pela contextualização em uma linha do tempo, composta aqui por texto e forma.

Mostrar “como funciona”: Dizer o funcionamento de um sistema natural ou não. A figura ilustra o funcionamento de peças dentro de um conjunto.

Mostrar “como fazer”: Indicar as etapas para a realização de uma tarefa. Utiliza-se a demonstração de partes da tarefa, além de passagem de etapas através de formas.

Mostrar “movimento”: Revelar mudança da localização física, que é percebida como um movimento. Sugere-se três formas de representação: através de demarcação da trajetória (com o uso de formas); através da posição física do personagem ou de formas indicativas, como setas.

Mostrar “qual”: Demonstrar, indicar ou definir caracteristicas de alguma coisa. Os usos ilustrados mostram possibilidades como nomear, ressaltar um objeto através da diferença cromática ou através de sua marcação.

Mostrar “exemplos”: Mostrar particularidades de uma idéia geral, apontando aquilo que deseja mostrar ou ressaltar, dentro de um contexto.

Mostrar “conceitos”: Indicar forças, relações, ondas ou qualquer outro influência que não podem ser percebidas a olho nu. Nas três situações sugeridas na figura, formas foram utilizadas para representar os conceitos.

Mostrar “comparações”: Dizer semelhanças e diferenças entre as coisas. O uso de tabelas pode mostrar um ou mais parâmetros de comparação. Comparações através de tamanhos também são indicadas.

Mostrar “comparações quantitativas”: Comparar visualmente dados, proporções, etc. Podem ser diversos tipos de gráficos, como os de barra e comparação através dos tamanhos de círculos.

A metodologia proposta nesta pesquisa é resultado da compilação de etapas encontradas em entrevistas com profissionais da área, acrescida de algumas informações obtidas através do estudo da linguagem visual. É uma sugestão de como proceder ao desenvolver infográficos, podendo ser editada de acordo com a necessidade de cada projeto.

Mapa Distância Parte de umsistema

Onde?

Relógio Estação Linha dotempo

Quando?

Diagrama processualde um sistema

Como funciona?

x2011

Instruções de uma tarefa

Como fazer?

Trajetória Posição Seta

Movimento

Nomear Diferençacromática

Apontar

Qual?

Essa!

Apontar

Exemplo

Temperatura Campo devisão

OndasSonoras

Conceito

Tabela Tamanho

Comparação

TítuloTexto

Barras Círculos

Comparação quantitativa

Parte integrante da Monografia “Infografia: conceito e prática”

Page 106: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

97

ANEXO3

Page 107: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

The

Elem

ents

of

Use

r Ex

perie

nce

A ba

sic

dual

ity: T

he W

eb w

as o

rigin

ally

con

ceiv

ed a

s a

hype

rtex

tual

info

rmat

ion

spac

e;bu

t th

e de

velo

pmen

t of

incr

easi

ngly

sop

hist

icat

ed f

ront

- an

d ba

ck-e

nd t

echn

olog

ies

has

fost

ered

its

use

as a

rem

ote

soft

war

e in

terf

ace.

Thi

s du

al n

atur

e ha

s le

d to

muc

h co

nfus

ion,

as u

ser

expe

rienc

e pr

actit

ione

rs h

ave

atte

mpt

ed t

o ad

apt

thei

r te

rmin

olog

y to

cas

es b

eyon

dth

e sc

ope

of it

s or

igin

al a

pplic

atio

n. T

he g

oal o

f th

is d

ocum

ent

is t

o de

fine

som

e of

the

sete

rms

with

in t

heir

appr

opria

te c

onte

xts,

and

to

clar

ify t

he u

nder

lyin

g re

latio

nshi

ps a

mon

gth

ese

vario

us e

lem

ents

.

Jess

e Ja

mes

Gar

rett

jjg@

jjg.n

et

Visu

al D

esig

n: g

raph

ic t

reat

men

t of

inte

rfac

eel

emen

ts (

the

"look

" in

"lo

ok-a

nd-f

eel")

Info

rmat

ion

Arch

itect

ure:

str

uctu

ral d

esig

nof

the

info

rmat

ion

spac

e to

fac

ilita

tein

tuiti

ve a

cces

s to

con

tent

Inte

ract

ion

Des

ign:

dev

elop

men

t of

appl

icat

ion

flow

s to

fac

ilita

te u

ser

task

s,de

finin

g ho

w t

he u

ser

inte

ract

s w

ithsi

te f

unct

iona

lity

Nav

igat

ion

Des

ign:

des

ign

of in

terf

ace

elem

ents

to

faci

litat

e th

e us

er's

mov

emen

tth

roug

h th

e in

form

atio

n ar

chite

ctur

eIn

form

atio

n D

esig

n: in

the

Tuf

tean

sen

se:

desi

gnin

g th

e pr

esen

tatio

n of

info

rmat

ion

to f

acili

tate

und

erst

andi

ng

Func

tiona

l Spe

cific

atio

ns: "

feat

ure

set"

:de

taile

d de

scrip

tions

of

func

tiona

lity

the

site

mus

t in

clud

e in

ord

er t

o m

eet

user

nee

ds

Use

r N

eeds

: ext

erna

lly d

eriv

ed g

oals

for

the

site

; ide

ntifi

ed t

hrou

gh u

ser

rese

arch

,et

hno/

tech

no/p

sych

ogra

phic

s, e

tc.

Site

Obj

ectiv

es: b

usin

ess,

cre

ativ

e, o

r ot

her

inte

rnal

ly d

eriv

ed g

oals

for

the

site

Cont

ent

Req

uire

men

ts: d

efin

ition

of

cont

ent

elem

ents

req

uire

d in

the

site

in o

rder

to

mee

t us

er n

eeds

Inte

rfac

e D

esig

n: a

s in

tra

ditio

nal H

CI:

desi

gn o

f in

terf

ace

elem

ents

to

faci

litat

eus

er in

tera

ctio

n w

ith f

unct

iona

lity

Info

rmat

ion

Des

ign:

in t

he T

ufte

an s

ense

:de

sign

ing

the

pres

enta

tion

of in

form

atio

nto

fac

ilita

te u

nder

stan

ding

Web

as

soft

war

e in

terf

ace

Web

as

hype

rtex

t sy

stem

Visu

al D

esig

n: v

isua

l tre

atm

ent

of t

ext,

grap

hic

page

ele

men

ts a

nd n

avig

atio

nal

com

pone

nts

Conc

rete

Abst

ract

timeCo

ncep

tion

Com

plet

ion

Functional

Specifications

Content

Requirements

Interaction

Design

Information

Architecture

Visual Design

Information Design

Interface DesignNavigation Design

Site Objectives

User Needs

Use

r N

eeds

: ext

erna

lly d

eriv

ed g

oals

for

the

site

; ide

ntifi

ed t

hrou

gh u

ser

rese

arch

,et

hno/

tech

no/p

sych

ogra

phic

s, e

tc.

Site

Obj

ectiv

es: b

usin

ess,

cre

ativ

e, o

r ot

her

inte

rnal

ly d

eriv

ed g

oals

for

the

site

This

pic

ture

is in

com

plet

e: T

he m

odel

out

lined

her

e do

es n

ot a

ccou

nt f

or s

econ

dary

con

side

ratio

ns (

such

as

thos

e ar

isin

g du

ring

tech

nica

l or

cont

ent

deve

lopm

ent)

that

may

influ

ence

dec

isio

ns d

urin

g us

er e

xper

ienc

e de

velo

pmen

t. A

lso,

thi

s m

odel

doe

s no

t de

scrib

e a

deve

lopm

ent

proc

ess,

nor

doe

s it

defin

e ro

les

with

in a

user

exp

erie

nce

deve

lopm

ent

team

. Rat

her,

it se

eks

to d

efin

e th

e ke

y co

nsid

erat

ions

tha

t go

into

the

dev

elop

men

t of

use

r ex

perie

nce

on t

he W

eb t

oday

.

task

-orie

nted

info

rmat

ion-

orie

nted

30 M

arch

200

0

© 2

000

Jess

e Ja

mes

Gar

rett

http

://w

ww.

jjg.n

et/ia

/

Page 108: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

98

ANEXO4

Page 109: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

ARARANGUA PRAIA DO MORRO DOS CONVENTOS (Ponto 01) 17/05/2012 FRENTE AO POSTO DE SALVA VIDAS CENTRAL

BALN. GAIVOTAS ARROIO DA PRAIA DAS GAIVOTAS (Ponto 02) 17/05/2012 SOB PTE CONCRETO AV. BEIRA MAR, ENTR. PRAIA

BALN. GAIVOTAS PRAIA DAS GAIVOTAS (Ponto 01) 17/05/2012 FRENTE À PRAÇA DE ESPORTES

BALN. ARROIO DO SILVA PRAIA DO ARROIO DO SILVA (Ponto 01) 17/05/2012 À ESQUERDA DO ARROIO

BALN. ARROIO DO SILVA PRAIA DO ARROIO DO SILVA (Ponto 02) 17/05/2012 À DIREITA DO ARROIO

BALN. ARROIO DO SILVA PRAIA DO ARROIO DO SILVA (Ponto 03) 17/05/2012 NA FOZ DO ARROIO DO SILVA

BALN. ARROIO DO SILVA PRAIA DO ARROIO DO SILVA (Ponto 17) 17/05/2012 AV. FLORIANÓPOLIS - FINAL DO BALNEÁRIO

BALNEÁRIO CAMBORIÚ PRAIA DE LARANJEIRAS (Ponto 06) 07/05/2012 NO MEIO DA PRAIA

BALNEÁRIO CAMBORIÚ PRAIA DE TAQUARAS (Ponto 08) 07/05/2012 EM FRENTE A ESCOLA MUNICIPAL

BALNEÁRIO CAMBORIÚ PRAIA DE TAQUARAS (Ponto 09) 07/05/2012 LAGOA DE TAQUARAS

BALNEÁRIO CAMBORIÚ PRAIA DO BALN. CAMBORIÚ (Ponto 01) 12/06/2012 PONTAL NORTE

BALNEÁRIO CAMBORIÚ PRAIA DO BALN. CAMBORIÚ (Ponto 02) 12/06/2012 FRENTE À RUA 1001

BALNEÁRIO CAMBORIÚ PRAIA DO BALN. CAMBORIÚ (Ponto 03) 12/06/2012 FRENTE À RUA 2000

BALNEÁRIO CAMBORIÚ PRAIA DO BALN. CAMBORIÚ (Ponto 04) 12/06/2012 FRENTE À RUA 3000

BALNEÁRIO CAMBORIÚ PRAIA DO BALN. CAMBORIÚ (Ponto 05) 12/06/2012 PONTAL SUL - FRENTE À RUA 4900

BALNEÁRIO CAMBORIÚ PRAIA DO BALN. CAMBORIÚ (Ponto 10) 12/06/2012 FRENTE À RUA 4000

BALNEÁRIO CAMBORIÚ PRAIA DO BALN. CAMBORIÚ (Ponto 11) 12/06/2012 FRENTE À RUA 3500

BALNEÁRIO CAMBORIÚ PRAIA DO BALN. CAMBORIÚ (Ponto 12) 12/06/2012 FRENTE À RUA 2500

BALNEÁRIO CAMBORIÚ PRAIA DO BALN. CAMBORIÚ (Ponto 13) 12/06/2012 FRENTE À RUA 1400

BALNEÁRIO CAMBORIÚ PRAIA DO BALN. CAMBORIÚ (Ponto 14) 12/06/2012 FRENTE À RUA 51

Página 1

Page 110: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

BALNEÁRIO CAMBORIÚ PRAIA DO ESTALEIRO (Ponto 07) 07/05/2012 ENTRE R. DOMINGOS FONSECA E NAPOLEÃO VIEIRA

BALNEÁRIO DA BARRA DO SUL CANAL DO LINGUADO (Ponto 02) 17/05/2012 PRAINHA DA FOZ DO CANAL DO LINGUADO

BALNEÁRIO DA BARRA DO SUL PRAIA DA BARRA DO SUL (Ponto 01) 17/05/2012 PRAIA DO BISPO, FRENTE A CAPELA DOS NAVEGANTES

BARRA VELHA LAGOA DE BARRA VELHA (Ponto 05) 17/05/2012 RUA DR. PLACIDO GOMES DE OLIVEIRA, ALTURA Nº336

BARRA VELHA PRAIA DA BARRA VELHA (Ponto 01) 17/05/2012 AV. ARMANDO PETRELI, NA ALTURA DO Nº555

BARRA VELHA PRAIA DA BARRA VELHA (Ponto 02) 17/05/2012 FRENTE À RUA HUMBERTO PIMENTEL

BARRA VELHA PRAIA DA BARRA VELHA (Ponto 03) 17/05/2012 RUA ANTONIO R. DA G. MOURA

BIGUAÇÚ PRAIA DE SÃO MIGUEL (Ponto 01) 11/06/2012 FRENTE AO AQUEDUTO

BOMBINHAS PRAIA DE BOMBAS (Ponto 02) 05/06/2012 FRENTE À RUA MARTIN PESCADOR

BOMBINHAS PRAIA DE BOMBAS (Ponto 04) 05/06/2012 EXTREMA DIREITA DA PRAIA

BOMBINHAS PRAIA DE BOMBAS (Ponto 05) 05/06/2012 RUA ARIRAMBA. À ESQUERDA DO RIACHO

BOMBINHAS PRAIA DE BOMBINHAS (Ponto 01) 05/06/2012 RUA VEREADOR MANOEL DOS SANTOS, 1149

BOMBINHAS PRAIA DE BOMBINHAS (Ponto 06) 05/06/2012 CANTO DIREITO DA PRAIA

BOMBINHAS PRAIA DE BOMBINHAS (Ponto 07) 05/06/2012 FRENTE À RUA CASTANHETA

BOMBINHAS PRAIA DO CANTO GRANDE (Ponto 08) 05/06/2012 CANTO ESQUERDO (BAIA DE ZIMBROS)

BOMBINHAS PRAIA DO MARISCAL (Ponto 03) 05/06/2012 AV ÁGUA MARINHA, ALTURA DO Nº 3244

FLORIANÓPOLIS LAGOA DA CONCEIÇÃO (Ponto 37) 15/05/2012 FRENTE À SERVIDÃO PEDRO MANUEL FERNANDES

FLORIANÓPOLIS LAGOA DA CONCEIÇÃO (Ponto 38) 15/05/2012 NOS TRAPICHES DOS SERVIÇOS DE TRANSPORTES

FLORIANÓPOLIS LAGOA DA CONCEIÇÃO (Ponto 39) 15/05/2012 FRENTE À RUA DE ACESSO À PRAIA DA JOAQUINA

Página 2

Page 111: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

FLORIANÓPOLIS LAGOA DA CONCEIÇÃO (Ponto 41) 15/05/2012 CANTO DA LAGOA - AO LADO DO POSTO DE SAÚDE

FLORIANÓPOLIS LAGOA DA CONCEIÇÃO (Ponto 43) 15/05/2012 FRENTE AO ACESSO PARA O RIO TAVARES

FLORIANÓPOLIS LAGOA DA CONCEIÇÃO (Ponto 61) 15/05/2012 ALTURA Nº 1480 DA AV. DAS RENDEIRAS

FLORIANÓPOLIS LAGOA DA CONCEIÇÃO (Ponto 62) 15/05/2012 FRENTE A RUA MANUEL ISIDORO DA SILVEIRA

FLORIANÓPOLIS LAGOA DA CONCEIÇÃO (Ponto 66) 15/05/2012 ALTURA DO Nº 2267 DA AV. OSNI ORTIGA

FLORIANÓPOLIS LAGOA DA CONCEIÇÃO (Ponto 72) 15/05/2012 FRENTE À RUA CANTO DA AMIZADE

FLORIANÓPOLIS PRAIA BRAVA (Ponto 24) 15/05/2012 PRÓXIMO À FOZ DO RIACHO (COSTÃO SUL, NO MAR)

FLORIANÓPOLIS PRAIA BRAVA (Ponto 25) 15/05/2012 EM FRENTE AO POSTO SALVA VIDAS

FLORIANÓPOLIS PRAIA BRAVA (Ponto 69) 15/05/2012 NO RIACHO

FLORIANÓPOLIS PRAIA DA ARMAÇÃO DO PÂNTANO DO SUL (Ponto 44) 15/05/2012 EM FRENTE A IGREJA DA VILA

FLORIANÓPOLIS PRAIA DA ARMAÇÃO DO PÂNTANO DO SUL (Ponto 64) 15/05/2012 FOZ RIO SANGRADOURO(NO RIO)

FLORIANÓPOLIS PRAIA DA BARRA DA LAGOA (Ponto 32) 15/05/2012 APROXIMADAMENTE 50 METROS À ESQ. DOS MOLHES

FLORIANÓPOLIS PRAIA DA BASE AÉREA (Ponto 49) 15/05/2012 AO LADO DO TRAPICHE

FLORIANÓPOLIS PRAIA DA BEIRA MAR NORTE (Ponto 11) 15/05/2012 EM FRENTE AO MONUMENTO DA POLÍCIA MILITAR

FLORIANÓPOLIS PRAIA DA CACHOEIRA DO BOM JESUS (Ponto 56) 15/05/2012 FRENTE AO TREVO DOS INGLÊSES

FLORIANÓPOLIS PRAIA DA CAIACANGAÇÚ (Ponto 63) 15/05/2012 ALTURA Nº 12.820 DA ESTRADA GERAL DO RIBEIRÃO

FLORIANÓPOLIS PRAIA DA DANIELA (Ponto 16) 15/05/2012 FRENTE À RUA DOS CACTOS

FLORIANÓPOLIS PRAIA DA JOAQUINA (Ponto 33) 15/05/2012 EM FRENTE AO POSTO SALVA VIDAS

FLORIANÓPOLIS PRAIA DA LAGOINHA (Ponto 26) 15/05/2012 ESQUERDA DA SAIDA DA LAGOA

FLORIANÓPOLIS PRAIA DA SAUDADE (Ponto 04) 15/05/2012 CANTO ESQUERDO DA PRAIA

FLORIANÓPOLIS PRAIA DA SOLIDÃO (Ponto 65) 15/05/2012 FOZ DO RIO DAS PACAS

Página 3

Page 112: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

FLORIANÓPOLIS PRAIA DA TAPERA (Ponto 48) 15/05/2012 NO MEIO DA PRAIA

FLORIANÓPOLIS PRAIA DAS PALMEIRAS (Ponto 07) 15/05/2012 NO MEIO DA PRAIA

FLORIANÓPOLIS PRAIA DE CANASVIEIRAS (Ponto 20) 15/05/2012 EM FRENTE À RUA DAS FLÔRES

FLORIANÓPOLIS PRAIA DE CANASVIEIRAS (Ponto 21) 15/05/2012 EM FRENTE A AVENIDA DAS NAÇÕES

FLORIANÓPOLIS PRAIA DE CANASVIEIRAS (Ponto 22) 15/05/2012 LADO ESQUERDO DO TRAPICHE

FLORIANÓPOLIS PRAIA DE CANASVIEIRAS (Ponto 55) 15/05/2012 FRENTE A RUA HEITOR BITENCOURT

FLORIANÓPOLIS PRAIA DE CANASVIEIRAS (Ponto 59) 15/05/2012 FRENTE A RUA ACARí MARGARIDA

FLORIANÓPOLIS PRAIA DE CANASVIEIRAS (Ponto 60) 15/05/2012 CANTO ESQUERDO DA PRAIA PRÓX. AS PEDRAS

FLORIANÓPOLIS PRAIA DE JURERÊ (Ponto 18) 15/05/2012 FRENTE À RUA DAS MORÉIAS

FLORIANÓPOLIS PRAIA DE JURERÊ (Ponto 19) 15/05/2012 FRENTE À RUA MAURÍCIO SIROTSKY SOBRINHO

FLORIANÓPOLIS PRAIA DE JURERÊ (Ponto 54) 15/05/2012 FRENTE À RUA LUIS RAMPA

FLORIANÓPOLIS PRAIA DE JURERÊ (Ponto 68) 15/05/2012 FRENTE À RUA VALDEMAR MEDEIROS

FLORIANÓPOLIS PRAIA DE JURERÊ INTERNACIONAL (Ponto 53) 15/05/2012 FRENTE À AV. DOS SALMÕES

FLORIANÓPOLIS PRAIA DE PONTA DAS CANAS (Ponto 23) 15/05/2012 100 METROS À ESQUERDA DA IGREJA

FLORIANÓPOLIS PRAIA DE PONTA DAS CANAS (Ponto 67) 15/05/2012 ALTURA DO Nº5.281 DA ESTRADA GERAL (NA LAGOA)

FLORIANÓPOLIS PRAIA DE PONTA DAS CANAS (Ponto 70) 15/05/2012 FRENTE À RUA ALCINA JANNIS

FLORIANÓPOLIS PRAIA DE SAMBAQUI (Ponto 14) 15/05/2012 FRENTE À RUA SERVIDÃO PARAÍSO DAS FLORES

FLORIANÓPOLIS PRAIA DE SAMBAQUI (Ponto 15) 15/05/2012 PONTA DO SAMBAQUI

FLORIANÓPOLIS PRAIA DE SANTO ANTÔNIO DE LISBOA (Ponto 12) 15/05/2012 EM FTE A PÇ ROLDÃO DA ROCHA PIRES

FLORIANÓPOLIS PRAIA DE SANTO ANTÔNIO DE LISBOA (Ponto 13) 15/05/2012 FRENTE À SERVIDÃO HIPÓLITO MACHADO

FLORIANÓPOLIS PRAIA DO BALNEÁRIO (Ponto 02) 15/05/2012 EM FRENTE À RUA JOSÉ CÂNDIDO DA SILVA

Página 4

Page 113: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

FLORIANÓPOLIS PRAIA DO BOM ABRIGO (Ponto 08) 15/05/2012 FRENTE À RUA TEÓFILO ALMEIDA

FLORIANÓPOLIS PRAIA DO CACUPÉ (Ponto 09) 15/05/2012 PRÓXIMO AO Nº 4000 DA ROD. HAROLDO S. GLAVAN

FLORIANÓPOLIS PRAIA DO CACUPÉ (Ponto 10) 15/05/2012 NO MEIO DA PRAIA

FLORIANÓPOLIS PRAIA DO CAMPECHE (Ponto 35) 15/05/2012 FRENTE À AVENIDA PEQUENO PRINCIPE

FLORIANÓPOLIS PRAIA DO CAMPECHE (Ponto 73) 04/04/2012 RIOZINHO ( NO RIO ) FTE A SERV. FAMÍLIA NUNES

FLORIANÓPOLIS PRAIA DO FORTE (Ponto 17) 15/05/2012 NA ENTRADA DA PRAIA

FLORIANÓPOLIS PRAIA DO ITAGUAÇU (Ponto 06) 15/05/2012 ENTRE O TRÊVO E A RUA EUCLIDES DA CUNHA

FLORIANÓPOLIS PRAIA DO JARDIM ATLÂNTICO (Ponto 01) 15/05/2012 FRENTE À RUA ELESBÃO PINTO DA LUZ

FLORIANÓPOLIS PRAIA DO JOSÉ MENDES (Ponto 52) 15/05/2012 NO MEIO DA PRAIA

FLORIANÓPOLIS PRAIA DO MATADOURO (Ponto 03) 20/06/2007 BELMIRA ISABEL MARTINS

FLORIANÓPOLIS PRAIA DO MEIO (Ponto 05) 15/05/2012 NO MEIO DA PRAIA

FLORIANÓPOLIS PRAIA DO PÂNTANO DO SUL (Ponto 45) 15/05/2012 A 100 METROS DA ENTRADA DA PRAIA

FLORIANÓPOLIS PRAIA DO RIBEIRÃO DA ILHA (Ponto 47) 15/05/2012 FRENTE À PRAÇA

FLORIANÓPOLIS PRAIA DO SANTINHO (Ponto 31) 15/05/2012 200 METROS À ESQUERDA DO COSTÃO SUL

FLORIANÓPOLIS PRAIA DOS INGLESES (Ponto 27) 15/05/2012 FRENTE DO RIO CAPIVARI

FLORIANÓPOLIS PRAIA DOS INGLESES (Ponto 28) 15/05/2012 FRENTE AO POSTO SALVA VIDAS

FLORIANÓPOLIS PRAIA DOS INGLESES (Ponto 29) 15/05/2012 EM FRENTE À RUA DA IGREJA

FLORIANÓPOLIS PRAIA DOS INGLESES (Ponto 57) 15/05/2012 FRENTE À RUA DO SIRI

FLORIANÓPOLIS PRAIA DOS INGLESES (Ponto 58) 15/05/2012 FRENTE À RUA DANTE DE PATA

FLORIANÓPOLIS PRAIA MOLE (Ponto 71) 04/04/2012 ACESSO PRINCIPAL

GAROPABA PRAIA DE GAROPABA (Ponto 01) 05/06/2012 EM FRENTE À PRAÇA

Página 5

Page 114: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

GAROPABA PRAIA DE GAROPABA (Ponto 02) 05/06/2012 FRENTE À RUA LAURO S. MULLER

GAROPABA PRAIA DO SIRIÚ (Ponto 03) 05/06/2012 PRÓXIMO À FOZ DO RIO SIRIÚ

GOVERNADOR CELSO RAMOS PRAIA DA ARMAÇÃO DA PIEDADE (Ponto 01) 11/06/2012 NO MEIO DA PRAIA

GOVERNADOR CELSO RAMOS PRAIA DA BAIA DOS GOLFINHOS (Ponto 03) 11/06/2012 À DIREITA DO TRAPICHE

GOVERNADOR CELSO RAMOS PRAIA DA FAZENDA DA ARMAÇÃO (Ponto 07) 11/06/2012 FTE À R. GREGÓRIO MONTEIRO

GOVERNADOR CELSO RAMOS PRAIA DA FAZENDA DA ARMAÇÃO (Ponto 08) 11/06/2012 FTE À R.GERINO BELMIRO DOS SANTOS-LADO RIACHO

GOVERNADOR CELSO RAMOS PRAIA DA GAMBOA (Ponto 09) 11/06/2012 R.FLAMBOIAN-1ª R.À DIR. APÓS AV. CARAVELAS

GOVERNADOR CELSO RAMOS PRAIA DE PALMAS (Ponto 02) 11/06/2012 FRENTE AO POSTO SALVA VIDAS

GOVERNADOR CELSO RAMOS PRAIA DE PALMAS (Ponto 11) 11/06/2012 CANTO DIR. DA PRAIA-FTE AO RIO ÁGUAS NEGRAS

GOVERNADOR CELSO RAMOS PRAIA DO ANTENOR (Ponto 04) 11/06/2012 NO MEIO DA PRAIA

GOVERNADOR CELSO RAMOS PRAIA DO ANTENOR (Ponto 05) 11/06/2012 NA EXT. ESQ. DA PRAIA-FTE À PTE DE CONCRETO

GOVERNADOR CELSO RAMOS PRAIA DO MAGALHÃES (Ponto 06) 11/06/2012 R. BEIJA FLOR-FTE À RAMPA DE ACESSO À PRAIA

GOVERNADOR CELSO RAMOS PRAIA GRANDE (Ponto 10) 11/06/2012 FRENTE À AVENIDA CARAVELAS

IÇARA LAGOA DO FAXINAL (Ponto 03) 17/05/2012 PARQ. AQUÁTICO PARQ. VERDE, PRÓX. AO TRAPICHE

IÇARA LAGOA DOS ESTEVES (Ponto 02) 17/05/2012 PRÓXIMO AO TRAPICHE

IÇARA LAGOA DOS FREITAS (Ponto 01) 17/05/2012 PRÓXIMO AO TRAPICHE

IÇARA PRAIA DO RINCÃO (Ponto 04) 17/05/2012 FRENTE AO POSTO SALVA VIDAS 2

IÇARA PRAIA DO RINCÃO (Ponto 05) 17/05/2012 ARROIO DA PRAIA DO RINCÃO

IÇARA PRAIA DO RINCÃO (Ponto 06) 17/05/2012 FRENTE AO POSTO SALVA VIDAS 3

IÇARA PRAIA DO RINCÃO (Ponto 07) 17/05/2012 FRENTE AO POSTO SALVA VIDAS 4

Página 6

Page 115: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

IÇARA PRAIA DO RINCÃO (Ponto 08) 17/05/2012 100 M À ESQ. DO ARROIO DA P. DO RINCÃO

IÇARA PRAIA DO RINCÃO (Ponto 18) 17/05/2012 LAGOA DO JACARÉ(ACESSO PRINCIPAL)

IMBITUBA LAGOA DE IBIRAQUERA (Ponto 02) 12/06/2012 PRÓXIMO A BOCA DA BARRA

IMBITUBA PRAIA DA RIBANCEIRA (Ponto 04) 12/06/2012 EM FRENTE A PARADA DE ÔNIBUS

IMBITUBA PRAIA DA VILA NOVA (Ponto 06) 12/06/2012 AO LADO DO POSTO SALVA VIDAS

IMBITUBA PRAIA DA VILA NOVA (Ponto 07) 12/06/2012 FRENTE À RUA HANS D. SCHIMIDT

IMBITUBA PRAIA DE IBIRAQUERA (Ponto 03) 12/06/2012 APROX.100 METROS AO SUL DA BOCA DA BARRA

IMBITUBA PRAIA DO PORTO (Ponto 05) 12/06/2012 NO FINAL DA ESTRADA PRÓX. AO NAVIO ENCALHADO

IMBITUBA PRAIA DO ROSA (Ponto 01) 05/06/2012 NO CANTO SUL

ITAJAÍ PRAIA BRAVA (Ponto 03) 11/06/2012 AV. JOSÉ M. VIEIRA EM FRENTE A RUA DOCA REBELLO

ITAJAÍ PRAIA BRAVA (Ponto 04) 11/06/2012 FTE À SAÍDA DA LAGOA, R. JOSÉ MANOEL C. SILVA

ITAJAÍ PRAIA DE CABEÇUDAS (Ponto 01) 11/06/2012 FRENTE A RUA QUINTINO BOCAIÚVA

ITAJAÍ PRAIA DO ATALAIA (Ponto 02) 11/06/2012 FRENTE AO POSTO SALVA VIDAS

ITAPEMA PRAIA DE ITAPEMA (Ponto 01) 13/06/2012 FRENTE À RUA 113

ITAPEMA PRAIA DE ITAPEMA (Ponto 02) 13/06/2012 FRENTE À RUA 149

ITAPEMA PRAIA DE ITAPEMA (Ponto 03) 13/06/2012 FRENTE À RUA 227

ITAPEMA PRAIA DE ITAPEMA (Ponto 04) 13/06/2012 FRENTE À RUA 319

ITAPEMA PRAIA DE ITAPEMA (Ponto 05) 13/06/2012 FRENTE À RUA 205

ITAPEMA PRAIA DE ITAPEMA (Ponto 07) 13/06/2012 À DIREITA DO RIO BELA CRUZ

ITAPEMA PRAIA DE ITAPEMA (Ponto 08) 13/06/2012 FRENTE À RUA 261

Página 7

Page 116: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

ITAPEMA PRAIA DE ITAPEMA (Ponto 09) 13/06/2012 FRENTE À RUA 163

ITAPOÁ PRAIA DE ITAPOÁ (Ponto 01) 17/05/2012 BAL. BRASÍLIA - FINAL DA AVENIDA 650

ITAPOÁ PRAIA DE ITAPOÁ (Ponto 02) 17/05/2012 BAL. PAESE - ENTRE A RUA 1020 E 1030

ITAPOÁ PRAIA DE ITAPOÁ (Ponto 03) 17/05/2012 BAL. PALMEIRAS - RUA 1970

ITAPOÁ PRAIA DE ITAPOÁ (Ponto 04) 17/05/2012 BAL. BARRA DO SAÍ - RUA 20

JAGUARUNA CANAL DO CAMACHO (Ponto 03) 11/06/2012 NA FOZ

JAGUARUNA LAGOA DO ARROIO CORRENTE (Ponto 02) 11/06/2012 NA PARTE SUPERIOR DO "CHUVEIRÃO"

JAGUARUNA PRAIA DO ARROIO CORRENTE (Ponto 01) 11/06/2012 300 METROS AO SUL DA FOZ DO ARROIO

JOINVILLE PRAIA DE VIGORELLI (Ponto 01) 17/05/2012 50 METROS À ESQUERDA DO TRAPICHE

LAGUNA LAGOA DE CABEÇUDAS (Ponto 04) 12/06/2012 FRENTE AO KM 313 DA BR 101

LAGUNA PRAIA DA TERESA (Ponto 05) 11/06/2012 NO MEIO DA PRAIA

LAGUNA PRAIA DE ITAPIRUBÁ (Ponto 01) 12/06/2012 A 100 METROS DO COSTÃO SUL

LAGUNA PRAIA DO CARDOSO (Ponto 06) 11/06/2012 EXTREMA ESQUERDA DA PRAIA

LAGUNA PRAIA DO GI (Ponto 02) 12/06/2012 EM FRENTE AO POSTO SALVA VIDAS

LAGUNA PRAIA DO MAR GROSSO (Ponto 03) 12/06/2012 EM FRENTE AO EMISSÁRIO DA CASAN

LAGUNA PRAINHA DO FAROL (Ponto 07) 11/06/2012 NA ENTRADA DA PRAIA

NAVEGANTES PRAIA DE NAVEGANTES (Ponto 02) 11/06/2012 FRENTE À RUA 8150-POSTO 7 SALVA VIDAS

NAVEGANTES PRAIA DE NAVEGANTES (Ponto 03) 11/06/2012 FRENTE À RUA 7000- POSTO 6 SALVA VIDAS

NAVEGANTES PRAIA DE NAVEGANTES (Ponto 04) 11/06/2012 FOZ DO RIO GRAVATÁ

Página 8

Page 117: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

PALHOÇA GUARDA DO EMBAÚ (Ponto 03) 05/06/2012 NO RIO, EM FRENTE À VILA

PALHOÇA PRAIA DA PINHEIRA (Ponto 02) 05/06/2012 FRENTE À ENTRADA DA PRAIA

PALHOÇA PRAIA DE FORA (Ponto 04) 05/06/2012 FRENTE À RUA ANTÔNIO JÚLIO FAGUNDES

PALHOÇA PRAIA DO SONHO (Ponto 01) 05/06/2012 EM FRENTE POSTO SALVA VIDAS

PASSO DE TORRES BRAÇO MORTO DO RIO MAMPITUBA (Ponto 02) 17/05/2012 FRENTE AO SALVA VIDAS PRÓXIMO À PONTE

PASSO DE TORRES PRAIA DE PASSO DE TORRES (Ponto 01) 17/05/2012 FRENTE AO SALVA VIDAS

PENHA PRAIA ALEGRE (Ponto 01) 16/05/2012 FRENTE À TRAV. PARTICULAR MARCELO DOS SANTOS

PENHA PRAIA ALEGRE (Ponto 02) 16/05/2012 FOZ DO RIO PIÇARRAS

PENHA PRAIA DA ARMAÇÃO DO ITAPOCORÓI (Ponto 03) 16/05/2012 FTE R. INÊS DE SOUZA - PRAIA DO QUILOMBO

PENHA PRAIA DA ARMAÇÃO DO ITAPOCORÓI (Ponto 04) 16/05/2012 FTE R. BLUMENAU, 5450 - PRAIA DA FORTALEZA

PENHA PRAIA DA ARMAÇÃO DO ITAPOCORÓI (Ponto 05) 16/05/2012 EM FRENTE À RUA MARIA EMÍLIA COSTA

PENHA PRAIA DA ARMAÇÃO DO ITAPOCORÓI (Ponto 11) 16/05/2012 EM FRENTE À RUA ANTONIO ANICETO DA COSTA

PENHA PRAIA DA SAUDADE (Ponto 06) 16/05/2012 NA ENTRADA DA PRAIA

PENHA PRAIA DE SÃO MIGUEL (Ponto 10) 16/05/2012 EM FRENTE À RUA ARNO BECKER

PENHA PRAIA GRANDE (Ponto 08) 16/05/2012 PRÓXIMO AS PEDRAS

PENHA PRAIA VERMELHA (Ponto 09) 16/05/2012 FRENTE À RUA PRINCIPAL DE ACESSO

PENHA PRAINHA DA PENHA (Ponto 07) 16/05/2012 FRENTE À RÓTULA DE RETORNO (BACIA DA VOVÓ)

PIÇARRAS PRAIA DE PIÇARRAS (Ponto 01) 16/05/2012 FRENTE A TRAVESSA LAURO PINTO FERREIRA

PIÇARRAS PRAIA DE PIÇARRAS (Ponto 02) 16/05/2012 FRENTE À AVENIDA GETÚLIO VARGAS

PORTO BELO PRAIA DE PEREQUÊ (Ponto 03) 05/06/2012 PRÓXIMO À FOZ DO RIO PEREQUEZINHO

Página 9

Page 118: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

PORTO BELO PRAIA DE PEREQUÊ (Ponto 04) 05/06/2012 FRENTE À RUA RUBENS ALVES

PORTO BELO PRAIA DE PEREQUÊ (Ponto 05) 05/06/2012 FRENTE À RUA ALMIRANTE FONSECA NEVES

PORTO BELO PRAIA DE PORTO BELO (Ponto 01) 05/06/2012 FRENTE À RUA JOÃO CLIMACO AO LADO DO TRAPICHE

PORTO BELO PRAIA DE PORTO BELO (Ponto 02) 05/06/2012 EM FRENTE À RUA JOÃO B. GUERREIRO

PORTO BELO PRAIA DE PORTO BELO (Ponto 06) 05/06/2012 FRENTE À RUA CAPITÃO GUALBERTO LEAL NUNES

SÃO FRANCISCO DO SUL PRAIA DA ENSEADA (Ponto 01) 17/05/2012 EM FRENTE AO POSTO SALVA VIDAS

SÃO FRANCISCO DO SUL PRAIA DA ENSEADA (Ponto 02) 17/05/2012 FRENTE À RUA MINAS GERAIS

SÃO FRANCISCO DO SUL PRAIA DA ENSEADA (Ponto 08) 17/05/2012 FRENTE À RUA ACRE

SÃO FRANCISCO DO SUL PRAIA DE ITAGUAÇÚ (Ponto 03) 17/05/2012 FRENTE À RUA MANILA

SÃO FRANCISCO DO SUL PRAIA DE UBATUBA (Ponto 04) 17/05/2012 FRENTE AO POSTO SALVA VIDAS

SÃO FRANCISCO DO SUL PRAIA DO CAPRI (Ponto 05) 17/05/2012 FRENTE À RUA INGLATERRA

SÃO FRANCISCO DO SUL PRAIA DOS PAULAS (Ponto 06) 17/05/2012 FRENTE A PRAÇA DA FIGUEIRA

SÃO FRANCISCO DO SUL PRAIA DOS PAULAS (Ponto 07) 17/05/2012 FRENTE A PRAÇA DO INGLÊS

SÃO JOSÉ PRAIA DE GUARAREMA (Ponto 01) 05/06/2012 CANTO ESQUERDO DA PRAIA

CLASSIFICAÇÃO DO PONTO CONFORME RESOLUÇÃO CONAMA nº 274/2000:

Próprio: quando em 80% ou mais de um conjunto de amostras coletadas nas últimas 5 semanas anteriores, no mesmo localhouver no máximo 800 Escherichia coli por 100 mililitros.

Impróprio: quando em mais de 20% de um conjunto de amostras coletadas nas últimas 5 semanas anteriores, no mesmo local, for superior a 800 Escherichia coli por 100 mililitros ou quando, na última coleta, o resultado for superior a 2000 Escherichia coli por 100 mililitros.

Página 10

Page 119: Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina

Governo do Estado de Santa Catarina

Fundação do Meio Ambiente - FATMA

BALNEABILIDADE DO LITORAL CATARINENSE Relatório nº 26 Data: 15/06/2012

Município Balneário Data da Coleta Situação

CLASSIFICAÇÃO DO PONTO CONFORME RESOLUÇÃO CONAMA nº 274/2000:

Próprio: quando em 80% ou mais de um conjunto de amostras coletadas nas últimas 5 semanas anteriores, no mesmo localhouver no máximo 800 Escherichia coli por 100 mililitros.

Impróprio: quando em mais de 20% de um conjunto de amostras coletadas nas últimas 5 semanas anteriores, no mesmo local, for superior a 800 Escherichia coli por 100 mililitros ou quando, na última coleta, o resultado for superior a 2000 Escherichia coli por 100 mililitros.

Página 11