MUF #25: Avaliação heurística da interface do Café Colombo

Heurísticas são critérios consensuais que servem como balizas para o desenvolvimento de projetos dentro de um mesmo escopo. A experiência prática de vários pesquisadores em testes com usuários geram resultados que, como sempre se repetem, podem ser tomados como base para avaliação de novos projetos.

Realizar uma avaliação heurística é verificar se o projeto segue alguns princípios já testados e provados em outras ocasiões, algo semelhante confirmar um checklist. Trata-se de uma opção mais barata - todavia menos precisa - do que o teste de usabilidade. O ideal é que os dois métodos sejam utilizados em conjunto, como falei neste post.

Para realizar a avaliação da interface do site do Café Colombo, utilizei como referência o guia Heurísticas para avaliação de usabilidade de portais corporativos, que é uma recomendação do W3C e foi elaborado pela brasileira Cláudia Dias com base nas heurísticas de usabilidade para web de Jakob Nielsen, nos critérios ergonômicos de Bastien & Scapin, nas recomendações de Bevan e Instone e nas “regras de ouro” para interfaces elaboradas por Shneiderman (1998) e outros.

A avaliação se deu sobre os wireframes, já que se fossem detectadas algumas imperfeições seria mais fácil, rápido e barato mudar alguma coisa do que modificar sobre o design gráfico já elaborado.

Também tentei observar as heurísticas de arquitetura de informação publicadas por Louis Rosenfeld há exatos dois anos, mas na verdade elas já me guiaram na hora de trabalhar os wireframes.

Visibilidade e reconhecimento do estado ou contexto atual, e condução do usuário

Primeiro chequei se a interface permite que o usuário responda facilmente onde está, onde esteve, para onde pode ir e o que aquele site faz. Verifiquei ainda se todos os meios para informar, orientar e conduzir o usuário durante a interação estavam disponíveis.

Neste caso, algumas recomendações - como o uso de alternativas textuais às imagens - só podem ser verificadas após a fase de produção, então anotei este ponto para checar durante a revisão final.

Projeto estético e minimalista

Este ponto diz respeito à dificuldade ou facilidade que o usuário terá para ler e compreender o conteúdo disponível no site. O uso de parágrafos pequenos, agrupamento de informações, espaço em branco, níveis de cabeçalho e demais recomendações estavam todas previstas.

O único ponto que me deixou em dúvida foi sobre a quantidade de informações na home. Embora a relação 80% para conteúdo e 20% para navegação esteja respeitada, a quantidade de informações na tela - a partir do wireframe - talvez esteja acima do ideal. A solução foi reduzir a quantidade de texto em cada chamada.

Controle do usuário

Esta heurística refere-se ao controle que o usuário sempre deve ter sobre o processamento de suas ações pelo portal. Quem utiliza Flash para construir sites deve empacar muito neste ponto, principalmente quando a navegação pelo botão Voltar fica desabilitade.

No site do Café Colombo, tive que modificar o menu drop down que levava direto ao programa escolhido. Antes bastava o usuário selecionar a opção que seria levado para a página específica. Depois de ler as recomendações desta heurística, no entanto, vi que era melhor colocar um botão “Ok” para o usuário confirmasse a operação.

Flexibilidade e eficiência de uso

Neste ponto o uso de web standards e a fase de arquitetura de informação facilitam bastante a vida. A questão da busca seria um problema caso tivéssemos optados por usar a busca do Wordpress, mas já havíamos definido na reunião de kick-off que usaríamos a busca interna do Google no site.

Infringi propositadamente dois pontos desta heurística: a utilização de porcentagem no layout e nas fontes do site. Embora saiba que projetar layout líquido é mais justo com o usuário, o desenvolvimento levaria um tempo além do previsto na proposta, comprometendo o orçamento.

A questão das fontes é uma opção particular. O problema aqui é que os navegadores não seguem um padrão para o tamanho 100% da fonte e também que o tamanho default pode ser alterado (confira uma discussão sobre o assunto neste post do Ivo Gomes).

Decidi então usar um script para controlar o tamanho das fontes na própria interface do site, evitando distorções que possam causar frustração na experiência do usuário. Já tive experiências bem-sucedidas fazendo o mesmo em outros projetos.

Prevenção de erros

Esse foi o checklist mais fácil de preencher. Esta heurística fala sobre a utilização de mecanismos que permitam evitar ou reduzir a ocorrência de erros, além corrigir os erros que porventura aconteçam.

São basicamente itens como não usar páginas em construção, não manter informações desatualizadas, não utilizar áreas de clique muito pequenas, evitar páginas órfãs, não utilizar frames etc.

Consistência

Consistência é uma regra aplicada aos próprios wireframes e também não apresentou problemas. As opções durante toda a interface do site são consistentes: os menus são mantidos no mesmo lugar, as fontes são sempre as mesmas, o rodapé é igual.

O trabalho aqui vai começar quando o conteúdo começar a ser atualizado. Terei que ficar de olho para verificar se a equipe do Café Colombo utilizará sempre a mesma terminologia para se referir aos mesmos termos e se destacará sempre as palavras-chave dos textos.

Compatibilidade com o contexto

A última heurística já vinha sendo pensada desde a fase de planejamento, já que este pretende ser um projeto de design centrado no usuário. Planejamos a estrutura do site de acordo com o contexto das demandas do público-alvo e não com a estrutura organizacional do programa ou com as novidades tecnológicas.

A avaliação heurística da interface encerrou a etapa de arquitetura de informação, o primeiro dos três pontos do webcontext. Chegou a hora de pensar o conteúdo e este é o próximo assunto do reality show Meu Último Freela.