Mudar o layout: Alinhar à esquerda Alinhar ao centro Alinhar à direita

Muito bem hospedado pela Bit7 Hospedagem - conheça os planos.

Usabilidoido
blog de Frederick van Amstel
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.
Podcast Download
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.

Últimos

O poder da educação interativa

09.04.05

Comentaram:

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:

ÁUDIO: O poder da educação interativa [MP3] 7'

leia ainda mais

Visualização da Informação

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.

Visualização da Informação no dia-a-dia [MP3 - 10' - 1.9MB]

Notas

  • livro do norman
  • consciente e inconsciente
  • jogos tem que apresentar certa complexidade
  • nós jogamos inconscientemente, simplificamos - números
  • jogo da velha
  • visualização da informação
  • dados abstratos, sem uma representação óbvia
  • percepção de padrões e relações, estimular o pensamento
  • se estivesse usando slides
  • tufte e powerpoint
  • voltando ao jogo da velha, a técnica de visualização transforma ele numa coisa do dia-a-dia, chata
  • é assim que as coisas de rotina tem que ser, para que concentremos no que realmente importa

Mais sobre o assunto: Infovis, artigos periódicos bem acessíveis sobre o assunto e a explicação da lógica da visualização criada pelo setor de pesquisas da IBM para visualizar a edição de páginas da Wikipedia.

comente aqui

Embelezar gráficos é perigoso

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:

Navegadores usado pelos leitores do Usabilidoido em Outuibro de 2004

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:

Números de acessos médio no Usabilidoido por hora do dia (em Hits)

Números de acessos médio no Usabilidoido por hora da noite (em Hits)

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:

Número de visitas médio ao Usabilidoido por mês

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.

comente aqui

Infográfico sobre tipos de voto

26.09.04

Comentaram:

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.

comente aqui

Infográfico da linha de produção

10.09.04

Comentaram:

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

infografico_producao_cosipa.gif

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.

comente aqui

Tem mais posts lá em cima.

Créditos