Atualmente a maior parte dos usuários utilizam dispositivos móveis (como smartphones e tablets) para navegar em sites e lojas. Por isso, algumas coisas se tornam essenciais para o empreendedor de sucesso, entre elas:

+ o site precisa ser RESPONSIVO

+ o site precisa ser de FÁCIL NAVEGAÇÃO

Hoje abordaremos a importância da facilidade de navegação, tanto por disponibilizar um layout intuitivo e fácil de comunicar o que sua empresa faz, valores, dentre outros, como para ir de uma informação a outra. Para fazer este último quesito, uma dica importânte é a utilização de âncoras.

As âncoras auxiliam os visitantes do site a encontrar respostas rápidas sem precisar ficar pesquisando ou decifrando o site. A âncora os leva direto ao ponto no qual querem estar, tornando a utilização do site muito mais interativa.

O que é âncora?

As âncoras são marcadores que podemos colocar em qualquer lugar no site. Eles podem ser utilizados para direcionar visitantes de uma seção para outra (como de serviços para ‘faça seu orçamento’).

Em um clique a âncora irá levá-los exatamente onde eles querem ir: topo, rodapé ou para a página de Perguntas Frequentes.

Linkar um elemento à uma âncora

É possível criar uma âncora para quase todos os elemento de um site, como um trecho de texto, uma palavra, um call to action ou uma imagem. Por isso, após configurar uma âncora, crie um link para a localização em algum elemento do site. Quem clicar no elemento vai ser direcionado diretamente para a âncora.

Assim, fica possível fazer anúncios como “20% de desconto nesses produtos” e colocar uma imagem com a âncora em uma página de produtos mais baratos.

Qual as vantagens das âncoras?

Âncoras melhoram a UX (experiência do usuário) no site. Isso auxilia o cliente a ir direto ao que quer, diminuindo o número de desistências e aumentando o tempo do usuário no site – que é uma das questões que o Google leva em consideração para estabelecer a posição da sua página.

Em sites One page, em que a rolagem é longa, as âncoras ajudam os clientes a navegar com mais rapidez. Para quem utiliza sites na versão mobile, as âncoras economizam tempo ao levá-los diretamente ao que precisam, algo importante quando se está em uma conexão 4G.

Como criar âncora?

 Vamos criar âncoras neste artigo página para servir como exemplo e facilitar a compreensão. 

Primeiramente, o menu.  Ele terá 3 links: “Topo”, “O que é âncora?” e “Qual as vantagens da âncora?”. O código deve ser incluído após o início do corpo do texto, indentificado como.

Fazendo o caminho até a âncora

A âncora

A âncora na prática

A outra forma é colocar um identificador dentro da div. Muito cuidado para não confundir com o CSS.

Na prática fica assim:

Clique aqui para voltar ao topo.

Clique aqui para ir ao tópico “Fazendo caminho até a âncora”

Conseguiu fazer? Tem alguma dúvida? Comente abaixo!

Leia também nosso artigo sobre identidade visual!