Criando um menu de navegação vencedora Ideias e inspirações
O menu de navegação em um site é como um sinal de trânsito em uma rua ou em um diretório de nível em um shopping center. Você não pode chegar ao seu destino sem primeiro saber onde você está. Como na vida real, a navegação no web design é muito importante e desempenha um papel importante na usabilidade do site, bem como na experiência do usuário.
Hoje em dia você pode ver diversos tipos de menus de navegação com designs interessantes, criativos e incomuns. Mas como sobre a navegação eficaz em um site, como seria? como deve parecer?
Hoje gostaria de compartilhar minhas observações e conhecimentos sobre a importância da navegação no web design. Vou revelar algumas dicas simples que você pode usar para melhorar a navegação e a usabilidade do seu site. Haverá também alguns exemplos de menus de navegação eficazes para lhe dar uma idéia de como planejar seu próximo projeto.
Arquitetura de informação
O planejamento da navegação deve começar com a arquitetura da informação. É vital sentar e debater sobre a arquitetura de informações de um site. Você tem que descobrir que tipo de recursos o site oferece, o que é mais importante e o que poderia ser colocado em níveis inferiores na hierarquia de informações..
Arquitetura de informação inclui recursos, necessidades do usuário, sitemap, testes e wireframes. Você pode ler mais sobre a arquitetura da informação no artigo de Cameron Chapman em Information Architecture 101: Técnicas e Melhores Práticas.
Usando tecnologias ativadas pelo usuário
Evite usar Flash, JavaScript, jQuery ou qualquer outra coisa que possa inibir o acesso à navegação do seu site na construção de sua barra de navegação, ou pelo menos garantir que eles sejam capazes de se degradar graciosamente.
Para mais referências sobre degradação graciosa de javascript, confira este post sobre 10 métodos de retorno úteis para CSS e Javascript.
Use termos simples e fáceis de usar
É melhor usar Simples, óbvio e termos fáceis de entender do que manter os termos do setor apenas para o seu menu de navegação. Qualquer link que leve mais de um segundo ou dois para descobrir é provavelmente inadequado para uso.
Se um usuário precisar clicar em um link para descobrir o que o link leva, isso contribuirá para uma má experiência do usuário para seus visitantes.
Exemplos
Termos no menu de navegação do site da Larissa Ness são fáceis de entender e bastante comuns. Os usuários não vão achar confuso, porque eles já têm experiência com menus como este.
Aqui está outro bom exemplo de um menu de navegação de site limpo e claro com termos comuns usados, em csupport.
A agência criativa Eighty8Four usa o termo "showroom", que pode ser confuso para os visitantes. Este termo pode significar portfólio ou trabalho, mas não está claro e os visitantes não têm escolha a não ser clicar para conferir.
Padronize o design de navegação
Use o mesmo modelo de navegação em todas as suas páginas. É muito importante porque, sem um design consistente, um usuário pode pensar que está em outro site. Certifique-se de usar o mesmo modelo de navegação para que os usuários possam acessar seu site facilmente sem perder.
Bluegg, mostrado abaixo, usa um design de navegação simples e limpo que permanece o mesmo em todas as subpáginas. A única diferença é o indicador de cor, que mostra a página em que o visitante está atualmente.
Indique onde você está
É crucial deixar o usuário saber onde ele está o tempo todo. Você pode fazer isso alterando o plano de fundo do link, cor do nome da página ou transformar o texto em negrito no menu de navegação para torná-lo diferente dos outros.
Austin Eastciders usa uma cor e plano de fundo diferentes para indicar a página em que o usuário está. Este indicador também pode funcionar como uma alteração de design sutil, por exemplo, usando um fundo de navegação diferente que cria a sensação de que outros itens de menu estão em profundidade.
Cirurgia de Mídia usa uma cor mais escura como um indicador para uma subpágina aberta. Simples mas efetivo.
Use convenções da web
É tudo sobre navegação de site intuitiva e fácil de usar. As convenções da Web facilitam muito para os designers trabalharem em torno de seus projetos. A maioria dos usuários clicaria no logotipo do site para voltar à página inicial, então crie seu logotipo para fazer isso.
Se você não, você está fazendo com que eles gastem tempo para aprender algo novo ou, em alguns casos, incomodá-los por não fornecer o que eles esperam ser normas de navegação comumente aceitas.
Você pode aprender mais sobre as convenções da web aqui:
- 10 Convenções de Web Design
- Não reinvente a roda de web design
- Design com convenções da Web
Injetar Projeto coloca o logotipo no canto superior esquerdo que se encaixa em uma das convenções da web mais usadas hoje.
Adams Creation usa uma das convenções da Web mais comuns - o logotipo é colocado no canto superior esquerdo do site e vincula à página inicial.
Teste: envolva um terceiro
Sempre teste seu design de navegação com qualquer pessoa que tenha usado a Internet antes. Você pode querer trazer pessoas que não estavam relacionadas ao processo de design para testá-lo. Observe as suas preferências quando navegam através do seu site e analisar o tempo que demorou para encontrar as páginas que procuravam.
Para melhor precisão, envolver mais pessoas, coletar os dados, analisá-los e resumi-los para um melhor ajuste. Faça uma pesquisa após o teste, se for necessário. Você pode obter algumas idéias e informações inesperadas que, de outra forma, não seriam detectadas sem esse teste..
Fornecer contexto
Para ser consistente com seu conteúdo e navegação, forneça um contexto para que os usuários do site encontrem rapidamente as coisas de que precisam. Você pode colocar ícones pequenos relacionados ao conteúdo vinculado ou descrições curtas para dar uma visão geral do que a página é sobre.
Minha própria bicicleta usa ícones simples para fornecer aos usuários mais informações sobre o que eles podem encontrar em certas subpáginas.
Sarah Parmenter usa legendas curtas e agradáveis na navegação principal para fornecer algumas informações sobre as subpáginas em que a navegação principal está vinculada.
Fins de SEO
O Google gosta de navegação consistente. É bom ter uma navegação consistente não apenas para os usuários entenderem e terem a ideia de como navegar pelo seu site, mas também para os mecanismos de pesquisa indexarem seu site..
Os robôs do mecanismo de pesquisa rastrearão seu website para indexar seu site e colocar os links na página de resultados do mecanismo de pesquisa. Se você quer ser visível, preste atenção ao bom design de navegação e obtenha mais tráfego.
Scripts de navegação gratuitos (CSS e jQuery)
Aqui está uma pequena lista dos últimos menus de navegação que você pode achar úteis para seus projetos. Esses scripts tornarão a experiência do usuário do seu produto ainda melhor adicionando alguns recursos interessantes e tornando o uso prazeroso.
Roteiro vertical de rolagem de notícias baseado em XML usando HTML e jQuery: vScroller
Filtrar
Rolador de página
Portfólio Timeline
HorizontalNav
Menu de Navegação Minimalista CSS3
Efeito de navegação circular com CSS3
Efeitos de navegação de grade com jQuery
Ascensor
Crie um elegante menu de navegação CSS3
Vitrine de bela navegação horizontal
E por último, mas não menos importante, alguns menus inspiradores de navegação horizontal. Verifique esses sites incríveis e suas soluções de menu de navegação para encontrar novas ideias para seus projetos.
Ch3mical
Bloom Search Marketing Inc.
Alex Perez
Libor Zezulka
Hauska!
Ilhas Douradas
Neil Carpenter
Marc Thomas
Poliestireno 3D
Liechtenecker
Mundo da aventura
Arbutus Fotografia
OMDRL
4 pinheiros cerveja
Vinhos caçadores
Espero que você ache este artigo útil e informativo. Se você tiver alguma opinião ou se você não concordar, por favor, compartilhe sua opinião na seção de comentários.
