[MÚSICA]
Vamos agora falar sobre navegação.
O que é navegação, por que a navegação é importante para o seu site?
E como você fornece informações de navegação em seu site?
Então, esta é a pergunta que vamos tentar responder nesta palestra em particular.
A primeira pergunta óbvia que vem à sua mente é,
por que precisamos ter navegação no site?
Como você percebe, a maioria dos sites não são mais páginas únicas.
Claro, existem sites de páginas únicas,
como a página do seu professor, no seu departamento de ciência da computação.
Mas a maioria dos sites geralmente contém mais de uma página.
Como vimos com o nosso site de confusão que estamos construindo,
já adicionamos uma segunda página chamada página aboutus.html.
Agora, a maneira como navegamos para a página aboutus.html era
digitá-la explicitamente na barra de endereço do nosso navegador.
Mas essa é uma maneira muito inconveniente de navegar para o seu site.
Faria muito mais sentido fornecer um meio intuitivo para
os usuários navegarem até o seu site.
Este meio intuitivo poderia ser fornecido por muitas abordagens diferentes,
sendo a barra de navegação um dos métodos mais comuns para indicar esta informação.
Então, analisaremos várias maneiras comuns de fornecer
padrões de navegação em sites típicos.
Neste contexto, muitas vezes você ouve pessoas falando sobre arquitetura de informação.
A arquitetura da informação começa com a estrutura do sistema, no
que diz respeito à forma como a informação é organizada, rotulada.
E a navegação é fornecida através do conteúdo ou através desta informação.
Agora, a arquitetura da informação, por si só, é um grande campo.
Está além do escopo deste curso para abranger arquiteto de informação.
Mas, no caso de você estar interessado em organizar e
fornecer informações aos usuários através de, por exemplo
, sites, então eu forneci alguns links nos recursos adicionais
que você pode ir e ler para obter mais conhecimento.
Mas, em qualquer caso, quando você está projetando um site,
é importante entender a necessidade de
projetar as estruturas de navegação de informações dentro do seu site.
E essa organização de informações dentro de seu site também determina
que tipo de ajuda de navegação você fornece em seu site, e
com base em como essas informações são organizadas.
Normalmente, um site seria organizado em algum tipo de árvore estruturada ou
de forma hierárquica.
E isso determina automaticamente
como você projetaria o suporte de navegação dentro do seu site.
O uso de uma barra de navegação, migalhas de navegação e
outros meios de navegação são muito, muito essenciais para
permitir que os usuários possam ver várias partes do seu site.
Quando você visita a maioria dos sites, muitas vezes você vai procurar a barra de navegação.
Esta é uma espécie de barra que é tipicamente anexada na parte superior
do site, ou às vezes na parte inferior do site, ou às vezes no lado,
que fornece indicações suficientes para o tipo
de informação que você pode acessar neste site.
Portanto, sua barra de navegação normalmente conterá links para várias páginas que
fazem parte do seu site.
Então, uma barra de navegação típica, como você faz para projetar isso?
Ao projetar uma barra de navegação típica, você deve obviamente ter
em mente algumas coisas e não fazer sobre como você projetar barras de navegação.
Primeiro é que você usa
termos simples e fáceis de usar dentro de sua barra de navegação para indicar os vários links
que os usuários podem seguir dentro de seu site para obter informações..
Você deve fornecer uma navegação padronizada, para
que, onde quer que o usuário esteja dentro da hierarquia de seu site, ele
sempre saberá como voltar para a página inicial, como ir para a
hierarquia seguinte, anterior ou para cima e para baixo de algum tipo.
Assim, indicar a localização do usuário
dentro da hierarquia do seu site é muito, muito útil
para fornecer uma maneira amigável de navegar em seus sites.
Além disso, existem algumas convenções padrão que as pessoas seguem
quando essas barras de navegação são projetadas.
Normalmente, quando você tem o logotipo do seu site ou da
sua empresa incluído na barra de navegação, um clique nesses logotipos ou
um botão inicial deve levá-lo de volta ao nível mais alto da hierarquia ou
da página inicial do seu site, normalmente a página index.html.
Algumas das coisas que você deve ter em mente é que você não deve ter muitas
opções em sua barra de navegação.
Quantos são muitos?
Se você achar que navegar usando suas barras de navegação é muito complicado
, isso significa que há muitas opções na barra de navegação.
Forneça um conjunto razoável de opções dentro da barra de navegação para que você possa
indicar as instruções que o usuário pode seguir ao navegar pelo seu site.
E quando você usa esses elementos de navegação na barra de navegação,
não use rótulos genéricos, use rótulos significativos.
Por exemplo, se você colocar um rótulo chamado produto na
barra de navegação, as pessoas ficarão confusas sobre o que você quer dizer com produto.
Ou digamos, se você colocar um serviço em sua barra de navegação, eles podem estar confusos.
Que tipo de serviço você está prestando?
Será mais significativo dar um termo mais descritivo
em seus cabeçalhos na barra de navegação.
Outro meio de fornecer navegação para
os usuários é fornecer o que é chamado de pão ralado.
Eles são normalmente fornecidos em algum lugar dessa página,
típico para a borda superior da página da Web,
mais perto do cabeçalho dessa página da Web.
As migalhas de pão indicam algum tipo de
hierarquia de navegação dentro da qual você está atualmente em seu site.
Portanto, isso fornece uma opção de navegação secundária para o seu site.
Então isso pode ser colocado em algum lugar abaixo da navegação primária.
Ele pode indicar a hierarquia de páginas através das quais você passou.
E a localização atual pode ser destacada especificamente
na migalha de pão lá.
Assim, várias maneiras pelas quais as pessoas podem usar breadcrumbs
incluem fornecer uma navegação baseada em caminho.
Digamos, por exemplo, se você tiver um usuário passando por um conjunto de etapas para
concluir uma tarefa em seu site, digamos, por exemplo, reservar um bilhete de avião.
Em seguida, você pode usar uma abordagem de breadcrumb para indicar a eles em
que passo o usuário está atualmente na sequência de etapas.
Da mesma forma, se você estiver fornecendo sua navegação baseada em localização para
abordagem hierárquica dentro do seu site.
Então, em que nível de hierarquia você está e qual é a parte superior em direção
à raiz de sua hierarquia, de modo que isso poderia ser indicado por suas migalhas de pão.
Sua trilha de pão também pode ser baseada em atributos, o que significa que você fornece um conjunto
de opções indicadas em sua trilha de acesso para o usuário no momento atual.
Uma estrutura típica de interface do usuário front-end fornece muitas
outras maneiras de fornecer navegação em suas páginas da Web.
Estes incluem guias, pílulas, paginação, suspensos,
acordeões, etiquetas e SchrollSpy e Affix.
Vamos analisar alguns deles com um pouco mais de detalhes à medida que passamos
pelas várias lições nos módulos que seguem esta lição em particular.
[ MUSIC]