Padrões Web em Governo Eletrônico e-PWG

A presente Cartilha é o resultado do Projeto Padrões Web em Governo Eletrônico e-PWG, do Programa de Governo Eletrônico do Governo Federal (www.governoeletronico.gov.br) - que fornece recomendações de boas práticas na área digital, com o objetivo de aprimorar a comunicação, o fornecimento de informações e serviços prestados por meios eletrônicos pelos órgãos do Governo Federal.

A adoção dos Padrões Web em Governo Eletrônico e-PWG traz vantagens na gestão de sítios, como a garantia do nível de qualidade, pois possibilita a mensuração de resultados. Fornece também requisitos para a correta contratação da equipe responsável por desenvolver o sítio, diminui o tempo, o custo de desenvolvimento e manutenção das páginas. Além disso, a padronização desses ambientes acelera o processo de adaptação e migração para tecnologias mais modernas, e ainda aumenta a qualidade da comunicação com a sociedade.

Conheça mais sobre as recomendações dos Padrões Web em Governo Eletrônico e-PWG no endereço: www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov.

Objetivo dessa Cartilha

O objetivo dessa cartilha é apresentar a usabilidade, inserindo-a no contexto do desenvolvimento e manutenção de sítios de governo eletrônico. A cartilha possui recomendações que devem ser observadas, assim como subsídios para testes que podem ser utilizados tanto pela equipe interna do órgão quanto para a contratação ou licitação.

Responsabilidade e manutenção

A manutenção desse documento é responsabilidade do Departamento de Governo Eletrônico - DGE. Questões sobre aspectos deste documento podem ser enviados para govbr@planejamento.gov.br

1. Introdução

A usabilidade é uma disciplina indispensável para que as informações e serviços prestados pela Administração Pública Federal sejam desenvolvidos e mantidos de acordo com as expectativas e necessidades do cidadão e para que este se utilize das informações e serviços de forma plena e satisfatória.

No entanto, a sua aparente complexidade, assim como as diferentes correntes de pensamento que existem, acabam por dificultar o entendimento e a inserção da usabilidade no desenvolvimento e redesenho de sítios.

Essa cartilha propõe ser um guia na aplicação da usabilidade em sítios da administração pública de forma clara e descomplicada. Aqui serão apresentadas recomendações de usabilidade descritas de forma prática e aplicável, assim como orientações sobre como realizar testes de usabilidade.

É importante lembrar que, apesar de serem recomendações voltadas ao desenvolvimento de sítios, estas servem perfeitamente ao desenvolvimento de qualquer aplicativo desenvolvido pelo governo. A usabilidade, a facilidade de uso, deve ser observada em todas as interfaces do governo com o cidadão.

Este documento é uma primeira versão que reflete um acúmulo de conhecimento e experiências. Assim, esse documento se oferece, também, como uma referência para o debate e contribuições que deverão ser incorporadas às próximas versões.

1.1 O que é usabilidade

A usabilidade pode ser definida como o estudo ou a aplicação de técnicas que proporcionem a facilidade de uso de um dado objeto, no caso, um sítio. A usabilidade busca assegurar que qualquer pessoa consiga usar o sítio e que este funcione da forma esperada pela pessoa. Em resumo, usabilidade tem como objetivos a:

facilidade de uso;
facilidade de aprendizado;
facilidade de memorização de tarefas;
produtividade na execução de tarefas;
prevenção, visando a redução de erros;
satisfação do indivíduo.

Para a usabilidade o ponto de partida do desenvolvimento é o usuário. Usuário é o termo técnico utilizado em usabilidade para referir-se a cada pessoa que utiliza o objeto em questão por meio de uma interface. No caso temos o cidadão como usuário e o objeto são as páginas, informações e serviços disponibilizadas eletronicamente pelo governo federal.

A interface é o meio pelo qual a pessoa intervém, dialoga, modifica o objeto da interação (no caso, um sítio). Se a interface é fácil de aprender, simples, direta e amigável, a pessoa estará inclinada a fazer uso da mesma. Desenvolver sítios com usabilidade é pensar do ponto de vista do cidadão, para tanto deve-se observar:

Cidadão: é necessário conhecer, entender e trabalhar com as pessoas que representam os atuais e potenciais utilizadores do produto. Níveis de educação, familiaridade com o meio eletrônico e idade são fatores preponderantes;
O contexto da utilização: De onde o cidadão acessa, em que ambiente e em que condições. As pessoas estão, geralmente, ocupadas e querem realizar rapidamente uma tarefa a qual se sentem obrigadas a fazer (ex: solicitação de algum benefício ou pagamento de qualquer espécie).
O objetivo: as pessoas utilizam os sítios com um objetivo. O sucesso e a satisfação na realização desse objetivo estão diretamente relacionados com o tempo, o número de passos necessários, a possibilidade de prever o que deve ser feito e a necessidade de aprendizado.

Todo projeto deve ter em conta a experiência que o cidadão irá vivenciar nas páginas do sítio. O objetivo da aplicação da usabilidade é que cada pessoa que visite o sítio encontre o que está buscando de maneira simples, e que se sinta a vontade para retornar ao sítio sempre que quiser ou precisar.

Interação humana - computador

A Interação Humano-Computador (HCI ou IHC) remete a clareza e facilidade de uso de interfaces eletrônicas, incluindo um programa de computador ou sítio. A disciplina de IHC visa construir o conhecimento teórico necessário para embasar o desenho de interfaces que garantam uma boa usabilidade.

1.2 A usabilidade é interesse de todos

A usabilidade é um processo colaborativo, interdisciplinar, assim é importante que todo membro da equipe envolvida com o sítio possua, pelo menos, a consciência da necessidade da usabilidade e conheça o básico da sua aplicação.

A necessidade da figura de um especialista, ou da contratação de uma empresa ou um consultor pode existir, mas não devem caber apenas a estes o comprometimento com a usabilidade. A preocupação com a facilidade de utilizar o sítio deve estar presente (entre outras situações):

Na concepção do sítio e de seus serviços;
Na programação da aplicação;
Na criação de funções;
No desenho das páginas;
Na estruturação das informações (arquitetura de informação);
Na redação das informações.

A total utilização e manutenção da usabilidade do sítio é possível apenas quando esta faz parte do conhecimento comum da equipe.

1.3 Os custos do desenvolvimento sem usabilidade

Problemas de usabilidade ocorrem quando pessoas encontram dificuldades para realizar alguma coisa que precisam fazer ou querem fazer com uma interface. Tais dificuldades podem ter origens variadas e ocasionar perda de dados, diminuição da produtividade, a não exploração de seções ou serviços, podendo chegar ao abandono do sítio.

O desenvolvimento de sítios utilizando a usabilidade tem como consequência comum uma redução nos custos e, posteriormente, uma diminuição no número de correções nas funcionalidades do sítio. Sítios e serviços com boa usabilidade também requerem menos treinamento, suporte e manutenção.

1.4 Usabilidade e Acessibilidade

Tanto a acessibilidade quanto a usabilidade têm como foco de atenção o usuário (cidadão) e, muitas vezes, se sobrepõe como áreas de saber.

No entanto são áreas distintas. Acessibilidade trata do acesso a locais, produtos, serviços ou informações efetivamente disponíveis ao maior número e variedade possível de pessoas independente de suas capacidades físico-motoras e perceptivas, culturais e sociais, já a usabilidade trata da facilidade de uso. Um sítio pode ser acessível, mas difícil de ser utilizado ou; ser fácil de ser utilizado, mas inacessível a parte da população.

No entanto, a acessibilidade e usabilidade são disciplinas complementares e é mais provável que um sítio com boa acessibilidade terá uma boa usabilidade, assim como um sítio com boa usabilidade será mais acessível.

1.5 Como as pessoas usam um sítio

A web não respeita limites de tempo e espaço. É um meio de inclusão social, não fazendo juízo de quem a usa.

Ao prover um serviço publico, ao fornecer informação por meio eletrônico devemos lembrar que não existe no público que irá utilizar o sítio, um cidadão igual ao outro.

Não há uma pessoa com vivência igual a outra. Em resumo, estamos lidando com pessoas:

Com níveis diferentes de conhecimento e familiaridade com computadores e internet;
níveis diferentes de interesses nos serviços e informações;
Com diferentes cargas de conhecimento e educação;
Com idades diversas em momentos diversos da vida;
Com características demográficas diversas.

A forma que as pessoas navegam um sítio é, quase sempre, bem diferente do que imaginamos. Apenas uma minoria de pessoas entrará no sítio da forma esperada.

Apenas uma parcela passará pela página inicial antes de ir para onde deseja. Muitas chegarão ao serviço desejado através de motores de busca por páginas intermediárias.

As pessoas exploram as páginas aleatoriamente e clicam na primeira coisa que acham que deve ser o que estavam procurando. Se não for, utilizam o botão “voltar” do navegador e retornam a página anterior, fazendo isso quantas vezes acharem adequado em busca do que querem. A partir daí podem utilizar a caixa de busca muitas utilizam a caixa de busca direto – sem se preocupar em ler os menus – Não encontrando o que buscam, podem sair para nunca mais voltar, buscando a forma presencial do serviço, sobrecarregando os outros canais. Em resumo as pessoas:

Exploram páginas. As pessoas não leem atentamente e sequencialmente uma página antes de passar a outra. A visualização da página é feita aos saltos, de forma aleatória, encontrando algo semelhante ao que buscam, clicam e seguem adiante (fig 1). É também importante lembrar que, quando as pessoas acessam um sitio da administração pública, elas estão com pressa e um objetivo definido. Não estão no sítio por diversão, mas com uma meta a cumprir.
Não buscam a melhor alternativa. As pessoas buscam um objetivo, independente do caminho. Quando a pessoa aprende um caminho que a leve a seu objetivo, vai repeti-lo as demais vezes, mesmo não sendo o caminho mais adequado. Aprender o caminho correto é mais trabalhoso (e menos divertido) que adivinhar um caminho qualquer.
Não buscam saber como as coisas funcionam. São raras as pessoas que leem o manual de algum equipamento eletrônico. Não importa saber como as coisas funcionam desde que elas possam ser utilizadas. As pessoas preferem supor como funciona um sitio, um serviço, baseado em seu saber anterior.
Querem qualidade e credibilidade: A qualidade e credibilidade do conteúdo é o mais importante para o cidadão. Se o conteúdo está defasado, as notícias são antigas e não há um canal de contato ativo com os responsáveis a tendência é o abandono do sítio por outros similares (no caso de conteúdo) ou por meios alternativos (no caso de serviços).
Seguem a intuição: A informação é lida de forma fragmentada e até onde o indivíduo entenda que “já sabe” como o sítio funciona. Pessoas gostam de “seguir sua intuição”.
Querem ter o controle: Estar no controle do que ocorre no sítio é importante para o cidadão. Situações onde ele não tenha o controle ou não tenha o retorno adequado das usas ações são extremamente desagradáveis.

Por fim é importante lembrar de não devemos abusar da paciência do cidadão. Quanto menos ações, campos a serem preenchidos, menos erros ele poderá cometer, menos tempo ele levará para concluir um serviço e teremos a certeza de que ele escolherá a web como seu canal de comunicação com o governo.

2. Diretrizes de usabilidade em governo eletrônico

Diretrizes são orientações para o desenvolvimento do sitio tendo como foco o cidadão.

Dependendo do autor, as diretrizes podem receber outros nomes, como: heurísticas, critérios, recomendações, etc. Existem diversas listas de diretrizes, desenvolvidas por especialistas. Uma das mais famosas é a lista de Heurísticas de Jacob Nielsen, podendo ser citadas também os Princípios de Bruce Tognazzini e os Critérios Ergonômicos de Bastien e Scapin. No Brasil temos as heurísticas desenvolvidas por Claudia Dias.

Diretrizes devem ser tomadas como ponto de partida no desenvolvimento e teste de sítios, nunca como uma receita ou lista de itens a serem seguidos. Contexto e bom-senso são fundamentais no desenvolvimento de sítios.

As diretrizes propostas por esta cartilha baseiam-se na observação concreta de problemas comuns nas páginas de instituições públicas no Brasil. São elas:

Diretriz 1 - Contexto e navegação
Diretriz 2 - Carga de informação
Diretriz 3 - Autonomia
Diretriz 4 - Erros
Diretriz 5 - Desenho
Diretriz 6 - Redação
Diretriz 7 - Consistência e familiaridade

Para facilitar sua aplicação, cada diretriz é dividida em várias recomendações.

Diretriz 1 - Contexto e navegação

A internet é um ambiente não-linear, ou seja, ela não possui um fluxo único. Cada página possui diversas entradas e saídas e o resultado disso é, por muitas vezes, a desorientação de quem usa o sítio. Por isso é importante que o sítio informe a pessoa em que contexto ela se encontra, o que a página faz e demarque claramente a navegação.

Não apenas a página inicial, mas todas as páginas devem ter claro a navegação e identidade do sítio. Muitas vezes a pessoa chega a uma página interna do sítio através de uma busca. Ela deve saber de pronto a que sítio aquela página pertence e quais as opções disponíveis. Em resumo o cidadão deve conseguir:

Rapidamente compreender o que é e como funciona o sítio;
Facilmente localizar o que busca;
Realizar os passos do serviço sem dificuldade.

Recomendações

1.1 Página inicial clara.

A página inicial do portal deve deixar claro o que é o sítio, seu objetivo e as informações e serviços nele disponíveis.

1.2 Estrutura do sítio lógica e fácil.

O sítio deve ser estruturado de forma lógica para o cidadão. Não é necessário que existam links para todo o conteúdo na página inicial, mas todo conteúdo deve ser facilmente acessado através da estrutura.

1.3 Estruturar a informação de forma lógica e intuitiva para o cidadão

Estruture criteriosamente a arquitetura da informação do sítio. Estabeleça rótulos, terminologias, hierarquia e menus de forma lógica e intuitiva para o cidadão, respeitando o seu modelo mental. Tanto a navegação global, quanto as navegações locais, devem estar localizadas no mesmo lugar, de modo padronizado, em todas as páginas. Não organize o sítio espelhando a estrutura departamental do seu órgão ou instituição. Evite empregar termos relacionados à informática ou o jargão interno e siglas da sua instituição.

1.4 O conteúdo mais importante antes da dobra

A “dobra” é um termo que tem origem no jornalismo. É o ato de dobrar o jornal ao meio para facilitar a leitura. No caso de páginas web, a dobra é a primeira rolagem. Em todas as páginas a parte do conteúdo mais importante e da navegação devem estar acima da dobra.

1.5 Elementos da identidade visual localizados sempre no mesmo lugar

Elementos comuns a todas as páginas, como logotipos, atalhos e caixas de busca, devem estar sempre no mesmo lugar.

1.6 A ferramenta de busca presente em todas as páginas

Preferencialmente no canto superior direito, de preferência de tamanho não menor que 27 caracteres, o que permite a visualização completa de cerca de 90% das buscas.

1.7 As páginas, seções ou serviços mais utilizados visíveis

As páginas mais utilizadas devem estar em fácil acesso na navegação e antes da linha de dobra. Em se tratando de páginas ou serviços que estão em níveis muito profundos, deve-se pensar em trazê-los para níveis mais superiores, ou criar atalhos para que o cidadão tenha seu acesso simplificado.

1.8 Não use páginas de transição

Não usar páginas sem conteúdo útil, de transição, de abertura (splash-pages) ou “em construção”, que apenas oneram a navegação. Apenas o que já está pronto deve ser visível e passível de ser acessado.

1.9 Documentação, tutorial e ajuda

O sítio deve fazer uso de tutoriais e auxílios à navegação, como um mapa do sítio ou índice de palavras de A a Z. Os conceitos e termos utilizados devem estar bem explicados.

1.10 Formatos especiais de arquivo e download

O download de documentos em formatos especiais ou proprietários (exemplos: Word ou PDF) deve ser limitado ao mínimo. No caso de baixa de arquivos, os links devem ser acompanhados de descrições claras e precisas sobre o seu conteúdo, tamanho e formato.

1.11 Não use janelas pop-up ou abra links em nova janela.

Janelas pop-up são intrusivas e quebram o controle da página. O mesmo ocorre com links que abrem em nova janela. A decisão deve ser do cidadão. Janelas pop-up e links que abrem nova janela também são inacessíveis aos deficientes visuais.

1.12 Busca simples e depois, avançada

A pesquisa simples deve ser ofertada em todas as páginas (a exceção das paginas de transações) e ser geral – correndo todos os campos e seções. A busca avançada pode oferecida como um link e/ou nos resultados da busca simples.

1.13 Resultados da caixa de busca

A busca deve sempre apresentar resultados para as palavras-chave mais freqüentes colocadas pelos cidadãos, mesmo que estas palavras não pertençam à terminologia oficial da instituição. Os seus resultados devem ser independentes do uso de letras maiúsculas, minúsculas, acentos, plural, etc.

1.14 Formulários amigáveis

O formulário deve ser escrito de forma amigável ao cidadão:

Posicione adequadamente as etiquetas de formulários de modo que o preenchimento dos campos seja feito em tempo e com a leitura adequada para o contexto de sua utilização;
Os campos obrigatórios ou opcionais num formulário, sempre que estes não forem unanimidade. Se possuir mais campos obrigatórios, os opcionais devem ser indicados e vice-versa;
Os rótulos com os campos no formulário. Utilizando o atributo “for” é possível selecionar o rótulo ao campo dos formulários, o que dá uma área maior para seleção, especialmente em listas de opção (radio buttons) e conjunto de escolhas (checkboxes), além de facilitar a navegação por teclado.
Tome cuidado ao aproximar botões de ação em formulários. Ações primárias e secundárias devem ser separadas para prevenir erros. Ações como Salvar, Continuar e Enviar são consideradas primárias. Ações como Limpar, Cancelar, Voltar são consideradas secundárias;
Dê o retorno no preenchimento de formulários através de validação inline, indicação para resolução de erros, progresso de preenchimento de formulários longos e término;
Comunique erros de formulário no topo, com contraste visual, indicando também ações para correção do erro e associando corretamente o campo responsável com o erro principal.

Diretriz 2 - Carga de informação

A Carga de informação é a soma de todos os elementos da interface: textos, links, ícones, funcionalidades, cores, fundos, menus. Até o menor elemento decorativo adiciona carga de informação.

O ser humano é capaz de absorver um determinado número de informações, a chamada memória de curto termo, a partir de certo ponto, o cérebro não processa algumas informações. A escolha dessas informações dá-se de forma não-consciente, dependendo das experiências de cada pessoa e dos pesos dados a cada elemento da interface.

Um carga de informação alta, diversa confunde o cidadão. Nestes casos, é mais provável a ocorrência de erros. Em caso de serviços quanto mais numerosas e complexas forem as ações necessárias para se concluir o serviço, maior a carga de informacional e a probabilidade de ocorrência de erros.

Em resumo deve-se:

Reduzir a carga de informação;
Focar a atenção do cidadão ao objetivo (tarefa) da página ou serviço.

Recomendações

1.15 Não abarrote a página inicial com excesso de informações.

A página inicial é a porta de entrada. Não devemos lotar essa porta com anúncios, banners, notícias. Deve-se dar a devida importância a cada elemento que vá estar na página. Muitas entradas resultam em dois problemas: excesso de opções e rolagens verticais.

Notícias devem existir apenas se relevantes e atualizadas;
Banners devem ser apenas os de conteúdo atual e em pequeno número;
Áreas sem conteúdo (ex: eventos) devem ser desativadas quando estiverem vazias;
A página inicial não deve exibir nenhum conteúdo antigo ou desatualizado.

1.16 Elimine elementos desnecessários das páginas

Existe a tentação de torná-la a página inicial “mais atraente” ao cidadão, incluindo nela todos os atalhos de seções, diversos filtros, notícias com fotos, animações, marcadores, ícones, linhas, frisos, etc. O que acaba, por fim, a abarrotar a página com excesso de informações e muito pouco atraente para ser explorada.

Uma página bem diagramada, com espaços para “respiro” (branco) e hierarquia clara é uma página mais atraente, a ser navegada e explorada.

Elementos desnecessários devem ser eliminados das páginas, entre eles:

Animações: animações criam um foco de atenção muito grande. Utilizar banners animados desvia a atenção do objetivo central da página. Quando mais animações a página possui, mais o ruído que estas causam;
Fundos: Fundos são suportes para a boa programação visual. Entretanto, devem ser evitados fundos excessivamente coloridos, com elementos decorativos exagerados ou berrantes, que desviam o foco do conteúdo da informação ou que prejudicam a legibilidade do texto;
: Os ícones devem claros, facilmente compreensíveis pelo cidadão e pertencer visualmente à mesma família. Teste a compreensão dos ícones junto a seu público-alvo antes de adotá-los;
Estéticos sem função específica: linhas, figuras, pontos, texturas. Quando utilizadas apenas para fins de preenchimento de espaço adicionam mais ruído a comunicação. Troque fios separadores por maior espaço em branco;
Elementos informacionais sem função específica: Muitas vezes informações são colocadas numa página apenas para “preencher espaço”. Prefira trazer o conteúdo das páginas secundárias e elimine informações sem relevância.

1.17 Elimine passos desnecessários em serviços e preenchimento de formulários

Cada ação que a pessoa necessite realizar no sítio é um erro que pode ser cometido. Assim, qualquer passo ou ação desnecessária deve ser eliminada:

Pontos, virgulas e hífens dos campos de preenchimento (ex: preenchimento de CPF deve necessitar apenas da digitação de números);
A entrada do CEP deve recuperar parte do endereço;
O campo endereço deve ter o mínimo de campos possí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;
Possibilitar entrada de dados a partir do mouse ou teclado;
Elimine entradas repetidas de dados (Estando no serviço, a pessoa não deve precisar entrar novamente com dados que ela já forneceu).

1.18 Em textos extensos, oferecer a opção de baixar o documento

Em caso de documentos extensos, como leis, decretos, deve-se fornecer uma opção para baixa e impressão desse documento, sempre junto a trecho descritivo ou texto integral em HTML.

1.19 Apenas peça os dados necessários

O cidadão não deve precisar registrar-se para ter acesso a conteúdos que, por outros meios, ele teria livre acesso. Quando necessário o registro, os dados pedidos devem ser apenas aqueles necessários para a realização do serviço. Não obrigue o cidadão a fornecer dados apenas para fins de estatística.

1.20 Peça para o cidadão converter dados, medidas ou valores;

Caso sejam necessários cálculos, o sistema deve realizá-los de forma automática.

1.21 Cidadão não deve necessitar memorizar dados

Complicados ou memorizar dados de uma página para outra. Números de protocolo, ou qualquer outro tipo devem ser fornecidos e enviado cópia por email.

1.22 A rolagem vertical ou horizontal de tela

Quando uma página possui rolagem, parte da informação não é vista. Isso pode comprometer o andamento da tarefa para o cidadão, que precisa ver e se lembrar dessa porção informação não-visivel. Deve-se dar especial atenção quando estamos tratando de tabelas e formulários.

1.23 O bom senso no numero de filtros e opções disponíveis

Excesso de opções ou filtros podem confundir. Mantenha as opções em numero razoável, descartando as redundantes.

Diretriz 3 - Autonomia

Na internet qualquer tipo de controle (não esperado) vindo por parte do sitio é indesejado. Controlar o tamanho das janelas, utilizar soluções proprietárias, desabilitar funcionalidades presentes em navegadores, são práticas que intervém no controle do cidadão.

Em resumo:

O comportamento e as funcionalidades do navegador não devem ser alterados para satisfazer necessidades das páginas;
O cidadão deve ter autonomia na utilização do sítio.

Recomendações:

1.24 Mantenha a função do botão de retrocesso (back/voltar) do navegador

O botão de retrocesso é o segundo recurso da rede mais utilizado na web (o primeiro são os links), e escondê-lo ou desabilitá-lo é um grave erro. O cidadão deve poder voltar ao ponto anterior da forma que lhe for mais conveniente.

1.25 Não crie páginas que abram e funcionem em tela cheia.

O uso de tela cheia (fullscreen) como um expediente para maior controle do desenho tira da pessoa o seu poder sobre as ações do navegador. Caso a cidadão prefira, ele pode optar por trabalhar em tela cheia, ou em qualquer outro formato, desde que do seu interesse e comodidade.

1.26 Permitir ao cidadão marcar (favoritar) qualquer página de seu interesse.

O cidadão deve ser capaz de “favoritar” qualquer página com conteúdo do seu interesse. O nome deve remeter ao conteúdo da página.

1.27 Não usar expressões como “compatível com” “melhor visto na resolução...”

Páginas do governo devem funcionar independente de plataformas ou programas.

1.28 Possibilitar ao cidadão interromper ou cancelar o processamento ou transação

O cidadão deve poder, a qualquer momento, sustar, interromper, cancelar, abandonar um processo ou transação que esteja fazendo no sitio.

1.29 É do cidadão o controle sobre a navegação.

É da decisão do cidadão o comportamento da navegação e dos links. Abrir novas janelas ou abas, torna a navegação inacessíveis, desfigura o historio e interfere nas opções de retrocesso.

Não desviar para outra página, a não ser que o cidadão assim o comande (dando ENTER ou clicando num link);
Não deve-se abrir janelas adicionais. Principalmente para avisos ou transações;
Não abrir links em novas janelas;
Evitar pop-ups publicitários.

1.30 Não usar plugins auto-instaláveis.

É da escolha do cidadão optar pela instalação de plugins. Usar plugins auto-instaláveis é uma violação ao direito de escolha.

1.31 Permitir a cópia de trechos de documentos.

Toda informação pública do governo como documentos, legislação, etc, deve ser passível de cópia. Documentos pdf e de natureza semelhante devem permitir a cópia de trechos.

1.32 Quando possível, oferecer a personalização da página.

O cidadão deve poder escolher as informações e serviços de seu maior interesse e personalizar páginas.

Diretriz 4 - Erros

Errar faz parte do ser humano. O cidadão pode não entender como proceder em determinado passo do serviço, cometer erros. Em qualquer caso, além da correção do erro, é importante dar o retorno devido ao cidadão, tanto aos erros cometidos por ele, quanto aos problemas momentâneos do sítio. Em resumo:

Toda a falha ou indisponibilidade prevista no sítio deve ser divulgada e esclarecida ao cidadão;
Todo erro cometido pelo cidadão deve ser passível de ser corrigido.

Recomendações:

1.33 As ações do portal devem ser reversíveis.

Erros cometidos devem ser passiveis de correção. O cidadão deve ser capaz de desfazer pelo menos a última ação realizada. Saber que pode corrigir possíveis erros encoraja a pessoa a explorar opções desconhecidas do portal.

1.34 Permita erros de digitação em busca.

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.

1.35 Avise toda indisponibilidade (ex: troca de servidores).

Todo evento que interrompa o andamento normal do sítio deve ser avisado, em espaço privilegiado na primeira página do sítio. Esse mesmo aviso deve ser divulgado por outros meios, como a lista de distribuição (newsletter).

O aviso não deve ser dado em janelas pop-ups, ou aberto em nova instancia (janela).

No caso de indisponibilidade imprevista em partes do sítio, deve ser avisada na página inicial e na página do serviço, ou na página de erro, de forma objetiva, clara e, quando possível, dando a previsão de retorno. No caso de queda total do sítio, uma página estática deve ser disponibilizada, pedindo desculpas pelo transtorno e, quando possível, dando a previsão de retorno;

1.36 Em formulários, mostre o formato desejado.

Em formulário, exemplifique o formato desejado. Ex: campo CPF (digite apenas os números).

1.37 Em formulários, só deixe no campo o número de caracteres desejado.

Em campos de formulário, deixa apenas o número de casas que a informação pede. Ex: data de aniversário campo com 8 posições (ddmmaaaa);

1.38 As mensagens de erro devem ser sucintas e explicativas

As mensagens de erro devem apontar o erro cometido ou a informação que falta de forma clara. Utilizar mensagens de erro sucintas, precisas, com termos específicos e vocabulário neutro, não repreensivo.

Visualmente a mensagem de erro deve estar claramente visível;
Quando útil, o código do erro pode ser fornecido junto a um texto que esse código significa e um caminho para solução. O código nunca deve ser fornecido sozinho;
Apresente a mensagem na mesma página que contém o erro e, de preferência, próxima ao campo com problemas;
Quando possível, posicione o cursor no campo com problemas, facilitando sua correção;
Fornecer mensagens de erro orientadas a tarefas, com sugestões ou instruções simples e construtivas para a correção do erro;

1.39 Não limpe o conteúdo do formulário inteiro por causa de um erro.

Páginas de conteúdo não encontrado (erro 404) devem ser claras As páginas de erro do sítio devem possuir links para a página inicial, de “Fale conosco” (para relato da página não encontrada) e contar com um campo busca./p>

Diretriz 5 – Desenho

Um bom desenho (design, programação visual) tem um impacto significativo na credibilidade e usabilidade do sítio. O desenho deve, sobretudo, respeitar o cidadão.

Um sítio legível e esteticamente agradável hierarquiza e facilita a decodificação das informações apresentadas, influenciando seu nível de satisfação durante a interação com o portal. Em resumo o desenho deve:

Trabalhar em favor do cidadão;
Seguir a função do sítio;
Auxiliar a compreensão do seu conteúdo;
Manter a clareza, simplicidade e legibilidade da informação;
Contribuir para a encontrabilidade dos itens de informação do sítio;
Garantir a facilidade de navegação.

Recomendações:

1.40 Utilizar um projeto padrão de páginas.

a identidade visual do sítio e a padronização das páginas devem levar em conta a função que cada página desempenha. Observar a:

Padronização de ícones, posicionamento dos elementos na tela, cores, logotipo e elementos comuns;
O projeto tipográfico consistente que garanta a legibilidade;
O contraste entre informação e fundo;
O esquema de cores condizente com o objetivo do portal.
Os links de hipertexto devem apresentar decoração e cores consistentes em todo o sítio.

1.41 Agrupar e hierarquizar, de forma clara, as áreas de informação.

A hierarquia e separação das áreas do sítio deve ser clara. Agrupar os diferentes tipos de informações, apresentando as mais importantes em primeiro lugar. Deve-se priorizar os serviços relevantes ao cidadão.

1.42 Usar espaço em branco para separar conteúdos ou assuntos diferentes.

o espaço em branco é a área livre deixada entre os elementos e grupos de elementos. Ele proporciona um “respiro” na navegação, mostra a relação entre elementos e criar hierarquias. O uso correto do espaço em branco entre parágrafos melhora a compreensão do texto em cerca de 20%.

1.43 Usar fundos neutros, que não comprometam o objetivo do sítio.

O fundo não deve chamar mais atenção do que a informação.

1.44 Evitar o uso de caixa com opções (scroll) ou de menus de cortina (pull-down) na navegação principal e persistente.

Menus de cortina e caixa com opções são formatos onde a informação, os nomes das seções, só aparecem se o cidadão clicar no campo e rolar verticalmente para baixo o menu, para ver todas as opções disponíveis. Outra ressalva é que alguns dos menus de cortina não são acessíveis ou são dependentes de navegador, scripts para funcionar. O uso de caixas com opções devem ter seu uso restrito a formulários.

1.45 O desenho deve estar a serviço da informação.

A função do sítio, a informação, é soberana sobre o desenho. Qualquer tipo de conformação que beneficie o desenho em detrimento a informação, usabilidade e funcionalidade do sítio deve ser abandonada:

Letras em cores com baixo contraste visual, que podem dificultar a leitura para idosos e deficientes visuais;
Estilos de letras muito rebuscados, com baixa legibilidade na tela;
Tamanhos muito pequenos e/ou absolutos de letras;
Misturar muitas fontes diferentes (limite o número de fontes);
Textos encapsulados (overflow scroll - fig 2);
Desenho encapsulado (estilo cartão postal - fig 3);
Fontes de letras em formato de imagens (bitmaps);
Textos que não podem ser selecionados com o mouse e copiados.

1.46 Elementos do desenho do sítio não devem trabalhar em benefício de uma estética particular/

O desenho é uma disciplina criativa que lida com a função, mas também com a estética, com a percepção e com as expectativas culturais das pessoas. No desenho para os sítios de instituições públicas, os objetivos maiores de uma comunicação clara e eficiente com o cidadão devem sobrepor-se a quaisquer gostos pessoais ou modismos estéticos, pois estes últimos não podem prejudicar a simplicidade, a legibilidade e a facilidade de uso.

1.47 Utilizar a animação com bom senso

A animação é um recurso valioso quando bem usado. No entanto o seu mau uso é mais comum. Animações criam um ponto focal muito forte e geralmente são utilizadas em áreas menos importantes do sítio (como banners), distraindo e, muitas vezes, incomodando. Evite animações em repetição (loop). Forneça botões de repetição e parada para que o cidadão possa controlar a exibição.

1.48 Conteúdo agradável de ser lido.

O texto deve ser agradável de ser lido. Mantenha um ritmo de texto claro. Observe:

Se o espaço entrelinhas está muito apertado ou muito aberto;
Se a mudança de parágrafo é clara;
Se as linhas de texto estão longas demais ou curtas demais;
Se o tamanho de letra está adequado.

1.49Texto alinhado à esquerda

O alinhamento à esquerda é mais fácil de ser lido que o blocado (justificado) ou ou centralizado. A leitura do texto é ritmada por sacadelas visuais, o espaço branco irregular criado no texto blocado (justificado) altera o ritmo, aumenta o tempo de leitura e cria um ruído narrativo na informação, diminuindo o entendimento.

1.50 Esquema consistente de cores e fontes.

Cabeçalhos e conteúdo devem ter uma harmonia consistente de cores e tipos de fonte em todas as páginas do sítio.

1.51 Respeitar a velocidade de conexão do público-alvo

Observe que grande parte dos cidadãos ainda tem conexão discada à Internet ou problemas de velocidade na conexão. Mesmo a banda larga pode se tornar lenta, como é comum em conexões sem fio ou em instituições educacionais (devido a compartilhamento, servidores e filtros). Otimize o tamanho das ilustrações, fotos, animações e vídeos para diminuir o tempo de carregamento.

Quando necessário, coloque um indicador da progressão do carregamento para reduzir a impaciência do cidadão.

1.52 Utilizar de forma consciente plug-ins e multimídia.

Grande parte dos cidadãos não sabe, ou não faz, a atualização de plug-ins.

Muitas empresas e instituições públicas bloqueiam a instalação de plug-ins como o flash.

Evite o uso de plug-ins e, quando existentes, ofereça sempre uma alternativa de conteúdo não-multimídia.

Diretriz 6 - Redação

A comunicação em sítios do governo é, sobretudo utilitária, visando prestar serviços e informações aos cidadãos. A redação deve levar em conta a audiência, o conhecimento das pessoas que acessam o sítio. O texto deve ser diagramado para facilitar o entendimento da informação.

Em resumo:

O sitio deve "falar" a língua das pessoas, com palavras, frases e conceitos familiares;
O texto deve ser objetivo.

1.53 Utilizar uma linguagem clara e familiar

A linguagem utilizada na divulgação das informações e orientações para realização de serviços deve ser clara e objetiva. Apenas utilizar linguagem técnica e/ou corporativa quando estas forem familiares ao público do sítio.

1.54 O texto objetivo.

Em textos, começar sempre pelo mais importante, expondo uma idéia por parágrafo. O texto deve ser direto e simples; palavras desnecessárias devem ser omitidas. As informações mais importantes devem estar nos dois primeiros parágrafos.

1.55 Dividir o texto em tópicos.

Divida o texto em pequenas unidades, pequenos parágrafos, subtítulos e listas para facilitar a exploração da página e o entendimento do conteúdo da informação.

1.56 Títulos informativos e com destaque visual.

O título é o principal marco visual e o ponto de entrada do olhar, onde a pessoa identifica o conteúdo da página. Portanto, o cabeçalho – ou seja, o título da informação, notícia ou serviço - deve ser facilmente identificado e o seu conteúdo deve ser descritivo.

1.57 Título da página explanatório e único.

O título da página, elemento "title", que aparece na barra do menu, é o que os serviços de busca e as pessoas veem primeiro. O título deve ser explanatório e de acordo com o conteúdo da página, guardando sempre relação entre o título das páginas e o título da janela do navegador.

1.58 Utilizar termos simples e claros como rótulos de menu.

Os rótulos de menu devem ser facilmente compreendidos pelo cidadão:

Não devem ser utilizados siglas, abreviações ou termos técnicos.
Devem manter consistência textual com os títulos das páginas a que se eles referem;
Os rótulos de itens de menus em todo o sítio devem ser consistentes quanto ao estilo gramatical e a terminologia.

1.59 Gramatica correta.

O texto deve passar por uma leitura e correção antes de ser publicado. Erros de ortografia diminuem a credibilidade do texto.

1.60 Use ênfase e negrit.o

Para ressaltar partes importantes no texto use os elementos HTML de ênfase "em" e negrito "strong", que atraem a atenção do leitor.

1.61 Evitar o uso de caixa alta.

Palavras escritas em caixa alta (all caps) demoram mais para serem lidas.

Diretriz 7 – Consistência e Familiaridade

O cidadão deve sentir-se bem-vindo ao entrar em um sítio do governo. O desempenho dos cidadãos de qualquer sistema interativo melhora quando os procedimentos necessários ao cumprimento da tarefa são compatíveis com as suas características psicológicas, culturais e técnicas e quando os procedimentos e as tarefas são organizados de acordo com as expectativas e costumes dos cidadãos. Em resumo:

O cidadão deve sentir-se bem-vindo no sítio;
O sítio deve ser familiar, identificado com a experiência de vida.

Recomendações

1.62 Usar convenções.

Convenções são elementos ou comportamentos comuns, que se repetem em várias páginas web, assim o cidadão não precisa reaprender o uso de cada sítio. É recomendável seguir as convenções, pois quando uma pessoa acessa um sítio ela primeiro procura por elementos e arranjos existentes em outros sítios. Algumas convenções:

Links azuis;
Links sublinhados;
Botões desenhados como botões (elementos clicáveis);
Caixa de busca no canto superior direito;
O nome (ou logotipo) do sítio estar no canto superior esquerdo.
Logotipo do sítio funcionar como link de volta a página inicial.

1.63 Usar formato de data e unidades de medida de acordo com o padrão normalmente utilizado na instituição ou país.

Muitas vezes o sistema de gestão do sítio gera datas com padrões adotados em outros países. Isso pode causar desconforto e induzir ao erro.

1.64 Planejar a estrutura do sítio de acordo com o contexto das tarefas realizadas pelos cidadãos

A estrutura organizacional do órgão ou as soluções tecnológicas não devem definir o desenho e a estrutura do sítio, que deve estar baseada nas tarefas que os cidadãos irão realizar, nas necessidades desde e nos tipos de público:

As informações e serviços do sítio devem estar organizadas segundo os eventos da vida ou interesses do cidadão;
As opções de menu devem estar agrupadas e ordenadas de maneira lógica para o cidadão. Os rótulos de menus e opções devem refletir a terminologia familiar a este.

1.65 Facilitar a navegação do sítio

Não devem existir dificuldades em navegar entre as páginas do sítio.

Evite páginas órfãs, sem qualquer indicação de opções de navegação possíveis;
O botão BACK/VOLTAR do navegador não deve ser desativado;
Os conteúdos devem ser apresentados em telas-padrão do navegador, evitando-se a abertura de outros programas com interfaces gráficas diversas;
Os termos utilizados devem manter consistência em todo o sítio;
A seleção com um clique, duplo-clique, e o desenho do cursor do mouse devem ser consistentes com os padrões do sistema operacional e dos demais sítios da Internet.

1.66 Planejar a estrutura do portal de acordo com o contexto das tarefas realizadas pelos cidadãos

A estrutura do sítio deve ser determinada pelas tarefas que os cidadãos pretendem realizar por meio do portal. A estrutura organizacional ou novidades tecnológicas não devem pautar o desenho e a estrutura do sítio.

1.67 Remeter a formulários os links de contato

Os links de contato não devem remeter a um endereço eletrônico (email) e sim ao um formulário para contato. Colocar um endereço eletrônico como link incorre na abertura de um programa, o que pode demorar – e induzir a pessoa a erro. E, é importante lembrar, que nem sempre as pessoas definiram o seu servidor de correio eletrônico na máquina que estão usando.

3. Avaliação de usabilidade

As avaliações de usabilidade permitem a concepção de interfaces que atendam as expectativas e necessidades dos cidadãos além de garantir melhores decisões de projeto e evitar custos de correções tardias. Através das avaliações é possível responder aos seguintes questionamentos:

As pessoas identificam o objetivo do sítio?
Conseguem encontrar os principais serviços e informações?
A navegação e a estrutura do sítio são claras e fazem sentido?
Os serviços oferecidos são fáceis de serem realizados?
Os formulários são fáceis de serem preenchidos?
Os objetivos do órgão com relação ao sítio, estão sendo alcançados?
Existe algum descompasso entre o que órgão pretende e o que os cidadãos esperam do sítio?
Os cidadãos recorrem muito ao botão “voltar” do navegador?
As pessoas se perdem facilmente no sitio?

As avaliações podem ser aplicadas ao sítio inteiro, em apenas algumas seções, em uma funcionalidade, ou um serviço. Podem ser realizadas em qualquer momento do desenvolvimento do sítio, mesmo antes, até da sua codificação.

Existem mais de 30 métodos de análise que podem ser implementados nos diversos estágios do projeto e do processo de desenvolvimento, podendo ser divididos em:

Métodos de investigação
Métodos de inspeção
Teste com usuários

Métodos de investigação

Utilizados nas etapas iniciais do projeto, são métodos contextuais, para identificar requisitos, obtendo informações através da indagação de pessoas e da observação destes usando o sistema. Os métodos de investigação podem ser: observação de campo, grupos de discussão dirigida, entrevistas, gravação de uso e questionário.

Observação de campo

A observação de campo consiste em visitar os lugares onde os cidadãos utilizam o serviço. O objetivo é observar para entender como é realizada as tarefas e qual o modelo mental que estes tem sobre elas. Perguntas podem ser feitas para completar a informação. É importantes que as observações de campo sejam registradas em áudio, vídeo ou relatórios, para que essas informações possam ser posteriormente recuperadas e utilizadas.

GRUPOS DE DISCUSSÃO DIRIGIDA

O grupo de discussão dirigida (focus groups) é uma técnica utilizada na pesquisa de mercado qualitativa, onde são realizadas discussões entre 6 a 9 pessoas sobre aspectos do produto (sítio) a ser desenvolvido. As discussões duram entre uma a duas horas, e devem ser coordenadas por um moderador e registradas em áudio, vídeo ou texto.

Alguns especialistas apontam falhas nesse método para coleta de informações dado que:

Há a possibilidade de um pré-julgamento de valor;
Algumas pessoas podem omitir opiniões que considerem socialmente aceitáveis ou o que acham que o moderador deseja ouvir;
Ao narrar experiências, o indivíduo pode racionalizar, omitindo fatos que considere embaraçoso ou de menor importância.

Entrevistas

As entrevistas são uma maneira direta e estruturada de se obter informações sobre as preferências, impressões e atitudes do cidadão. As questões podem ser flexíveis, adaptando-se ao que é respondido. As entrevistas devem ser registradas em áudio ou relatório textual, para que essas informações possam ser posteriormente recuperadas e utilizadas.

GRavação de uso

Consiste na instalação de dispositivos, softwares que recolham estatísticas do uso do sistema (também chamadas de logs). A gravação de uso permite que dados sejam recolhidos de um grupo grande de pessoas que trabalham em circunstancias diversas.

Questionário

O questionário é menos flexível que a entrevista, mas permite o levantamento com um grupo maior de pessoas e com respostas mais precisa, pode ser utilizado como apoio a outras formas de avaliação em todas etapas do desenvolvimento.

Métodos de inspeção

São avaliações baseadas em um conjunto de diretrizes, usualmente derivadas de estudos em IHC e, ou psicologia cognitiva. Os especialistas trabalham com uma lista de possíveis problemas e os avaliam. Uma vez diagnosticados os problemas, são feitas recomendações para solucioná-los. Alguns métodos de inspeção: Percurso Cognitivo (Cognitive walkthrought), Avaliação Heurística, Inspeção de padrões.

Percurso Cognitivo
Avaliação Heurística: uso de lista de heurísticas;
Inspeção de padrões: consistência dentro de uma família de interfaces (terminologia, cores, layout, formatos entrada/saída);

Percurso congnitivo

Método onde especialistas analisam o “caminho” percorrido na execução de uma tarefa, incluindo informações que a pessoa tem que ter na sua memória. Além da navegação é levantado o que deve ser lembrado, calculado e buscado pela pessoa.

Avaliação Heurística

Consiste em analisar a interface a partir de princípios de usabilidade conhecidos por heurísticas. São realizadas por um conjunto de especialistas (cerca de 3 a 5) que avaliam a interface de forma independente.

Cada especialista avalia a interface diversas vezes, inspecionando os elementos de diálogo e fazendo comparações com os princípios de usabilidade. É gerada uma lista consolidada de problemas, fazendo referências àqueles princípios que foram violados, com graus de severidade.

Inspeção de padrõesS

Nesse método a interface é avaliada por um especialista a partir de um dado padrão, como, por exmplo, o e-MAG (Padrão de acessibilidade em Governo Eletrônico) para verificar sua conformidade.

Testes com usuários

Testes de usabilidade são técnicas etnográficas nas quais pessoas interagem com um produto. Podem ser aplicados ao sítio inteiro, em apenas algumas seções, em uma funcionalidade, ou um serviço e a qualquer momento do desenvolvimento do sítio, mesmo antes até, da sua codificação.

Os testes são realizados em condições controladas, com objetivos definidos, num dado cenário, visando a coleta de dados comportamentais.

O ideal é testar com usuários desde o início do projeto e testar novamente durante as etapas de desenvolvimento. Cada teste deve ter um objetivo claro. E testar uma vez o sítio, com apenas uma pessoa é sempre melhor do que nunca ter testado.

Existem diversas formas de testar a usabilidade de um sítio essa cartilha não tem a pretensão de abranger todo o tópico. Existem boas fontes para a implementação de testes de usabilidade. Recomendamos a leitura do livro Não Me faça Pensar de Steve Krug e a monografia de Kátia Gomes Ferreira sobre testes de usabilidade, ambos apontados no capítulo Recursos no final desse documento.

Quando estamos testando um sítio devemos lembrar que não estamos testando as pessoas. Deve-se deixar o participante à vontade para errar, deixando explicito que o que está sendo testado é o sítio.

Os testes no ciclo de desenvolvimento

Testes de usabilidade são eficientes quando implementados como parte do processo de desenvolvimento do produto. Dependendo da etapa um tipo de teste é mais indicado que outro. A figura 4 mostra a inserção mais adequada de cada tipo de teste nas etapas de desenvolvimento mais adequadas.

Teste de exploração

Esse teste é efetuado nas etapas iniciais do desenvolvimento, na especificação de requisitos e início do desenho preliminar. Seu objetivo é conhecer o modelo mental das pessoas que irão utilizar o sítio, definindo o comportamento das funcionalidades e do desenho. O teste é realizado com uma interação intensa entre o avaliador e o participante. Um protótipo de baixa complexidade (como um de papel) pode ser utilizado.

Teste de avaliação

Esse teste pode ser realizado no início ou no meio do ciclo de desenvolvimento do produto, geralmente depois que o desenho foi estabelecido. O objetivo é verificar se os modelos conceituais foram implementados adequadamente, verificando se uma pessoa consegue desenvolver tarefas reais, identificando deficiências específicas de usabilidade. O participante navega entre as telas seguindo uma tarefa específica. São coletados dados qualitativos e quantitativos.

Teste de validação

Podem ser realizados na fase final do desenvolvimento, próximo ao lançamento. É utilizado para verificar se o sítio está em conformidade em relação a padrões de usabilidade, padrões de performance e padrões históricos. Valida também, as funcionalidades, navegação de desenho. Observam-se o tempo de execução de tarefas, recolhendo sobretudo dados quantitativos.

Teste de comparação

É utilizado para comparação de soluções, podendo ser utilizado em conjunto com outros testes. Nas etapas iniciais compara estilos de interface através do teste de exploração, nas etapas intermediárias mede a efetividade de elementos da interface.

Pode ser utilizado para comparação a sítios similares e/ou concorrentes.

Tipos de testes

Arranjo de cartões (card-sorting)

É uma técnica usada para descobrir como o cidadão classifica determinada informação em sua mente. O cidadão recebe uma série de cartões descrevendo conteúdos que serão disponibilizados no sítio e relaciona-os com cartões de rótulos, formando categorias. Enquanto aplica o teste, membros da equipe tem a oportunidade de conversar com o cidadão sobre a classificação e tomar nota. As escolhas de todos os participantes do teste são cruzadas e os rótulos adquirem uma porcentagem de concordância. Quanto maior, mais indicados para serem usados. Esse teste pode ser usado para avaliar uma taxonomia existente ou criar uma nova, variando a quantidade de cartões e a liberdade que o individuo tem para adicionar novos rótulos.

Avaliação cooperativa

Participantes e pesquisador avaliam juntos uma determinada interface. O pesquisador deve estimular os participantes a perguntar e responder questões sobre a interação dele com a interface. É uma técnica de projeto participativo.

Co-descoberta

Dois participantes que executam a mesma função num sistema devem em conjunto explorar uma interface e descobrir como as tarefas são realizadas nela. Eles devem verbalizar seus pensamentos para acompanhamento e compreensão do pesquisador.

Diário de incidentes

Os participantes devem registrar através de pequenas notas quando encontrar problemas durante a utilização da interface. Os participantes podem também anotar sugestões que possivelmente solucionem o problema. O formulário de registro pode também tentar mensurar o índice de incômodo que o problema lhe causa.

Experimento controlado

São situações fictícias, planejadas por um pesquisador. A grande dificuldade num teste como este é que os participantes podem não se comportar de forma natural durante ele, visto que as tarefas podem não ser realizadas nas mesmas condições de uma situação real. As situações podem envolver modificações de variáveis do sistema, como por exemplo, tempo, posicionamento de elementos, ambiente, etc.

Protocolo Pensar Alto

Neste método o participante do um teste terá que verbalizar seus pensamentos sobre a interface durante a execução de tarefas pré-determinadas pelo pesquisador.

Registro de conversações

Após experimentar a interface o participante conversa numa cabine fechada com uma câmera de vídeo, sobre um tópico pré-determinado pelo investigador. O participante tem, portanto liberdade para registrar seus sentimentos e pensamentos sobre a interface.

O processo de teste

O processo de teste de usabilidade passa pelas seguintes etapas:

Planejamento do teste
Escolha do ambiente de teste
Escolha de participantes
Preparo do material de teste
Condução da sessão
Questionamento final
Analise dos dados coletados
Relato e recomendações
Implementação das alterações e re-teste

1. Planejamento do teste

Antes de aplicar o teste é necessário definir o seu objetivo, por exemplo, avaliar o formulário do “Fale Conosco”. As perguntas que serão feitas durante o teste são listadas e definidas as características das pessoas a serem escolhidas como articipantes.

2. Escolha do ambiente de teste

Nessa etapa define-se o ambiente do teste e como ele será realizado. É escolhido o lugar, definindo o tipo de laboratório e o equipamento necessário.

3. Escolha de participantes

Na escolha dos participantes prefira escolher pelo perfil de comportamento/ necessidades do que por estratos demográficos. Exemplo: Se o teste é para um serviço de teleconferência o melhor é recrutar pessoas que usam ou que gostariam de utilizar esse recurso.

4. Preparo do material de teste

O material de teste consiste em guias e listas com o objetivo de orientar o avaliador durante o teste. Não é, literalmente, apenas listar as perguntas que serão feitas ao participante, mas sim fornecer informações sobre o objetivo do teste e cenários para o desenvolvimento das tarefas.

5. Condução da sessão

Durante a sessão, o avaliador tem por função deixar o participante à vontade e orientar sobre as tarefas. O avaliador não deve induzir respostas mas pode auxiliar em caso de “becos sem saída” se isso contribuir para o andamento da sessão. O avaliador também faz anotações e recebe orientações dos observadores da outra sala.

A equipe de observadores, que inclui membros da equipe de desenvolvimento e outros avaliadores, observa a sessão tomando notas. É importante que cada membro da equipe de desenvolvimento assista, pelo menos, a duas sessões.

6. Questionamento final

No final da sessão, deve-se questionar ao participante como foi a experiência.

Dispensa-se o participante e uma reunião rápida é feita entre o avaliador e os observadores para troca de impressões.

7. Analise dos dados coletados

Após o final de todas as sessões devem-se reunir todas as observações e analisar os dados coletados. Isto inclui a revisão cuidadosa das gravações realizadas (vídeo e áudio) e a análise das respostas aos questionários.

8. Relatório e recomendações

É gerado um relatório unificado com os problemas encontrados e possíveis soluções.

Se possível, este relatório deverá estar embasado com os trechos mais significativos das gravações, exemplificando os principais problemas encontrados.

9. Implementação das alterações e re-teste

A equipe de desenvolvimento implementa as soluções e um novo teste de usabilidade é feito a partir da interface corrigida.

Espaço físico

Existem várias estruturas possíveis de serem utilizadas para a realização de estes de usabilidade, a mais comum é a de utilização de duas salas (figura 5) – uma reservada aos testes e outra reservada à observação por pessoas da equipe.

Na sala de teste, encontram-se a pessoa que vai testar o sítio (participante) e um avaliador, que tem por função orientar o participante durante o teste. O avaliador não deve induzir as respostas do participante. Câmera(s) registram o que está sendo feito na tela e o comportamento do participante.

As câmeras são ligadas a outra com o monitores que mostram o que está sendo realizado no computador e as reações do participante. Os observadores assistem, mas não se comunicam com a sala de teste (eventualmente com o avaliador, se ele tiver um ponto eletrônico).

Existem outras configurações de locais de testes, alguns bem mais simples, utilizando apenas uma sala e uma câmera, dispensando laboratório com espelhos, softwares de captura de dados, etc. O importante é que o lugar permita que o participante se sinta à vontade para interagir com o sítio e que os aspectos e descobertas dessa interação possam ser observadas e registradas por um avaliador.

Com quantas pessoas testar?

A falta de informação sobre a pessoa que irá utilizar o sítio é o principal fator de falhas no desenho. Testar permite obter as informações necessárias, detectar falhas, e tomar decisões sobre o sítio.

Em um estudo Jakob Nielsen (figura 2) descobriu que testando com apenas um usuário é possível descobrir cerca de 25% dos problemas de usabilidade, com dois usuários cerca de 50% do total e testando com cinco usuários pode-se detectar cerca de 85% de todos os problemas do sítio. Com 15 usuários chega-se a um número próximo de 100%.

Não é aconselhado testar com apenas uma pessoa, devido ao custo – que cai por número de pessoas que testam o sitio (sendo ideal entre três e cinco indivíduos) – e a variação de comportamento de pessoa para pessoa. No entanto, testar com apenas uma pessoa é melhor do que não testar.

Testando com mais usuários

É aconselhado testar com um número maior de pessoas quando há grupos muitos distintos de público. Um exemplo é se o sitio será utilizado por jovens até 20 anos e por aposentados. Nesses casos é aconselhado testar 5 pessoas de cada grupo, selecionadas dentro do público-alvo.

Protótipo

O protótipo é uma ferramenta na avaliação de usabilidade que permite simular a interação do sistema. Os protótipos podem ser utilizados em qualquer uma das etapas de desenvolvimento do sítio, podendo simular desde apenas uma funcionalidade ou uma seção até o sítio inteiro.

Os protótipos devem ser desenvolvidos de acordo com o objetivo a ser alcançado ou material utilizado. De acordo com seu objetivo o protótipo pode ser classificado em:

protótipo rápido: utilizado para desenvolvimento e avaliação rápida de novos desenhos;
protótipo evolutivo: partes ou o protótipo inteiro são utilizados na construção do sistema;
protótipo modular: novas partes são adicionadas ao protótipo durante o ciclo de desenvolvimento;
protótipo horizontal: utilizado para verificar o escopo, abrange boa parte de funcionalidades e navegação do sistema, mas sem a execução dessas funções;
protótipo vertical: utilizado para testar uma parte específica do sistema, testando todas suas funcionalidades;
protótipo de baixa fidelidade: utilizado para primeiros testes, geralmente utilizando lápis e papel, simula as funções do sistema;
protótipo de alta fidelidade: protótipo com desenho, navegação e funcionalidades muito próximas ao sistema real.

Os protótipos podem ser desenvolvidos utilizando-se técnicas e materiais. Desde simples rascunhos em lápis e papel em pequena escala para explorar as possibilidades de leiaute, post-its com interfaces para verificar a navegação, vídeos para simular comportamentos, até o protótipo realizado com o mesmo material e parte das funcionalidades do sistema real:

Cenários: Os cenários são textos curtos (um parágrafo) que informam aos participantes o que devem fazer durante o teste de usabilidade. O cenário descreve as tarefas de uma maneira que retira a artificialidade do teste.
Protótipos de papel: permite grande velocidade e flexibilidade, por se utilizar materiais simples como lápis e papel. Consiste em desenhar a interface sem entrar no detalhamento estético;
Storyboards: demonstra, via uma série de desenhos e vinhetas, a situação do cidadão interagindo com o sistema;
Narrativa: a história da interação existente ou com um desenho novo;
Flowchart: representa graficamente das ações e decisões extraídas da narrativa;
Texto procedural: descrição passo-a-passo das ações do cidadão e respostas do sistema.
Vídeos: o protótipo de vídeo pode testar novas idéias, desenvolver cenários. O protótipo em vídeo pode simular ambientes multisensoriais, como a entrada e saída de dados por voz;
Simulações: são protótipos onde se incluem funcionalidades, incluem objetos interativos com comportamentos que simulam a funcionalidade do sistema;
Protótipos de programa: apresentam as primeiras versões de funcionalidades do sistema, já na linguagem de programação escolhida para seu desenvolvimento.

Trabalhar com protótipos requer um tempo considerável do projeto e deve-se mensurar corretamente os custos e o tempo de projeto com protótipos. Deve-se lembrar que algumas das características-chaves, como no caso de sistemas, a segurança e a confiabilidade, não costumam ser funcionais nos protótipos.

O custo da avaliação de usabilidade

Apesar de testes de usabilidade serem um “custo a mais “no projeto, não realizar testes de usabilidade geralmente incorre em mais custos que realizá-los.

Os problemas do sítio que só aparecerão durante seu uso acarretam, além do custo de retrabalho, o prejuízo da imagem e a credibilidade do sítio e de seu órgão. Ao não realizar testes durante o desenvolvimento do sítio há o risco de:

Inclusão de características erradas;
Omissão de características corretas;
Maior tempo gasto em discussões sobre informações básicas;
Maior tempo e custo com a necessidade de se redesenhar a interface;
Aumento na necessidade de suporte técnico;
Perda de credibilidade e prejuízo a imagem do sítio/instituição.

Diversos fatores entram no custo de uma avaliação de usabilidade. A fase do desenvolvimento em que o primeiro teste é uma das variáveis mais importantes, pois quanto mais tarde for realizado o primeiro teste, maior o custo envolvido na avaliação, maior o número de recomendações e maior o retrabalho. Outras variáveis que para determinam os custos de testes de usabilidade são:

Escopo: Quanto mais elementos a se avaliar, maior os custos, maior o tempo para recolher os dados e avaliar. Avaliar um sítio inteiro costuma custar mais que avaliar um formulário;
Equipamento utilizado: Quanto mais sofisticado o equipamento, maior o custo. Caso não exista no órgão o equipemento há os custos com aluguel ou compra;
Pessoal: Algumas empresas costumam pagar a pessoas que se dispõe a testar o sítio. Existem, também, custos com recrutamento dessas pessoas. Quanto maior o número de participantes, maior o custo;
Número de avaliadores: Quanto maior o número de avaliadores, maior o custo;

Contratação externa

Há uma diversidade muito grande de empresas que trabalham com usabilidade, possivelmente uma licitação para contratação de uma consultoria, mesmo que minuciosamente detalhada, irá render propostas com vários valores com diferenças significativas. Assim, é importante, ao contratar uma empresa de consultoria em usabilidade, observar alguns pontos:

Explicitar ao máximo o objeto pretendido: se é apenas uma avaliação, ou incluirá a aplicação das recomendações, se é (ou terá) um treinamento, etc ;
Pedir na proposta:

.A formação dos consultores – deve ser dado preferência a uma formação interdisciplinar, com pessoas de diversas áreas;

.A metodologia a ser aplicada;

.Portfólio.

Muitas vezes a empresa que desenvolve o sítio utiliza padrões de usabilidade. É importante conhecer esses padrões e a metodologia aplicada e, se possível, realizar alguns testes independentes.

4. Recursos

Livros

Não me faça pensar

Steve Krug Ed. Alta Books

Ergodesign e arquitetura da informação

Luiz Agner Ed. Quartet

Projetando a Experiência Perfeita

Felipe Memoria Ed. Campus

Usabilidade na Web

Claudia Dias Ed. Alta Books

Ergonomia e Usabilidade

Walter Cybis, Adriana Holtz Betiol, Richard Faust Ed. Novatec

Usabilidade na web

Jakob Nielsen, Hoa Loranger Ed Elselvier

Usabilidade na web

Jakob Nielsen, Hoa Loranger Ed Elselvier

Projetando websites

Jakob Nielsen Ed. Campus

Homepage Usabilidade: 50 Websites Desconstruídos

Jakob Nielsen, Marie Taihir Ed. Campus

Design de Navegação Web

James Kalbach, Bookman, 2009.

O Guia para Projetar UX

Russ Unger e Carolyn Chandler, Altabooks, 2009.

Design de Interação - Além da Interação Homem - Computador

Preece, Jennifer; Rogers, Yvonne; Sharp, Helen, Ed Bookman, 2005

Ergodesign e Arquitetura de Informação: Trabalhando com o Usuário

Luiz Agner, Ed. Quartet, 2006

e-Usabilidade

Simone Bacellar Leal Ferreira e Ricardo Rodrigues Nunes, Ed LTC, 2008

Normas

ISO 9241-11:1998 - Ergonomic requirements for office work with visual display terminals (VDTs) - Part 11: Guidance on usability

ISO 9241-151:2008 - Ergonomics of human-system interaction - Part 151: Guidance on World Wide Web user interfaces

Livros, Teses em pdf

AIPO - Libro electrónico de Introducción a la Interacción Persona-Ordenadorhttp://www.aipo.es/libro/libroe.php

Teste de usabilidade - Monografia de final de curso

por Kátia Gomes Ferreira - http://conteudo.imasters.com.br/3206/usabilidade.pdf

Design e avaliação de interfaces humano computador

Heloísa Vieira da Rocha e Maria Cecília Calani Baranauskas, Unicamp

http://www.nied.unicamp.br/publicacoes/publicacao_detalhes.php?id=40&download=1

Sítios

Gerais

Alertbox – Jacob Nielsen - http://www.useit.com/alertbox/

Usability firsthttp://www.usabilityfirst.com/

Designing interfaces - http://designinginterfaces.com

Good experience - http://www.goodexperience.com/

Web usability - http://www.usability.com.au/index.cfm

User focus - User focus - http://www.userfocus.co.uk/articles/index.html

Published papers from nigel bevan - http://www.nigelbevan.com/cart.htm

Blogs

Usabilidoido - href="http://usabilidoido.com.br

Experiencia perfeita - http://www.experienciaperfeita.org/

Luiz Agner - http://www.agner.com.br/

Ivo Gomes - http://www.ivogomes.com

Just add watter - http://justaddwater.dk/"

Usable & accesible - http://olgacarreras.blogspot.com/

O design e a ergonomia - http://design-ergonomia.blogspot.com/

Happyuser - http://happyuser.xperienceconsulting.com/

Usability Post - http://www.usabilitypost.com/

Useful Usability - http://www.usefulusability.com/

Diretizes

First Principles of Interaction Design – http://www.asktog.com/basics /firstPrinciples.html

Critérios ergonômicos de bastien e scapin – http://www.ergoweb.ca/criteres.html

Ten Usability heuristics – http://www.useit.com/papers/heuristic/heuristic_list.html

Shneiderman's "Eight Golden Rules of Interface Design" – http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html

Heurísticas para avaliação de usabilidade de portais corporativos -

http://web.archive.org/web/20071115020222/

http://www.geocities.com/claudiaad/heuristicas_web.html

Guidelines ans stanards for web usability, from Nigel Bevan – http://www.nigelbevan.com/papers/web%20usability%20standards.pdf

Checklists

Ergolist – http://www.labiutil.inf.ufsc.br/ergolist/

25- Point webSite usability by usereffect – http://www.usereffect.com/topic/25-point-website-usability-checklist

13- Design guidelines for homepage usability by Nielsen Norman Group – http://www.useit.com/homepageusability/guidelines.html

21- Point checklist for Web Site Usability by ContentClear – http://www.contentclear.com/pdf/ContentClear2-PointChecklistUsability.pdf

Ferramentas

User Interface Usability Evaluation with Web-Based Questionnaires – http://oldwww.acm.org/perlman/question.html

Guide to Low-cost Usability Tools – http://www.usereffect.com/topic/guide-to-low-cost-usability-tools

24 Usability Testing Tools – http://www.usefulusability.com/24-usability-testing-tools/

Camtasi –http://www.techsmith.com/camtasia.asp

Website Grader – http://websitegrader.com/"

Métodos e testes

The Usability Methods Toolbox - http://jthom.best.vwh.net/usability

ORGANIZAÇÕES

Dia Mundial da Usabilidade - http://www.worldusabilityday.org

ABERGO – Associação Brasileira de Ergonomia - http://www.abergo.org.br/

HCI group of the British Computer Society - http://www.bcs-hci.org.uk/

Associação Portuguesa dos Profissionais de Usabilidade - http://www.usabilidade.org/

Usability.gov - http://www.usability.gov (U.S. Government)

5. Glossário

Arquitetura de informação (AI): prática profissional que combina a aplicação de esquemas de navegação, de organização, de rotulagem e de busca com o objetivo de facilitar as tarefas do usuário e o acesso intuitivo aos conteúdos. Relaciona-se à usabilidade e à interação humano-computador. Para um aprofundamento, leia o capítulo 3 da tese de doutorado de Luiz Agner, com download disponibilizado na Internet.

Amigabilidade: substantivo utilizado em alguns contextos como sinônimo para usabilidade.

Cegueira a Banner: (Banner blindness) fenônemo observado onde pessoas que visitam um sitio ignoram banners e elementos semelhantes a esses. Uma das razões apontadas é o uso exaustivo e indiscriminado do recurso, o que banalizou e exauriu o elemento como forma de atrair a atenção ao conteúdo. Para mais informações acesso: http://www.useit.com/alertbox/banner-blindness.html

Card Sorting: técnica de pesquisa que visa a agrupar por semelhança itens de informação e criar sua hierarquia. É utilizada para descobrir o modelo mental dos usuários quanto à organização das informações em um sistema ou sítio.

Encontrabilidade: do inglês findability, refere-se a capacidade de dada informação ser encontrada pelo usuário.

Estudo etnográfico: técnica de pesquisa qualitativa proveniente da Antropologia. Um pesquisador se insere num grupo para observar e descrever o que as pessoas fazem, como se comportam e como interagem umas com as outras.

Caminho do escaneamento: (eye tracking) é um método que utiliza ferramentas que permitem seguir o trajeto do olhar do usuário, mostrando os pontos onde ele mantém maior ou menor atenção. O movimento ocular é tipicamente dividido entre fixações e movimentações. A maior parte das informações do olhar são obtidas durante as fixações, que duram, em média, 200 milisegundos durante a leitura de um texto, e 350 milisegundos durante a visualização de uma imagem.

Facilidade de uso: termo que pode ser utilizado como sinônimo a usabilidade.

Fpattern: mancha de leitura de sites descoberta durante um estudo da UseIt de Jakob Nielsen. Para mais informações leia http://www.useit.com/alertbox/reading_pattern.html

Memória de curto termo: a memória rápida ou de curto termo é aquela que recebe as informações de entrada do sistema cognitivo, armazenando as informações por um período de tempo muito pequeno, da ordem de 10 segundos. Outra característica é sua baixa capacidade de armazenamento, cerca de 5 a 9 itens de informação.

Migalhas de pão: ou breadcrumbs, mostram o caminho percorrido pelo usuário. As migalhs de pão podem mostrar 1) um caminho definido da página inicial do sítio até a página onde a pessoa está ou 2) O caminho percorrido até o momento pelo cidadão, da sua página de chegada até a página onde ele se encontra atualmente.

Navegação global: termo utilizado na arquitetura de informação. Representa o conjunto de links para as áreas-chave do sítio e normalmente está localizada no cabeçalho ou no rodapé da tela. Auxiliam os usuários a perceber onde estão e como se direcionar dentro de um site.

Navegação contextual: termo utilizado na arquitetura de informação. É a coleção de referências cruzadas que ligam as páginas a temas relacionados em outras seções.

Navegação local: termo utilizado na arquitetura de informação. É um conjunto de links que dá acesso às subseções do site.

Navegação suplementar: termo utilizado na arquitetura de informação. É exemplificada por guias, índices, mapas do site e a busca.

Sistema de busca: componente da arquitetura de informação de um sítio que define as perguntas que os usuários podem fazer e o conjunto de respostas que irão obter do banco de dados.

Sistema de organização: componente da arquitetura de informação de um sítio que determina como são apresentadas a organização e a categorização dos itens de conteúdo de um sítio. Trabalha com as formas de classificar os itens de informação, conhecidas como taxonomias.

Sistema de navegação: componente da arquitetura de informação de um sítio que especifica formas de o usuário se mover através do espaço informacional. Subdivide- se em: navegação global, local, contextual e suplementar.

Sistema de rotulação: componente da arquitetura de informação de um sítio que define a terminologia e os ícones para cada elemento informativo e para cada elemento de navegação.

Usuário: termo técnico utilizado em usabilidade para referir-se a cada pessoa que utiliza o objeto em questão por meio de uma interface. No caso, temos o cidadão como usuário e o objeto são as páginas, informações, serviços disponibilizadas eletronicamente pelo governo federal.

Padrões Web em Governo Eletrônico e-PWG

Padrões Web em Governo Eletrônico e-PWG

Programa de Governo Eletrônico Brasileiro