Os usuários não são adivinhas

Neste artigo indicaremos quais elementos ajudam o usuário a navegar e quais não. Ademais, tentaremos indicar que elementos ajudam a predizer ao usuário seu destino ao clicar um link.

Por César Martín


Publicado em: 09/3/06
Valorize este artigo:
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:
exemplo de botões que ajudam o usuário a navegar

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:
    exemplo de uma barra de botões que ajudam o usuário a navegar

  • 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.

    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.
    Se o link nos dirige a outro servidor, é bom pintar o endereço.

    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.






  • Usuários :    login / registro

    Manuais relacionados
    Categorias relacionadas
    O autor

    Home | Sobre nós | Copyright | Anuncie | Entrar em contato