Talk:2,

Quem desenha usabilidade na internet é geralmente o “Arquiteto de Informação”, título que carrego com orgulho, dado seu requinte e sonoridade. Porém, esse título nasceu em outra época, no colo de uma outra internet.

A internet já passou da adolescência quando constatamos os seguintes fatos:

• Crescimento do uso da banda larga;
• Consolidação de um Ethos da usabilidade, proporcionado pela evolução das técnicas (facilmente difundidas pela blogosfera) e pelas ferramentas de produção de sites que além de acessíveis, apresentam um ampliado leque de recursos;
• Usabilidade está na moda. Usuários estão colhendo os frutos do esforço de design centrado nas suas necessidades.
• Mudança de comportamento dos usuários, cada vez mais participativos e espertos, comprando online, criando conteúdo em ambientes colaborativos gratuitos e poderosos, onde muitas vezes desempenham tarefas complexas;
• Novas tecnologias (ou melhor uso das tecnologias) que permitem interações e feedbacks assíncronos dentro das telas.

Essa nova disposição nos leva a definir uma nova configuração da usabilidade. Como disse o Shrek: “Nós ogros somos como cebolas, temos camadas”. A usabilidade também. Vejamos as quatro camadas:

1. Arquitetura de informação

A arquitetura já é um conjunto de várias disciplinas. Ela não se resume a uma boa disposição de elementos na tela do wireframe. Ela requer necessariamente:

• Boa redação de títulos de seções, botões e links que permitam o usuário saber claramente, a cada clique, o que o espera depois do refresh;
• Prioridade adequada aos elementos da tela;
• Um desenho de fluxo de navegação focado na tarefa, com o mínimo de obstáculos;
• Otimizar o conteúdo para facilitar sua absorção e permitir leitura dinâmica (uso de destaques de informação, negritos, olhos, gráficos, box, texto direto e objetivo que “conversa” com o target);
• Apenas o conteúdo necessário;
• Consistência de componentes de tela e níveis hierárquicos entre elas;
• Uma navegação cruzada pertinente (não apenas para preencher a coluna da direita);
• Um equilíbrio justo entre simplicidade e desempenho;
• Tratamento de erros ou, ainda melhor, uma interface que não deixe o usuário errar.

Existem vários métodos “sagrados” e prescritivos na arquitetura. Quem nunca fez malabarismos absurdos para fazer um cliente ou colaborador entender que as verdades absolutas do Nielsen e outros “gurus” precisam ser enxergadas através do prisma das exigências do projeto? Existe vida além do link azul sublinhado. Cada projeto tem suas especificidades. Muitas vezes, um site com rolagem tem uma legibilidade superior a de um site trancafiado numa kitnet de 800×600.

Quando atribuímos à arquitetura (e ao wireframe) a responsabilidade pela usabilidade do projeto, deixamos de fora tudo que esse documento não consegue retratar. Inserimos textos, tooltips, boxs de ajuda, breadcrumbs, alertas contextuais, alternativas de navegação, perguntas freqüentes, labels, botões de “saiba mais” e tudo que conseguimos é fazer mais um site pré-bolha.

E se tentássemos aliviar um pouco a cobrança em cima dessa camada e transportar algumas informações para outras, tratando-as de forma diferente? Teríamos telas muito mais limpas, leves e objetivas, certo? Vejamos as outras camadas que temos à disposição para transmitir informação.

2. Interações assíncronas

O quê? Vou explicar: interações assíncronas permitem que o usuário e a interface troquem informações de forma mais intuitiva, rápida e contextualizada.

Imagine que você quer filtrar os produtos de uma seção de um catálogo de sapatos para ver apenas aqueles da sua cor preferida. Antes, você precisaria informar seus parâmtros, clicar no link “filtrar” e esperar a página recarregar para ver o resultado. Com o novo recurso, não existe mais a necessidade de recarregar a tela. Os componentes são independentes e interagem entre eles quando o usuário precisa. Dessa forma, ao invés de recarregar a tela toda, o site recarrega apenas a porção da página que vai apresentar os dados solicitados.

Ou seja, você escolhe a cor na ferramenta de filtro e a lista de produtos que está ao lado é filtrada e exclui instantaneamente os produtos que não se enquadram. O site Like é um bom exemplo.

*Uma busca intuitiva. A ferramenta de busca do site Like permite escolher pedaços da imagem do produto para dizer “gostei especificamente do laçinho nesta sandália”. Genial.

O conceito de RIA (Rich Internet Applications ou Aplicações Ricas de Internet) está todo baseado nessa filosofia. Essas aplicações dão mais liberdade para o usuário arrastar e soltar elementos de tela, controlar filtros, comparar, parametrizar, e tudo isso sem sair da tela. Essa flexibilidade de uso e a sensação de empoderamento que elas transmitem para o usuário são o grande diferencial.

Podemos também usar essa “camada” para sugerir produtos compatíveis, no meio do fluxo do compra do usuário (“Você está comprando a churrasqueira, aproveite e compre os espetos”) , oferecer combinações mais vantajosas de produtos (“Você comprou esta camiseta, leve também este boné e tenha 20% de desconto”) e tratar avisos, feedbacks e erros de de forma mais simpática e contextualizada. As possibilidades de aplicação multiplicam-se quando ampliamos o foco de análise, pois o uso não se limita a sites de e-commerce.

Aqui, já conseguimos aliviar a tela de um monte de avisos, alertas, instruções e procedimentos de uso. Esses textos serão úteis para o usuário quando estiver no começo da curva de aprendizado. A partir da quinta visita, toda essa orientação (que visa atender público com níveis heterogêneos de familiaridade) será totalmente supérflua.

3. Design do implícito

As duas camadas anteriores tratam de informações explícitas, comunicadas por meio de texto em algum momento do fluxo. Mas não podemos desconsiderar a comunicação que utiliza a percepção cognitiva do usuário. Nem tudo que precisa ser informado tem que ser dito:

• Podemos usar cores e formas para tipificar uma seção;
• Usar animações para mostrar que um elemento ou conteúdo está sendo “guardado” em um lugar específico da tela (como faz o MAC OS X quando se minimiza um programa);
• Usar ícones para simbolizar uma ação e ajudar o usuário na sua tomada de decisão (principalmente para o usuário que não sabe ler);
• Usar tonalidades e saturação para induzir uma determinada seqüência de leitura de uma página, ou para chamar a atenção para uma determinada área;
• Usar símbolos que fazem parte do contexto de vida do usuário;
• Usar movimentos antropomórficos para confirmar a realização de uma tarefa ou para deixar claro ao usuário que determinada ação não é possível (dessa forma evitamos que ele erre).

*Nananinanão!
A página de login do Mac OS não usa alertas de texto. O box de login gesticula da direita para a esquerda imitando a gente quando fazemos “não” com a cabeça.

Essa camada talvez seja a mais difícil de tratar, porque requer pesquisa etnográfica e conhecimentos de cognição para poder constituir esse canal de comunicação não-verbal. Desenhar ícones com significado preciso e função objetiva não é tarefa fácil. Porém, esse modelo é a forma mais rápida de comunicação que existe.

Para ler mais sobre isso, leia este excelente artigo.

4. Som que te quero som

Quando falo em som para websites, não me refiro a loops de acid-jazz que ficam tocando no cantinho da tela. Sons podem ser usados para transmitir informações de feedback e de conteúdo:

Feedback: a exemplo do Google Talk, que toca um som cada vez que recebemos uma mensagem e não estamos com a janela do programa ativada, websites poderiam também condicionar seus usuários a associar um som a um evento. Um som específico pode ser usado juntamente com as interações assíncronas do sistema para avisar que uma informação nova foi exibida. Uma intranet corporativa poderia avisar seus usuários com uma som quando uma informação estratégica muito importante acaba de ser publicada.

Conteúdo: se podemos “falar” as informações, por que usar textos? Textos podem ser impressos, ok. Mas poderíamos ter dois tipos de apresentação, uma que é feita no site e outra que o usuário leva pra casa por meio de impressão ou PDF. Um site do governo de transferência de benefícios para o cidadão de baixa renda poderia transmitir seu conteúdo por meio de áudio nos quiosques de acesso público à internet. Seria um ganho tremendo, pois alcançaria pessoas que não sabem ler e deficientes visuais.

Além de serem informativos, efeitos sonoros dão mais vida ao site e aprimoram a experiência. Jogos, por exemplo, dependem muito dos efeitos sonoros para conseguir a atenção do usuário para o que está acontecendo. Quando o jogador está concentrado na ação, um som é usado para avisar que “uma nova arma está disponível”, por exemplo. Este artigo oferece informações úteis sobre o assunto.

Quando bem empregados, esses mecanismos contribuem de fato para simplificar a vida do usuário, tornar as tarefas mais fáceis de realizar e “azeitar” a relação entre o ser humano e a máquina, sem ele perceber. Está tudo diluído na interface. O usuário não precisa de “curso de internet” para entender como ela funciona. Pelo contrário, é a internet que está fazendo um “curso de humanização” para entender como o usuário pensa e como melhorar a comunicação com ele, usando todas as novas armas à disposição.

Seria exagero achar que todo projeto precisa ter sua usabilidade tratada em todas as camadas abordadas acima. Como disse, cada projeto tem seu conceito, prazo, orçamento, cliente, público-alvo e objetivo. Porém, é importante ter em mente que elas existem e que podem contribuir positivamente para a experiência do usuário. Não precisamos mais de sites saturados de textos e formulários, a comunicação pode se usar de outros canais, mais eficientes.