Infografia

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

A versão abaixo é somente um esboço. Na época ainda não estava pronta a versão final deste infográfico.

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.

Apesar de muito bem escrito, ilustrado, animado e arquitetado, o infográfico Forças da Natureza da National Geographics me deixou numa posição desconfortável. Ele vai contando aos poucos como se formam os tornados, terremotos e vulcões e mostra relatos da destruição causada por essas imprevisíveis catástrofes. Porém, nos cantos há um botão em destaque diz coisas como:

• Cause o seu próprio tornado!
• Construa o seu próprio vulcão!
• Rodopie o seu próprio furacão!
• Prepare um terrmoto!

Sim, com todos esses acentos de exclamação, como se destruir grandes nacos de civilização fosse algo maravilhoso. As telas a que eles levam realmente te permitem fazer isso. Veja esse pobre prédio abaixo. Com o clique de um botão você escolhe que tipo de terremoto vai devastá-lo.

Não é mórbido?

Não sou contra ter essa seção dentro do infográfico, aliás acho que ela é o pulo-do-gato da peça inteira. Escolher opções e ver suas consequências imediatamente é uma forma muito boa de se ensinar um conceito. Porém ver o celeiro voando dentro de um tornado não é suficiente dramático para que o usuário (ou seja lá o que for o cara que está dianta de um infográfico interativo) tenha noção das reais consequências de um tornado. Melhor seria se uma vaca subisse no aspirador, ou quem sabe uma pessoa. Fotos reais de pessoas chorando por terremotos semelhantes aos que a pessoa causou também devolveriam a moral que faltou ao infográfico.

Mas o pior mesmo foram os malditos botões cheios de exclamação. Pessoal não se preocupa muito com isso, mas texto na Web é crucial, é a essência. Não dá pra descuidar disso e investir em sequências mirabolantes geradas em 3D Studio.

Três infografistas famosos participaram de uma sessão de discussão sobre infográficos interativos e geraram um rascunho com recomendações para quem vai produzir infográficos interativos. Como essa área tem muito em comum com o desenvolvimento de outros produtos interativos (website, softwares), não estranhe se sentir que já leu isso em algum outro lugar. De qualquer forma, traduzi os mais interessantes só para reforçar:

Leia mais.

Nos frustramos mais com ruído nos sons do que com baixa resolução nas imagens. Essa já tinha percebido revendo 10 mil vezes os trabalhos da Lifemotion (veja por exemplo a história Sonhos), mas nunca tinha lido uma boa explicação para isso. Mais uma vez o livro Train of Thoughts traz o seguinte argumento:

A maior parte de nosso campo de visão cai na zona periférica, onde não temos a capacidade de distinguir detalhes. Somente os estímulos que caem no ponto focal parecem ter algum detalhe.

Isso não é desculpa para exportar JPEGs só em qualidade 20 no Photoshop. Isso significa que de nada adianta investir em imagens de altíssima qualidade (maior que 60), se a imagem será percebida por poucos segundos e demorará um tempão para carregar. Pior ainda se isso for desculpa para deixar o som com menor qualidade (menor que 22KHz). Mais do livro:

De acordo com estudos realizados por Reeves e Nass, "a fidelidade do áudio pode ajudar o visual, muito mais do que a qualidade técnica das figuras, porque bom áudio pode até mesmo fazer as pessoas pensarem que os visuais são melhores". Então, temos uma tolerância muito menor para áudio pobre do que com a fidelidade das imagens. Na verdade, áudio que é excessivamente pobre pode desviar uma pessoa da compreensão do sentido da mensagem.

Só para comprovar: ninguém deixa de assistir a final de um campeonato de futebol se a antena da TV tá com interferência, mas se o jogo só vai ser transmitido na AM do rádio, esqueça. É muito mais penoso.

Leia mais.

Break in the Road é o mais novo infográfico a me imergir num assunto: música underground. Não tive paciência de assistir a introdução, mas pesquei que os caras conversam sobre sair na rua e pegar uns sons legais. E é exatamente isso que o infográfico te permite fazer. O mouse vira microfone e os botões embaixo são canais para guardar os sons. Quando terminar, volte para a "Home", usando o mapinha e coloque os sons na timeline. Genial, só faltou a opção de fazer o download da trilha mixada.

Excelente exemplo de como o desenho da interface cumpre papel essencial em criar o clima e também de como a interatividade pode ser usada para envolver o usuário com a história. Tudo isso sem prejudicar em nenhum momento a usabilidade. Tudo é muito leve e rápido.

Falar de Mixer online e não citar Bacardi DJ, da famosa 2advanced, é um crime. Imagino que os caras tiveram um trabalho do cão de programação no Flash e ainda conseguiram deixar tudo muito bonito e distinto. Apesar da interface estar um tanto quanto poluída e ter alguns textos minúsculos, eles incluiram ajuda para o usuário aprender como usar. Aliás, o site foi atualizado recentemente e ficou bem melhor, mais vendedor, como dizem aqui na agência.

A produtora de infográficos interativos Terra Incognita lançou mais um magnífico trabalho recentemente: Cycles. Segundo a cultura africana, a vida é um contínuo ciclo de nascimento, crescimento, maturidade, transição e renascimento. Esse foi o conceito a partir do qual toda a interface foi contruída e o conteúdo disposto, a arquitetura da informação faz parte do conteúdo.

O esquema de navegação é a revelação progressiva, mas sem deixar de dar acesso a um clique para outras seções. O designer conseguiu com maestria compactar toda a navegação num espaço minúculo e ainda adequá-la ao tema. Acredito que a primeira vez que um usuário menos experiente abre uma seção, ele pode ter dificuldades em notar que as imagens apagadas da rodinha são o próximo passo pra ele. Porém, como não há muito ruído na tela, acaba sobrando como o único possível para se clicar.

Na seção Gallery tem fotos em altíssima resolção, usando uma técnica que eu nunca vi em Flash e nem sei como foi executada. Quando você dá zoom na imagem, primeiro ela exibe uma versão em baixa qualidade e aos poucos, os gomos da foto em alta resolução são preenchidos. Não dá pra explicar direito, só vendo. Acredito que isso tenha sido feito para diminuir a sobrecarga no processador.

As cores são muito fortes, me causou um certo estranhamento. Creio que aproveitando os matizes das próprias pinturas das tribos, seria mais adequado. O uso intensivo de fotos em 360 graus já é marca registrada deles. Devem ter um estúdio especial para isso. Aqui na agência, tive que improvisar quando fiz as fotos desses óculos em 360. Uma mesa redonda, uma cartolina branca por baixo, dois abajures de leitura e uma base giratória de acrílico. Foram 7 fotos para cada modelo, todas com a mesma exposição. Se isso foi difícil, imagine cortar tudo no Photoshop depois!

Leia mais.

Esse infográfico está de matar! Um médico te guia numa operação em que você é o cirurgião. Cada ferramenta usa um método de interação diferente e tão fácil de entender graças a ajuda do médico e das dicas na tela. Preste atenção como as cores, a voz do médico e tudo mais contribui para te deixar calmo. Essa é uma aplicação muito útil do Flash e só ele pode fazer isso.

O elearning ainda não decolou no Brasil, mas é uma das áreas que mais se beneficiará da interatividade à distância que a Internet proporciona. Nesse artigo, um administrador ressalta que as simulações são úteis para ensinar tópicos complexos do mundo dos negócios. Por exemplo: colocar o futuro vendedor num diálogo com um potencial cliente recalcitrante. O mesmo conteúdo pode ser ensinado por um Powerpointizinho, mas com certeza a simulação é mais memorizável por causa do engajamento com o assunto.

Numa verdadeira simulação o aluno aprende observando a consequência dos seus atos e não pelas instruções de como usar a simulação. Aplicações com fotos e perguntas de múltipla escolha (a, b, c, chutômetro) não são simulações porque não criam um ambiente engajante. Criar o ambiente é a chave para qualquer simulação ou jogo.

Leia mais.

Vodafone Future Vision e I3You são experiências em Flash que mais se aproximam do que eu penso que vai ser a TV Interativa.

Ambas peças são de empresas que vendem celulares com vídeo. A do I3 é mais puxando para o vídeo, tem menos interatividade e apela mais para a subjetividade. No do Vodafone, a usabilidade tem um cuidado especial, prova de que design arrojado não precisa ser difícil de navegar.

Leia mais.

A Wired publicou uma reportagem dizendo que animação hoje em dia é um recurso interessante para documentários. Antigamente, animação era só coisa de artista ou de desenho animado.

"Os documentários nunca foram tão atrativos, e isso é por causa da evolução da forma", disse Mertes.
(...)
Para criara Grassshopper, Sabiston filmou uma entrevista com um homem na rua e cobriu ela com animação. De acordo como o homem fala, o fundo muda, seus olhos esbugalham e as cores piscam e pulsam. É bonito de ver -- muito mais visualmente atrativo do que o filme não-ficcional -- e eleva o que seria um interessante monólogo numa meditação profunda da verdade e percepção.

Isso é uma prova de que a separação entre ficção e a vida real está cada vez mais difusa. Vivemos entre a mídia e a realidade.

A propósito, na Web, esta emergindo um novo gênero de documentário, o interativo. Quando me toquei disso, me lembrei do Becoming Human, que eu classificava como um infográfico interativo. Acho que "documentário interativo" é mais um gênero experimental que está sendo testado para formar essa linguagem nova que a Web está trazendo.

Nos Estados Unidos, o espaço para o PC passa a fazer parte do planejamento das cozinhas domésticas. Se não é o fino monitor de cristal líquido, é o laptop na rede wi-fi que é levado para lá a fim de enriquecer uma conversa sobre dinossauros, o programa de TV, dar uma receita de abobrinha recheada ou comprar o presente de Natal adiantado. Se a cozinha é o local da casa onde as pessoas mais interagem, então a máquina interativa tinha que estar lá.

Pesquisadores universitários estudam o porque desse fenômeno. Se não fosse a banda larga, com os computadores permanentemente conectados, isso não daria certo. Na ocasião, as pessoas querem usar rapidamente, nada de esperar.

Leia mais.

Simplesmente uma mistura irresistivel pra mim. O objetivo é mostrar como os blocos de Lego são fabricados.

É um infográfico interativo de primeira! Aproveita bem os recursos do Flash para exibir conteúdo (animação, vídeo) e adiciona o fator interatividade de leve. Não há outro suporte da Web melhor que o Flash para isso.

Note que a interface segue uma linguagem visual muito próxima a dos videogames, que é o que a criançada gosta. Diversão e conscientização da marca numa mesma peça.