Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.

Caso pretenda saber mais, consulte a nossa política de privacidade.

Conteúdo e Navegação

Conteúdos

Conteúdos: este é o elemento mais importante de uma página de internet.

Uma das principais preocupações que se deve ter em conta na criação de uma página da internet é apresentar os conteúdos de forma clara.

Os textos devem ter um tipo e tamanho de letra confortável e adequado a uma leitura simplificada. Também os espaçamentos entre linhas devem permitir uma leitura fácil e que não canse a vista.

Os conteúdos são organizados e apresentados de forma a tirar partido dos espaços em branco, com o objetivo de simplificar a interface, melhorando a legibilidade e a procura de informação na página.

 

Consistência visual

A informação relevante e os itens clicáveis (blocos de navegação principais e secundários) devem encontrar-se constantemente nos mesmos sítios de forma clara e previsível.

consistencia visual

 

Desta forma, à medida que os utilizadores exploram a página de internet, conseguem antecipar o local da informação e tomam a iniciativa de pesquisar os conteúdos, mesmo antes destes carregarem.

Uma vez constante a localização dos itens, os utilizadores habituam-se a essa lógica navegando de forma mais eficaz e intuitiva.

As hiperligações da navegação na página (a navegação global) devem diferenciar-se dos outros elementos de navegação (ex: navegação numa subcategoria do menu) e devem encontrar-se sempre no mesmo sítio.

consistencia visual

 

Os utilizadores aprendem a compreender melhor a estrutura da página se for criado um sistema de navegação comum constante em todas as páginas.

 

Conteúdos de texto

O texto deve manter-se coerente em todas as páginas. Por exemplo, elementos como números de telefone e/ou códigos postais, devem ter um aspeto semelhante em todas.

Exemplo:

- números de telefone, se os números tiverem o aspeto 123 456 789, então todos os números devem ser seguir essa regra e não outra como 12 345 67 99 ou 123456788.

 

A consistência visual dos textos implica também a consistência na utilização de tipos e tamanhos de letras, os espaçamentos, as cores nos títulos, rótulos e a localização dos títulos, textos e imagens em todas as páginas.

Esta constância tem o intuito de:

- Conseguir que os utilizadores cheguem mais depressa à informação;

- Evitar erros durante a navegação pela página;

- Aumentar a satisfação dos utilizadores;

- Reduzir a curva de aprendizagem dos utilizadores do site.

 

Uniformizar ações

As opções que os utilizadores podem realizar na página, devem estar de acordo com a forma como as executam noutras páginas ou até mesmo na vida real.

Desta forma, idealmente, não precisam de memorizar nenhuma informação (mesmo que seja momentânea) e escolhem as opções de forma mais rápida.

Por isso, é essencial que os elementos responsáveis por realizar ações se apresentem sempre da mesma forma e com o mesmo tipo de funcionamento.

Um bom exemplo disso é que as hiperligações devem aparecer sempre com o mesmo aspeto e corresponder sempre à mesma resposta visual, a cada passagem do rato, de uma forma constante em e todas as páginas.

hiperligações

 

O carrinho de compras nos sítios de comércio electrónico é um exemplo da utilização de uma metáfora do quotidiano para simbolizar uma ação virtual. Tanto na realidade como na internet, o utilizador adiciona os produtos ao carrinho de compras e por fim efetua o pagamento.

Tendo surgido com o propósito de facilitar a curva de aprendizagem do utilizador, hoje em dia é uma referência transversal e uma prática de usabilidade recomendada para uma boa experiência de compra online (que tanto se pode aplicar a produtos de supermercado ou a livros).

 

Reconhecimento (affordance) e coerência

Os utilizadores entendem certas sequências de comportamentos e concretizam-nas melhor quando estas podem ser repetidas sem terem que pensar. O termo affordance, cuja tradução aproxima poderá ser “reconhecimento”, corresponde ao potencial que um objeto tem de sugerir ao utilizador a informação de como este pode usá-lo.

O conceito de affordance também pode ser aplicado nas páginas da internet. Da mesma forma que uma maçaneta de uma porta sugere ao utilizador a ideia de que se for girada pode abrir essa porta, a aparência de um objeto numa página web pode também sugerir a maneira como este pode ser usado.

O objetivo é que o utilizador percepcione, através da experiência de navegação da página, que um item com um aspeto particular realiza apenas uma determinada ação.

Assim, as opções dos menus devem ser sempre coerentes no que diz respeito às ações que resultam do seu clique de forma a evitar que um item da página seja utilizado para realizar ações diferentes.

Uma vez reconhecido o objecto, o utilizador interioriza que um item ou figura do site com  um aspeto particular uma vez clicado realiza sempre a mesma ação.

Assim que esta lógica é assimilada pelo utilizador, ele nem precisa de ler o que está escrito no botão.

As opções destrutivas (hiperligações para apagar, remover ou cancelar algo) devem ter sempre um aspeto diferente de forma serem distinguíveis. Por norma aparecem a vermelho.

Esta distinção é importante para que o utilizador crie a affordance de que todas as ligações que estiverem a vermelho resultam em ações de perda ou remoção de dados. Desta forma ele será mais cuidadoso das próximas vezes que encontrar ligações com uma aparência semelhante evitando carregar nelas por engano.

 

Versão para impressão

As páginas da internet devem estar preparadas para que os conteúdos sejam lidos online e no papel.

Se o artigo for longo a probabilidade de os utilizadores resolverem imprimi-lo é maior do que a de o lerem online.

As razões que levam os utilizadores a imprimir páginas da internet são as seguintes:

- A necessidade de fazer “scroll” (ato de descer a barra vertical do lado direito da janela de navegação com o rato) para ler o artigo na íntegra;

- Querer guardar o artigo para o ler mais tarde;

- O documento pode ser demasiado denso criando a necessidade de o sublinhar e escrever apontamentos.

Por estas razões, a opção de impressão deve ser sempre facultada numa página da internet.

Esta opção deve ser feita com uma folha de estilos CSS, especificamente para impressão em vez de usar uma ligação que abre o mesmo conteúdo apenas numa versão diferente (otimizada para impressão). 

No que respeita à impressão, um ficheiro CSS garante ao utilizador a capacidade de o fazer diretamente do menu “imprimir” do navegador da internet.

O utilizador pode inserir os estilos para impressão por intermédio de um ficheiro CSS independente ou inclui-los no ficheiro CSS que engloba os estilos todos da página.

Esta ação vai reduzir o número de pedidos ao servidor, diminuindo também o número de ficheiros CSS externos que são carregados.