Resumo:

1. Utilize links azuis e botões do sistema. Ajudam ao usuário a reconhecer o que se pode clicar ou não.
   
2. Ofereça ao usuário a informação necessária sobre onde está e aonde pode ir de forma clara.
   
3. Ofereça guias ao usuário (1, 2 e 3, primeiro isso, logo aquilo, lhe recomendamos isto).
   
4. Os elementos que carregam a página devem ser indicados claramente.
   

Aqui estão ordenados de mais a menos aqueles elementos que claramente indicam ações de clicar e mudar de página.

• Os links em azul e os botões do sistema (não se incluem combos).
  
• Os links em outra cor que não seja azul, perdem parte da chamada de link.
  
• Os botões que não são do sistema. A aba, talvez seja um bom exemplo mais extenso, mas há outras opções.
  
• Links sem sublinhar que mudam de cor ou ficam sublinhados ao passar por cima.
  
• Fotos. O tamanho da foto ajuda que se passe por cima e se evidencie a opção de clicar. Outra opção que ajuda o usuário a clicar nas imagens, é o fato de que esteja com uma borda. Esta borda terá a mesma cor que os links, portanto ajudará ao usuário a reconhecer o link.
  
• Combos. O combo é uma ferramenta de seleção, e não de ação. Mesmo assim, não se recomenda nem para fazer seleções. O combo não é uma ferramenta recomendável, porque em geral, deixa o usuário inseguro sem saber muito bem o que acontece quando clica sobre ele. Seu uso é recomendado em formulários ou operações, mas nunca em navegação.
  
• Texto ou imagens sem sublinhar que não mudam de cor.
  

Com esta ordem recomendamos que sempre use links azuis e botões do sistema.
Como diz o título desta página, o usuário não é bobo, mas também não é adivinha e será mais fácil para a navegação se indicarmos claramente quais elementos têm links e quais não. Lembre-se que quanto mais fácil pareça, mais páginas visitará, mais banners verá, mais produtos olhará....

Um dado importante na hora de fazer botões é o tamanho dos mesmos, a relação de tamanho em relação à tela deve ser proporcional já que ajudaremos ao usuário a acertar na hora de clicar.
Outro dado importante é o de evitar os espaços em branco na navegação. Procure fazer com que os botões fiquem claramente contornados e que este contorno não se rompa. Se colocar uma imagem e embaixo um texto que explica o que é, procure fazer com que o espaço entre o botão e o texto também seja clicável.


Exemplo de bons botões:


Estes botões ordenados da esquerda à direita, são um bom exemplo de como fazer botões que funcionem.

O quadrado proporciona uma área maior de acerto para o usuário.

O círculo também dá uma área de acerto, mas é menor e o usuário costuma se apoiar nos contornos.

Se não pintarmos a área de acerto, o usuário tem que apontar bem para acertar o botão.

Exemplo de uma boa barra de botões:

Está claramente indicado a área aonde se pode clicar.

O botão indica claramente que pode ser clicado o que está sublinhado.

A separação entre botões é a mínima evitando assim zonas não clicáveis.

Não se usam ícones, não são úteis, não ajudam e só tiram espaço.


Existem casos em que os botões gráficos pesam menos que o código html. Isto é um fato demonstrado que entre o código e o peso de um gif indexado com 2 cores quase não há diferença e ademais, proporcionamos uma área maior de acerto. Esta opção, somente no caso de que o peso seja menor, só se recomenda para elementos fixos da navegação que o usuário possa armazenar em cache desde a primeira página.

Quando usarmos links de texto (azuis e sublinhados) é importante seguir as seguintes regras:

(ADVERTÊNCIA: não clique nos links, estão vazios)

Procure fazer com que a palavra linkada indique claramente o destino.

• Ver biografia. (Correto)
• Para ver a biografia clique aqui. (Incorreto)

Usar a tag de title nos links ajuda a saber o que é que vamos ver. Alguns navegadores não o lêem, mas sempre ajuda e não é incompatível.

• Ver biografia. (Recomendável)

Se o link nos dirige a outro servidor, é bom pintar o endereço.

• Ver biografia (http://dominio.com/biografia/) . (Recomendável)

Outro caso importante é quando fazemos botões em seqüência (o típico, 1, 2 e 3). Isto é útil e ajuda o usuário, já que pode servir de guia e ajuda a predizer seu caminho.
O que se recomenda nestes casos, é deixar o link aberto a todo os botões e não obrigar o usuário a utilizar ou preencher o passo 1 para ver o passo 2. Em muitos formulários se utiliza este sistema de 1, 2 e 3, mas não deixa ver o conteúdo do 2 ou do 3 até que se preencha o 1. É melhor deixarmos todos abertos para que o usuário explore e não encadearmos os passos obrigando o usuário a utilizar todo o sistema.