29 de junho de 2008

Interactividade

Alberto Cairo escreveu um artigo (a incluir no volume Malofiej 15 - Março de 2008) sobre a interactividade dos infográficos da web, ou melhor, sobre a falta dela. São poucas as infografias realmente interactivas. Muitas infografias são simples digitalizações de infografias estáticas que sairam nos jornais (como p. e. a infografia do Público sobre o Red Bull Air Race no Porto) ou então infografias com uma interactividade amadora e que cansa qualquer utilizador mesmo paciente (como p. e. a infografia do El Mundo sobre a Estação Espacial Internacional).

Se o primeiro exemplo não tem qualquer tipo de interactividade, o segundo prova que uma infografia deve ser linear mas a sua leitura não deve ser exclusivamente essa porque esse tipo de navegação apresenta algumas desvantagens. A leitura linear é a forma mais básica de interacção: uma série de botões que permitem o controlo de uma narração linear. Este exemplo do El Mundo tem uma leitura exclusivamente linear e obriga o utilizador a nada mais nada menos do que 36 cliques até chegar ao final da sequência.

O problema que Alberto Cairo analisa no seu artigo é que "depois de oito anos de existência das secções multimédia em jornais como o El Mundo e o El País, as infografias online continuam lineares, estáticas, com excesso de formas de narrar do meio impresso e da televisão."

A visualização interactiva da informação tem mais sucesso quando resultam de iniciativas individuais de meios exclusivamente online que se adiantam aos jornais tradicionais. Em 2005 foi lançado o chicagocrime.org, onde o utilizador pode jogar com os dados a seu gosto: escolher uma rua, um distrito ou um código postal e ver quantos crimes se comenteram lá mediante um dado espaço temporal.

O site do metro de Madrid inclui uma aplicação que permite ao usuário escolher a estação de partida e de chegada bem como o dia e a hora da viagem. A página mostra, então, o trajecto mais rápido entre as estações e uma estimativa do tempo de viagem.

"Utilidade. Personalização. Certa atemporalidade. Se é tão importante identificar as principais características destas aplicações, porque não veêm mais a miúdo na imprensa digital?" interroga-se Alberto Cairo no seu artigo. Para esta situação há duas grandes explicações: uma prática e outra psicológica, relacionando-se.

Os departamentos de infografia multimédia, quando existem efectivamente, não estão preparados para enfrentar os desafios do mundo online que tem especificações muito próprias. Esta falta de preparação deve-se à carência de conhecimentos técnicos e formação teórica. Muitas equipas de infografia são compostas simplesmente por ilustradores e designers gráficos. Prevalece, nestes departamentos, o mito de que a interacção na infografia é cara e de difícil implementação.

Não há razões para limitar a interacção a um simples clique no botão "next" quando podemos facilmente permitir que o utilizador facilmente modifique e configure a infografia. Um óptimo exemplo disso é o infográfico do El Mundo, "Qué se puede hacer en 25 metros cuadrados". É muito isto que falta à infografia portuguesa; sabermos nos desligarmos do que é feito do papel. A infografia estática é um óptimo ponto de partida para o infográfico multimédia. Mas isso não pode significar uma simples digitalização do que se faz para o jornal impresso.

A infografia espanhola permite que cada utilizador faça a sua própria mobília, explore múltiplas possibilidades e por si mesmo perceba o que realmente significa viver numa casa com aquelas dimensões.

"Adicionar interactividade, ainda que em pequenas quantidades, implica assumir um novo paradigma", conclui Alberto Cairo. Os infografistas portugueses esquecem-se de ver uma interactividade como uma ferramenta, um software em vez de uma apresentação estática. Se isso acontecesse, o leitor deixava esse simples cargo que lhe é atribuido e assumia a posição de usuário (como é normal visto estarmos a falar de aplicações multimédia disponíveis na web) e a infografia seria então uma aplicação.

Fonte: Alberto Cairo

Infografia em Vídeo

A infografia assumiu uma grande importância não se ficando apenas no que toca à explicação de notícias ou acontecimentos. Temos vários exemplos no Youtube. O blogue 'Simple Complexity', de Nathan Danforth e Neal Levene, compilou uma lista dos melhores videos que recorrem à infografia.

01. Royksopp - Remind Me
02. Areva
03. Areva ERP
04. Airport
05. Information Technology
06. Been Caught Stealing: Earmarks Revealed
07. Pork Corp
08. The Big Brother State
09. Football
10. Fight Club – Ikea
11. Beat the Odds on RSVP – Male and Female Perspectives
12. The Longcut – A Tried And Tested Method (indisponível)
13. Le Grand Content
14. Sugar Batteries
15. Duelity - Creationism and Evolution (indisponível)

27 de junho de 2008

Análise de Infografias

Agora que o site do Jornal de Notícias foi reformulado, também aqui podemos contar com infgráficos. Por isso resolvi incluir nos meus comentários uma das infografias deste site. Além disso, considerei também uma infografia da Sic Online e do Jornal Sol.

A primeira dificuldade com que o utilizador se depara é em encontrar o link para as infografias. A maioria dos sites não tem qualquer link directo e por vezes é necessário recorrer ao motor de busca do próprio site.


Jornal de Notícias: Raças Perigosas
A infografia perde logo aspecto visual na entrada. Sei que não é das questões mais importantes na infografia mas se percebemos que uma imagem está mal tratada, associando esse factor a outros que podem eventualmente aparecer, o utilizador pode perder a vontade de explorar a infografia.
A informação da zona inferior da infografia peca por ter demasiado texto. O texto é importante numa infografia. Aliás, as principais linguagens que surgem combinadas numa infografia são a linguagem visual e o texto; deixando em segundo plano o vídeo ou o áudio, que só aparecem em algumas infografias. Sendo o texto longo demais, até pode ser importante só que o utilizador não vai perder tempo a ler um texto enorme e é informação que se perde. O texto deve ser um complemento à linguagem visual e não o contrário.
Os cães são clicáveis e daí obtemos a informação sobre as raças dos cães perigosos. Contudo, como estão inseridos num mini-jogo para o utilizador testar os conhecimentos, pode passar ao lado do utilizador. O utilizador pode pensar que as imagens estão ali simplesmente para o jogo.

Sic Online: Nova Travessia do Tejo
Esta infografia começa por no início ter um longo texto que poucos utilizadores vão ler. É uma introdução demasiado longa para uma infografia. Com isso, o botão "iniciar" pode até passar despercebido.
Quando entramos no mapa, o que nos salta imediatamente à vista é a legenda. Embora seja importante para o bom entendimento do mapa, não é o mais importante do mapa. Aqui não se segue uma hierarquia normal da informação. Principalmente porque os ícones até estão bem conseguidos e não era necessário dar tanta relevância à legenda.
Contudo, só um tipo de ícones é clicável. Por isso mesmo, devia ter um grau de importância maior que os restantes; algo que chamasse mais a atenção e levasse o utilizador a clicar. Da forma como está concebido, se o utilizador tentar clicar nos outros ícones e perceber que não são clicáveis, pode acabar por desistir e nem se quer tentar clicar no ícone da lupa.
A informação que surge ao clicarmos na lupa é, por vezes, extensa mas como se encontra dividida em várias categorias, facilita a sua leitura.
No final da informação, temos em alguns casos a opção de ver um vídeo. Podemos fechar essa janela quando quisermos e voltar à informação escrita ou ao mapa. Contudo, um problema técnico impossibilita que uma das janelas de vídeo se feche. Não é realmente um erro de usabilidade, contudo impede o utilizador de ver a restante infografia e o utilizador acaba por abandonar a infografia.

Jornal Sol: Ponte de Portimão em Colapso
O primeiro problema desta infografia é o seu tamanho. Muito dificilmente algum utilizador conseguirá ver a infografia sem utilizar a scroll do browser. Corre-se o risco de se perder alguma informação se o utilizador não perceber que a infografia é maior do que o visualizado.
As animações com a mão que indica onde clicar é útil para se perceber a interacção. Contudo, a sua intensa repetição torna-se cansativa e a velocidade também não ajuda. Era preferível que apenas surgisse uma animação, uma única vez mas que explicasse de forma um pouco mais lenta o modo de interacção.
Esta explicação é necessária porque os pontos vermelhos levam o utilizador a clicar, contudo ao texto intermitente torna-se confuso por estar sempre a aparecer e a desaparecer e nem assim leva o utilizador a clicar.
Também as datas da cronologia deviam ter um aspecto mais de botão pois sem a ajuda da animação explicativa, as datas não levam nenhum utilizador a clicar.

Testes de Utilizadores

Depois de este trabalho ter andado completamente perdido durante um mês e de estar completamente desorganizado por causa disso, volto ao rumo normal que ele teria levado. Abordados temas como o design de informação, a usabilidade, a acessibilidade e a emotividade do design, falo-vos agora dos testes com utilizadores que realizei há dois meses atrás mas que vão obrigatoriamente continuar actuais por dois motivos:
1. as infografias não foram alteradas entretanto;
2. estando na recta final do trabalho e tendo eu vagueado imenso tempo fazendo posts menos interessantes, convém aproveitar o trabalho que já está realizado e que surge no âmbito dos últimos posts sobre a usabilidade do design de interacção e informação.

As infografias escolhidas foram testadas por três pessoas, tendo uma 24 anos, outra 20 e a última 47. Embora o tipo de relação que mantêm com os computadores seja diferente, a relação mantida com as infografias é semelhante. Como a maioria da população portuguesa que consulta sites noticiosos para estarem informados, ainda não criaram uma relação de proximidade com a infografia multimédia. Concluo que esse será o maior problema de usabilidade das infografias portuguesas: os portugueses não estão familiarizados, não as consultam, não dão o feedback necessário para melhorar alguns aspectos e os infografistas portugueses não se vão preocupando com a qualidade do seu trabalho mas antes com a quantidade.

Contudo há erros graves quanto à usabilidade de algumas infografias. Mas antes de eu própria dar o meu parecer sobre o assunto (delego isso para um próximo post), listo aqui os erros cometidos pelos utilizadores-teste das seguintes infografias: Casino de Lisboa, do Público.pt; Por Dentro da Fórmula 1, do Expresso e Mau Tempo em Lisboa, pela Rádio Renascença.

Adianto já que a infografia da Rádio Renascença parece não estar disponível. Era um exemplo interessante do que "não se deve fazer" pois foi a infografia que mais confusão gerou na sua exploração por parte dos utilizadores escolhidos. Mas parece que agora a Rádio Renascença aposta nas infografias multimédia da agência noticiosa AFP. Embora não sejam perfeitas e sejam simplistas de mais quanto à informação seleccionada, sempre são elaboradas com outro tipo de cuidados.

Listando agora os problemas encontrados:
- Apesar de as infografias terem informações sobre a sua própria forma de navegação, isso revela-se insuficiente e as pessoas vão procurando informação em locais que não são se quer clicáveis (p.e. ver timeline da infografia do Público.pt);

- Alguns elementos clicáveis revelam-se confusos devido à sua disposição no espaço porque são associados a determinada informação erradamente (p.e. ver setas que fazem a timeline deslizar na infografia do Público.pt - se clicarmos numa data, a informação (fotos) aparece exactamente entre as setas e o utilizador pensa que essas mesmas setas servem para navegar na informação);

- O início da infografia causa alguma confusão porque não começamos no número 1, como esperado e o utilizador perde-se na informação (p.e. a infografia do Expresso inicia no próximo circuito disputado e não no circuito um, deixa de haver uma certa linearidade para que haja apreensão da informação visualizada.);

- Neste tipo de produto multimédia deve se explorar um design que propicie menos a exploração. O utilizador quer encontrar rapidamente a informação que precisa e pode perder entusiasmo. (p.e. ver a infografia do Expresso, no que toca às várias partes do carro);

- Utilização de siglas nos links que não são percebidos por todos os utilizadores.

- Mapas interactivos mal sinalizados em que o utlizador não sabe bem em que área clicar para obter a informação pretendida.

- Infografia com som e não avisa o utlizador que este existe. Se o utlizador está com o som do computador desligado, é informação que se perde.

Os últimos três problemas foram detectados na infografia da Rádio Renascença mas como esta agora não está disponível, infelizmente não posso mostrar-vos o exemplo.

Num próximo post vou também escolher infografias elaboradas por jornais online portugueses e tecero meu próprio comentário. Quanto a estas não há muito mais a dizer porque os principais problemas foram detectados pelos utilizadores-teste.

Design de Informação | Design de Interacção

Ao longo do tempo as interfaces têm sido foco de interesse por um conjunto de actividades cada vez mais alargado, desde a Engenharia ao Design Gráfico, o que originou o desenvolvimento de novas disciplinas projectuais como o Design de Interacção e o Design de Informação e Visualização. E para cada uma delas contribuem um leque cada vez mais alargado de disciplinas como a Informática, o Design de Comunicação, o Cinema, a Animação, ou as Artes Digitais, por sua vez uma deriva das Artes Plásticas. Este caso interessam-nos o design de interacção e o design de informação.

O design de interacção e o design de informação devem ser encarados como actividades que determinam as propriedades formais das interfaces gráficas produzidas industrialmente pelo homem. Entendendo-se por propriedades formais as relações funcionais e estruturais que formam num todo coerente.
Sinteticamente, esta área do design deve ver-se como:
- Actividade criativa que tem por objectivo a constituição de um ambiente material coerente e harmonioso;
- Um processo de estruturação da forma em consonância com outras disciplinas;
- Um método que procura responder a uma função;
- Uma metodologia para equacionar e resolver problemas;
- Um método de acção;
- Visa a harmonização do ambiente humano;
- A combinação de três elementos: a linguagem formal, os materiais e a tecnologia envolvida.

Alberto Cairo define interacção da seguinte forma: "En esencia, para nuestros propósitos, "interacción" significa intercambio de información entre un lector y un sistema artificial: el lector evalúa las posibilidades de la aplicación realiza una operación y el sistema le devuelve una respuesta, que puede desencadenar luego posteriores peticiones del usuario. El "sistema" es la infografía interactiva, por supuesto."

fontes: InfoDesign - Understanding by Design
IxDA - The Interaction Design Association
Alberto Cairo

Usabilidade II

Um post de Mark Hurst neste blog sobre os 8 erros mais comuns de usabilidade, termina com o seguinte parágrafo:

Tactical disciplines like usability and information architecture are useful, valuable, and have their place in the development process. But what’s much more important is to understand the people, the human beings, who make the company possible. The customers, the visitors, the patients, the readers, the guests, whatever you call them - their experience is what determines the company’s success or failure. So focus first on the overall experience. It’s strategic, not tactical. It’s about the people, not the tool. Focusing on the larger picture first will set a better context in which to work - later - on usability tactics.

O melhor ponto de partida para a elaboração de um interface onde a usabilidade está presente e é eficaz e não esquecer que os utilizadores são seres humanos e não meros utilizadores de uma ferramenta.

25 de junho de 2008

Usabilidade I

Crente que a acessibilidade já foi explorada em posts anteriores, vou agora debruçar-me sobre a usabilidade e como disse o professor no comentário do post anterior, relacionar o design de interacção com o design de informação. Primeiro que tudo, o que é o design de interacção e usabilidade?

No nosso quotidiano, interagimos constantemente com uma série de artefactos que podem ser caracterizados como interfaces. Algo que usamos para fazer determinada coisa. Talheres para comer, copos para beber, despertador para acordar, fogão para cozinhar, lápis para escrever, torneiras para ter água, computador para trabalhar, estradas para percorrer, entre outras. Os exemplos podem parecer estranhos. No entanto, se pensarmos que uma interface é um mediador entre duas partes e que existe com um propósito específico, então todo e qualquer objecto que seja passível de uma utilização com um determinado objectivo, pode ser visto como uma interface.

A Interacção Pessoa-Computador (Human Computer Interaction - HCI) diz respeito à troca de informação entre as pessoas e os computadores. O seu objectivo é que esta troca seja o mais eficiente possível: minimiza os erros, aumenta a satisfação, diminui a frustração e ao fim e ao cabo, faz mais produtivas as tarefas que envolvem as pessoas e os computadores

Hansen no seu livro "User Engineering Principles for Interactive Systems" faz a primeira enumeração de princípios para o design de sistemas interactivos:
1. Conhecer o utilizador
2. Minimizar a memorização, substituindo a entrada de dados pela selecção de ítens, utilizando nomes em vez de números, assegurando-se um comportamento predecível e usufruindo acesso rápido à informação práctica do sistema.
3. Optimizar as operações através da rápida execução de operações comuns, da consistência do interface e organizando e reorganizando a estrutura da informação baseando-se na observação do uso do sistema.
4. Facilitar boas mensagens de erro, criar designs que evitem os erros mais comuns, sendo possível desfazer aquelas acções realizadas e garantir a integridade do sistema no caso de uma falha do software ou hardware.

Donald Norman definiu um conjunto de etapas pelas quais o utilizador tem de passar para levar a cabo uma determinada tarefa numa aplicação:

1. Formar o objectivo;
2. Formular hipóteses de acção;
3. Especificar uma acção;
4. Executar a acção;
5. Perceber o resultado no seu conceito;
6. Interpretar o resultado;
7. Validar o resultado.

O ser humano tem características muito próprias ao processar informação. Devemos ter em conta os modelos de arquitectura cognitiva, fenómenos e teorias da memória, da percepção, das habilidades motoras, da atenção, da resolução de problemas, aprendizagem e motivação. Por isso mesmo, o próximo post vai ser dedicado à relação existente entre o design de informação e de interacção visto a infografia contemplar os dois tipos de design, bem como a usabilidade neste tipo de sistemas multimédia.

A título de curiosidade, podem consultar o site Bad Design onde estão disponíveis vários exemplos de mau design e a sua consequente falta de usabilidade.

Nota: interessante o artigo de Joana Isadora Castro e João Manuel R. S. Tavares.

Fontes: Usability Views
HCI Bibliography