Ampliando a experiência com o Twitter

O Twitter é muito mais que uma simples ferramenta de micro-blogging, é uma rede social. É possível acompanhar a cobertura de diversos eventos, desde aquele fórum que você não pôde ir, até finais de campeonato, festas, notícias – e o que se puder imaginar.

Mais do que a capacidade de disseminação de informação, acredito que o grande vôo do passarinho azul seja a possibilidade de se obter um feedback praticamente instantâneo de ações. Dá para saber quantas pessoas falaram sobre um tema, acessaram um link, reenviaram uma mensagem, praticamente uma pesquisa qualitativa e quantitativa e melhor ainda, espontânea.

Conheça algumas ferramentas que podem ajudar bastante na captação de dados relacionados ao Twitter.

Twitter Search - a pesquisa básica do Twitter

Twitter Search: a busca oficial do Twitter, por ordem cronológica. Ele avisa quando há resultados novos desde a sua última pesquisa, então fica fácil acompanhar um evento quando o pessoal usa uma #tag.

TwitterCounter - Estatísticas de followers do seu twitter

Twitter Counter: apresenta uma estatística sobre o número de seguidores do seu Twitter. É bem útil para mensurar o aumento de followers depois de uma campanha ou evento, por exemplo.

Tweetburner - Links menores e monitorados

Tweetburner: diminua seu link, monitore quantos cliques e de onde vieram os acessos. Traz a estatística comparada da quantidade de links postados e dos cliques nos seus links. Se você não tem um link a ser monitorado, ainda pode aproveitar os top10 da hora na página inicial e saber que assunto está pegando fogo no mundo a fora.

Twilert - alertas de assuntos selecionados no seu e-mail

Twilert: um Google Alerts para o Twitter. Escolha uma palavra-chave e receba por email atualizações com as mensagens que a usaram. Interessante para manter o controle sobre citações da sua marca ou evento.

Twuffer - agendamento de mensagens para o Twitter

Twuffer: agende as suas mensagens! Para quem usa o agendamento de posts em blogs, dá para programar as twittadas com jabás nos horários de maior movimento, ou mandar um lembrete do evento em que você foi e provavelmente nem lembra mais o que é Twitter.

Twistory - o dia-a-dia das suas mensagens

Twistory: a melhor definição que encontrei foi um diário. Ele importa em tempo real suas mensagens do twitter e as separa por data e hora no seu calendário preferido. É muito bom pra lembrar o que estava fazendo naquela sombria quinta-feira do mês passado.

Enfim, dá para fazer muita pesquisa e gerar muita informação valiosa baseando-se no que acontece na “Twittosfera”. Essas são só algumas ferramentas, quais as que você recomenda?

Mais um bom exemplo de não-usabilidade

Estava atualizando meu álbum de referências através do Picasa 2, quando apertei, sem querer, no botão que fecha o programa. Eis que me surge a seguinte mensagem:

Mensagem do Picasa2 quando se fecha o programa com uploads em andamento.

Beleza! Observe que a pergunta é “Deseja sair agora?“. Estudando as minhas opções:

1. Sair agora – sair agora do programa ou da tela de aviso?
2. Vá em frente – vá em frente e saia agora? ou vá em frente e continue meus uploads?

Na dúvida, apertei no x vermelho e consegui manter o programa aberto (que era a minha intenção). Tem outra interpretação dessa tela? Conta aí.

Possível Solução

Pensei primeiramente em “Continuar os uploads”, mas assim conflitaria com a afirmação que está entre parênteses. Seria uma confusão entre: continuaria os uploads depois de fechar (já que iniciei a ação de fechar ao apertar o botão x) ou manteria o programa aberto e os uploads em andamento?

Uma possível solução rápida seria trocar o “Vá em frente” por “Não sair”.

Possível solução para a mensagem do Picasa2

Tendo sempre em mente que, mesmo o meu caso tendo sido um clique acidental (não tinha a intenção de fechar o Picasa2), a mensagem é a resposta de uma ação direta “fechar o programa”. Ou seja, o usuário busca uma reação a ação dele mesmo, o que fez com que “Vá em frente” reafirme a primeira atitude que foi a de fechar o programa.

A importância de padrões de usabilidade e experiência do usuário

A organização do mundo é baseada em padrões. Pense nas placas de trânsito, imagine se em cada cidade elas fossem diferentes e você tivesse que aprender o sistema toda vez que fosse viajar – mentalizou o caos? Na internet não é muito diferente, sites com nomenclaturas variadas para menus, tecnologias diversas em que ações idênticas nem sempre geram o mesmo resultado, entre muitas outras coisas com as quais todos já sofremos. Aí entra a experiência do usuário e os padrões de usabilidade.

Se você vê um botão, espera que ele vá gerar uma ação. Isso se chama modelo mental, é como uma imagem que aparece na cabeça antecipando o funcionamento das coisas de acordo com experiências anteriores. Partindo desse princípio, os ambientes virtuais (o seu sistema operacional, por exemplo) agregam algum valor cultural pré-existente para facilitar a interação com os usuários, como a idéia de janelas que abrem e fecham ou o próprio botão, que recebe um efeito 3D para imitar seu correspondente real. Essa idéia se estende a todos os elementos visuais e funcionais, cores, formas, seqüência, localização…

Botão real, com cores e volume.

Botão virtual, imita o volume do botão real. O ponteiro do mouse segue a mesma tendência.

Parece óbvio, mas para quem cria as interfaces, no caso dos designers um layout, nem sempre é claro que todos os elementos estão dizendo alguma coisa e se não forem bem estudados, podem passar a mensagem errada ou simplesmente deixar passar algo importante. O Magazine Luiza, por exemplo, ignorou totalmente o conceito-padrão das abas de evidenciar um conteúdo enquanto esconde os outros e transformou apenas num enfeite estético.

Magazine Luiza sacaneando o modelo mental das abas

Por isso, antes de criar um menu mirabolante ou um layout fora do comum achando que inovar é inverter conceitos, pense na experiência como um cliente procurando por alguma informação ou tentando preencher um formulário enorme com campos minúsculos e baixo contraste. Antes de ser bonito, o produto precisa ser funcional, agradar a quem realmente ele veio servir – o usuário. Egos no chão.

Para entender um pouco mais sobre padrões, veja alguns exemplos:

Yahoo! Design Pattern Library
UI-pattern: User Interface Design Pattern Library
UI Pattern Factory

Ubiquity: o poder do usuário sobre mashups

Com a “web 2.0″, ganhamos diversas ferramentas dinâmicas API’s e a possibilidade de juntá-las em mashups, criando uma confluência de conteúdo. Basicamente API (Interface de Programação de Aplicativos) são os padrões que um sistema tem e podem ser usados para criar aplicações novas em cima das funcionalidades dele, como os plugins do seu navegador.  Só que criar esses mashups está longe do alcance da maioria das pessoas, necessitando de conhecimentos em programação, por exemplo.

A idéia do Ubiquity, do Mozilla Labs, é dar poder ao usuário comum sobre essas ferramentas, juntá-las de acordo com a necessidade individual e lidar com elas através de comandos via teclado. Assim, tarefas que antes precisavam de muitas pesquisas em diversas fontes se resolvem com apenas uma linha de comando. Você poderia, por exemplo, combinar com os amigos um encontro em um bar e já anexar mapa, notícias e fotos no corpo do email, sem precisar copiar e colar ou de uma enxurrada de links enormes. Por enquanto, ele ainda está como protótipo na versão alfa 0.1, mas pode ser baixado para testes.

O conceito do programa vai mais além e abre uma discussão saudável sobre a eficiência entre uso de interfaces gráficas (janelas, ícones, menus e setas) e linhas de comando.

Clique na imagem para assistir ao video e ter uma idéia mais clara de como funcionará esse plugin para o Firefox.

Ubiquity for Firefox from Aza Raskin on Vimeo.

A Arquitetura da Informação no desenvolvimento de Projetos para Web

Este artigo foi criado para a disciplina de Gerenciamento da Produção do curso de Tecnologia em Artes Gráfica da UTFPR.

Palavras-chave
Arquitetura da Informação; Usuário; Projeto Web

01. INTRODUÇÃO
Este estudo pretende esclarecer a necessidade de aplicar as premissas da Arquitetura da Informação no desenvolvimento de projetos para web, explicitando métodos e ferramentas que fazem parte do processo.
A Internet tem crescido em tamanho e importância no cotidiano da sociedade. Com isso, o volume de informação disponibilizada na rede mundial de computadores se torna quase infinito, mas seu acesso não se apresenta necessariamente de forma organizada. Os usuários têm à disposição diversas opções e a organização inteligente desse conteúdo se torna vital para conquistar a atenção do público desejado. A Arquitetura da Informação tem o papel de tornar a navegação de sistemas de informação, neste caso websites, o mais fácil e claro possível para que o usuário consiga encontrar a informação que busca.

02. METODOLOGIA
A metodologia empregada foi a de revisão de literatura para aumentar a extensão e a profundidade dos conteúdos investigados. (SANTOS, 2001)

03. DESENVOLVIMENTO

3.1 Definição de Arquitetura da Informação
Arquitetura da Informação (A.I.) é a combinação entre esquemas de organização, nomeação e navegação dentro de um sistema de informação. (LOU e PETER, 1998) Cabe ao arquiteto da informação desenhar uma solução otimizada para a distribuição da informação, respeitando as necessidades, limitações e peculiaridades dos usuários do sistema, neste caso sites na internet – ou websites.

O público deve ser capaz de encontrar a informação que necessita no menor tempo possível e da forma mais intuitiva, evitando a frustração com o meio e a transferência dessa frustração para a marca a qual o site representa. Para isso, é imprescindível conhecer bem as características dos futuros usuários, ter consciência da finalidade do website (o contexto) e dominar a informação a ponto de conseguir distribuí-la eficazmente.

Os limites da aplicação da A.I. ainda não estão bem definidos, é um processo recente, mas os estudos sobre o assunto crescem em quantidade e qualidade. Alguns defendem que seu objeto de estudo deve se limitar à organização do conteúdo textual e o fluxo da sua navegação, mas neste artigo será considerado que o contexto, por definir a qualidade do conteúdo e ser determinante na experiência do usuário, também faz parte do processo, e por isso deve ser estudado e definido dentro da A.I.. Logo, pode-se considerar que a Arquitetura da Informação engloba tecnologia – forma, design – apresentação e texto – conteúdo.

3.2 A Arquitetura da Informação no Projeto Web
A primeira etapa de um projeto é o briefing, documento no qual são definidos objetivos e prioridades. Com esses dados em mãos, o arquiteto da informação irá elaborar estudos, planejar funcionalidades e entregar documentos (deliverables) que orientarão os processos de programação, criação de layout e testes de usabilidade.

A Arquitetura da Informação se encontra na fase de planejamento, sendo de extrema importância para alcançar o retorno definido na fase do briefing.  Por meio dela, é possível segmentar o processo, facilitando a detecção de problemas de aplicação e suas correções. É um processo que funciona de maneira ótima no início de um projeto (Figura 1), mas que também pode ser aplicado em projetos já concretizados, como forma de corrigir problemas encontrados em testes de usabilidade.

Muitas vezes é uma etapa ignorada no projeto web, tendo a criação do layout logo após a coleta de informações, o que freqüentemente gera um produto sem foco claro e com graves problemas de interação com o usuário pela falta de planejamento.

FIGURA 01. ELEMENTOS DE UM PROJETO WEB

FONTE: http://www.jjg.net/elements/translations/elements_pt.pdf

3.3 Aplicação, Ferramentas e Documentação

Para facilitar o entendimento, pode-se observar a aplicação da A.I. por etapas. Abaixo serão apresentadas algumas aplicações e respectivas ferramentas consideradas importantes.
O conteúdo textual precisa ser organizado e rotulado para que o usuário possa encontrá-lo facilmente, para isso, é dividido em pedaços que receberão rótulos e estes rótulos poderão ser agrupados, os grupos rotulados e assim sucessivamente. O card sorting (Figura 2) é uma ferramenta aplicada para entender como o usuário organiza as informações na mente, sendo eficaz para definir os rótulos mais próximos da realidade do público-alvo. Basicamente trata-se da distribuição de cartões com rótulos ou conteúdo, para que o usuário faça a correspondência que considera lógica, em alguns casos os rótulos são preenchidos pelo próprio usuário.

FIGURA 02. APLICAÇÃO DE CARD SORTING

FONTE: http://www.flickr.com/photos/skillclouds/2595306341/

Definidos os rótulos, é necessário definir o fluxo da navegação, ou seja, os caminhos que o usuário percorrerá até cada informação. Esse processo de navegação pode ser representado por meio de fluxogramas (Figura 3) que são bases para outra ferramenta, o mapa do site – lista hierárquica com links diretos para os conteúdos das páginas. O fluxograma não depende necessariamente da rotulação.

FIGURA 03. FLUXOGRAMA DE NAVEGAÇÃO

http://www.flickr.com/photos/henriquecostapereira/1392820227/

Com a organização mental do texto definida, é necessário determinar a localização desse conteúdo na página física, a interface. Essa distribuição deve considerar tanto elementos textuais quanto imagens e animações, e deve ser feita aplicando conceitos de diagramação para evidenciar a hierarquia de importância das informações. Desenvolve-se o rascunho da página apontando a localização dos itens, o wireframe (Figura 4), como numa planta de arquitetura.
FIGURA 04. WIREFRAME

FONTE: http://webinsider.uol.com.br/index.php/2003/12/09/wireframe-documento-cada-vez-mais-importante/

Para garantir que os estudos feitos terão resultados próximos do esperado, são feitos testes de usabilidade nos quais os usuários são submetidos a simulações do website. Protótipos feitos de papel ou virtuais são usados para que as pessoas tentem encontrar uma informação específica e relatarem suas dificuldades ou afirmarem seu sucesso.

04. CONCLUSÃO

A Arquitetura da Informação é uma ferramenta poderosa na organização do conteúdo, tornando-se uma etapa imprescindível na criação de websites realmente direcionados para o usuário. É um processo cíclico que, fazendo uso de outros processos como as análises de usabilidade, pode facilitar ainda mais a navegação pela Internet, tornando as informações cada vez mais acessíveis para as pessoas por meio de uma navegação instintiva.

Os produtos resultantes dos processos da Arquitetura da Informação são três documentos. O wireframe, para facilitar a integração com a criação artística do layout informando a posição dos elementos gráficos principais; O fluxograma de navegação, definindo o curso das informações; e o mapa do site, relatando a divisão hierárquica dessas informações.É possível aplicar os conceitos da A.I. em qualquer tipo de projeto web, decidindo quais etapas serão necessárias de acordo com tamanho, prazo e recursos a serem utilizados.

REFERÊNCIAS

Arquitetura da informação para os que chegam agora

A arquitetura da informação segundo Lou e Peter

Arquitetura de Informação, Usabilidade e Web Design

Jakob Nielsen

Laboratório de Utilizabilidade da Informática

O que é arquitetura de informação em websites

Organizando websites com os parâmetros da Arquitetura da Informação

Por que você precisa de um arquiteto da informação?

The Elements of User Experience by Jesse James Garrett

Wireframe, documento cada vez mais importante