Alguns designers preferem fazer rabiscos ou protótipos de como o artefato vai se parecer e funcionar. Jonas Löwgren descreve como "rabiscar" design de interação usando lápis e papel, vídeo, animações e outros artefatos interativos.

No momento, estou preferindo pensar antes nas relações que o artefato vai mediar do que no próprio artefato. Já descrevi como utilizo diagramas para pensar e discutir o fluxo da interação social, mas não falei do que vem antes disso: o modelo conceitual do artefato.

Até hoje, como designer freelancer nunca fui chamado a participar das pesquisas que antecedem a conceitualização de um novo artefato. As pessoas me chamam para ajudar quando já têm um pré-conceito do artefato e querem que eu dê uma forma usável para ele. A essa altura do campeonato, é muito difícil convencê-las de que o contato com a realidade pode indicar outros conceitos mais interessantes a serem explorados no artefato. O ideal, como ressalta Donald Norman, é fazer pesquisas antes de iniciar o projeto, antes que se formem pré-conceitos.

O modelo conceitual, entretanto, pode ajudar a mostrar que alguns dos pré-conceitos, seja do designer ou do cliente, não são adequados à realidade. Nessa etapa ainda é possível considerar alternativas, desde que haja um bom raciocínio para sustentar sua validade. Em minha humilde experiência, visualizações do modelo conceitual do artefato são excelentes para negociar mudanças, definir melhor conceitos abstratos e consensualizar uma visão compartilhada do artefato entre os membros da equipe de projeto.

Mapa mental

Como exemplo, vou mostrar diagramas do modelo conceitual do Delicious, um gerenciador de bookmarks online. Nesse caso, estou elaborando o modelo a partir de uma artefato existente, o que pode ser interessante para discutir o seu aperfeiçoamento, mas essa utilização não corresponde à maioria dos meus casos, pois normalmente preciso elaborar visualizações à partir de idéias escritas ou faladas, o que é muito mais difícil.

Uma ferramenta muito útil para ir documentando, selecionando e agrupando as idéias durante reuniões é o famoso mapa mental. Numa reunião à distância via Skype, usei o MindManager para anotar todos os conceitos principais que seriam apresentados ao usuário pelo artefato. Depois de formado, o mapa foi rediscutido e alterado até chegar a um consenso.

Só para atestar a eficiência da visualização, veja primeiro como os mesmos dados apresentados em estrutura de tópicos não explicam tão bem...

• Arquivar
  
  • Tagear
    
    • Agrupar tags
      
• Compartilhar
  
  • Indicar para amigos
    
  • Linkar no blog
    
    • No post
      
    • Na linkroll
      
  • Fornecer RSS Feeds
    
  • Compartilhar tags
    
• Reencontrar
  • Buscar por palavra-chave
  • Filtrar por tags
    • Ver tags relacionadas
• Descobrir
  • Nos populares
  • Indicados por amigos
    
  • Assinados
    
    • Tag X
      
    • Usuário Y
      
  • Recomendados automaticamente pelas tags

...quanto o gráfico completo:

Vale ressaltar que esse mapa não teve a intenção de levantar os componentes do artefato, como parece ser o caso do ruf space redesign. O foco é nos conceitos cruciais para o usuário ter domínio total sobre o artefato.

Agora que imaginamos o artefato, é preciso imergí-lo num contexto, mesmo que também imaginado, para verificar sua viabilidade. A criação de cenários é uma ferramenta curiosa, pois aproveita a própria imaginação que nos faz voar nas alturas para colocar de volta os pés-no-chão.

Contexto cultural

Antes de pensar em cenários de uso, vamos ampliar este cenário para entender suas relação com as tendências macro da sociedade. Vamos descascar a cebola dos contextos, começando pela camada mais abrangente: o contexto cultural. Tenha à mão um lenço de papel para enxugar as lágrimas e observe a obra "Information Overload" produzida colaborativamente por nove artistas em diferentes partes do mundo:

Nunca tinha usado uma obra de arte como ferramenta de visualização, mas também nunca tive uma tarefa explícita de pensar tão abrangentemente. Em geral, designers levam em consideração aspectos culturais ao longo da caminhada, mas raramente param para dialogar sobre isso, talvez porque pareça difícil falar sobre cultura, um assunto tão complexo. A arte facilita esse diálogo e talvez sirva como ferramenta prática para isso.

A imagem me provoca ansiedade, devido à grande quantidade de elementos díspares e desafiadores. Os olhos presentes em vários locais parecem me fitar e o radar proeminente confirma que estou sendo seguido. Estes olhos também me lembram que eu tenho que acompanhar todos os fenômenos que acontecem ao mesmo tempo em minha frente, sem piscar uma vez. Tenho que lembrar e entender os códigos do registro do windows, que me seduz a usá-lo com uma interface convidativa. Como último recurso posso apelar para o robô com a placa de ajuda, mas ele não me parece muito inteligente...

Se você não conseguiu enxergar uma relação forte com a navegação na Web é porque não está familiarizado com tais valores culturais ou então nunca refletiu sobre eles.

Contexto social

A próxima camada da cebola é o contexto social, que abrange das relações objetivas e subjetivas entre as pessoas. O Delicious se pretende a guardar os links que uma pessoa julga interessante e, se ela quiser, ajuda a compartilhar os links com outras pessoas interessadas.

Esse diagrama descreve em termos gerais a relação entre as pessoas, os objetos de interesse e o artefato de mediação (o sistema de favoritos).

Vamos agora dar um zoom no sistema e observar como o artefato faz essa mediação.

Talvez alguém pense que se trata de mais um diagrama de fluxo de dados (DFD), mas perceba como o foco não é na descrição de como o sistema irá tratar os dados, mas sim como as pessoas vão utilizar conceitos do sistema para fazer isso. Um exemplo mais completo é o User Model do Flickr, feito por Bryce Glass.

Contexto simbólico

A última camada da cebola que está no escopo do design de interação é o contexto simbólico. Vejamos agora, como os conceitos do sistema se relacionam, independentemente dos fluxos da atividade:

O conceito de tags utilizado para uma classificação folcsonômica é central no modelo conceitual do sistema, pois determina como será a recuperação, o compartilhamento e a popularização dos links.

Discussão

Mesmo que não se faça visualizações do modelo conceitual do artefato, ele vai ser construído ao longo do projeto. Luciano Lobato descreve em pormenores porque é importante que o modelo conceitual corresponda ao modelo mental do usuário.

Gostaria de ver outros exemplos de representação de modelos conceituais de artefatos interativos. Alguém fez ou viu algo diferente?

Comente este post

Seguindo a linha do Design de Interação, que prioriza a interação entre pessoas sobre a interação com sistemas, tive que bolar um jeito de conceber e representar a interação entre as pessoas antes de pensar como a tecnologia iria mediar essa interação. Como minhas reuniões com a equipe de projeto aconteciam à distância (via Skype), diagramas eram essenciais para explicar minha visão do design.

Me lembrei de um diagrama que tinha feito para um álbum de fotos online que descrevia os papéis dos usuários e seus privilégios. A idéia inicial era que o visitante poderia se cadastrar para acompanhar e comentar outros álbuns (turminhas) e, se quisesse, criar um álbum próprio, transformando-se num "administrador de turminha".

Este diagrama demonstra a relação entre os papéis de usuários, mas não especifica como aconteceria a interação entre eles. Além disso, estes papéis estão definidos de acordo com a relação entre o usuário e o sistema (por ex: se é cadastrado ou não é). Do ponto de vista da interação social que o sistema está mediando, estes papéis não fazem sentido. A interação principal se dá entre os professores das turminhas, que postam fotos, e os pais dos alunos, que acessam e comentam. Em última análise, os papéis da interação social são os "professores" e os "pais" e não "administradores de turminhas" e "cadastrados".

Na época desse projeto, ainda não tinha percebido que ao projetar artefatos, estava também projetando a interação social que eles mediam, portanto, não dei atenção suficiente à interação entre os papéis. O assunto ficou restrito às discussões em reuniões com a equipe do projeto, sem necessitar de uma documentação, pois era mais importante especificar como o sistema iria funcionar.

Algumas leituras e reflexões depois, estava convicto de que nos novos projetos, eu deveria pensar na interação social antes de pensar no funcionamento do sistema. Num projeto de um compartilhador de informações que seguia alguns ideais Web 2.0, acabei desenvolvendo um diagrama parecido como o anterior, mas que ao invés de denotar privilégios, denotaria as interações entre os papéis numa escala de tempo. Cada diagrama descreveria um processo de sucessivas interações, ou seja, uma atividade.

O diagrama ficou parecido com este que descreve a interação social mediada pelo MercadoPago, uma ferramenta de negociação financeira do site de leilões Mercado Livre que funciona muito bem:

Este diagrama descreve detalhadamente o que o diagrama do próprio site do MercadoPago tenta resumir:

O diagrama da interação social é tão fácil de entender que ele poderia mediante um trabalho mais cuidadoso no design gráfico ser exibido para os usuários do MercadoPago. Ajudaria a responder certas perguntas que só uma consulta à ajuda textual poderia responder.

Este diagrama auxiliou tanto na discussão da equipe que resolvemos fazer mais diagramas como esse, para documentar o que aconteceria no caso de algum usuário fazer algo inadequado.

Se um vendedor do Mercado Livre não enviasse o produto como prometido, aconteceria isto:

Para fazer estes diagramas, usei os stencils do grupo "workflow" do Microsoft Visio.

Pensei que havia criado um novo tipo de diagrama, mas ao pesquisar sobre o assunto hoje, descobri que um tal de Grady Booch já havia tido essa idéia antes, mas para descrever a interação entre objetos de um sistema.

Ben Fry criou diagramas similares para descrever a interação social que ocorre por meio do Flickr, mas o foco não eram os processo de interação e sim as relações entre os papéis de usuários e os objetos conceituais do sistema.

Para saber mais sobre o design de diagramas, reforço as indicações do Mauro Pinheiro.

Comente este post

Como podemos definir um ícone?

A palavra ícone vem do grego eikon, que significa imagem, mas em nosso ramo essa palavra é usada para apontar um tipo específico de imagem. Quando falamos em imagem, é importante entender que a imagem é sempre uma representação de um objeto, embora tratemos a imagem do objeto como se fosse o próprio objeto. Posso apontar para a superfície de um tubo de raios catódicos (um monitor) e dizer: “essa aqui é sua pasta de documentos”, embora não haja pasta alguma ali. O objeto a que estou me referindo, em última análise, é uma área física num disco rígido que pode guardar dados. Uma pasta de papel também serve para guardar dados, logo, a imagem da pasta serve como metáfora para facilitar o entendimento do uso da área do disco rígido. O ícone é, portanto, segundo a Semiótica peirciana, uma imagem que tenha alguma relação de semelhança entre a representação e o objeto que, se for convincente, permite que usemos a representação sem tomar conhecimento do objeto.

Existe alguma diferença ou a função dos pictogramas no mundo real e dos ícones no mundo virtual são as mesmas?

Se tomarmos o virtual como o mundo abstrato da mente humana, incluindo, entre outras, o ciberespaço, ícones só existem no plano virtual. Como objetos reais, não passam de um amontoado de rabiscos ou de pontos luminosos num monitor. O ícone é sempre uma abstração, pois funciona como uma representação de um objeto outro que não a própria representação. O virtual e o ícone já existiam muito antes da Internet, portanto, nesse novo meio, continuam tendo a mesma função.

Falando especificamente da função dos ícones em interfaces digitais, você acredita que o seu objetivo esteja mais ligado à memorização de determinadas tarefas ou a estética gráfica?

Os primeiros ícones surgiram como metáforas para facilitar o entendimento do funcionamento dos sistemas, como no exemplo da pasta. A estratégia deu tão certo que as pessoas se lembravam mais da forma do ícone do que do nome do comando que ele representava. Logo, os ícones se tornaram a cara do software, desempenhando papel fundamental na formação de sua própria identidade. Foi a partir daí que o valor estético dos ícones começou a ser explorado em softwares. Por influência da linguagem visual das interfaces de softwares, as primeiras páginas Web incluíam ícones sem ganho funcional, apenas para parecer que a página era mais “interativa”. Esses ícones não tinham a função de facilitar a memorização nem o aprendizado; seu único objetivo era o ganho estético. Com o ingresso massivo de designers na criação de interfaces, o que parecia inconciliável se tornou indissociável. O Design mostrou que valor estético e valor funcional não precisavam competir entre si.

A eficiência dos ícones depende do nível de familiaridade das pessoas com as representações que se pretende passar?

Não necessariamente. Uma imagem pode ser facilmente lembrada mesmo que não faça referência direta a algum objeto que conhecemos previamente, pois nossa mente é capaz de criar inúmeras associações indiretas. É por esse motivo que uma pintura abstrata pode suscitar algum tipo de sentimento ou idéia. A eficiência do ícone está mais ligada à adequação ao contexto. Se uma interface oferece uma série de ícones abstratos que se diferenciam entre si o suficiente e fazem sentido para o contexto da interface, possivelmente, eles serão eficientes. No Brasil, os ícones usados em fornos microondas fazem referências a objetos concretos (figura de peixe para a programação “assar peixe”), enquanto que na Suécia eles são mais abstratos (duas barras paralelas para a programação “descongelar”).

Hoje, já podemos afirmar que a internet possui uma iconografia particular (por exemplo: utilizamos a imagem de uma casa para indicar a página principal de um site)?

A maioria dos ícones que encontramos com freqüência na Web tem suas origens nos softwares de desktop. A imagem da casa para indicar “home” já era usada antes da Web em apresentações multimídia feitas com o Hypercard, o avô do Director. Entretanto, a transposição deve ser feita com cuidado. Será que o usuário já viu este ícone em algum software? Se viu, será que ele entendeu? Se entendeu, será que ele vai entender se eu colocar nessa aplicação Web? Essas perguntas não podem ser respondidas com base no achismo. Melhor testar com usuários reais.

Por outro lado, o avanço da tecnologia permite que o desenvolvimento de um site possua uma série de novas funcionalidades. Por exemplo: o espaço para comentários vem se tornando uma função muito comum (e o símbolo de um balão tem sido o ícone mais utilizado para representá-lo). Diante disso, quais são as principais etapas a serem consideradas na hora de se criar um novo ícone (escolha de cores, tamanho, tipo de traço etc.)? Caso possível, poderia citar um bom exemplo nesta área?

A primeira etapa ao se criar um novo ícone é não criar um novo ícone. Para quê reinventar a roda? Se o ícone para comentários na maioria dos websites similares ao que você está trabalhando é um balão, então é melhor usar um balão também, a não ser que o objetivo seja confundir ou chamar a atenção para o próprio ícone. O contexto onde estará o ícone é que vai dizer qual será sua função principal: embelezar, agilizar, desorientar ou o que for. É preciso, entretanto, ser consistente na função dos ícones. Ícones agilizadores não devem se misturar a ícones embelezadores, do contrário, ambos perdem força. Isso acontece porque os ícones não são percebidos em separado, mas sim fazendo parte de uma série. O usuário entende a função do ícone comparando-o com os ícones e controles próximos. Por esse motivo é tão importante usar uma mesma linguagem visual (bordas, cores, perspectiva, iluminação) e figurada (objetos, atores) entre todos os ícones de uma interface. Na tela de configurações do sistema operacional BeOS R5.0.1, a inconsistência na linguagem utilizada em alguns elementos chama a atenção.

Qual é a melhor forma de testar a eficácia de um ícone na web?

A melhor forma de testar ícones é observar se eles são relevantes para os usuários. Como disse anteriormente, o usuário pode não entender o significado que o criador do ícone quis transmitir, mas se fizer algum sentido, for agradável ou fácil de memorizar, então ele pode ser considerado eficaz. Para avaliar esses aspectos com maior precisão, só colocando o ícone no contexto onde ele vai ser utilizado, ou seja, num protótipo da interface. Testar o ícone isoladamente através de métodos como o Icon Sorting, no qual o usuário combina livremente o ícone com um rótulo que descreve seu significado, é interessante para explorar diferentes possibilidades de combinação entre texto e imagem, mas não se pode confiar no resultado como uma avaliação real. O ideal é fazer um Icon Sorting antes e depois testar o protótipo da interface em situações reais.

O site GloboEsporte.com é um bom exemplo no uso de ícones, ao utilizar os escudos de times de futebol para indicar as seções específicas de cada um deles. Dentro de um site, quando se nota a necessidade de criar um ícone para que o usuário consiga realizar determinada função?

O caso do GloboEsporte.com é uma situação rara. Não é sempre que se pode contar com ícones facilmente reconhecíveis para cada categoria. O mérito da eficácia desses ícones é muito mais dos clubes que criaram escudos únicos do que da equipe do GloboEsporte.com que aproveitou a oportunidade de utilizar esses escudos como atalhos. Além do valor funcional, estes ícones também servem para aumentar a identificação do site com o torcedor, que vê o escudo do seu time na página principal do site. Entretanto, a maior sacada da equipe do GloboEsporte.com foi perceber que os usuários buscavam informações específicas sobre seus times e se beneficiariam muito de um atalho para essa função. Esse exemplo ilustra várias funções de ícones: atalho, decoração, fetiche e etc.

Quais são as vantagens (economia de espaço da interface, agilização da navegação etc.) e desvantagens (complexidade, poluição visual etc.) no uso de ícones em projetos de sites?

Cada caso é um caso. Um visual colorido proporcionado por uma série de ícones pode ser vantajoso para um website infantil e desvantajoso para um website sobre direito tributário. É claro que podemos fazer uma série de ícones monocromáticos para o website sobre direito, mas será que ainda assim não prejudicará sua imagem de seriedade? A avaliação de prós e contras da utilização de ícones deve, como todo elemento de interface, ser feita dentro do contexto.

Como os ícones podem ajudar a melhorar a usabilidade de um site?

Uma série de ícones bonitinhos pode contribuir para transmitir uma primeira impressão de facilidade de uso, ou seja, contribuir para a usabilidade percebida. Em websites que enfrentam grande concorrência e são utilizadas poucas vezes por seus usuários, a usabilidade percebida é mais importante do que a usabilidade efetiva. Para o usuário, não importa se a conclusão da tarefa vai demorar 1 minutos ou 3 minutos, importa mais que o fluxo da tarefa durante esse tempo seja agradável e sem problemas. É claro que ícones podem contribuir para a usabilidade efetiva, contribuindo para a memorização de atalhos rotineiros, mas isso só se aplica a websites de uso intensivo.

Em alguns sites, é possível reparar que os ícones possuem textos auxiliares que funcionam como legendas para explicar o significado daquele símbolo. Essa solução é aconselhável, ajuda na compreensão ou representa a falta representação de um ícone sobre a mensagem que ele pretende passar?

O rótulo serve para ensinar ao usuário o significado do ícone no contexto onde ele se encontra. Se o contexto por si só já deixa claro para que serve o ícone, o rótulo não é necessário. Quando estou escrevendo um texto e há uma série de ícones representando diferentes alinhamentos de parágrafo, não preciso de rótulos. Existe uma semelhança direta entre o ícone e a apresentação do meu texto. Agora, abaixo da imagem de uma prancheta com um documento em cima é necessário o rótulo do comando pois a semelhança é indireta. A prancheta (clipboard) é onde fica armazenado um trecho de texto pronto para ser “colado” na posição do cursor. Como o índice de uso desse ícone era muito baixo no Office 2003, a Microsoft pretende adicionar o rótulo “colar” abaixo desse ícone na próxima versão do Office.

Comente este post

Uma proposta de análise de infográficos da guerra do iraque [PDF] 256 kb

A explicação de Carolina sobre o pôster foi muito interessante. Ela mostrou como a aplicação das categorias de análise semióticas servem para entender a construção do significado superficial do infográfico (os elementos visuais que o compôem e suas interrelações). Entretanto, fomos além desse trabalho e discutimos um tópico espinhoso: o viés político do infográfico em questão, no caso sobre a invasão do Iraque; adivinha quem estava sendo favorecido?

Semiótica aplicada à infografia [MP3] 15 minutos 2 Mb

O infográfico em questão é de autoria de Renata Chabetai e foi publicado na Revista Época.

Comente este post

Quando descobri a extensão webdeveloper pro Firefox fiquei maravilhado, pois ela abre uma barra no canto para editar o CSS e o resultado é exibido instantaneamente, sem precisar recarregar a página. Porém, como sou visual, sinto falta de códigos coloridos para rápida identificação e também adoraria se essa barra lateral pudesse sair do canto do navegador e ser posicionada onde quisesse na tela.

Acredito que essa valorização do estímulo visual é responsável também pelo apego ao Dreamweaver que tantos webdesigners ainda tem. Código não é nada visual. Eu não tenho medo, mas prefiro uma interface WYSIWYG.

As propriedades de formatação em CSS possuem duas dimensões: a dimensão textual (o código) e a dimensão visual (o efeito dos códigos). Acredito que muitos webdesigners desistem de estudá-la simplemente porque é apresentada a penas a dimensão textual nos tutoriais e cursos por aí afora. Pensei então, numa forma visual de explicar como funciona algumas propriedades duvidosas e montei o seguinte infográfico, que pode servir de referência rápida até para os mais experientes:

Como não sou expert no assunto, deixo aberto para os leitores corrigirem eventuais erros técnicos. Se gostarem, posso fazer uma tabela mais completa.

Comente este post

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:

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

Nos Estados Unidos, o póo absoluto da produção de games, pesquisadores fizeram experiências introduzindo o Civilization III nas escolas. Traduzo alguns resultados:

Na medida em que os estudantes sofriam derrotas, eles discobriam a importância da geografia. No final, muitos estudantes estavam usando as experiências de jogo como ferramentas conceituais, explicando como uma escassez natural de petrólep pode desestabilizar a política global. Um estudante comentou que "o que aprendi é que você não pode separar a economia da política ou da geografia. Os recursos naturais que eu tenho ou onde estou posicionado afeta como eu posso negociar com outros povos".

Os textos americanos às vezes subestimam a cultura oriental. CivIII tem uma perspectiva mais global da história. É às vezes difícil para os estudantes entenderem que a história poderia ter se desenrolado de forma diferente. A qualidade do "como seria" do jogo permitiu aos estudantes tirar suas próprias conclusões sobre questões como e porquê a Europa colonizou a América do Norte e não o contrário. Esses estudantes, cuja maioria lia pouco e se batia com estudos sociais, desenvolveram habilidades sofisticadas pensando sobre a história e jogando CivIII. Eles aprenderam a formular suas próprias questões sobre o processo histórico.

Por outro lado, poucos perceberam o enviesamento geográfico, materialista e a minimização das figuras históricas e fatores culturais do CivIII.

Claro, como o jogo é uma simplificação da realidade, terá muitos defeitos. Porém, a história contada pelos professores também tem seus enviesamentos, de acordo com a visão de cada cultura e posição social em que está inserido. Disso não podemos escapar. Cabe ao professor, usar jogos como esses apenas como apoio em aula, ressaltando os pontos altos e baixos do game. O mais interessante é que o game fornece ao aluno um embasamento excelente para discutir sobre os assuntos tratados, algo que dificilmente acontecer numa aula meramente teórica. É como se o conhecimento estivesse assim mais acessível e envolvente.

Comente este post

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 este post

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.

Comente este post

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.

Comente este post

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 este post

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

Comente este post

Planeje, planeje, planeje

Gaste o tempo organizando os seus pensamentos e faça um brainstorm com a equipe alguns minutos (mesmo que só na hora do cafézinho) para salvar horas de trabalho perdido depois. Não deixe de fazer um storyboard.

Pense na escalabilidade

Se você antecipar qualquer crescimento da seu pacote de estórias (assim como a maioria dos especiais de notíocias o fazem), pode construir uma interface que permite esse crescimento. Não se deixe ser pego adicionando um "botão extra" só porque você não tinha um plano emergencial.

Templates

Faça modelos padrão para serem usado em várias estórias de mesma ordem para que você possa se concentrar na contação de estórias e no jornalismo. Isso vai permitir que você desenvolva estórias mais complexas e visualmente desafiadoras para coberturas especiais.

Internautas quase não tem paciência

Eles estão sempre com pressa; estressados nos seus teclados, prontos para ir embora. Eles estão prestando muito menos atenção do que nos impressos, na televisão ou no rádio. Corte e edite sem perdão suas animações, áudio e vídeo. E pule rapidamente para a estória: os primeiros 10 segundos são críticos para prender a atenção do usuário na peça.

Explique claramente o seu projeto

Use títulos, subtítulos e texto bem breve para explicar sobre o que sua estória trata e porque ela é importante, antes dela começar. Leve em conta que seu visitante pode estar chegando por um link não-informartivo ou um buscador -- em outras palavras, fora de contexto.

Não se esqueça dos princípios básicos do design

Quando estiver desenvolvendo interfaces para pacotes especiais, não se esqueça dos básicos sobre consistência, contraste/ hierarquia e contraste.

Determine a hierarquia através do contraste

Assim como o editor visual, você decide o que é mais importante e o que é secundáro. Use contraste para ajudar a guiar o seu leitor através da estória a partir do mais importante para o menos. E não, nem tudo pode ser manchetado.

Veja seus elementos em contexto

É fácil projetar um componente bonitinho, que pareça fantástico sozinho, mas uma vez na página atual -- com títulos, rodapés, banners e textos -- se torne confuso e ruidoso.

Seja consistente

Não force o seu usuário a aprender uma interface toda nova se a história não precisar disso.

Teste sua interface

Interfaces de usuário são mais que design gráfico, entretanto designers gráficos são comumente alocados para construí-las. Navegação confusa ou pobre (mesmo que bonita) pode detonar um projeto. Mantenha suas interfaces simples; reuse elementos quando puder e se aproveite de modelos estabelecidos (como as interfaces do Windows e do Macintosh) e faça os seus se comportarem do mesmo jeito.

Faça mini-testes de usabilidade com amigos que sejam interessados no assunto, mas não familiar com o projeto. Eles vão achar buracos na medida em que você mergulha no projeto testando todos os aspectos da interface.

Rastreie o uso

Mesmo em (ou especialmente em) componentes em Flash, gaste o tempo extra para fazer um sisterma de rastreamento para saber exatamente o que os seus usuários estão fazendo. Isso vai minimizar a adivinhação sobre o que as pessoas preferem do seu conteúdo e como estão entendendo bem a sua interface.

Considere a irreverência

Considere formas de amenizar uma estória. Talvez correr riscos online que a mídia tradicional não pode correr. O seu destaque noticioso poderia ser um jogo? Você consegue colocar um toque de divertimento no seu assunto, na mídia Web? Você consegue criar momentos divertidos para dar uma quebra numa estória mais séria?

Comente este post

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.

Comente este post

Como na minha primeira tentativa gastei mais tempo pesquisando sobre o que iria falar e menos na exploração do formato, resolvi partir de um conteúdo pré-definido. Como de costume, a primeira coisa que fiz foi pensar como criar interatividade entre o leitor (ou usuário) e a informação. Nesse caso foi fácil: deixar que o usuário passe o gelo e a compressa e veja as consequências de suas escolhas imediatamente. Espero que a curva de aprendizado para o arraste não seja puxada demais... mas acredito que pela vantagem mnemônica valha à pena, porque é simulação de um movimento real.

Comente este post

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.

Comente este post