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

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

Publicado na categoria Artigos com 8.637 visualizações e 6 comentários

A coisa que torna a navegação de um website difícil no webdesign é que ela pode ser muito versátil!

A navegação pode ser simples ou complexa: poucas páginas principais ou uma arquitetura com vários níveis;  um set de conteúdo para usuários logados e outro para os não logados; e por aí vai! Pela navegação poder variar e muito de site para site, não existe uma regra geral para organizar a mesma.

O desing da navegação é praticamente uma arte, e os designers ficam melhores com a experiência. Tudo é sobre como utilizar a Arquitetura da Informação: “a arte em expressar um modelo ou um conceito usado nas atividades requer detalhes explícitos de um sistema complexo”.

Organizando a Estrutura da Navegação

Talvez a parte mais complicada sobre a navegação na web é organizar e estilizar o menu. Embora a programação seja relativamente mais simples. Nesse primeiro tópico, vamos ver alguns métodos e melhores práticas para organizar a navegação, em que cada uma leva a uma experiência mais intuitiva do usuário e com resultados excelentes na conversão.

Primário X Secundário

A maioria dos websites, especialmente aqueles com grande quantidade de conteúdos ou funcionalidades, requerem menus de navegação. Mas enquanto um website cresce em complexidade, guiar os usuários para seu conteúdo ou funcionalidade não deveria ser um trabalho de um menu! Todo esse grande conteúdo não se encaixa em apenas um menu abrangente, não importa o quão organizado ele seja! Enquanto vários websites precisam de mais de dois menus, todos deveriam ter ao menos dois: o Primário e o Secundário!

Planejando e implementando a navegação de um website - André Buzzo Webdesign

Você pode achar que o menu Primário e o Secundário estão apontados de maneira errônea na imagem acima, mas acredito que não seja o caso!

O MENU PRIMÁRIO é relativo ao conteúdo de maior interesse ao usuário. Mas a importância também é relativa; o tipo de conteúdo linkado no Primário de um site deve ser do mesmo tipo que está linkado no Secundário (por exemplo, Informações Gerais sobre a Empresa ou uma Pessoa).

O MENU SECUNDÁRIO é para conteúdo que será menor interesse ao usuário. Qualquer conteúdo que não serve como objetivo principal do site deverá constar nesse menu. Para vários blogs, esse trabalho inclui links como “Sobre Nós”, “Contribua”, “Anuncie”, e por aí vai. Para outros sites, os links devem sugerir algo como uma área para clientes, com “FAQ” ou “Ajuda”.

Se você quiser entender um pouco mais sobre navegação primária e secundária, acesse “Entendendo a Navegação do Site: Termos chave” é um excelente artigo com informações detalhadas de diferentes termos para navegação, incluindo os menus Primários e Secundários.

O primeiro passo para organizar o menu é organizar o conteúdo. Após o conteúdo ser organizado você determinará qual conteúdo é Primário e qual o Secundário, e assim você poderá decidir a localização e estrutura navegacional do conteúdo restante. O conteúdo mais importante ficará relativamente perto do Primário, e os demais serão colocados em segundo plano, em menus localizados no rodapé, na barra lateral ou em qualquer outro local.

Não estou sugerindo que o conteúdo Primário não possa ser inserido nesses locais; há algumas ocasiões onde essa navegação se encaixará melhor na barra lateral ou em menus drop-downs.

Vale também perguntar o seguinte: qual link deverá ir além do menu Primário? Se um menu Secundário se fizer necessário, qual a melhor maneira para implementá-lo? Não importa o quão organizado seja o conteúdo,  se existe diversas razões de como e porquê o site necessitará de uma navegação mais complexa, a diferenciação dos menus Primários e Secundários será bem sutil. Felizmente, existe um grande método que os designers podem experimentar:

Arquitetura da Informação: A Classificação por Cartões

Qual a melhor maneira em se organizar conteúdos? Como a navegação deve ser rotulada, agrupada e posicionada? Como as pessoas utilizarão o menu?

A Classificação por Cartões é comumente utilizada na Arquitetura da Informação e pode ajudar a responder aos webdesigners, questões antes mesmo de se começar o design do projeto. A Classificação por Cartões basicamente ajuda designers a organizar a navegação, especialmente a mais complexa, da maneira mais eficiente possível.

Uma reclamação que costumo ouvir sobre websites… que eles são projetos ao redor da estrutura organizacional. Quando a arquitetura da informação regularmente é finalizada pelas equipes internas, é até aceitável. Uma maneira que é válida para inserir a estrutura que refletirá o comportamento do usuário é uma coleção de cartões para se classificar.

A Classificação por Cartões é uma maneira de organizar e rotular o conteúdo para seu usuário. É interessante obter de um usuário informações sobre como ele chegou até o site e como ele acha interessante rotular e agrupar botões e conteúdos, para determinar a melhor estruturação de navegação do site. Claro que se quiser reunir, diferentes grupos de usuários, você encontrará várias coincidências e dificuldades entre os mesmos; e assim, poderá considerar também o que fazer para ajudar esses grupos, usando diversas variáveis de agrupamento e rótulos”.

– Amy Hissrich

A Classificação por Cartões podem ser usadas para determinar menus e sub-menus, a ordem deles e até o design e sua estrutura. Acabamos com o básico por aqui, mas lembre-se de checar as fontes acima para mais informações, seus guias e seus exemplos.

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

Existem dois tipos:

1. Classificação por Cartões Abertos é quando os participantes recebem os cartões e os agrupam por categoria. Eles não precisam dar informações ou o contexto utilizado inicialmente. Dependendo do projeto, os participantes devem ser informados a criar dois grupos, grupos ilimitados, sub-grupos e assim por diante. Eles podem também agrupar os cartões pela ordem hierárquica que eles determinem a mais correta.

2. Classificação por Cartas Fechadas é quando os participantes recebem cartas com os tópicos dos conteúdos e as categorias para agrupá-los (e as vezes, com sub-categorias). Os participantes não necessitam nomear as cartas. Essa é opção é fantástica para ser utilizada em sites já existentes que já contam com suas categorias, menus, dentre outros, estabelecidos.

Abaixo, existem algumas fontes sobre a Classificação por Cartas:

“Card Sorting for Navigation Design”

“Card Sorting: Introduction”

Card Sorting: Mistakes Made and Lessons Learned

“Card Sorting: Stacking the Deck for Better Navigation”

“Card Sorting: Designing Usable Categories”

Existem diversas maneiras em se aplicar a Classificação por Cartas, algumas em cima de uma mesa e outras online mesmo. Realizar uma Classificação online é fácil de se fazer, mas não é a melhor opção dependendo do projeto. Aqui existe uma grande artigo publicado o UX for the Masses que abrange os prós e contras de cada uma: “Online Card Sorting: Even Better than the Real Thing?”. Para encontrar ferramentas simples sobre a Classificação, acesse: OptimalSort, WebSort e UserZoom.

Conteúdo Agrupado: Esquemas de Classificação

Quando grande quantidade de conteúdos são agrupados em uma categoria, surge um outro problema: qual ordem devo aplicar? A Classificação por Cartas e outros métodos similares poderão ajudar a criar grupos e hierarquia assim como diferenciar entre Conteúdos Primários e Conteúdos Secundários para navegação, mas como ordenar os conteúdos dentro de essa ordem? Pelo mais comentado ou mais acessado? Mais recente ou mais antigo?

Abaixa esta uma lista com os métodos mais usuais de classificação, com uma sugestão sobre qual é o melhor a ser utilizando quando:

Mais recente para o mais antigo – Adequado se o conteúdo é classificado por datas;
Por ordem alfabética – Excelente quando o usuário necessita encontrar algo com rapidez. Isso incluiu definição, indexação e outros conteúdos que os usuários conhecem antes de encontrá-lo;
Mais comentado ou mais acessado – Excelente para assuntos de interesse, ao invés de expor o conteúdo que o usuário necessita;
Geográfica – Certos conteúdos são relevantes para determinadas regiões ou sub-regiões?;
Em ordem de publicação – Se o conteúdo, em algum aspecto, representa um processo (por exemplo, “Técnicas de Vendas”), então ele pode ser organizado de acordo com a ordem de ação que deverá ser seguida pelo usuário. FeverBee tem um grande exemplo sobre o assunto: “How to build na Online Community: The Ultimate List of Resourses”. Quando o website for um blog, o conteúdo não é necessariamente classificado por data, então o autor têm que criar uma grande estrutura navegacional que colocará muito do conteúdo em um processo de passo-a-passo.

Para saber mais sobre esquemas de classificação, veja Ux Booth´s: “Classification Schemes (and When to Use Them)”.

Navegação e Nível de Usuários

Para websites nos quais a navegação muda se o usuário está ou não logado, outro problema organizacional surge. Alguns têm uma área de cliente simples, enquanto outros têm suporte para toda uma comunidade. Quando esse tipo de interatividade é envolvida, as ações do usuário e busca por conteúdo podem variar, e os proprietários devem saber como enfatizar algum conteúdo ou design de maneira diferente.

Abaixo, algumas dicas para organizar a navegação entre níveis diferentes de usuários:

Usuário de qual nível vai acessar aquele conteúdo?
Vários proprietários de sites se deparam com isso após um tempo e assim, ficam na dependência de seu “grande modelo” de programação. Como designer ou desenvolvedor, tenha certeza que sabe que tipo de navegação será necessário, e mantenha o conteúdo consolidado para tal.

Projete um plano para cada nível de usuário
Não inicie a Área Restrita antes de considerar a navegação necessária e seus níveis. Como os conteúdos devem ser organizados para os usuários não logados? Qual a organização para os logados? Administradores Vs. Usuários Básicos? Contas grátis Vs. Contas Pagas?

Qual tipo de conteúdo cada nível de usuário será capaz de acessar?
Um usuário não cadastrado gostará de saber mais sobre a comunidade ou serviço oferecido. Um membro cadastrado já está convencido, então a navegação primária deve refletir as vantagens que o usuário, sendo membro cadastrado, obterá com isso! Há conteúdo produzido especialmente para aqueles que pagam, e assim, deve ser enfatizado com maior destaque? Deveriam ser exibidos links especiais ou conteúdos exclusivos para os Administradores não logados, ou serão apresentados assim que fizerem seu login?

Planejar para diferentes níveis de usuário pode ser feito usando os mesmos métodos descritos para a NAVEGAÇÃO PRIMÁRIA e SECUNDÁRIA.  A Classificação por Cartões podem ajudar na estruturação de cada nível. Pense sobre o que deve ser agregado à Navegação Primária, sobre o que deve ser agregado na SECUNDÁRIA, onde tudo deverá ir (entenda-se: hierarquia!), e como os botões do menu devem ser rotulados.

O que os membros necessitam? Qual tarefa desejam executar? Essas são algumas questões a serem respondidas quando organizar o conteúdo para os níveis, assim como para organização dos conteúdos para os usuários não logados e logados.

Pegue o Facebook. O conteúdo está por toda parte, e é gerado pelo usuário. Como ele organiza o conteúdo em seu sistema? O Facebook é estruturado por conteúdo; é definido e organizado em como as ações do usuário são realizadas. Feeds, mensagens, eventos e amigos são parte da NAVEGAÇÃO PRIMÁRIA, enquanto a outra navegação é baseada em aplicativos específicos, pedidos, amigos dos  amigos, etc. O restante da navegação é baseada em como o usuário interagiu anteriormente com o Facebook.

Na próxima parte, veremos exemplos de sites que possuem áreas restritas à membros, e veremos como os mesmos diferem entre si. Veremos também, como eles tratam a navegação e a sua estruturação baseada em usuários logados ou não, dentre outros aspectos!

Abraços a todos!

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

Voltar à página anterior!

  • Fredson Rodrigo Luz

    Bom dia André, e mais uma vez parabéns pelas dicas. Foi de grande valia o artigo sobre abrir ou não uma empresa. Peço se possível um artigo sobre utilizar ou não softwares originais, e quais as vantagens e desvantagens. Valeu abraço e sucesso.

    • Fala Fredson!

      Beleza … vou ver se eu escrevo algo do gênero!

      Abraços!

  • Edgar

    Cara muito bom esse post!
    Tem alguma dica sobre design responsivo?
    Abraço velho.

    • Fala Edgar!

      Sobre design responsivo eu ainda não tenho muita coisa aqui no site não .. mas vou providenciar ok?

      Abraços!

  • fernando fernandes

    Fala André
    Ta lembrado d mim
    encontrei esse post por acaso e vi q é um assunto q Tb me interessa afinal tive uma disciplina do p isso na facu hehe.
    Ótimo trabalho!

    Flw

    • Fala Fernando!

      Fico feliz em poder lhe ajudar ou lembrar de algo que viu na facul compadre!

      Abraços!