andré.santana [webdesign blog]

Deixando seu site fácil de navegar!

Posted on: 15 maio, 2007

Os aeroportos, grandes centros ou as cidades exigem um sistema de sinalização eficiente para auxiliar o visitante a se deslocar dentro deles. Essa regra não é diferente para um site web. Através de links, botões, cores de fundo e fotos, podemos guiar o internauta de forma mais eficaz. Para construir um bom sistema de navegação, precisamos responder às seguintes perguntas: “Onde estou?” e ” Aonde posso ir?”

Onde estou?

Assim que o internauta entrar no seu site ele tem que saber, através de uma boa sinalização, do que se trata. Afinal, o usuário poderá ter clicado num banner, num link de uma página de busca ou em alguma lista de urls. Por isso, é arriscado fugir do padrão do logotipo grande do lado esquerdo ( ou no meio, no lado direito, tanto faz🙂 ). Conheço muitos sites por aí que não mostram, logo de cara, porque vieram ao mundo. Utilizam cores que não correspondem com o produto, desprezam seu próprio logo ou então utilizam imagens que não tenham nada a ver com o produto ou serviço que oferecem.

Aonde posso ir?

O menu deve ser apresentado de forma clara. Assim o internauta poderá saber logo, sem obstáculos, como chegar a tal seção. Tudo bem, na internet o visitante é que tem o maior poder de escolha. Mas também não é o todo-poderoso. Através de cores, organização de links ou destaques você poderá influenciar sua navegação e levá-lo para onde quiser.

Se o seu site tem muitas páginas ( e conseqüentemente muitos links ), que tal criar grupos ou seções que organizem os links ligados a determinado assunto?

Mostro aqui o exemplo do site das lojas C&A. Existem duas seções básicas: Masculino e Feminino. Quando clicamos em Feminino, vêm suas sub-seções: moda, lingerie e calçado. Clicando em “moda”, temos uma navegação secundária com 21 opções diferentes ligadas ao assunto “moda feminina”.

Viu como as informações ficaram mais organizadas? Imagine se todos os links fossem mostrados logo na home do site? Seria tanta informação que ficaríamos perdidos. A C&A foi guiando o internauta até chegar ao ponto certo. Esse tipo de navegação prende mais o usuário, chegando direto ao ponto, sem riscos de confundir.

Para isso a C&A usou alguns sistemas de navegação padrão. Vejamos:

1 – Home: quando o internauta se perde, ele logo clica no logotipo do site. Já faz parte da cultura internet. ( Confesso que as vezes esqueço de colocar o link home no logotipo, mas prometo não esquecer mais🙂 ). E ficaria melhor ainda se a C&A tivesse incluído no menu o link Home ou Início para deixar a intenção mais direta.

2 – Funções globais: opções presentes em todo o site, que incluem links de ajuda, atendimento, mais informações sobre a empresa, como está seu carrinho de compras, etc.

3 – Links para outras seções: aqui, são apresentado os outros conteúdos do site, no caso da C&A, os produtos masculinos.

4 – Navegação secundária: aqui vêm os links especifícos de determinada seção. No exemplo da C&A, temos todo o conteúdo sobre moda feminina, que pode ser acessado com apenas um clique.

Princípios para uma fácil navegação

Clareza

Diferencie o seu sistema de navegação de todo o resto do site. É necessário, antes de tudo, que o usuário perceba que ali está o menu e que, a partir dali, ele terá acesso a todo o conteúdo do site. Para isso, poderá ser necessário um tratamento visual como uma cor diferenciada, palavras sublinhadas em azul ou um simples agrupamento com um título que identifique que aquelas palavras te levam a outros conteúdos.

Dê nomes aos bois de forma direta. “Não chame uma seção de “luz na escuridão” quando ela é na realidade apenas uma mera seção de Ajuda” diz a webdesigner americana Jennifer Nierderst, no seu livro “Learning Web Design”. Deixe bem claro em que seção o usuário está de uma forma bem direta para que todos entendam.

Evite utilizar ícones sem rótulo. Imagine que nem todos irão entender o que significa aquele desenhozinho bem pequenininho de um ícone. Se for utilizar, use ao lado de uma palavra que identifique o que aquele ícone quer dizer e para onde ele te levará ( rótulo ).

Consistência

O menu deve aparecer sempre da mesma forma. Se o internauta for para uma página interna e o menu aparecer diferente do menu da home, tanto no formato como nas cores, isso poderá confundir o usuário. Evite.

Eficiência

Tente adivinhar o que o seu público quer acessar primeiro. No caso de um menu vertical, coloque as opções que interessam ao seu público no topo. Não tente dificultar como fazem os supermercados, que colocam a seção de pães no final da loja só para você ser obrigado a passar por todas as seções. Na Internet é diferente. O clique do internauta é o que manda. Se você dificulta, fazendo com que o internauta clique mais, seu menu não é eficiente e, não restando mais o que fazer, o usuário clica em “fechar” e vai embora.

Além de um bom sistema de navegação, é necessário um design de interface muito bem planejado, integrando todos os elementos de navegação e informação. Até a próxima! Para o alto e avante!🙂

Por Bruno Ávila

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Seja Bem-Vindo!

@andrehsantana

maio 2007
S T Q Q S S D
    jun »
 123456
78910111213
14151617181920
21222324252627
28293031  

RSS Feeds Deliciosos

  • Ocorreu um erro. É provável que o feed esteja indisponível. Tente mais tarde.

Flickr!

Cell

Dia do Design

Geometric

Logotipo Pé do Palco // 02

Logotipo Pé do Palco // 01

Mais fotos

Blog Stats

  • 235,108 hits
%d blogueiros gostam disto: