Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SISTEMA BARDDAL DE ENSINO
FACULDADE BARDDAL DE ARTES APLICADAS
CURSO DE DESENHO INDUSTRIAL
PROJETO DE PRODUTO E PROGRAMAÇÃ...
PATRICIA PRADO

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

Tra...
PATRICIA PRADO

INTERFACE WEB PARA INFOGRÁFICO SOBRE
BALNEABILIDADE NO ESTADO DE SANTA CATARINA
Este Trabalho de Conclusão...
RESUMO
Para desenvolver a interface de uma infografia que mostre graficamente o índice de
poluição das praias de Santa Cat...
ABSTRACT
To develop an interface of a computer graphics that show graphically the state of pollution of the beaches of San...
LISTA DE ILUSTRAÇÕES

Figura 1. Infografia simples.
Figura 2. Representação geográfica e humana.
Figura 3. Ilustração e ma...
Figura 31. Ferramenta do Google aplicada em infográfico do New York Times.
Figura 32. Grupo de ferramentas do Google.
Figu...
Figura 69. Bubble Chart com diferenciação de cores.
Figura 70. Esboço e finalização de layout.
Figura 71. Ferramenta Kuler...
LISTA DE SIGLAS
AV: Ambiente Virtual.
BD: Banco de Dados.
DI: Design de Informação.
IHC: Interação Homem-computador.
SBDI:...
SUMÁRIO
1. INTRODUÇÃO .......................................................................................................
3.15. The Fundamental Elements of Design................................................................... 75
3.16. Zero ...
1. INTRODUÇÃO
Desde a concepção do computador pessoal e da inserção da tecnologia na vida cotidiana
das pessoas, muitos pa...
1.1 PROBLEMÁTICA
Como criar uma interface gráfica que atenda aos requisitos de infografia online e
interprete os dados ofe...
1.4 METODOLOGIA DA PESQUISA
Ao focar as especificidades da infografia, esta pesquisa é definida como qualitativa, de
carát...
2. FUNDAMENTAÇÃO TEÓRICA
2.1 INFOGRAFIA
A infografia é muito utilizada em periódicos para a construção de diagramas ou
org...
Segundo Sartre apud Émille Peillaube (2009, p.33):
“As imagens são necessárias à formação dos conceitos, não há um único c...
os números mostrando a altura de cada jogador, ainda assim, seria possível perceber qual é o
mais alto. Outro item para se...
Enfim, a infografia pode ter diversas faces e, segundo Rodrigues (2009, p.23), “consiste
em utilizar ferramentas visuais c...
dados cartográficos que Loch (2006) apresenta, como, por exemplo, escala, projeção e
simbolismo. Dessa forma, apresenta ap...
Neste ponto, é interessante ressaltar a colocação de Cairo (2008, p. 32): “a infografia é
uma ferramenta que reduz a compl...
representação visual de informação se encontra na ideia de mapa, entendida de maneira ampla
como representação esquemática...
Nesse infográfico, observa-se que existe um mapa, cronologia e demonstrações de como
era o navio e de onde se partiu. A pa...
americana. Com a seleção realizada, o comparativo é apenas do estado e não apresenta o
resultado do país inteiro. Assim, e...
Cada círculo tem uma cor diferente que representa a região do mapa. Na barra inferior é
apresentado um botão de play que a...
Portanto, as infografias dentro do universo online ou offline podem ser apresentadas
com a mesma estrutura, porém, com dis...
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...
as letras que correspondem a esses fonemas, unidos para significar o referente leão
(escrita fonética), ou desenhar o ideo...
Segundo Cairo (2008) e Peltzer (1992), o desenvolvimento de diversos equipamentos
auxiliou no aperfeiçoamento da infografi...
Pelzter (1992) registra também que o primeiro mapa publicado em jornal foi na Inglaterra,
no dia 29 de março de 1740, no D...
Ainda no século 17 acontece, segundo Kanno (Anexo 1), a era de ouro da estatística. Uma
infografia considerada importante ...
dados, a invenção de técnicas gráficas e os métodos de visualização multidimensional
deixaram suas marcas”.

A consolidaçã...
Com o suporte da tecnologia, pode-se perceber algumas transições na infografia até
chegar ao nível mais experimental no am...
Figura 17. Fases da transição da infografia impressa para online.

Fonte: Rodrigues (2008). Disponível em http://bit.ly/pq...
Um exemplo de transposição linear é o infográfico sobre o acidente do avião Airbus
A320, voo JJ 3054, que vinha de Porto A...
No trabalho realizado pelo jornal Zero Hora sobre a Segunda Guerra, pode-se observar a
presença constante de áudio, vídeos...
Pode ser pensada numa nova forma cultural e digital para os produtos jornalísticos,
com funções de indexar objetos multimí...
social relacionada com a matéria pesquisada, ou seja, rastreia a atividade por URL dentro da
internet.
Figura 21. Ferramen...
Figura 22. Max Plank Institute.

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

Ro...
navegadores e permitindo que mais informações fossem disponibilizadas. A velocidade inserida
na navegação também cresceu, ...
Carol Holfmann (2010) afirma que “tornar algo compreensível e não apenas fácil de
olhar, é função do design gráfico, desig...
workshop sobre planejamento, desenho, pensar e partilhar ideias antes mesmo de tocar um
teclado de computador. (Figura 24)...
Adequação dos elementos visuais à informação: a capacidade de passar
mensagens subliminares, as imagens atuarão como eleme...
Na figura 26, são apresentadas as leis mais importantes da teoria Gestaltiana, como:
semelhança, proximidade, continuidade...
informação, condições e imagens que prevalecem no sistema nervoso do
observador, que é, em parte, determinada pela própria...
infográfico. Um exemplo prático é exposto por Munari, apenas utilizando a textura para mostrar
o funcionamento da teoria d...
estrela Ursa Maior, e os bascos representam por meio da suástica a imagem de uma dupla
espiral. Porém, o significado mais ...
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 Visua...
Cairo (2008) articula sobre a implantação dos dados variáveis do Google Maps, que se
tornou uma ferramenta importante para...
Na figura 32, o Google Development apresenta um showcase de vários modelos de mapas
interativos.
Figura 32. Grupo de ferra...
comunicação de uma mensagem. Dondis (1997) acredita que a forma pode ser modificada ou
interpretada de forma diferente por...
Dias e Carvalho, seguindo a mesma concepção de Cairo, propuseram a dois profissionais
das áreas de matemática e desenvolvi...
A abstração é um componente importante para a composição de informações em um
mapa. Para exemplificar essa ideia, Cairo (2...
Figura 36. Plano do metrô de Londres por Henry Beck, 1933.

Fonte: The Guardian. Disponível em http://bit.ly/IrIuOs. Acess...
1) a capacidade contemplativa, isto é, abrir as janelas do espírito e ver o que está
diante dos olhos; 2) saber distinguir...
A intenção do signo é representar as formas e simbolizar ideias da percepção do mundo e
das coisas. Para isso, existe a ne...
Tais conceitos discursados podem ser aplicados à estrutura da comunicação humana,
segundo Watzlawick (2011, p.18 e 19):
O ...
Afinal, busca-se com toda essa dialética e experiência de estudos no campo visual, a base para
aplicação no ambiente web.
...
a rentabilidade. Cairo (2008) assume um lado mais estético/funcional, afirmando que quanto
mais visíveis estão as funções ...
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...
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Design de Informação: Interface web para infográfico sobre a Balneabilidade no Estado de Santa Catarina
Upcoming SlideShare
Loading in …5
×

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

2,176 views

Published on

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.

Published in: Design

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

  1. 1. 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
  2. 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 2
  3. 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 3
  4. 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, interatividade, interface, visualização de dados, balneabilidade. 4
  5. 5. ABSTRACT To develop an interface of a computer graphics that show graphically the state of pollution of the beaches of Santa Catarina expounded by the history of computer graphics and its transition to digital media. However, go up the path trodden by the transition and, therefore, there was the possibility of languages, data visualization, the concepts of navigation and usability. Finally, some possible tools are presented for the construction and implementation of an interface. Keywords: information design, interactive computer graphics, databases, interactivity, interface, data visualization, bathing. 5
  6. 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. 6
  7. 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. 7
  8. 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. 8
  9. 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. 9
  10. 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 10
  11. 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 11
  12. 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. 12
  13. 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. 13
  14. 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. 14
  15. 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.” 15
  16. 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 16
  17. 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. 17
  18. 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 18
  19. 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. 19
  20. 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 20
  21. 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. 21
  22. 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 22
  23. 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. 23
  24. 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. 24
  25. 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. 25
  26. 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 26
  27. 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. 27
  28. 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. 28
  29. 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) 29
  30. 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 30
  31. 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. 31
  32. 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. 32
  33. 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.” 33
  34. 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. 34
  35. 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: 35
  36. 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. 36
  37. 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. 37
  38. 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 38
  39. 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. 39
  40. 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 40
  41. 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. 41
  42. 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). 42
  43. 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 43
  44. 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 44
  45. 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 à 45
  46. 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 46
  47. 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. 47
  48. 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. 48
  49. 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 49
  50. 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 humanocomputador, cartografia e mineração de dados.” Toda a visualização de uma informação pode ser abstrata, o que se vê no papel ou na tela de um computador seria uma representação do real, uma interpretação de fatos e dados. Cairo (2008, p7) confirma que “um diagrama é uma representação abstrata de uma realidade.” Ou seja, representa números em forma de gráfico, podendo, assim, ser comparado visualmente. Quanto maior o poder de abstração de uma infografia, maior o grau de compreensão de uma informação. Na figura 33, de um lado há um quadro com vários números e, no outro, são destacados no quadro apenas os números necessários. Figura 33. Fragmentação e minimalismo na informação. Fonte: Cairo (2008, pg.21) 50
  51. 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) 51
  52. 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. 52
  53. 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: 53
  54. 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 54
  55. 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 quasesigno) que também está relacionada ao objeto não diretamente, mas pela mediação do signo. Niemeyer (2007, p25) considera que a união dos signos constitui a linguagem: O signo tem o papel de mediador entre algo ausente e um interprete presente. Pela articulação dos signos se dá a construção do sentido. Os signos se organizam em códigos, constituindo sistemas de linguagem. Esses sistemas constituem a base de toda e qualquer forma de comunicação. Além da tríade apresentada, existem outras explorações de Pierce: a relação do signo com o signo, com o objeto e, finalmente, com o interpretante. Assim é possível observar outra tríade na figura 38: Figura 38. Desmembramento do signo. Fonte: SANTAELLA, Lúcia. O que é semiótica. São Paulo: Brasiliense, 1985 5 Semiótica. A semelhança e afinidade da Semiologia à Semiótica: ambas tratam do estudo dos signos e surgiram em momentos muito próximos (início do século XX). A semiologia teve suas origens na Suíça e estendeu seus domínios aos países de língua francesa, enquanto a Semiótica iniciou nos Estados Unidos por meio do filósofo Charles Sanders Peirce (1939-1914). Por força de novas posturas metodológicas, os semiologistas criaram outro movimento, chamados estruturalismo. Em 1969, o comitê fundador da Associação Internacional de Estudos Semióticos, resolveu que as duas ciências fossem fundidas, passando a designar-se somente Semiótica. (SUNAGAWA: 2010, p.70). 55
  56. 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). 56
  57. 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, percebese que os conhecimentos específicos sobre percepção, visualização e compreensão da forma ainda estão em processo de acomodação no que se refere ao uso da arquitetura da informação7, usabilidade, interface, entre outros. Estas informações sugerem que há uma preocupação em comum: “melhorar o fluxo de intercâmbio de informações entre o indivíduo e um dispositivo. Em outras palavras: converter a interação de um dispositivo em algo fácil de aprender.” (CAIRO: 2008, p.63). Bell (2010, p.113) acrescenta que “os aspectos de navegação da arquitetura da informação são bastante úteis para se ter uma ideia de quais páginas funcionam como vias de comunicação”. Portanto, percebe-se que para desenhar uma interface navegável, os conteúdos respectivos à arquitetura da informação podem ser importantes. Lévy (1999) aprofunda ainda mais ao desenvolver uma tese de que o termo interfaces é designado “a todos os aparatos materiais que permitem a interação entre o universo da informação digital e o mundo ordinário”. Para Agner (2009, p.29), existem nove conceitos básicos aplicados à interface: Consistência: sequências de padrões e a construção de linguagem; Atalhos: atalhos e comandos para diminuir o tempo de resposta; Retroalimentação: agilidade na ação e reação do sistema; Diálogos precisos: mensagens de finalização a uma sequência de cliques que deixam o usuário satisfeito e pronto para a próxima etapa; Prevenção de erros: comunicar ao usuário uma ação inapropriada; Reversão: o usuário poder voltar ao estado inicial; Auto-controle: o usuário deve ter sempre a sensação de controlar o sistema e reconhecer as respostas do sistema; Memória humana: deixar sempre os itens importantes para a navegação visíveis; Design centrado no usuário (UCD8): saber como o usuário do sistema se comporta, o que ele espera e quais são seus métodos de navegação. Alguns autores, como Krug, Kalbach, Belle Cairo, respeitam estes conceitos para o desenvolvimento de projetos, porém não na mesma sequência. Kalbach (2009), por exemplo, acrescenta que tais conceitos afetam a credibilidade de informação no site e, consecutivamente, 7 Segundo Bell (2010, p.112), uma das primeiras influências do IHC não veio da psicologia, mas da arquitetura e do design. A arquitetura de informação usou ideias do planejamento urbano para ajudar no entendimento sobre sistemas de informação de hipertexto. Segundo Moraes e Rosa (2008, p.23), arquitetura da informação pode ser definida como o design estrutural de grupos de informações relacionadas [...] se difere do design ou da programação visual pelo fato de focalizar na estrutura. 8 UCD:!Acrônimo do original em inglês User Centered Design. 57
  58. 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: 58
  59. 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. 59

×