Blog sobre Webdesign, ou melhor, Design de Interfaces Web, ou melhor, Arquitetura da Informação, ou melhor, Engenharia de Usabilidade, ou melhor: leia e discuta sem se preocupar com o nome.
Assunto Infografia Interativa
Lembra daqueles gráficos transados da revista SuperInteressante? Imagine interagir com eles. É uma nova forma para contar histórias, dar instruções de uso de produtos ou fazer simulações.
Na vanguarda da pedagogia, se prevê uma mudança drástica no papel do aluno na aquisição de conhecimento para os próximos anos. Quem realmente estiver interessado em aprender poderá superar o mero papel de turista, aquele que está condicionado a ver somente o que o guia lhe mostra. Poderá se tornar um aventureiro destemido, esforçado para encontrar tesouros escondidos.
Para isso acontecer, mudar o relacionamento professor-aluno é apenas uma das medidas. É preciso, antes de tudo, que se desfaça o estigma criado pelo modelo da velha escola, onde aprender é uma tarefa chata. Aprender é muito divertido e gratificante, não é por obrigação que escrevo neste blog. Se não fosse prazeiroso, não seria tão firme.
A proposta do edutainment é perfeita para esse fim: criar experiências divertidas que tenham fundo educativo. Talvez a forma mais bem succedida de edutainment sejam os games que simulam situações reais e históricas.
Um game é muito especial para mim nesse sentido: Civilization. Descreverei melhor essa relação neste podcast:
Essa é uma técnica aplicada de Design da Informação,
cujo objetivo é tornar uma série de dados abstratos em um padrão
reconhecível, mais próximo dos modelos mentais. Apesar de ser
uma disciplina bastante complexa e acadêmica, seus conceitos também
se aplicam na nossa interação com objetos do dia-a-dia, incluindo
as interfaces do computador.
Estou lendo o livro Designer´s Guides for Creating Charts an Diagrams de Nigel Holmes, que na época era
ilustrador da famosa revista Time. O cara adorava ilustrar gráficos para
torná-los mais amigáveis e interpretar os dados mostrados. Veja
um exemplo simples dessa técnica aplicada a um gráfico de pizza:
O fucinho e a orelha da raposa saindo pra fora significam que o Firefox está
tentando tomar o lugar do Internet Explorer, mas ainda está longe de
conseguir. Como vocês podem notar, com as ilustrações mais
fácil de perceber o viés de quem fez o gráfico (sim, eu
recomendo altamente que vocês troquem de navegador).
Mesmo assim, nesse caso não houve distorções e o gráfico
é muito mais interessante que sua versão em tabelas com números.
Porém, fiz dois outros gráfico para ilustrar como nem sempre isso
é vantajoso para entender melhor os dados:
Apesar de bonitinhos, nesse caso os gráficos de barra dispostos em círculo
dificultam a comparação entre os valores. Note no gráfico
original feio como é muito mais fácil perceber o padrão
de acesso (que é o objetivo de um gráfico como esse):
Outro recurso utilizado erroneamente pelos infografistas é trocar barras
por desenhos que são dimensionados de acordo com a altura da barra. O
problema dessa técnica é que causa uma certa distorção.
Note como no gráfico abaixo, o primeiro valor parece muito menor do que
o último, quando na verdade ele representa 1/4 do valor do último:
Se fosse mantida uma largura fixa como a barra do gráfico original,
os dados não seriam distorcidos, mas aí as figuras ficariam distorcidas.
Pior do que isso só usar grades curvas ou tridimensionais para se ajustar
melhor ao desenho que envolve o gráfico. Isso torna a comparação
mais imprecisa, porque é preciso levar em conta essas alterações
na grade e compensar as diferenças.
O livro foi escrito em 1982, quando os infográficos começaram
a ser mais valorizados nos jornais. Pelos exemplos
que vi no site do autor, parece que ele mudou radicalmente sua abordagem.
Porém, ainda há muitos infografistas por aí que se vangloriam
por tornar gráficos mais amigáveis abusando de ilustrações.
Como diz Edward Tufte, no seu excelente livro "Envisioning Information":
Se você sente que precisa embelezar um gráfico, é
porque escolheu os números errados.
Estou há tempos sem postar porque estou atolado de trabalho e praticamente
offline. Mas, não pudia mais esperar mais para lançar meu mais
novo infográfico experimental: O voto indeciso e o de protesto.
O acabamento está meio tosco, faltou os efeitos sonoros, mas o importante são os conceitos
de simulação para o aprendizado, manipulação direta,
metáforas simplificadas, humor para quebrar o gelo, utilidade real, profundidade
de análise e etc.
Só quando estava terminando, pensei em ver se o Tribunal Superior Eleitoral
já tinha feito algo parecido. Fizeram sim, um simulador
de urna em Java, mas é bem mais pesado que o meu.
É raro encontrar infográficos interativos no Brasil, mas ontem
encontrei um no site da Cosipa (cuja
homepage não me explica o que faz), feito pela BhTec.
Ele explica de forma atrativa como é o fluxo
de produção da empresa. Se fosse impresso seria fantástico,
mas do jeito que foi implementado não deu muito certo. De novo, o problema
é a influência
da mídia impressa.
Não é porque se está falando de uma linha de produção,
que o infográfico precisa ser apresentado de forma linear. Às
vezes gostamos de rever partes, ou simplesmente olhar
com pressa. Por isso, além da sequência linear, o infográfico
deve ter flexibilidade para permitir outra ordem escolhida pelo usuário.
O famoso infográfico todo em Pixelart mostrando a linha
de produção dos tijolos de Lego peca nisso também.
Apesar de ter um fluxo muito melhor do que o da Cosipa, disperdiça a
oportunidade de permitir que o usuário pule e vá direto ao final.
Como já há uma área gráfica lá em cima que
mostra em que estágio você está, bastaria que os demais
estágios fossem clicáveis e estaria feito.
No info da Cosipa, para avançar, é preciso arrastar uma barrinha
quase invisível lá embaixo. Quando se clica em um objeto que está
nos cantos da tela, ele é selecionado, mas fica parcialmente encoberto.
Imagino que isso tenha sido feito na pressa, porque ficou tosco mesmo. O texto
fixo no canto direito (e alinhado à direita) também sugere isso.
Esse último problema também aparece no info da Lego. Apesar de
ter sido uma idéia muito boa usar a metáfora do videogame para
navegar, não ficou tão interessante a forma como o texto de legenda
aparece. Não precisa nem comentar que a animação dele sendo
escrito é desnecessária e irritante, mas o pior é que o
texto compete com o vídeo e está visualmente desconectado da área
de foco. Melhor seria fazer como o esse info que explica (ou ameniza) como funciona
um campo
de refugiados no Iraque. Rollover vê o nome da coisa, clicou abre
o texto numa área bem próxima, mas sem sobrepor o objeto. Na realidade,
o melhor no caso da Lego seria eliminar aquele vídeo ou então
oferece como opção ao clique. Além de pesado, a resolução
às vezes é tão baixa que não dá pra ver nada.