Heurísticas para avaliação de usabilidade de portais corporativos
Guia elaborado em 10 de Maio de 2001
Este documento foi elaborado por Cláudia Dias, MSc em Ciência da Informação (Universidade de Brasília), e extraído de sua dissertação de Mestrado - Referência:
DIAS, Cláudia. Métodos de avaliação de usabilidade no contexto de portais corporativos: um estudo de caso no Senado Federal. Brasília: Universidade de Brasília, 2001. 229p.
- Este documento encontra-se no endereço:
- http://www.oocities.org/claudiaad/heuristicas_web.html.
- Autor:
- mailto:claudiaad@yahoo.com
A manutenção e revisão deste documento é da responsabilidade de Cláudia Dias, auditora da tecnologia da informação do Tribunal de Contas da União
(TCU). A reprodução e distribuição deste documento é livre, desde que citada a fonte (referência mencionada acima).
As presentes heurísticas explicam como melhorar a usabilidade de portais corporativos web, e se destinam a todos os criadores
de conteúdo Web (autores de páginas e projetistas de sites). O principal
objetivo destas recomendações é orientar a avaliação de sites web e promover sua usabilidade, tornando mais fácil e rápido o acesso
a informações disponíveis em portais web institucionais.
Por favor envie comentários sobre este documento para o
endereço claudiaad@yahoo.com.
As heurísticas definidas neste documento basearam-se na experiência prática de vários pesquisadores em testes com usuários. Foram consideradas, em especial, as heurísticas de usabilidade para web de Nielsen (1994), os critérios ergonômicos de Bastien & Scapin (1993), as recomendações de Bevan (1998), Instone (1997) e Nielsen (1994-1999), as "regras de ouro" para o projeto de interfaces de Shneiderman (1998) e o guia de estilos para serviços de informação via web de Parizotto (1997).
Este documento contém 7 heurísticas, ou
princípios gerais, sobre concepção da usabilidade de portais web. Cada heurística inclui:
- Uma descrição resumida.
- Detalhamento e justificativas.
- Links para navegação. A presença de três links permite passar para a
heurística seguinte (ícone da seta para a direita), para a anterior (ícone da
seta para a esquerda), ou para a posição que, no sumário, é ocupada por essa
mesma heurística (ícone da seta para cima).
- Uma lista de recomendações.
Em virtude da forma hipertextual, não-linear de interação e da quantidade de páginas disponíveis na Internet, um dos maiores problemas identificados em testes com usuários é sua desorientação. Para minimizar os efeitos dessa desorientação, o portal deve sempre manter o usuário informado quanto à página em que ele se encontra, como chegou até essa página e quais são suas opções de saída, isto é, onde ele se encontra numa seqüência de interações ou na execução de uma tarefa.
Uma boa condução facilita o aprendizado e a utilização do portal, possibilitando um melhor desempenho e a diminuição do número de erros. Se os usuários puderem reconhecer onde estão simplesmente olhando para a página em que se encontram, sem a necessidade de relembrarem o caminho percorrido a partir da página principal, a probabilidade de se perderem ou ficarem desorientados será menor.
- A página principal do portal deve ser capaz de responder às seguintes perguntas: “Onde estou?” e “O que este portal faz?”.
- Apresentar em destaque o nome da página principal em todas as páginas componentes do portal, preferencialmente no canto superior esquerdo. Pode-se usar o termo Home ou o logotipo da empresa/departamento/projeto, por exemplo.
- A navegação entre as páginas do portal deve responder às três perguntas: “Onde estou?”, “Onde estive?” e “Para onde posso ir?”.
- Apresentar a estrutura ou mapa de navegação do portal, ressaltando a página atual onde o usuário se encontra. Por exemplo, o indicativo “Você está aqui!”, como nos mapas turísticos.
- Apresentar, em todas as páginas, os níveis anteriores da estrutura de navegação (em forma de links) até chegar à página atual (em formato textual, sem link).
- Na página principal, incluir um diretório com as principais áreas cobertas pelo portal, resumo das novidades e caixa do serviço de busca. É recomendável que a caixa do serviço de busca também apareça em todas as outras páginas do portal.
- Em links :
- utilizar textos que sejam auto-explicativos, com informações suficientes sobre o conteúdo do endereço apontado.
- não usar expressões como “Clique aqui”.
- marcar o texto (nome da empresa, título da página, assunto etc.) e não o endereço URL.
- apontar exatamente para o conteúdo descrito no link.
- usar títulos de links, fornecendo informações, tais como nome e detalhes relevantes do endereço apontado, e ainda se é necessário o usuário se registrar para poder visualizar seu conteúdo.
- identificar de forma diferente links para endereços externos ao portal.
- em listas de links, é recomendável fazer comentários sobre os endereços apontados.
- Usar o atributo ALT , da HyperText Markup Language (HTML), com o significado das imagens para que o texto apareça enquanto estiver sendo feito o download da figura ou quando o usuário optar por suprimir figuras na configuração do seu navegador web.
- Em mapas de imagem, colocar ALT em todas as posições clicáveis.
Um portal legível e esteticamente agradável facilita a leitura da informação nele apresentada, melhorando inclusive o desempenho do usuário na realização da tarefa proposta e influenciando seu nível de satisfação durante a interação com o portal. Além disso, quanto menos o usuário for distraído por informação desnecessária, maior a probabilidade desse usuário desempenhar suas tarefas de forma eficiente, e menor a probabilidade de erros. O portal não deve conter informações irrelevantes ou raramente necessárias, pois cada unidade extra de informação compete com as unidades relevantes de informação, diminuindo a visibilidade relativa das informações importantes.
Na maioria das tarefas, o desempenho dos usuários piora quando a densidade de informação é muito alta ou muito baixa, acarretando a ocorrência mais freqüente de erros. É recomendável estabelecer níveis de detalhamento, apresentando, em primeiro plano, os aspectos mais importantes e gerais, deixando os detalhes para outras páginas suplementares que poderão ser acessadas pelos usuários interessados em mais informações sobre o assunto.
- Ocupar de 50 a 80% da página com conteúdo (preferencialmente, 80%).
- Ocupar no máximo 20% da página com informações sobre a navegação.
- Evitar frames, pois diminuem o espaço disponível para apresentação de conteúdo.
- Usar hipertexto para dividir as informações em várias páginas ou níveis de detalhamento.
- Usar pequenos parágrafos, subtítulos e listas.
- Agrupar os diferentes tipos de informações disponíveis na página, apresentando as mais importantes em primeiro lugar.
- Usar espaço em branco para separar conteúdos ou assuntos diferentes.
- Fornecer apenas informação útil aos usuários.
- Remover os elementos não relacionados às tarefas realizadas pelos usuários.
- Testar o projeto da página retirando um elemento de cada vez. Após o teste, retirar os elementos considerados desnecessários.
- Não usar propaganda. Se for necessária, utilizar parte do espaço anteriormente destinado à navegação, e não do espaço destinado ao conteúdo.
- Evitar menus pull-down com opções para as outras páginas do portal, pois suas opções não ficam visíveis aos usuários.
- Evitar imagens. Se forem necessárias, optar por múltiplas ocorrências da mesma imagem.
- Evitar imagem ou texto animados, pois distraem o usuário e parecem propaganda. Se forem necessários, devem ser processados apenas algumas vezes.
- Não usar imagens tridimensionais.
- Evitar desenhos ou texturas no fundo da página. O fundo não deve chamar mais atenção do que a informação.
- Usar um conjunto limitado de cores.
- Evitar cores berrantes, caracteres brilhando ou piscando.
- Para realçar textos, usar cores ao invés de sublinhado ou elementos piscando. O usuário pode confundir o termo sublinhado com um link.
- Contrastar letras com o fundo (melhor utilizar fundo claro, de cor neutra ou branca, com texto escuro).
- Usar no máximo dois tipos de fontes.
- Usar tamanho de fonte legível.
- Testar vários tamanhos de fonte para ser o padrão. Os tamanhos 10, 12 e 14 são os mais comuns.
- Não utilizar tamanho de fonte absoluto. É recomendável usar % do valor definido como padrão.
- Não usar caixa alta em excesso.
- Usar os níveis de cabeçalho H1, H2, H3.
Os usuários de qualquer sistema interativo esperam deter controle sobre o sistema, fazendo com que este responda a suas solicitações e expectativas. Ações inesperadas do sistema, infindáveis seqüências de entrada de dados, incapacidade ou dificuldade em obter a informação necessária e incapacidade em produzir os resultados desejados contribuem para o aumento da ansiedade e da insatisfação do usuário.
As ações do portal devem ser reversíveis, isto é, o usuário deve ser capaz de desfazer pelo menos a última ação realizada. Essa capacidade diminui a ansiedade, pois o usuário sabe, de antemão, que os erros cometidos podem ser corrigidos, encorajando-o a explorar opções desconhecidas do portal.
- Possibilitar o retorno à página anterior.
- Possibilitar aos usuários interromper ou cancelar o processamento ou transação atual.
- Não desviar para outra página, a não ser que o usuário digite Enter ou clique com o mouse.
- Não abrir janelas adicionais.
- Apresentar em todas as páginas os níveis anteriores da estrutura de navegação (em forma de links) até chegar à página atual (em formato textual, sem link). Dessa forma, o usuário poderá retornar mais facilmente às páginas anteriores.
- Apresentar em destaque o nome da página principal em todas as páginas componentes do portal, preferencialmente no canto superior esquerdo. Pode-se usar o termo Home ou o logotipo da empresa/departamento/projeto, por exemplo.
- Fornecer serviço de busca em todas as páginas do portal.
- Restringir a pesquisa dos serviços de busca apenas ao conteúdo do portal.
- Não usar plug-ins auto-instaláveis.
- Em páginas de entrada de dados, posicionar o cursor no próximo campo a ser preenchido, porém dando a opção de troca para outro campo.
- Não apagar ou substituir campo de entrada de dados até que o usuário digite Enter ou clique com o mouse.
- Possibilitar entrada de dados a partir do mouse ou teclado e saída de dados em impressora selecionada pelo usuário.
Em função da diversidade de tipos de usuários de um portal, é necessário que sua interface seja flexível o bastante para realizar a mesma tarefa de diferentes maneiras, de acordo com o contexto e com as características de cada tipo de usuário. Deve-se fornecer ao usuário procedimentos e opções diferentes para atingir o mesmo objetivo, da forma que mais lhe convier.
Além da flexibilidade, outros procedimentos podem ser adotados para tornar o uso do portal mais eficiente, tais como a eliminação de páginas ou passos desnecessários em uma seqüência para a realização de uma tarefa e o uso de valores padronizados, sem a necessidade de digitação por parte do usuário.
- Não usar páginas sem conteúdo útil, como por exemplo páginas apenas com mensagens do tipo "Seja bem-vindo ao portal tal".
- Na identificação de links, utilizar termos que exprimam o conteúdo das páginas correspondentes. Não utilizar números ou cores para isso.
- Oferecer serviço de busca para pesquisa das páginas do portal, incluindo a possibilidade de verificação ortográfica dos termos digitados em sua caixa de entrada de dados.
- Nos resultados de pesquisa do serviço de busca, apresentar os melhores em primeiro lugar, sendo desnecessário o uso de porcentagens ou graus de acerto.
- Se não forem encontrados documentos com o termo digitado na caixa de entrada de dados do serviço de busca, oferecer lista com sugestões de palavras mais próximas.
- Usar metatags para facilitar a pesquisa dos serviços de busca.
- Projetar a caixa de entrada de dados do serviço de busca para caber duas, três ou mais palavras.
- Ressaltar as palavras encontradas nos documentos da lista de resultados do serviço de busca.
- Evitar rolagem horizontal da tela.
- Projetar as páginas de acordo com a resolução dos monitores de vídeo disponíveis aos usuários.
- Usar % ao invés de tamanhos fixos, para a adaptação das páginas a qualquer tipo de monitor de vídeo.
- Usar % no tamanho de fonte.
- Projetar a página considerando o tempo de download nos computadores disponíveis aos usuários:
- menos de um segundo entre páginas.
- menos de dez segundos para download de arquivos.
- Se o download de arquivos for demorar mais do que dez segundos, informar o tamanho do arquivo ao usuário.
- Evitar elementos gráficos, pois comprometem o tempo de download das páginas. Se forem necessários, utilizar múltiplas ocorrências do mesmo elemento.
- Nos links apontados, colocar / no final do URL, se for um diretório.
- Na apresentação de textos, começar sempre pelo mais importante, expondo uma idéia por parágrafo. Informações adicionais devem ser incluídas em outras páginas acessíveis a partir de links apresentados na página inicial do texto.
- Projetar a página de forma que as informações ou elementos importantes estejam visíveis, sem a necessidade de rolagem vertical ou horizontal da tela.
- Para textos extensos, oferecer a opção de impressão ou download de arquivo. A leitura de textos muito extensos na tela do computador torna-se cansativa para o usuário.
- Minimizar a quantidade de cliques necessários para o usuário conseguir o conteúdo final ou informação útil. É recomendável não ultrapassar quatro cliques.
As interrupções provocadas por erros de processamento têm conseqüências negativas sobre a atividade do usuário com o portal, prolongando e perturbando a realização de suas tarefas. Quanto menor a probabilidade de erros, menos interrupções ocorrem e melhor o desempenho do usuário.
Para possibilitar a correção de erros, é importante que as mensagens de erro sejam pertinentes, legíveis, redigidas em linguagem natural (sem códigos), exatas quanto à natureza do erro cometido, e sugiram possíveis ações para sua correção. Dessa forma, as mensagens de erro favorecem o aprendizado do sistema, ao indicar ao usuário a razão do erro e suas possíveis correções. Entretanto, melhor do que boas mensagens de erro é, em primeiro lugar, prevenir a ocorrência de erros.
- Não usar páginas com a expressão “em construção”. O portal deve apresentar apenas o que já está pronto para ser acessado pelo usuário.
- Não liberar portal parcialmente pronto.
- Remover dados/páginas desatualizados, como por exemplo, páginas convidando os usuários para participarem de eventos que já ocorreram.
- Nos serviços de busca, não usar operadores booleanos nas pesquisas simples. É recomendável oferecer a possibilidade de operadores booleanos apenas em pesquisas avançadas, para serem usadas pelos usuários mais experientes.
- Se não forem encontrados documentos com o termo digitado na caixa de entrada de dados do serviço de busca, oferecer lista com sugestões de palavras mais próximas.
- Oferecer páginas de ajuda para os usuários inexperientes.
- Não usar URLs muito extensas ou sem significado.
- Evitar hífens ou outros caracteres especiais no endereço das páginas. É preferível justapor duas ou mais palavras, ou abreviá-las.
- Usar apenas letras minúsculas no endereço das páginas.
- Evitar usar “O” e “0” no endereço das páginas.
- Escolher bem os títulos das páginas, de forma que caracterizem bem seu conteúdo. É aconselhável escolher títulos com duas a seis palavras.
- Não repetir o mesmo título em duas páginas diferentes.
- Não utilizar mapas de imagem que exijam muita precisão ao clicar.
- Fornecer mensagens de erro orientadas a tarefas, com sugestões ou instruções simples e construtivas para a correção do erro.
- Utilizar mensagens de erro sucintas, precisas, com termos específicos e vocabulário neutro, não repreensivo.
- Evitar páginas órfãs, sem qualquer indicação de opções de navegação possíveis.
- Evitar frames, pois podem causar erros na impressão do conteúdo da página ou na marcação da página como um endereço favorito (bookmark).
Um projeto consistente facilita o reconhecimento, o aprendizado, a localização e, por fim, a utilização de um portal por seus usuários. A padronização de formatos, localizações e sintaxe torna o portal mais previsível, diminuindo a incidência de erros e as dificuldades de aprendizado e compreensão.
É conveniente padronizar tanto quanto possível os elementos do portal quanto a seu formato, cor, localização e denominação, para que o usuário identifique mais facilmente situações e elementos similares e realize suas tarefas com maior rapidez. A falta de homogeneidade pode comprometer tanto o desempenho quanto a satisfação do usuário com o portal.
- Usar sempre a mesma terminologia e a mesma localização de elementos comuns nas páginas de conteúdo, nas páginas de ajuda ao usuário e nas mensagens de erro.
- Incluir a caixa de entrada de dados do serviço de busca logo no início de cada página, preferencialmente no canto superior direito.
- O comportamento do cursor deve ser consistente em todos os campos de entrada de dados, isto é, o cursor deve saltar automaticamente de um campo a outro ou aguardar Enter ou Tab do usuário.
- Verificar se os títulos ou cabeçalhos das páginas correspondem exatamente aos termos utilizados nos links que apontam para essas páginas.
- Evitar instruções HTML não padronizadas.
- Usar um estilo padrão para o projeto das páginas (leiaute, cores, fontes, formatos de campos e mensagens).
- Selecionar as cores e o leiaute das páginas dentro de um contexto geral e de forma consistente em todas as páginas.
- Evitar sair do padrão web de cores para links : azul para link não visitado e púrpura para link já visitado.
- Destacar palavras ou trechos importantes, com o cuidado de não sublinhar em azul trechos ou palavras que não sejam links. É recomendável não sublinhar nada que não possa ser clicado.
O desempenho dos usuários de qualquer sistema interativo melhora quando os procedimentos necessários ao cumprimento da tarefa são compatíveis com as características psicológicas, culturais e técnicas dos usuários; e quando os procedimentos e as tarefas são organizados de acordo com as expectativas e costumes dos usuários.
O portal deve "falar" a língua do usuário, com palavras, frases e conceitos familiares, ao invés de termos técnicos relacionados ao portal ou à tecnologia web. As convenções do mundo real devem ser seguidas, apresentando informações em uma ordem lógica e natural.
- Planejar a estrutura do portal de acordo com o contexto das tarefas realizadas pelos usuários e não com a estrutura organizacional ou com as novidades tecnológicas. A estrutura deve ser determinada pelas tarefas que os usuários pretendem realizar por meio do portal.
- Evitar estrutura linear (ordem numérica ou alfabética). As informações devem ser apresentadas seguindo uma ordem lógica relacionada à tarefa a realizar.
- Verificar erros de grafia, tomando como base a gramática do idioma utilizado e o glossário de termos técnicos de uso corrente na instituição.
- Não usar linguagem de marketing. O enfoque do portal corporativo deve ser o conteúdo e não a propaganda.
- Não usar elementos gráficos metafóricos, a não ser que sejam de uso corrente na instituição.
- Não usar novos termos quando os termos padronizados forem bem conhecidos pelos usuários.
- Utilizar palavras da linguagem natural e/ou técnica corporativa que sejam familiares aos usuários.
- Usar formato de data e unidades de medida de acordo com o padrão normalmente utilizado na instituição ou país.
- ALT
- Atributo textual associado a imagens em páginas web. Esse atributo apresenta um texto alternativo enquanto a imagem está sendo carregada pelo navegador ou quando o usuário opta por ignorar imagens na sua interação com o portal. ALT pode apresentar informações adicionais sobre a imagem, antes mesmo que esta seja clicada.
- bookmark
- Os navegadores web fornecem a opção de bookmark para que o usuário armazene, em seu computador, o endereço de páginas consideradas interessantes para futuras visitas.
- caixa alta
- Letras maiúsculas.
- enter
- Tecla para entrada de dados em teclados de computador.
- home
- Abreviatura do termo em inglês homepage, que significa página principal.
- metatags
- Comandos HTML com metadados sobre uma página web (título, palavras-chave, descrição do conteúdo, autor). O termo metadados significa dados sobre dados.
- nível de cabeçalho
- Na linguagem HTML, cada nível de cabeçalho Hn corresponde a um tipo e tamanho de fonte diferente. Quanto menor o número n, maior será o destaque dado ao cabeçalho.
- plug-ins
- Programas que são instalados no computador, sem a anuência do usuário, para que determinada função possa ser processada.
- menus pull-down
- Menus com opções que só aparecem se o usuário clicar no campo e rolar verticalmente para baixo o menu, para ver todas as opções disponíveis.
- tab
- Tecla para tabulação em teclados de computador.
- [BASTIEN & SCAPIN]
- BASTIEN, C. & SCAPIN, D. Critérios ergonômicos para avaliação de interfaces homem-computador. 1993. [on-line], setembro 2000. http://www.labiutil.inf.ufsc.br/indice-1.html.
- [BEVAN]
- BEVAN, N. Usability issues in web site design. In: Proceedings of UPA’98, Washington, June 1998. 1998. [on-line], agosto 2000. http://www.usability.serco.com/papers/usweb98.pdf .
- [CASTRO]
- CASTRO, E. HTML para World Wide Web: guia rápido visual. São Paulo: Berkeley Brasil, 1996. 173p.
- [DIAS]
- DIAS, C. Hipertexto : evolução histórica e efeitos sociais. Ciência da Informação, v. 28, n. 3, p. 267-275, dez. 1999. [on-line], dezembro 1999. http://www.ibict.br/cionline/280399/2839905.pdf .
- [IBM]
- IBM. Web design guidelines. 1999. [on-line], outubro 2000. http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/572.
- [INSTONE]
- INSTONE, K. Usability heuristics for the web. Oct. 1997. [on-line], junho 1999. http://webreview.com/wr/pub/97/10/10/usability/sidebar.html .
- [ISO Parte10]
- ISO 9241 Part 10. Ergonomic requirements for office work with visual display terminals, Part 10: Dialogue principles. 1996.
- [ISO Parte11]
- ISO 9241 Part 11. Ergonomic requirements for office work with visual display terminals, Part 11: Guidance on usability. 1998.
- [LYNCH & HORTON]
- LYNCH, P. & HORTON, S. Web style guide: basic design principles for creating web sites. 1999. 164p. [on-line], outubro 2000. http://info.med.yale.edu/caim/manual/.
- [NIELSEN 94]
- NIELSEN, J. Ten usability heuristics. In: NIELSEN, J. & MACK, R. (eds). Usability inspection methods. New York: John Wiley & Sons, 1994. [on-line], junho 1999. http://www.useit.com/papers/heuristic/heuristic_list.html .
- [NIELSEN 96]
- ______. Top ten mistakes in web design. May 1996. [on-line], junho 1999. http://www.useit.com/alertbox/9605.html .
- [NIELSEN 97]
- ______. Changes in web usability since 1994. Dec. 1997. [on-line], junho 1999. http://www.useit.com/alertbox/9712.html .
- [NIELSEN 99a]
- ______. ”Top ten mistakes” revisited three years later. May 1999. [on-line], junho 1999. http://www.useit.com/alertbox/990502.html .
- [NIELSEN 99b]
- ______. The top ten new mistakes in web design. May 1999. [on-line], junho 1999. http://www.useit.com/alertbox/990530.html .
- [NIELSEN 99c]
- ______. Designing web usability. Indianapolis, IN: New Riders, 1999. 420p.
- [PARIZOTTO]
- PARIZOTTO, R. Elaboração de um guia de estilos para serviços de informação em ciência e tecnologia via web. Florianópolis: UFSC, 1997. Dissertação de mestrado em Engenharia da Produção.
- [REYNOLDS & KOULOPOULOS]
- REYNOLDS, H. & KOULOPOULOS, T. Enterprise knowledge has a face. Intelligent Enterprise , v. 2, n. 5, p. 29-34, Mar. 1999.
- [SHNEIDERMAN]
- SHNEIDERMAN, B. Designing the user interface: strategies for effective human-computer interaction. 3.ed. Reading, Mass.: Addison-Wesley, 1998. 639p.
