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.

Com tanta novidade aparecendo semanalmente nos nossos bookmarks e agregadores, percebemos que modelar a usabilidade de um site é uma prática que não se limita mais às prescrições e procedimentos que seguíamos antigamente.

O wireframe, documento tradicionalmente usado para formatar protótipos, com sua estrutura rígida, limita a nossa capacidade de tratar o design de interface como uma prática multidisciplinar na qual a arquitetura de informação é apenas uma parte do processo.

Este artigo não é sobre web 2.0, também não é um novo episódio da saga ?aposentando o wireframe devido à sua incapacidade de representar fluxos não-lineares?. O amadurecimento da internet coloca novos recursos à disposição dos designers de interface, mas muitos ainda se prendem à forma antiga de fazer as coisas.

O objetivo aqui é enxergar as outras ?camadas? que integram o processo de usabilidade de concepção e tentar, isso sim, aposentar o método burocrático que fez o sucesso dos radio buttons, combos, botões de ?limpar dados? e que definitivamente não serve mais.

Partimos do princípio que a internet já passou da adolescência quando constatamos os seguintes fatores:

• Crescimento do uso da banda larga (para quem tem poder aquisitivo);
• 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;
• Mudança de postura da internet. Usuários estão colhendo os frutos do esforço de design centrado nas suas necessidades. O nível de usabilidade está em média superior ao de três anos atrás. Clientes também estão mais espertos: estar apenas presente na internet não é mais o suficiente;
• Mudança de comportamento dos usuários, cada vez mais participativos e espertos, comprando online, criando conteúdo em ambientes colaborativos gratuitos e muito bem desenvolvidos, 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 de fatores nos leva a definir novas fronteiras para a usabilidade, que precisa se fazer presente em todos os novos terrenos que a web resolve explorar. Como disse o Shrek, ?Nós ogros somos como cebolas, temos camadas?. A usabilidade também. Vejamos:

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, melhor ainda, uma interface que não deixa o usuário errar;
• Entrevistas com o usuário para conhecer suas necessidades e limitações;
• Testes de usabilidade, por mais que a etapa seja corretiva e não de concepção.

Existem vários métodos ?sagrados? e prescritivos na arquitetura. O crescente interesse no tema impulsionou designers e ?pensadores? a pesquisarem novas formas de facilitar a vida do usuário e aumentar o prazer proporcionado pela experiência. Existe vida além do link azul sublinhado.

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? 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 de documentar ?o momento em que vamos pensar a usabilidade do projeto?, assumimos a responsabilidade de atender todos os objetivos de usabilidade (estratégicos e técnicos) naquele pequeno espaço bidimensional. Inserimos textos, tooltips, boxs de ajuda, breadcrumbs, alertas contextuais, alternativas de navegação, perguntas freqüentes, labels, botões de ?saiba mais? que levam para outras páginas bidimensionais. A usabilidade está toda concentrada nessa camada.

E se tentássemos aliviar um pouco a cobrança em cima dessa camada e transportar algumas informações para outras, tratando-as 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

Independentemente da tecnologia empregada, o uso de feedbacks assíncronos já é uma prática acessível em qualquer projeto. O recurso permite 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 usar o filtro, 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 novos dados.

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. A ferramenta de busca permite até escolher pedaços da imagem para dizer ?gostei especificamente da cor da sola dessa bota?. 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 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 apenas.

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 transmitido por meio de texto:

• 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 e cores que fazem parte do contexto de vida do usuário;
• Usar animações e cores 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).

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, veja este excelente artigo.

4. 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 pode dar a opção para os seus usuários serem avisados por meio de alerta sonoro 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. Sem falar do conforto que representa ter um conteúdo ditado para você. Em vez de ter que ler duas laudas para escolher um produto, um curto vídeo me apresenta as vantagens sucintamente; se eu quiser mais informações, faço o download da brochura em PDF.

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 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. [Webinsider]

.

Pedro Borges

Pedro Borges (monolito@gmail.com) é jornalista e especialista em Usabilidade e Design de Interface.