interação via celular from Magelstudio on Vimeo.

Gostaria de parabenizar os envolvidos pela ação, show de bola!
Se alguém souber qual foi a agência que fez deixe aí nos comentários.

A criação foi da agência AlmapBBDO.

O infográfico “Os piores discos de todos os tempos” saiu primeiramente da revista Mundo Estranho edição 74 e foi adaptado para internet, como diversos outros infos que são feitos na redação.

Na dupla da revista, legumes de diversos ângulos atingem os artistas. Me baseando nesta idéia, na versão online o usuário pode atirar tomates, ovos e etc para ver curiosidades e ouvir trechos dos piores discos da história.

Abaixo as imagens do legumes em movimento que foram animadas no info.

Logo na abertura do info você poderá ver uma instrução básica e rápida de como navegar.

Fiz o layout e conceito de navegação, mas deixei a programação com o parceirasso Elton Prado, programador do site da Superinteressante que sempre colabora com muito empenho em várias de minhas pirações “flashmaníacas”. Valeu Elton!

Veja o info

Comparando as estátuas

Este infográfico surgiu a partir da versão impressa que saiu na revista Mundo Estranho edição 71

O conceito de criação foi simples: Ser intuitivo e possibilitar uma experiência ao usuário. Experiência pode ter um sentido de experimentação descuidada e irresponsável, por isso, ao invés de ficar testando o usuário e correr o risco dele não ter paciência e sair, adicionei um botão de acesso às “dicas de navegação” que você pode ver no canto superior direito, aí você não deixará de passar por nenhum lugar no info.

Muitos infográficos que vemos são em geral super lineares. Sim, é fácil de entender e óbvio de navegar, mas é sem sal, não te fornece essa tal experiência que falo, não surpreende. Claro, cada caso é um caso. Existem infos que não tem como não ser linear, porém, como estamos acostumados com o impresso (livros e revistas) onde lemos uma página após a outra, é realmente difícil de pensarmos o “não linear”.

Nesse infográfico o usuário faz as escolhas, não é obrigado a passar por cada fase da informação. Aqui ele escolhe a cor de fundo, se quer linhas ou não, se quer ver informações das estátuas ou simplesmente compará-las visualmente. Neste caso um info linear poderia ser feito porém o usuário talvez não teria opções de troca de fundos e imagens por exemplo.

Outra coisa importante a se falar é sobre legendas e afins, que diferente do impresso, não precisa ficar tudo exposto. Na web a gente pode usar mouse over e clicar, lembra?
É evidente que você lembra, mas as vezes nós esquecemos dos princípios básicos da internet.
No info eu usei um “alt” para legendar os ícones que representam altura, localização, ano e material. Depois de visto a primeira vez talvez o usuário aprenda e passe a visualizar automaticamente as informações das demais estátuas.

Ah! foram feitos rafes antes da concepção gráfica, claro:

Veja o Info