Planejando e implementando a navegação do website – Parte Final | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Planejando e implementando a navegação do website – Parte Final

Publicado na categoria Artigos com 12.748 visualizações e nenhum comentário …

Fala pessoas!

Dando continuidade ao artigo, vamos analisar como a navegação é disponibilizada para os vários níveis de usuários, assim como outros aspectos navegacionais de diversos sites.

MailChimp

No site MailChimp, a localização da navegação primária para usuários logados ou não é a mesma, mas o conteúdo dos menus são diferenciados. Para os usuários não logados e visitantes, a navegação os leva à criação de um usuário por despertar o interesse do mesmo, utilizando conteúdo para tanto. Já para os logados, a navegação começa com um painel de serviços.

Deveria a navegação sempre mudar tanto assim? Nem sempre, porém neste caso, é a solução mais amigável! Existem diversos outros cenários que a navegação primária deveria ser a mesma, mas com a devida inserção de outros menus para os usuários cadastrados e logados.

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

MailChimp

Freelance Mingle

No site Freelance Mingle, a navegação secundária é o único menu principal que muda para usuários logados ou não. Esse mini-menu posicionado ao topo recebe o núcleo de opções dos membros, e a navegação primária logo abaixo, assim como menu do rodapé continuam os mesmos. Várias áreas do site estão acessíveis para usuários logados ou não, o que mantém a navegação de uma certa maneira, simples; somente membros consegue efetuar alguma postagem.

Além disso, deixar setores visíveis a visitantes, limitando suas funcionalidades, funciona como um “tour” pelo site! Se você criar um usuário, é o que irá conseguir acessar de maneira completa!

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Freelance Mingle

Fresh Books

Alguns websites vão em uma direção totalmente diferente! Enquanto os dois exemplos acima mantém um estilo e esquema que são similiares à usuários logados e não logados, o FreshBooks e vários outros têm estruturas totalmente diferentes para seus membros.

FreshBooks vende seus serviços e promove a assinatura para quem ainda não é assinante. Quando clicado em “Login” no canto superior direito, o usuário é redirecionado a uma página de acesso. Uma vez logado, ele é redirecionado para uma área de cliente, onde o conteúdo é relacionado às suas preferências, o qual não exibe nenhum dos itens mostrados para os usuários não logados.

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

FreshBooks

Business Caltalyst

Business Catalyst disponibiliza algo similar, mas mantêm mais de sua cara, permitindo uma pequena customização do setor de clientes. A home page para usuários não logados é praticamente a mesma de vários outros sites; o conteúdo e a navegação visam o cadastramento de novos usuários. Após logado, o usuário é redirecionado ao setor do cliente, ao invés de uma nova página com conteúdo exclusivo. O layout, a estrutura da navegação  e o menu mudam completamente para esses usuários, diferenciando drasticamente as duas áreas do site.

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Business Catalyst

Considerações Comuns

O design para navegação é essencialmente “encontrar e usar”. Não importa o quão simples ou complexa ela seja, a navegação deve funcionar muito bem ao usuário! Agora, vamos ver algumas tendências navegacionais e como esses designs podem ajudar ou não os sites.

Horizontal vs. Vertical

A decisão sobre qual navegação utilizar, vertical ou horizontal, deve ser baseada na natureza e no foco do site.  Muitas vezes, é uma mistura dos dois, mas é na navegação primária que encontramos algumas tendências.

Sites pequenos oferecem a navegação horizontal em seu topo, enquanto sites grandes e/ou corporativos exibem sua navegação tanto na vertical como na horizontal (usualmente, usam também menus drop-down)!

Blogs variam e muito; a navegação primária (para as categorias ou páginas) às vezes são horizontais, enquanto a maioria é vertical. Em portais de notícias, a navegação é mista, sem nenhuma tendência demonstrada.

Um número de fatores irá influenciar a decisão pela navegação horizontal ou vertical, incluindo-se aí o design, a usabilidade e importância do conteúdo. Em algumas ocasiões, os designers utilizam ícones na navegação ou adicionais elementos visuais ao redor para gerar um melhor entendimento. Uma boa tipografia é um recurso comum a ser considerado; enquanto a navegação é a parte mais importante de um site, ela pode receber uma tipografia especial para tornar a experiência do usuário mais agradável e única!

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

A lista de departamentos do site Amazon é grande demais para caber em um menu horizontal sem ficar demasiadamente congestionada.  Entretanto, encontramos um campo para pesquisa em seu topo, que é um tipo de navegação por si só!

Muitos dos consumidores da Amazon sabem exatamente o que procuram, e sendo assim, vão diretamente ao campo de busca; talvez, até mais do que em outros sites. A Amazon coloca seu menu de departamentos no conteúdo esquerdo. Pelo fato da lista ser tão grande e variada, a proposta é “chefiar” a navegação; e os menus verticais são bons para navegar, assim como os sub-menus, também verticais, ajudam o usuário a refinar suas pesquisas entre os departamentos e produtos comercializados.

Outro ponto a ser considerado é a língua principal do site e quais outras línguas o mesmo deverá ser traduzido. Palavras em inglês são geralmente menores do que palavras em português ou alemão, então o posicionamento horizontal da navegação deve ser testado nessas línguas. Elementos traduzidos necessitarão de duas linhas ao invés de uma ou irão quebrar o design do menu horizontal? Precisando de mais espaço, a saída seria um menu vertical?

Teremos que pensar em quais ocasiões um site necessitará de tradução e como resolver algum tipo de problema caso o mesmo surja!

Enquanto geralmente é uma boa prática criar um menu horizontal simples, não é algo fundamental. Abaixo, alguns exemplos que utilizam navegação primária vertical, e funcionam bem! Entretanto, todos esses websites tem menus simples e um desing e conteúdo bem minimalista; websites com muito conteúdo podem facilmente usar a força do menu vertical. Good/Corp (o primeiro site abaixo) é um belo exemplo em como uma grande quantidade de conteúdo é apresentada de maneira bem compacta, até minimalista, por assim dizer. As sub-seções são indentadas, propiciando aos usuários uma clara sensação de hierarquia do site.

Good/Corps 

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Stura TU-Chemnitz

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Baltic International Bank

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Analogue Digital 

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Cambrian House

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Divensis

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Mellasat

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Debbie Millman 

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

É claro, navegação horizontal pode funcionar tão bem quanto à vertical, e menus que seguem as boas práticas não são entediantes. De fato, combinar menus horizontais e verticais é uma grande possibilidade!

Abaixo, há uma pequena seleção de exemplos de menus horizontais em ação, com suas navegações primária e secundária:

Moody International

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

The Big Feastival

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Web Standards Sherpa

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Tijuana Flats

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Unlocking.com

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Cultural Solutions

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Tinkering Monkey

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

JustBurns 

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Drop-Downs e Mega Drop-Downs

Enquanto os menus horizontais são os melhores para navegação no topo do site, portais necessitam de uma navegação mais aprofundada. Menus drop-downs podem alocar uma grande quantia de links em um espaço único, que proporcionam a economia de espaço e ajudam a manter a navegação organizada!

A hierarquia pode ser refinada com sub-níveis e até mesmo com sub-níveis de sub-níveis, ajudando os usuários a filtrar as informações para chegar à página ou seção de destino.

Embora sejam mais elaborados os mega drop-downs, acomodando uma grande variedade de conteúdos e layouts, é importante que eles promovam grandes áreas clicáveis para os usuários. Eles pode ser usados para organizar a navegação, assim como agregar mais conteúdo enquanto economizam espaço.  Eles também são excelentes locais para adicionar componentes e qualquer outro conteúdo não essencial. Nos dois casos, é importante deixar claro a indicação de que drop-down está disponível, usando para tanto setas ou ícones, ou qualquer outra coisa.

Abaixo, alguns exemplos:

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Aviary

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Estee Lauder

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Portero Luxury

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Sunglass Hut

Planejando e implementando a navegação do website – Parte Final - André Buzzo Webdesign

Veja como alguns desses menus são criativos em sua organização e conteúdo de navegação. Abaixo, alguns pontos a serem considerados:

– Muito da navegação apresentada acima é organizada por categorias e sub-categorias, as quais podem ser determinadas pela Classificação por Cartas;

– Muitos desses websites tem um layout diferenciado e estilos próprios para cada menu drop-down, abaixa do menu principal. Isso cria uma maior variedade de aparência para as sub-páginas sobre a página principal;

– Alguns exemplos contém ícones, imagens e um texto padronizado para os itens dos links; esses elementos podem ser promocionais, de usabilidade ou simplesmente para organização dos mesmos.

Esses são alguns dos recursos de design dos drop-down acima, mas claro, outras soluções tão criativas como essas podem ser desenvolvidas! O ponto principal é que é a navegação às vezes é estendida aos sub-menus (por intermédio dos drop-down ou mega drop-downs) por assim se fazerem necessárias!

Como um CSS inteligente e marcação semântica, implementar um mega drop-down não deve ser tão difícil como criar um simples menu horizontal. Entretanto, o menu pode apresentar algum problema. Por exemplo, no Safari, mega drop-downs tendem a não serem exibidos por cima de conteúdos em Flash!. Existem diversas maneiras de se arrumar isso, mas a mais popular parece ser colocar esse conteúdo em flash em uma Div ou container em uma nova camada, e ocultá-la quando o menu drop-down é estendido.

Abaixo, alguns tutoriais para desenvolvimento de drop-downs e mega drop-downs:

Ambient User Experience

“A Practical Guide to Information Architecture”

Classification Schemes (and When to Use Them)

“Card Sorting

Tradução de parte do original: Planning And Implementing Website Navigation

Voltar à página anterior!