Padrões de navegação para dez tipos comuns de sites
A navegação é um dos aspectos mais importantes de qualquer site. Sem boa navegação, um site se torna inútil para os visitantes. Eles não conseguem encontrar as informações de que precisam e, em vez disso, procuram sites concorrentes. É vital que seus sites sejam fáceis de navegar se você quiser ser um designer de sucesso.
iBut não há soluções de tamanho único para a navegação. O que funciona muito bem em um site de notícias pode não funcionar bem em um site pessoal. Algo que é incrivelmente fácil de usar em um blog pode ser frustrante em um site de comércio eletrônico.
Abaixo estão dez tipos comuns de sites, com sugestões para os tipos de padrões de navegação que funcionam bem para cada um.
Há também exemplos para lhe dar uma ideia melhor do que estamos falando. Sinta-se à vontade para compartilhar mais ótimos exemplos nos comentários!
Todos os sites
Existem determinados padrões de navegação que funcionam em praticamente todos os sites. Em vez de refazer as mesmas informações em cada uma das categorias abaixo, vou incluí-las aqui.
O primeiro padrão é navegação por abas. As guias são perfeitamente adequadas para navegação, porque psicologicamente elas lembram os visitantes das guias de papel e navegam para uma nova seção de um bloco de notas ou fichário, algo que botões ou links de texto simples não fazem. As guias são quase sempre o método preferido para estilizar seus links principais de navegação, embora, é claro, funcionem melhor quando há um número limitado de links em um menu.
O segundo padrão é a navegação de cabeçalho. Se o seu site tiver um cabeçalho (e a maioria dos sites o fizer), a navegação pelo cabeçalho será uma boa ideia. Os visitantes estão acostumados a olhar para o cabeçalho dos links de navegação. Esse comportamento pré-determinado torna mais fácil para você tornar seu site mais fácil de usar, localizando sua navegação no cabeçalho ou próximo dele.
O padrão final que se aplica a praticamente todos os sites é a navegação de rodapé. Muitos usuários (embora não todos) procurarão um link no rodapé se não conseguirem encontrar o que estão procurando em sua outra navegação. Muitas páginas básicas muitas vezes são vinculadas a partir de um rodapé, incluindo links "sobre", "contato" e "sitemap", independentemente de estarem vinculadas a outra parte da navegação ou não.
1. Blogs
Os blogs geralmente têm um grande volume de conteúdo, em ordem cronológica inversa. Isso apresenta um quadro lógico para a sua navegação, bem como alguns desafios únicos, dependendo do tipo de blog.
A maioria dos blogs usará uma combinação de paginação (ou rolagem contínua), uma página de arquivamento, navegação de barra lateral para categorias e / ou tags e, possivelmente, navegação de cabeçalho e rodapé também. É importante pensar exatamente em como os visitantes provavelmente desejam acessar o conteúdo em seu blog.
Por exemplo, um blog pessoal pode não precisar de navegação de categoria ou de tag fora dos links nas informações meta de cada postagem. Nesses casos, você deseja que os visitantes acessem o conteúdo em ordem cronológica inversa, em vez de ficar pulando por assunto. Um blog de tópicos, por outro lado, precisa ter navegação de categoria e tag, porque os visitantes provavelmente procuram informações sobre assuntos específicos dentro do tópico geral.
No mínimo, os blogs devem incluir navegação para se mover cronologicamente através do conteúdo (paginação, links próximos / anteriores ou rolagem contínua), bem como navegação de cabeçalho ou barra lateral para páginas específicas fora da página principal do blog.
Os blogs de tópicos (e às vezes corporativos) também devem incluir menus de categoria ou tag na navegação, no cabeçalho ou na barra lateral. Os blogs particularmente grandes também devem considerar a implementação de uma função de pesquisa, para facilitar aos usuários encontrarem rapidamente exatamente o que estão procurando. Apenas certifique-se de que a função de pesquisa funcione como pretendido e realmente exiba todos os resultados relevantes.
Ecoki , abaixo, inclui categorias de nível superior em sua navegação de cabeçalho, com navegação para páginas importantes em uma barra de navegação de cabeçalho secundária. É um layout eficaz que enfatiza claramente os links mais usados.
2. Sites de notícias
Os sites de notícias são semelhantes aos blogs, pois geralmente apresentam histórias em ordem cronológica inversa. Os sites de notícias geralmente são altamente categorizados e têm uma arquitetura de informações mais complexa do que muitos outros tipos de sites. Por causa disso, seus padrões de navegação costumam ser mais complexos.
A chave não é tornar a navegação mais complicada do que precisa ser. Menus drop-down e fly-out são boas maneiras de lidar com menus maiores sem encher a página. Se você olhar para os sites de notícias maiores (como o Google Notícias, por exemplo, abaixo), eles dividem as notícias em categorias amplas como Política, Local, Mundo, Esportes, Entretenimento, etc. Quais categorias você usa dependerão se o site é um site de notícias gerais ou um site de notícias.
Tags também podem melhorar substancialmente a navegação. Ao marcar cada história, fica mais fácil para os usuários encontrar histórias relacionadas, sem criar uma estrutura de categoria complicada ou inchada. É uma boa ideia não apenas incluir links de tags em cada artigo, mas também incluir uma lista de tags ou uma tag cloud em algum lugar (somente incluir tags populares pode ser uma boa ideia para sites com centenas de tags).
Vincular inline nos artigos melhora muito a experiência do usuário. Muitos dos maiores sites de notícias fazem isso, permitindo que os usuários obtenham acesso imediato a todos os artigos sobre um tópico. É muito semelhante à inclusão de tags, mas em vez de uma lista no início ou no final do artigo, os links estão no próprio texto.
3. sites de comércio eletrônico
Os sites de comércio eletrônico às vezes são incrivelmente complexos e possuem centenas (ou milhares) de páginas individuais para produtos e outras informações. Por esse motivo, a maneira de lidar com a navegação é vital para a experiência do usuário e para a linha de fundo. Sem uma excelente estrutura de navegação, os visitantes de um site de e-commerce terão mais dificuldade em encontrar os produtos que estão procurando, o que significa que há uma boa chance de que eles voltem para os concorrentes por frustração.
A principal coisa que todo site de comércio eletrônico com mais de um punhado de produtos precisa é de um bom sistema de busca. A pesquisa assistida é fundamental, em que os usuários podem não apenas pesquisar por palavra-chave, mas também refinar seus resultados com base em itens como preço, tamanho, categoria ou outras métricas (dependendo de seus produtos específicos).
A navegação por categoria também é obrigatória para usuários que desejam navegar. Dependendo do uso de subcategorias, a navegação por trilha de navegação também pode ser uma boa ideia (se o seu site tiver mais de dois ou três níveis de profundidade, os breadcrumbs podem melhorar a usabilidade).
Dar a seus visitantes várias maneiras de encontrar os produtos que desejam é uma ótima maneira de aumentar as vendas, mas certifique-se de que cada método esteja exibindo todos os produtos relevantes. Se os visitantes descobrirem que a pesquisa retorna um conjunto de produtos enquanto a navegação retorna um conjunto diferente, isso só levará à frustração.
o Blik O site abaixo é um ótimo exemplo de um site que usa uma barra lateral com filtros para refinar os resultados do produto. É o padrão de pesquisa orientada, sem a aparência de pesquisa.
4. Sites informativos e de referência
Sites de referência geralmente têm uma coisa em comum: uma tonelada de informações em muitas páginas. Isso dificulta a criação de qualquer tipo de menu padrão. As categorias podem ser úteis para a navegação, mas quando você começa a ter milhares, dezenas de milhares ou até milhões de páginas (como a Wikipedia), o sistema de categorias é quebrado. Além disso, a maioria das pessoas acessa sites de referência para uma finalidade específica e não para navegar, o que torna as categorias não particularmente úteis.
É vital que os sites de referência tenham excelentes recursos de pesquisa. A pesquisa guiada, bem como as usadas em sites de comércio eletrônico, também pode ser útil, especialmente se usada em conjunto com uma boa classificação e organização de categoria.
É óbvio que Reference.com abaixo, deseja que os visitantes usem a pesquisa para encontrar o que estão procurando, pois ela é posicionada de forma proeminente na parte superior da tela.
Páginas em um site de referência também devem fazer uso de links em linha para informações relacionadas. Isso facilita para os visitantes encontrar todo o material necessário para entender o que estão lendo, sem precisar realizar várias pesquisas. A necessidade de links in-line é o motivo pelo qual as plataformas wiki geralmente têm uma sintaxe padrão para vincular o texto de um artigo, para que os criadores de conteúdo não precisem gastar tempo para pesquisar os links relevantes.
Wikipedia , abaixo, e outros sites wiki fazem bom uso da vinculação inline para adicionar contexto aos artigos.
5. sites corporativos
Há uma enorme variedade na estrutura e tamanho dos sites corporativos. Alguns são simplesmente para atrair novos clientes. Outros são criados para manter os clientes atuais informados. Outros ainda devem servir tanto como um atrativo para novos clientes, como um portal de notícias para os clientes existentes e o front-end para uma intranet da empresa.
Independentemente da finalidade do site corporativo, a navegação clara é essencial. Você não quer que os usuários tenham que gastar tempo procurando por sua navegação ou tentando descobrir qual link clicar para chegar onde eles precisam ir. Certifique-se de que os links estejam organizados logicamente, que cada um deles tenha um significado fácil de entender e que estejam localizados em locais lógicos (o cabeçalho e a barra lateral são seus amigos aqui).
Todos os sites abaixo mostram que só porque a navegação está localizada nos lugares mais comuns, não significa que ela não possa ser criativa. Desde que seja utilizável e fácil de encontrar, sinta-se à vontade para criar algo único.
Em sites com mais de uma dúzia de páginas, é recomendável incluir a funcionalidade de pesquisa. Também é uma boa ideia incluir um sitemap para facilitar que os usuários que estão tendo problemas com sua navegação normal encontrem exatamente o que estão procurando.
6. Sites de redes comunitárias ou sociais
Geralmente com grandes sites de redes sociais, a pesquisa é o principal meio de navegação. Faz sentido quando há milhões (ou até bilhões) de páginas no site. A navegação baseada em menus padrão é praticamente inútil quando se lida com esse volume de informações.
Portanto, a pesquisa cuida da navegação geral do site. Mas isso ainda deixa páginas de perfil de membros. Aqui, é importante que haja consistência em todo o site. Independentemente de o seu site permitir que os membros personalizem seus perfis ou não, é imperativo que os links estejam localizados no mesmo lugar em todas as páginas.
Veja o Facebook, por exemplo: cada perfil de membro e cada página tem links para coisas como fotos e informações no lado esquerdo. Notificações, mensagens e solicitações de amizade estão sempre vinculadas na parte superior, assim como links para as configurações da conta e para fazer logout. Uma barra de navegação superior padrão como essa, que sempre se vincula à conta e à informação do visitante, tornou-se um pilar de redes sociais bem projetadas.
Links inline também devem ser consistentes. Por exemplo, sempre que um nome de usuário aparecer como um link, ele deve ser vinculado ao perfil desse usuário, independentemente do conteúdo ao qual ele está associado. Pense em quais informações devem vincular logicamente a quais páginas e, em seguida, certifique-se de que elas sejam consistentes, independentemente de onde esses links sejam exibidos.
7. Locais do evento
Os sites de eventos são geralmente simples e não possuem um grande número de páginas. Mas é importante pensar em como seus visitantes usarão o site. É muito provável que eles queiram fazer uma das seguintes coisas: inscrever-se no evento, ver quem está participando ou falando, obter informações sobre como comparecer (incluindo custos e coisas como hotéis de localização e área) e ver a programação do evento.
Inscrever-se no evento, mesmo que seja um evento gratuito, deve ser visto como uma transação de comércio eletrônico. Por esse motivo, você deseja um botão destacado de chamada para ação para inscrições.
O cabeçalho padrão e / ou a navegação da barra lateral é uma excelente opção para links para outras páginas. A navegação local também pode ser necessária se você incluir páginas individuais para eventos como workshops ou palestrantes específicos. Menus drop-down ou fly-out podem funcionar neste caso somente se você tiver um número limitado de sub-links. Caso contrário, é melhor usar a sub-navegação em uma barra lateral ou em uma página principal.
o Hull Digital Live 10 O website tem uma navegação de cabeçalho concisa e fácil de usar que facilita a localização exata do que um visitante pode estar procurando.
Dica: se o site do seu evento incluir uma área ou uma intranet de participantes, consulte as sugestões de navegação em uma rede social ou site da comunidade para obter diretrizes de navegação.
8. Revise sites
Os sites de revisão geralmente são usados de duas maneiras. A primeira é quando os usuários estão interessados em um produto específico e querem ver comentários sobre esse item. Neste caso, uma excelente função de busca é a melhor navegação. Ele permite que os usuários acessem rapidamente exatamente o produto que estão procurando.
O segundo uso é pesquisar certos tipos de produtos. Para esse uso, a pesquisa ainda é um método de navegação valioso. Mas as categorias e a busca guiada são igualmente importantes. Permitir que os usuários naveguem nas avaliações por categoria e subcategoria permite que eles encontrem uma variedade de produtos que atendam às suas necessidades. Permitindo que eles refinem esses resultados com base em itens como preço ou marca, permite uma experiência de usuário ainda melhor.
Blippr , abaixo, inclui a navegação por categoria (com menus suspensos para sub-navegação) e uma barra de pesquisa proeminente.
9. sites pessoais
Sites pessoais são realmente os curingas do mundo do web design. Você pode usar praticamente qualquer tipo de padrão de navegação que desejar. Manchetes como navegação de cabeçalho e barra lateral ainda serão os mais úteis, mas não há nada de errado em fazer algo completamente diferente.
Sites pessoais devem ser um reflexo do proprietário do site. Se algo inesperado se encaixa na personalidade do site, então, por todos os meios: vá em frente. Ainda assim, pode ser uma boa ideia incluir um link de sitemap em algum lugar, se você estiver usando uma navegação fora do padrão, para facilitar para os visitantes que não "conseguem" encontrar o que estão procurando.
Daniel Mall’s A página do portfólio tem um dos padrões de navegação mais exclusivos que já vi. É fácil de usar enquanto ainda é muito diferente da norma.
10. Galerias
Galerias de imagens e sites de portfólio geralmente devem usar uma combinação de cabeçalho padrão ou navegação de barra lateral, marcação e categorias. Permitir que os visitantes reduzam as imagens exibidas com base em uma tag ou categoria é importante para uma boa experiência do usuário, especialmente à medida que o volume de imagens aumenta.
Paginação também vai ser vital para sites maiores. A rolagem contínua pode parecer uma boa ideia, mas como as galerias e os sites de portfólio, por sua própria natureza, são preenchidos com mídia, a rolagem contínua pode acabar usando muitos recursos do sistema. Eu recomendaria contra ele para qualquer site com mais de uma dúzia de imagens (embora em sites de galeria e portfólio menores, pode ser um toque muito legal).
Exposição Mínima usa categorias, pesquisa e paginação.
O take-away
Se há um conceito de navegação que é uma necessidade absoluta, independentemente do tipo de site que você está criando, é isso: consistência!
Você pode aproveitar as opções de navegação mais lógicas, desde que seja consistente em todo o site. Não comece com a navegação da barra lateral para metade do seu site e navegação de cabeçalho para a outra metade, sem qualquer razão lógica para o fazer. Se o link inicial estiver sempre no canto superior esquerdo, verifique se ele fica no canto superior esquerdo. Isso se aplica a todos os elementos de sua navegação e se torna exponencialmente mais importante à medida que o tamanho do site aumenta.
Além da consistência, a coisa mais importante a fazer ao projetar seus padrões de navegação é pensar em como os visitantes realmente usarão seu site. Não tenha medo de testes A / B ou multivariados para descobrir se os padrões de navegação estão realmente funcionando como deveriam.
Independentemente de quão legal ou nova é a sua navegação, se ela não for executada, sua função básica é permitir que os visitantes passem de uma área do seu site para outra da maneira que desejam, sua navegação falhou.
Sinta-se à vontade para compartilhar exemplos de ótimos padrões de navegação em ação nos comentários abaixo! Informe-nos também se você tem outras dicas para padrões de navegação adequados para tipos específicos de sites.