Uma das teclas que sempre estou batendo aqui no blog é a referente à navegabilidade. Essa não é uma cisma minha, é uma recomendação de profissionais de Webdesign e especialistas no ramo. A boa navegação faz parte da experiência do usuário, sendo assim, é um elemento de grande importância no desenvolvimento do site. Ela está intimamente ligada ao profissionalismo do seu projeto, que será observada pelo visitante, assim que ele navegar pelo site.
Adicione setas com função “Próxima página” e “Página Anterior“
Uma coisa que pode fazer seu visitante fechar a página e nunca mais querer voltar, é ele se sentir “preso”, ou perdido, sem saber de onde veio e para onde vai. Para evitar esse contratempo, o menu de navegação na barra superior já é mais que suficiente.
Porém, trazer mais opções a seu visitante pode, não somente facilitar a navegação, mas também incentivá-lo a percorrer todo o site e conhecer melhor o seu negócio/serviço/produto ou assunto.
Acesse aqui e veja um exemplo de setas com esta função.
Como fazer?
É bem simples adicionar setas de navegação no site.
O primeiro passo é encontrar as setas que serão mais convenientes a seu projeto. Por exemplo, se seu site tem cores predominantes de cinza e vermelho, não faz sentido colocar setas verdes ou azuis, irá causar amadorismo.
Para encontrar ícones de setas que combinem com seu site, pesquise em sites que ofereçam ícones, de preferência, sem fundo. Uma dica é ler o post “Baixe diversos ícones grátis“, para saber onde encontrar os melhores ícones.
Após encontrar o elemento, abra seu editor do Wix e clique no botão “Adicionar“, escolha “Imagens” e selecione a opção “Imagem“.
Feito isso, clique sobre ela e escolha a opção “Trocar Imagem“:
Selecione o ícone de seta que você baixou, através da opção “Upload de Imagens“, que você envio ao Gerenciador de Imagens:
Agora arraste a seta para o canto direito ou esquerdo, conforme a orientação do objeto. Repare que uma mensagem irá aparecer, informando que você está inserindo dados fora das gridlines. Não se preocupe, pois essa função de navegação através de setas será desnecessária para dispositivos móveis.
Feito isso, insira um link para o qual a seta irá direcionar. Informe uma mensagem que irá aparecer quando o usuário passar o mouse por cima da imagem. Pode ser uma informação genérica, como: “Próxima página” ou o nome da página a qual o link está direcionando.
Para inserir essa informação, clique sobre a imagem, depois em “Configurações” e edite o campo “Título“, escolha também a link da seta:
O básico já foi feito, agora vem a parte mais trabalhosa, que será fazer isso para todas as páginas. Recomendo que ao fazer o procedimento acima para os dois lados (Próxima página e Página Anterior), copie e cole os dois ao mesmo tempo, mudando apenas os links de cada seta.
Essa dica vale para qualquer site?
Não. Essa dica não é para qualquer tipo de site. Ela se encaixa melhor em websites mais curtos, ou seja, que ofereçam pouca informação na página inicial e nas outras páginas, quando cada página serve como complemento da outra.
Um exemplo de site que seria ideal para essa aplicação é este aqui.
Outro exemplo, agora para um site que não seria uma boa ideia ter esse tipo de aplicação, é este aqui.
Repare a diferença na forma como as informações são exibidas nas páginas, uma é mais resumida, outra tem maiores opções de navegação.
É isso. Espero que essa dica simples sirva para que você possa dar mais opções de navegabilidade e usabilidade em seu projeto.
Se tiver dificuldades, comente abaixo.
Olá,gostaria de saber como foi feito o início desse site que vocês fizeram http://criarsitewix.wix.com/templatearquitetura
No caso a imagem da home que vai diversificando com várias imagens.
Também gostaria de saber qual menu foi usado.
Obrigado
Olá Rony,
Esse elemento é uma galeria em Faixa, saiba como adicioná-la em seu site aqui.
O menu foi estilizado individualmente, é só aplicar estilos.
Abraço!
Muito legal!!