Navegação e Feedback

É sempre fornecido feedback sobre as ações do utilizador
O utilizador deve receber sempre feedback imediato sobre as suas ações, de modo a saber que o sistema recebeu o seu comando e o está a processar. Este feedback pode ser fornecido de várias formas: quando o utilizador passa sobre um link (a:hover); quando o utilizador clica num link (a:active); quando o utilizador navega com o teclado (a:focus); quando o utilizador está a preencher campos de formulários (input[type=text]:focus, textarea:focus); quando o utilizador clica num link que abre na mesma página (#id:target); e/ou quando a ação desencadeada pelo utilizador demora a ser processada (barra de progresso, icone de "loading" ou outra informação que dê a sensação de que a ação está a decorrer e que o utilizador deve esperar pela sua finalização).

É fornecido feedback sobre a localização do utilizador
Devemos informar sempre a localização do utilizador, preferencialmente através de um feedback visual claro no menu, indicando a secção em que o utilizador se encontra. Esta informação pode ainda ser complementada com navegação do tipo "breadcrumb" no caso de haver mais de 2 níveis hierárquicos de navegação.

Os títulos dos links e menus são claros e percetíveis
Os textos nos menus devem ser claramente percetíveis de forma a que o utilizador consiga perceber à partida quais os conteúdos que irá ver se clicar num determinado link. Sempre que possível deve ser evitado o uso de abreviaturas nos menus principais.

Os itens clicáveis têm aspeto clicável e diferente do resto do conteúdo
Os itens clicáveis devem ser claramente distinguíveis dos restantes itens. Os links no meio do texto devem ser imediatamente identificáveis como tal e não se devem confundir com o resto do texto. Uma vez definido o aspeto dos links, esse aspeto deve ser mantido idêntico em todas as restantes páginas do site.

Os itens não clicáveis não se parecem com links ou botões
Deve ser evitado o uso de textos sublinhados quando os mesmos não contêm links. Adicionalmente, no meio do texto, não devem ser usadas cores diferentes em palavras, frases ou parágrafos. Deve ser mantida uma consistência em que o texto mantém sempre a mesma cor ao longo de todas as páginas, pois o uso de texto numa cor diferente pode ser também associado à existência de um link para outra página. Mais grave ainda é usar a mesma cor escolhida para os links em texto que não é link (no caso de não se usar links sublinhados convém identificá-los com uma cor/aspeto diferente do resto do texto).

O texto dos links faz sentido quando lido fora do contexto
Os utilizadores devem poder olhar para os links e automaticamente perceber algo sobre o seu destino mesmo antes de clicarem. O uso de termos como "clique aqui" pode ser bastante contra-produtivo e quando lido fora do contexto não proporciona informação adicional.

Não há links quebrados
Os links devem ser testados de modo a que não haja links quebrados (para páginas inexistentes, ou para páginas incorretas)

Existe padding suficiente nos links de paginação
Nos links de paginação, deve ser criado um espaçamento extra (padding) à volta de cada link. Isto facilita a navegação uma vez que os links colocados apenas num caracter se tornam demasiado estreitos e difíceis de clicar. Ao criar este espaçamento extra aumenta-se a área clicável nos links e ao mesmo tempo dá-se um melhor feedback visual ao utilizador.

Layout

As páginas são consistentes ao longo de todo o website
A informação importante e os itens clicáveis (blocos de navegação principais e secundários) devem ser colocados sempre nos mesmos locais ao longo de todo o website.

Existe uma folha de estilos específica para impressão
O site deve estar preparado para que os conteúdos possam ser lidos online ou em papel. Segundo alguns estudos, a razão pela qual os utilizadores optam por imprimir um artigo ou ler online é o tamanho do mesmo. Quão maior for o tamanho do artigo, maior é a probabilidade dos utilizadores optarem por imprimi-lo em vez de o ler online. Assim, deve ser sempre fornecida a opção de imprimir os conteúdos de uma página web. Essa opção deve ser efectuada através de uma folha de estilos (CSS) específica para impressão e não através de um link que abre o mesmo artigo numa versão diferente (otimizada para impressão).

Não são definidas alturas fixas para os elementos
É importante que o aspeto gráfico não limite os conteúdos e que cresça consoante o aumento dos mesmos ou o aumento do tamanho do texto. Assim, os elementos gráficos não devem ter alturas fixas, pois os conteúdos que lá irão ser colocados dentro podem crescer mais do que a altura definida à partida, quebrando assim o layout.

Os ícones usados são consistentes com as ações que executam
Os ícones devem representar sempre as mesmas ações e não devem ser reaproveitados para outras ações diferentes ao longo do website.

Não são usadas imagens decorativas no meio do HTML
Deve ser evitado o uso de imagens decorativas no meio do HTML (ex: cantos arredondados, imagens de espaçamento, etc). Todos os elementos relacionados com a apresentação/decoração devem ser incluídos via CSS. Por outro lado, as imagens que transmitem informação importante ou que fazem parte do conteúdo devem ser incluídas directamente na página através da tag IMG e não como imagem de fundo de uma DIV.

Legibilidade

O espaçamento entre linhas foi aumentado para melhorar a legibilidade
Deve ser mantido um espaçamento entre linhas mínimo de 1.4 pontos nos blocos de texto dos conteúdos (textos e artigos). Um maior espaçamento entre linhas ajuda a facilitar a leitura do texto e a reduzir a sensação de cansaço dos olhos após a leitura de textos compridos no ecrã. Este espaçamento pode ser facilmente adicionado através de uma linha de CSS: line-height:1.4;

A informação crítica (que requer a atenção do utilizador) tem destaque suficiente na página
A informação crítica pode ser de vários tipos, mas normalmente está relacionada com informação sobre conteúdos alterados na página ou validação de dados introduzidos pelo utilizador em formulários. Podem ser avisos, informações, ou erros. Não se deve abusar do efeito de highlight uma vez que ele é mais eficiente quando usado poucas vezes na página. Num site em que constantemente o utilizador é confrontado com texto highlight perde-se facilmente o efeito de chamar a atenção do utilizador.

Só são usados blocos de texto a bold para destacar informação relevante na página
Deve ser evitado o uso excessivo de texto a bold. O texto a bold deve ser usado apenas para dar destaque a determinadas palavras ou frases. O uso excessivo faz com que o ênfase que queremos dar aos elementos que destacámos perca o seu efeito. Se tudo está destacado, nada sobressai.

Existe um contraste suficiente entre a cor dos textos e a cor de fundo
A cor usada nos textos deve fazer um contraste suficiente com a cor de fundo para garantir uma boa legibilidade. Um mau contraste entre as duas cores pode tornar os textos ilegíveis para uma boa fatia da população, mesmo para pessoas com visão “normal”.

Formulários e Mensagens

Os itens de preenchimento obrigatório são distinguíveis dos restantes
Os utilizadores devem conseguir distinguir claramente os campos em que o preenchimento é obrigatório dos restantes campos. Hoje em dia, a maior parte dos websites usa um asterisco à frente do nome do campo para os identificar como obrigatórios; outros websites usam a palavra "obrigatório" em vez do asterisco. Ambas as soluções são válidas, mas o uso de um asterisco obriga a ter uma legenda no topo do formulário para indicar que os campos marcados com * são de preenchimento obrigatório.

As mensagens de erro estão junto dos elementos que contêm o erro
As mensagens de erro devem estar indicadas junto aos campos que contêm o erro e não apenas no topo ou no final do formulário. Isto permite contextualizar melhor os erros e ajuda a perceber onde é que os utilizadores têm de os corrigir.

As ações principais são claramente distinguíveis das ações secundárias nos formulários
Tem de haver uma diferenciação visual entre as ações principais e as ações secundárias de modo a evitar potenciais erros por parte do utilizador. Esta diferenciação também ajuda a perceber claramente qual a ação que confirma e qual a ação que cancela o formulário.

Os formulários estão a funcionar e enviam para os recipientes corretos
Os formulários devem ser todos testados e as contas de receção dos dados devem ser verificadas para confirmar que os dados foram recebidos com sucesso.

A pesquisa está a funcionar e as mensagens de erro são adequadas
O formulário de pesquisa deve devolver resultados para as pesquisas efetuadas e quando não há resultados deve ser mostrada uma mensagem a indicar que a pesquisa não devolveu resultados.

Ajuda

Existe ajuda contextual nas interações mais complexas
Uma vez que a maior parte das pessoas não costuma ler as intruções/ajuda antes de começar a usar um sistema, a forma mais útil de ajudar os utilizadores a navegar e a ultrapassar situações que podem ser mais complicadas é fornecer ajuda contextual, na altura certa e no local certo, onde sabemos que os utilizadores vão necessitar dela.

As mensagens de erro ajudam a resolver o problema
As mensagens de erro devem ser claras e devem ajudar o utilizador a corrigir o erro. Uma mensagem do tipo: "Ocorreu um erro ao preencher o formulário" não ajuda em nada a saber a razão pela qual ocorreu o erro nem como o corrigir.

Redes Sociais

Foram adicionadas as tags "Open Graph"
Devem ser adicionadas as tags Open Graph no início de todas as páginas de conteúdo que permitem indicar uma série de parâmetros sobre o conteúdo da página e que serão usados nas partilhas nas redes sociais.

Responsive

O site foi testado em dispositivos de vários tamanhos
Quando se desenvolverem websites responsive, os mesmos devem ser testados em vários dispositivos com ecrãs de tamanhos diferentes para confirmar que os layouts são corretamente aplicados.

Performance

Todos os ficheiros estáticos foram minificados e comprimidos
Todos os ficheiros estáticos (ex: CSS, JS e HTML) devem ser minificados e comprimidos. Isto permite poupar bastantes KB sempre que as páginas são carregadas.

Os conteúdos foram optimizados para mobile
É importante garantir que os conteúdos que um website responsive carrega estão otimizados para serem consumidos nestas circunstâncias. Isto inclui servir imagens mais leves, substituir elementos Flash (caso existam) por equivalentes em HTML5 (ex: players de vídeo) e reduzir os elementos decorativos ao menor número de itens e ficheiros possível.