Organizar informações em um artefato de forma legível, compreensível, e de maneira que facilite aos receptores a construção de singificação é o campo de estudo do design de informação. Tradicionalmente, ou ao menos originalmente, o design de informação esteve focado nas mídias impressas, como herdeiro daquilo que, antigamente, se denominava apenas como design gráfico ou programação visual.

Mas nos tempos recentes, não só o suporte audiovisual, como também o multimidiático, passaram a ser objetos do design de informação, seja porque estes artefatos são, de fato, suportes de informação (e precisam ser projetados com uso desse expertise), ou porque estes suportes têm se tornado ubíquos, isto é, onipresentes na vida das pessoas, o que os torna até mais relevantes que a própria mídia impressa como suporte da informação.

Seja como for, o fato inevitável é que a prática dos designers de informação não pode (e nunca deveria) ter permanecido restrita à mídia impressa. Isso se tornou evidente na atualidade.

Mas as técnicas tradicionais do design gráfico, sobretudo de planejamento gráfico e visual, herdados de processos de confecção de materiais impressos (que ainda são usados no design de informação), não têm mais completa aderência nestes novos contextos. E ainda não há clareza se os novos processos oriúndos das multimídias se adequam à todas as mídias, ou se cada mídia precisará de técnicas e formas de planejamento específicos.

Exploraremos aqui, com o intuito de ilustrar as especificidades e os pormenores do contexto digital, um caso real de design de informação sendo repensado para o novo suporte de forma que possa se comportar de forma mais adequada: durante o biênio 2018-2020, a pesquisa de Estética da Interação se concentrou em estudar artefatos narrativos. Um de seus produtos foi um diagrama com a evolução de um formato específico de artefato interativo, o Point & Click Adventure, constituído por histórias que se desenrolam à partir da interação do usuário. Os aspectos técnico-construtivos deste artefato (diagrama final) são abordados em um texto em contraponto, no livro sobre código criativo.

O diagrama em questão continua abarrotado de problemas e inadequações para os meios interativos, mas enquanto interpretarmos e enquadrarmos seus problemas nos critérios pertinentes à outro suporte, continuaremos errando no exercício de sua configuração.

O principal problema deste artefato é seu comportamento / performance, critério que não pertence a natureza estática das mídias impressas. Ele foi projetado, como qualquer impresso, com a concepção de um campo (espaço) fixo, onde não existe a necessidade de que responda dinamicamente às mudanças do suporte que, obrigatoriamente, ocorrem no contexto digital.

O segundo problema é a inabilidade em lidar com a impermanência. Ao contrário de objetos impressos, que são definitivos e imutáveis após serem confeccionados, os artefatos digitais se alteram com o tempo; são atualizáveis. Este, especificamente, precisará incorporar novos produtos que permanecem sendo criados, e poderiam estar ali classificados. Mas a técnica construtiva que permite aos objetos digitais serem atualizados de maneira simples e conveniente, modifica completamente a forma como sua expressão gráfica pode ser configurada, já que não sabemos quantos, quais, ou mesmo as características dos objetos que serão ali exibidos.

O contexto digital opera com a indeterminação de forma ostensiva. O projeto não é gráfico, mas algorítmico: projetamos regras, e não formas. Todo projetista opera sistematizações ao projetar, mas as ferramentas e instrumentos visuais, principalmente os computacionais, que nos permitem uma representação muito próxima e realista do produto final à ser confeccionado, nos habituaram a pensá-las de forma concreta (visualmente tangível), e menos abstrata. Nesse novo contexto, não só a sistematização abstrata precisa ser recuperada, como densamente detalhada. As formas (concretas/materiais) são incidentais e decorrentes de boas regras. Robin Hunickle, Marc LeBlanc e Robert Zubek elaboraram um princípio em seu artigo MDA: A Formal Approach to Game Design and Game Research que permanece válido para qualquer mídia digital: projetamos regras (mecânicas), que criam uma amplitude expressiva dinâmica, da qual resultam a materialidade midiática tangível (forma/estética). O projetista cria o artefato nesta ordem, enquanto o usuário lhe experimenta no sentido inverso.

Considerem como seria impraticável a construção de uma infografia aqui, em decorrência do princípio da indeterminação: poderiamos apresentar o contexto da evolução tecnológica em paralelo à transformação dos artefatos, com referências aos equipamentos e limitações tecnológicas de cada época (videogames, controles, computação gráfica) como uma construção narrativa da evolução destes artefatos; isto poderia ser feito com uma imagem de fundo elaborada pela bricolagem orgânica destes objetos, como apoio na construção de significação para os artefatos apresentados em primeiro plano. Contudo, no momento que o usuário filtrasse a lista de artefatos (selecionando apenas um tipo de artefato ou uma características específica), todo o acoplamento entre a imagem de fundo e o conteúdo em primeiro plano iria se desfazer. A inabilidade de se saber previamente o que aparecerá como conteúdo impossibilita a construção de uma narrativa. Uma narrativa formulada com elementos construídos em tempo real, ou uma narrativa com conteúdo indeterminado, não são impossíveis. Mas são extremamente complexas de serem feitas.

É natural que os questionamentos de um designer gráfico treinado sejam: e a hierarquia de informação? E o trajeto da leitura percorrida pelho olhar (scanning)? E a legibilidade e dimensionamento do texto? E a narrativa? E as relações implícitas pela proximidade/afastamento dos elementos?

Enfim... questões muito pertinentes ao design de informação no meio impresso, mas que ignoram completamente a dimensão metamórfica da informação nos meios interativos; novamente, aplicamos critérios apropriados a um artefato estático, final e definitivo, para pensar um artefato que não se comporta desta forma. As informações presentes em um artefato interativo podem ser reconfiguradas conforme a necessidade. A informação pode ser convenientemente filtrada ou re-estruturada; informações podem ser dinamicamente suprimidas ou apresentadas; o elemento estruturante (no exemplo deste diagrama, o tempo), pode ser substituído (por, por exemplo, a tipologia), criando uma visualização completamente diferente da mesma informação; a hipermediação (links e navegação interna do documento) podem substituir a marcação pelo peso visual...

O esforço aqui é demonstrar que existem outros critérios, assim como outras leituras e outras interações com o conteúdo no digital. Claro, ainda é possível adotar os mesmos critérios e tentar mimetizar o comportamento da mídia impressa no digital: os documentos PDF são um exemplo disso. Mas esta é uma condição limitante, assim como seria tratar um computador meramente como uma calculadora, ou usar um smartphone exclusivamente para ligações de voz.

O corpo editorial da publicação científica Distill, dedicada à dar visibilidade aos resultados de pesquisa sobre Machine Learning, cujos artigos são ricos em visualizações de dados interativas, publicou em 2018 a seguinte reflexão: É tentador pensar nas explicações como uma camada de polimento sobre as ideias. Acreditamos que as melhores explicações muitas vezes são algo muito mais profundo: são interfaces para ideias, uma forma de pensar e interagir com um conceito. Com base nisso, vimos vários artigos do Distill criarem visualizações que reificam essas formas de pensar e interagir com elas.

Os editores exemplificam sua reflexão com um dos artigos publicados na revista, de autoria de Gabriel Goh, discutindo inércia e momentum, recheado de fórmulas matemáticas e diagramas interativos, estimulando a simulação e a experimentação como uma forma de construção da significação; ou em termos mais familiares ao design, o uso e o affordance como produtores de sentido.

Este esforço na construção de experimentos e simulação como forma de explicar conceitos e ideias é comum em qualquer campo científico, mas raro nos periódicos e nos repositórios de informação científica, ainda presos à uma argumentação verbal e aos suportes impressos. No vídeo abaixo, um experimento torna tangível um conceito tão abstrato quanto a natureza da gravidade e de como a massa de um objeto astronômico distorce o espaço e a cria:

O professor Dan Burns explica o que é a gravidade com uma visualização física para alunos de uma escola de segundo grau em Los Gatos, nos EUA.

A construção de uma visualização interativa tem um propósito semelhante, mas sobre artefatos de informação.

A primeira etapa no design de informação para os meios comptuacionais é taxonômica: a construção de critérios e classificações, e o detalhamento criterioso de cada caracteristica presente na informação. Isso permitirá flexibilidade no relacionamento de dados, criando, inclusive, formas de enxergar a informação que o projetista sequer imagina.

É de fundamental importância, ao se projetar com as mídias interativas, entender o princípio de que os dados/informação, e sua forma de exibição, são coisas separadas. Ao se usar uma ferramenta gráfica para construção de um documento impresso, fundimos a informação e sua forma em uma única coisa - um documento - do qual não podem ser dissociadas ou acessadas independentemente. Acontece, contudo, que a computação só é utilizada em todo o seu potencial quando evitamos esse engessamento e provemos liberdade ao conteúdo. Este princípio é baseado em um conceito que repito inúmeras vezes nessa obra: "A desmaterialização é uma operação na qual uma coisa é destituída de seu meio, sendo considerada apenas a sua essência como sendo a coisa, e tomado seu invólucro descartável. O jornal por exemplo, com a internet sofreu a desmaterialização; Ver o jornal hoje significa ler suas notícias em qualquer meio que seja (no próprio jornal, na tela de um computador, no celular, ou impressas em uma folha a parte). O jornal foi reduzido a sua essência, e seu meio tornou-se descartável. [...] O meio foi substituído pela noção de interface. Ela é responsável apenas por materializar a coisa de uma maneira conveniente em um determinado momento - é portanto perecível, sujeita a sua própria obsolescência, e desmembrada da coisa em si. A interface pode ser modificada conforme a conveniência para que não mate a coisa em seu próprio envelhecimento: é a maneira que produzimos para tornar a essência eterna - descolando-a da casca perecível. O livro envelhece, mas não seu texto".

Peço desculpas se pareço repetitivo, mas este é um aspecto crítico das mídias computacionais que continua sendo ignorado, mesmo havendo um intervalo de (no mínimo) 16 anos entre o momento que publiquei o referido artigo e este texto presente. Também, é necessário considerar, esta obra não foi construída para ser lida de forma linear, não havendo garantias que seu leitor já tenha se deparado com o trecho supracitado anteriormente (mas se continuar sua leitura, certamente irá...).

A elaboração destes diagramas não tomou tempo realmente relevante para ser realizada. Talvez, se o primeiro ou o segundo experimento tivessem sido cuidadosamente detalhados, e tivessem exigido algumas horas de trabalho cada, teria sido mais difícil descartá-los para o desenvolvimento de um primeiro experimento. Abrir mão de algo que nos obriga algum investimento (emocional, de tempo, de pesquisa, de recursos, etc.) sempre acarreta em considerável resistência. Mas estudos como estes não podem ser feitos para serem duráveis.

Mesmo descartados inicialmente, eles produziram um conhecimento importante sobre a forma que esta visualização precisará ter, as dificuldades a serem enfrentadas, e as precauções necessárias em seu projeto.

Se este fosse um projeto mais complexo, como a interface de um aplicativo, talvez se fizesse necessária a construção de um protótipo/wireframe com maior nível de fidelidade para entender melhor (ao menos) o dimensionamento dos elementos, e antever com maior precisão a distribuição de textos, títulos, espaçamentos, e outros elementos do layout. Isso ajudaria a testar, principalmente, as interações com sua interface (usabilidade). Mas a visualização de informações possui um interfaceamento mais simples, que pode ser resolvido em um modelo/protótipo com programação, que pode ser inteiramente reaproveitado para o desenvolvimento do artefato final.

Muitos conhecem a expressão mobile first, bastante usual no campo de projetos digitais, que orienta os designers a trabalharem primeiro no contexto mais limitado, para depois pensarem em casos onde há mais espaço e recursos para o layout. Este é um conselho muito bom e conveniente, mas ainda está amparado em uma lógica que pensa sobre as formas concretas, e não sobre o design como abstração, mecânicas e regras. Este projeto não foi desenvolvido pensando do mobile ao desktop, tampouco do desktop para o mobile. Ele foi pensado em torno de componentes que possuem comportamentos e, necessariamente, respondem aos contextos em que estão inseridos. De forma objetiva, em nenhum momento se desenhou um layout que se conformasse a qualquer uma das duas situações.

Do wireframe passamos diretamente a construção de código computacional, entendido como uma ferramenta de design, assim como são os softwares de planejamento e produção gráfica. Neste código construiu-se um modelo, que não poderia sequer ser chamado de protótipo: apenas uma reprodução do wireframe com o qual era possível interagir, mudando dimensões do navegador, fazendo scroll na tela, ou experimentando estas mesmas coisas em um dispositivo onde a interação acontecia por toque, e não através do mouse.

Este modelo começou a evoluir sistematicamente. Esta é a lógica de progressive enhancement, onde a solução começa respondendo minimamente aos propósitos para qual é criada, e, aos poucos, vai sendo aprimorada e ganhando contornos mais sofisticados. A segunda iteração já apresentava dados reais no wireframe, possibilitando diversos ajustes em função da variância nos dados apresentados (alguns títulos grandes demais, alguns artefatos com edições especiais e outros não, etc.). O uso de dados reais no projeto é um recurso precioso, pois elimina a suposição de que a informação sempre se conforma bem ao espaço planejado.

Uma terceira iteração já possuia ajustes visuais como cores, tipografia, margens e espaçamentos entre os componentes e na tipografia, e animação/transformação visual nos links e elementos interativos, mas ainda não era capaz de se ajustar/responder adequadamente a todos os contextos (ela apena se reduzia ou ampliava proporcionalmente em relação ao tamanho da tela).

Nas versões subsequentes foram criados ajustes/respostas aprimoradas para contextos extremos (muito pequenos e muito grandes). Para espaços reduzidos foram suprimidos os links para versões especiais dos artefatos (remakes e edições comemorativas), e as tipologias menos relevantes (artefatos de narrativa interativa linear e animações interativas) foram eliminadas da exibição, permitindo que as demais (narrativas de predominância textual, e narrativas gráficas) ocupassem todo o espaço de tela.

Para os espaços de tela muito grandes, as ampliação das imagens foi limitada (para que não assumissem dimensões gigantes) e as informações complementares dos artefatos (detalhamento) passaram a ser exibidos, subdivididos em trilhas dedicadas às plataformas sob as quais operam.

Por fim, as últimas inclusões ao diagrama foram um cabeçalho capaz de se fixar ao topo da tela para identificação das trilhas, e os elementos paramétricos capazes de modificar o conteúdo exibido em função de especificações determinadas pelo usuário, que, talvez, seja o elemento mais importante à todo o projeto, do contrário teria sido preferível a elaboração de um diagrama estático ou uma infografia.

O diagrama resolvido se encontra incoporado abaixo, e ao seu término, a discussão sobre seus resultados.

Ausência do usuário: o primeiro ponto sensível sobre o próprio processo projetual é a ausência de escuta: em nenhum momento pessoas e/ou possíveis usuários foram consultados, participaram da elaboração ou forneceram qualquer feedback sobre o artefato. Isto não deveria ser usual, nem mesmo em um projeto de design de informação, e é uma falha metodológica considerável, que não possui qualquer relação com o processo pelo qual ele foi tangibilizado.

Esta situação, excepcional e não recomendável, se instituiu por que o projeto em sí tem como objeto um diagrama de uso muito específico e para uma finalidade também muito específica e bem caracterizada (ele é produto de um trabalho de pesquisa e foi aperfeiçoado apenas para ter uma performance melhor do que a sua versão anterior).

Infografia x dataviz: é notório que o resultado final é uma solução sem muito charme, um tanto quanto simplória; e isto não é uma questão de opção estética. Seria uma resposta fácil dizer que isso demonstra a superioridade das soluções de infografia, capazes de contar uma história à partir das informações, sobre as soluções de simples visualização de dados, como é o artefato proposto. Mas esta não é uma resposta justa, pois este é um artefato paramétrico que pode ser reconfigurado para exibir informações diferentes em uma mesma estrutura.

Não devemos comparar um artefato dinâmico capaz de realizar operações em tempo real, com uma representação estática; é o mesmo que comparar bananas e maçãs... tratam-se de coisas diferentes, que operam e oferecem usos diferentes à informação. Se seu papel pode ser considerado o mesmo (informar), assim como são frutas as bananas e maçãs, seu uso e os sentidos que produzem não podem, principalmente porque a propria interação/uso produz significação e sentido (aquilo que Ian Bogost chama de retórica processual).

É igualmente equivocado acreditar que as visualizações de dados, por serem interativas, possuem qualquer superioridade sobre infografias ou a informações em suportes estáticos. Novamente, é uma comparação entre artefatos de informação de naturezas e usos diferentes.

Performance: um dos quesitos mais importantes aos quais o novo artefato corresponde plenamente é a performance:

O tempo de resposta à cada solicitação/modificação nos parâmetros que dão forma à visualização é rápido;

A visualização consegue se distribuir por todo o espaço disponível sem cusar a sensação claustrofóbica proveniente de muita informação compactada em pouco espaço, contando com bastante espaço negativo para respiro;

As informações e os componentes criados conseguem se ajustar ao contexto, às suas dimensões, e ao seu mecanismo de entrada (gesto ou mouse) de forma amplamente responsiva.

Indeterminação: Ainda há um enorme conjunto de títulos de Point & Click Adventure à serem catalogados, tanto antigos (e menos conhecidos), quanto novos (sobretudo de desenvolvedores independentes). Os mecanismos elaborados para incorporar o conjunto já mapeado acomodarão na visualização quantos títulos mais forem inseridos na base de dados. O resultado desta visualização poderá ficar extenso, mas isso pode ser recortado com filtros que exibam títulos em de um período determinado, ou títulos marcados na base de dados como mais relevantes. De qualquer maneira, se o usuário quiser ver toda lista, ainda que extensa, ele poderá e conseguirá fazê-lo de forma confortável.

De fato, no tempo em que este modelo foi elaborado, e o produto final desenvolvido, a base de dados cresceu consideravelmente. Ainda após a conclusão do projeto, ainda existem artefatos novos a serem mapeados.

Em 2022, uma nova visualização para os mesmos registros foi elaborada, explorando a segunda alternativa de estrutura para apresentação dos dados, previamente indicada aqui. O resultado é tecnologicamente superior, contando com formas diferentes de agrupamento de dados, reconhecimento de padrões no conjunto de dados, inteligência capaz de entender o recorte que se deseja ver aplicado aos dados, dentre diversos recursos incorporados, mas, como previsto, a visualização em sí é impraticável em contextos mobile.

Enquanto um experimento de interface, seu produto é muito interessante, desde que seja experimentado em um desktop. Como aventado, a linha do tempo horizontal é uma representação que supre melhor nossas expectativas de comportamento em relação a como este tipo de informação é exibida. Seria a configuração ideal, se a questão do uso mobile não estivesse em jogo ou pudesse ser ignorada.

Este componente de visualização também oferece inúmeras possibilidades de customização, das cores utilizadas, ao tamanho e forma (circular, quadrada, arredondada nos cantos, etc.) de exibição dos artefatos. Gêneros, tipologias, nomes de produtoras ou séries, ou mesmo um recorte temporal, podem ser escritos no campo de pesquisa para que a nova ferramenta separe um grupo específico de artefatos de uma maneira mais orgânica, que antes era feita grosseiramente por opções, botões, e interfaces de um formulário. E as diferentes formas de agrupar os artefatos permite que sejam observados/analisados de formas bem diferentes, mostrando qualidades e relações entre eles, que a antiga visualização não era capaz de fazer.

Esta é uma encruzilhada clássica na questão das interfaces projetadas para as mídias computacionais: a perspectiva tecnológica e a possibilidade de inclusão de novos recursos e ferramentas ao artefato sobreporem a simplicidade de uso, ou mesmo a sua adequação aos contextos de uso. Muitos dos softwares que estamos habituados a utilizar se tornaram mais complexos e mais intrincados - afastando seus próprios usuários - em decorrência desse efeito. Nesse sentido, a nova visualização pode ter seu charme, mas não é uma solução melhor de projeto de informação, mesmo apresentando correlações variadas e até muito interessantes.

A simplicidade geralmente é o melhor caminho para a configuração das interfaces, como afirma John Maeda. Isso pode não ser verdadeiro para todos os casos, mas se aplica à grande maioria deles, e funciona bem como uma regra geral, considerando que para toda regra há excessões. Não só a simplicidade e objetividade da primeira solução o torna mais conveniente, mas também é comum que artefatos computacionais que ampliam seu escopo de funcionalidades e objetivos, incorporando uma diversidade de usos e funções, acabem sendo menos compreensíveis, quando não acabem se tornando menos eficientes no que fazem: é sempre preferível algo simples que cumpra bem seu papel, do que algo amplo e cheio de funcionalidades, mas que não realize nada plenamente.

Uma vez que se trata de um artefato de pouco impacto e importância na vida das pessoas, não há mal que esta segunda proposta coexista com a primeira; de fato, não há qualquer mal e prejuízo neste artefato ser até mal projetado. Mas se estivessemos elaborando um produto de informação que afetasse diretamente a vida de muitas pessoas, como algo de interesse público, a impraticabilidade de uso em contexto mobile seria condição de rejeição imediata para seu desenvolvimento, como já era previsível durante a elaboração dos primeiros wireframes. Novamente, o método projetual de construção de experimentos rápidos e descartáveis para avaliação das alternativas se comprova como um bom caminho como processo de configuração dos artefatos computacionais.

A versão final do editorial acabou aperfeiçoando o modelo já existente de 2022. Além de incorporar o componente de visualização horizontal desenvolvido na versão anterior, ela também conta com diversos outros componentes, como uma estrutura de árvore com as ramificações tipológicas destes artefatos, um emulador que efetivamente roda alguns artefatos dentro do próprio editorial, uma listagem com versões diferentes dos mesmos produtos narrativos, um painel com referências sobre a linguagem pixel art, além de integrar o mecanismo de filtragem da visualização com todos os links disponíveis no documento.

Alguns ajustes foram realizados para tornar este editorial minimamente viável em contextos mobile, mas a realidade é que - sobretudo quanto ao componente de visualização em forma de linha do tempo - não se trata de um artefato que conseguiu encontrar uma boa solução nestes dispositivos.

O editorial em si é bem melhor diagramado, e muito mais legível que seu antecessor. Os recursos tecnológicos adotados tiveram muito mais tempo para serem trabalhados, e logicamente resultaram em um produto melhor acabado.

Mas o ponto de inflexão do artefato continua o mesmo, e continua válido: o projeto da visualização a tomou como um componente, que necessitava de flexibilidade e portabilidade para ser implementada em múltiplos contextos e suportes. Suas diversas e diferentes manifestações gráficas sempre partiram da indeterminação dos dados apresentados, e cada configuração possui suas próprias vantagens e desvantagens. A escolha por uma delas na configuração final do produto se deu em relação a multiplas questões em jogo (questões de legibilidade, questões estéticas, questões narrativas, etc.), que superaram a necessidade de um bom funcionamento nos mobiles para o componente como parte do editorial.