Dicas para simplificar a navegação do seu site

O que acontece nos projetos depois que o caminho errado é iniciado é que geralmente relutamos em voltar, mesmo que não nos sintamos bem sobre a direção em que estamos indo. O problema acumula mais tempo ou dinheiro foi investido em seguir o caminho errado.

É essencial superar essa hesitação. Se uma estrutura de navegação ruim apresentar problemas de usabilidade (como no caso do site de exemplo deste artigo), precisamos corrigir essa estrutura incorreta em vez de continuar desenvolvendo o site.

Se não o fizermos, será mais difícil reparar o dano mais tarde. Ao projetar ou redesenhar a navegação, precisamos nos lembrar das necessidades do usuário em primeiro lugar.

Estruturas de navegação complexas raramente são necessárias. Nós apenas pensamos que eles são quando nós os criamos primeiro. O que você precisa sempre estar fazendo é se perguntar se não há uma maneira mais simples de atingir o mesmo objetivo.

Se houver uma maneira mais simples, você precisará usá-la, porque qualquer outra coisa, não importa o quão impressionante pareça, vai lhe custar mais do que a longo prazo. Neste artigo, usaremos um exemplo de site ao vivo para simplificar uma estrutura de navegação complexa para melhorar a usabilidade.

Etapa 1: examine o design existente

O problema com o qual estamos começando é que o design de navegação existente tem complexidade excessiva. No caso do site de exemplo que estamos desenvolvendo para este projeto, essa complexidade parecia necessário, mas apenas porque uma maneira melhor não era imediatamente óbvia.

Primeiro, ajudará a entender por que a navegação original era complexa em primeiro lugar. O site de assunto é um site de tutorial e o assunto dos tutoriais é um sistema bastante complicado.

Como o site usa um emulador ao vivo do sistema de assunto para o aluno aprender, isso significa que não podemos (ou não devemos) navegar de uma página para outra. Precisamos exibir o conteúdo inserindo-o em linha para evitar recarregar o sistema constantemente e ter que salvar o estado do sistema.

Links de navegação, portanto, nem sempre redirecionam para páginas físicas, e a maioria redireciona para páginas virtuais. Navegação, neste caso, pode ser pensada como sendo dividida em lições, capítulos e tópicos.

A barra de navegação superior já é bastante simples, embora possa fazer com uma aparência atualizada. Quando o usuário chega pela primeira vez ao site, ele verá o menu na coluna da esquerda.

O usuário precisa escolher uma lição deste menu antes de poder ver os capítulos e tópicos individuais da lição, como mostrado na Fig. 2.

O que torna essa estrutura complexa demais é que não deve haver a necessidade de dividir a navegação dessa maneira (o usuário não pode selecionar itens de navegação de nível superior sem uma etapa de navegação extra) e a paginação numérica não é ideal para seleção de tópico.

É fácil, no entanto, entender a lógica por que a navegação foi originalmente projetada dessa maneira. O dispositivo emulado foi criado primeiro e teve um determinado tamanho determinado pelo código SVG.

Alterar seu tamanho com código antes do suporte universal de navegador completo para a função CSS3 Zoom significaria alterar todo o código JavaScript (em linhas 10,000), o que seria um desperdício.

Portanto, o design de navegação original é uma tentativa de salvar o espaço horizontal para que a lição e o dispositivo emulado possam caber na tela simultaneamente.

Agora que conhecemos a falha na estrutura de navegação existente, é mais fácil planejar um novo design de navegação na próxima etapa.

Etapa 2: Planejar um novo design

Como agora há suporte mais consistente (mas ainda não excelente) para o CSS3 Zoom nos navegadores de desktop mais populares, o dispositivo emulado pode ser ampliado para um tamanho menor sem exigir grandes quantidades de recodificação.

Se isso for feito corretamente, mais espaço estará disponível à esquerda, permitindo que tenhamos uma coluna adicional no meio.

A mudança óbvia é que o corpo da lição foi movido inteiramente para fora da área de navegação, exatamente como deveria ser.

Essa alteração permitirá mais flexibilidade no sistema de navegação e fornecerá mais espaço para o corpo da lição ser exibido.

Etapa 3: implementar o plano

Lembre-se de que cada lição pode ter vários capítulos e cada capítulo pode ter vários tópicos. Como lidamos com isso? A maneira mais fácil é criar uma pilha desmontável de itens de menu. Expandindo uma lição revela seus capítulos e expandindo um capítulo revela seus tópicos.

Na fig 4 você pode ver a lista não expandida de lições mostradas no menu à esquerda.

Observe também a adição necessária de um botão de navegação no corpo da lição. Isso é para remover a necessidade de o usuário sempre usar o menu de navegação para pular para o próximo tópico ou para o tópico anterior no capítulo.

Isso é o que o usuário verá se selecionar uma lição no menu à esquerda:

Esses links um tanto enigmáticos podem não significar muito para você, mas para alguém que esteja treinando para ser um aviador eles são auto-explicativos. Expandir a lista para o terceiro nível mostrará as páginas de tópicos individuais, como mostrado na figura 6.

À medida que a lista de links cresce, uma barra de rolagem vertical é adicionada à página. Poderíamos fazer a barra de rolagem anexar ao próprio menu, definindo uma altura fixa para o menu.

Material técnico

Scripts externos, estruturas CSS e fontes usadas no exemplo acima incluem:

  • Bootstrap v3.3.7
  • Fonte impressionante v4.7.0
  • Google Fonts: pompiere, concerto um, varela round

Estes não são de forma alguma os apenas Uma maneira de fazer algo como isso funcionar, mas eles foram usados ​​neste projeto como uma maneira rápida de obter uma solução segura para a Web sem a necessidade de muita codificação ou marcação adicional.

O construtor para o protótipo de menu é notavelmente simples se você estiver usando o Bootstrap como sua estrutura CSS.

No primeiro nível de recuo, você cria um div para a área de navegação (aqui com o ID de “leftSide”) e uma classe div dentro dele para definir quais propriedades o espaço de contenção deve ter. Neste caso, estamos apenas usando a classe padrão “well” que já está predefinida no Bootstrap (fig 7).

Dentro deste conjunto, no terceiro nível de recuo, adicionamos um par de parágrafos para ocultar e exibir o menu (fig 8). A propriedade de exibição de cada um é importante, pois permitirá que os links funcionem como um comutador de alternância.

Como você pode ver, clicar nos links ativará as funções do JavaScript para ocultar ou mostrar a coluna. Neste caso, “esconder” significa apenas remover o conteúdo e encolher a coluna para um tamanho menor, como mostrado na figura 9.

O que a função hide faz é reduzir a coluna da esquerda para a largura 40px (o suficiente para mostrar o ícone necessário para expandi-la de volta ao normal) e expandir a largura da coluna do meio para 50% da viewport. Mostrar mostra tudo de volta ao que era originalmente.

Agora precisamos criar um contêiner para armazenar os itens de menu.

Em seguida, adicione o item de navegação, neste caso, o painel “instruções”.

O colapso do item é manipulado pelo próprio CSS e JavaScript do Bootstrap, portanto, tudo o que precisamos fazer é adicionar funções para alterar o conteúdo da coluna do meio quando um item é clicado (l1s1 e l1s2).

Estes são manipulados por um script externo, mas mostrados na fig 12 para completar.

De volta ao menu em nosso arquivo HTML. Uma quebra de linha é adicionada como um separador simples e, em seguida, os itens restantes serão adicionados como uma série de listas aninhadas. O construtor inicial é mostrado na figura 13.

Deste ponto em diante, adicionando os itens de menu restantes é muito simples. Por uma questão de brevidade, apenas a adição do primeiro conjunto de itens é mostrada, mas os conjuntos de itens restantes são adicionados exatamente da mesma maneira.

Todos os itens precisam ser adicionados entre o par de tags da lista, conforme mostrado.

O próximo item de menu seria adicionado inserindo-se uma nova linha na linha 75 e seguindo exatamente o mesmo procedimento para o item T1-L2, e assim por diante.

Depois que todos os itens (capítulos) de T1-L1 até T1-L6 forem adicionados, adicionaríamos uma nova quebra de linha e iniciaríamos uma nova lista (como categoria T2), seguindo os mesmos procedimentos até que o menu seja concluído.

A etapa final da revisão do nosso menu de navegação é adicionar um script para garantir que nossos itens de menu sejam mostrados inicialmente não expandidos.

Se o seu site não estiver obtendo os resultados desejados, um possível motivo pode ser que o sistema de navegação seja mais complexo do que deveria.

A redução da complexidade do menu é um passo importante para melhorar a usabilidade do site. Ao facilitar o acesso dos usuários a sistemas complexos, você será recompensado com mais visitantes de retorno e possivelmente mais referências.

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.