Conteúdo e Navegação

Navegação em página

Introdução

Os utilizadores devem ter acesso aos conteúdos de um sítio de internet intuitiva e eficazmente, através da sua navegação. A experiência de navegação deve apresentar-se de forma clara, consistente e transversal a todas as páginas, uma vez que se trata da única maneira dos utilizadores navegarem entre os menus, submenus e páginas associadas a um sítio da internet. Todos os conteúdos do sítio devem ser fáceis de encontrar pelo utilizador, independentemente da área ou página onde se encontram. Em suma, a estrutura de navegação definida para o sítio, ou portal, deve ser mantida em todas as suas páginas para que seja coerente.

Outro tema relevante é que os conteúdos sejam de fácil acesso, quer seja através da utilização de uma boa pesquisa, quer seja através um fluxo de navegação simples e claro e que não canse o utilizador fazendo com esta desista de chegar ao seu destino. Durante muito tempo existiu o paradigma da “regra dos três cliques”, que definia que a distância entre o utilizador e o conteúdo que procura nunca deve ultrapassar os três níveis. Hoje em dia sabemos que não é importante se a informação está mais perto ou distante do utilizador, mas o que é relevante é a forma de chegar até ela.

De forma a facilitar a sua visibilidade, é necessário agrupar e distinguir uns elementos da navegação dos outros. Isto pode ser feito criando zonas de navegação primárias (técnica e teoricamente, nesta área estão os conteúdos mais procurados pelos utilizadores) e secundárias (conteúdos complementares que por regra não são a principal causa da consulta à página pela maioria dos utilizadores). Idealmente, o próprio site deve fornecer feedback (informação) sobre a localização do utilizador.

 

Navegação Primária

A navegação primária organiza o conteúdo direcionado para a maioria dos utilizadores. O critério de organização deve ser um equilíbrio entre o propósito do portal e as necessidades de quem procura a informação. O tipo de conteúdo primário de um site pode ser o conteúdo secundário de outro. Tudo depende do público-alvo, e dos objetivos que o sítio tem, por exemplo: a área de ‘Notícias’ é conteúdo primário no sítio da Internet de um jornal, enquanto a secção de ‘informações sobre a empresa’ será conteúdo secundário. Num sítio marcadamente institucional, essa ordem seria inversa.

 

Navegação secundária

Navegação secundária é o conteúdo de segunda importância para o utilizador, ou no primeiro impacto da página. Qualquer conteúdo que não se encaixe nos objectivos primários do site, mas que possa ter alguma relevância para o utilizador, ou que implique um acesso repetido, pode ser colocado na navegação secundária. Áreas sobre “Quem Somos”, “Anunciar”, ou “Ajuda”, ou até componentes como “área do cliente”, “Perguntas Frequentes”, etc.

 

Fornecer sempre as opções de navegação

A navegação principal deve ser constante e transversal a todas as páginas. É de evitar a existência de páginas sem elementos de navegação, pois estas constituem-se num “beco sem saída”. Assim, as opções de navegação principais não devem estar escondidas, mas sim visíveis. Quer isto dizer que há elementos da navegação que parecem visíveis e que fazem com que o utilizador seja obrigado a passar o rato, em cima de cada opção de navegação, para que este entenda qual delas corresponde ao conteúdo que procura. Em suma todos os ícones que sejam meramente gráficos e não despoletem qualquer ação, devem estar claramente identificados como inativos, por exemplo através da utilização de uma cor mais esbatida.

A possibilidade de aceder ao menu de navegação principal deve ser facultada a qualquer altura e em qualquer página em questão. Mesmo nas páginas de erro, o utilizador deve conseguir navegar para qualquer página tanto pelo menu principal como pelo espaço destinado à pesquisa de informação, evitando-se desta forma o tal “beco sem saída”.

 

Ser consistente em todas as páginas

Os elementos de navegação principal e secundária deverão figurar sempre nos mesmos locais ao longo de todas as páginas de internet.

À medida que vão explorando e conhecendo melhor o site, os utilizadores começam a tentar prever intuitivamente a localização da informação no ecrã mesmo antes dela carregar. Se os itens aparecerem sempre nos mesmos sítios, os utilizadores habituam-se a essa lógica e interiorizam-na, podendo navegar de forma mais rápida.

Na navegação global as ligações devem ser facilmente distinguíveis dos outros elementos da navegação, como por exemplo, a navegação de um submenu.

Os utilizadores compreendem melhor a estrutura de um sítio da internet, se este tiver um sistema de navegação constante.

 

Utilizar títulos de menus claros e autoexplicativos

A percepção dos textos nos menus deve ser evidente para que o utilizador entenda imediatamente quais os conteúdos a que vai aceder quando clicar numa determinada ligação.

Deve-se fugir, dentro do possível, ao uso de abreviaturas nos menus principais.

Ocasionalmente, o nome do item pode não ser suficiente para que os utilizadores entendam qual a ligação de destino. Nestes casos, pode-se recorrer à técnica de “speaking navigation”, que consiste em acrescentar uma etiqueta com uma breve descrição de texto a cada item do menu.

 

Assegurar que os itens clicáveis parecem clicáveis

As opções clicáveis (links e botões) devem-se evidenciar e distinguir dos outros elementos que figuram na página. Esta distinção faz-se através do uso de cores diferentes, mas também pode ser feita com um sublinhado ou itálico.

 

Botões

Os botões, que normalmente têm uma cor de fundo diferente e se apresentam num formato quadrangular ou retangular, devem ter uma imagem que sugira a ideia que são clicáveis e que assinale os limites da área interactiva.

 

Tabs (Separadores)

Entende-se por “Tabs” abas de navegação. Estas devem apresentar-se visualmente de forma clara tal como o seu nome indica. É importante que o utilizador entenda qual a aba de navegação que está ativa. Isto faz-se através do uso de uma cor de fundo de texto igual à cor da aba que está selecionada e ativa.

A distinção entre abas é particularmente relevante quando existem apenas duas abas. Quando existem 3 abas não há dúvidas, porque há sempre uma que tem a cor diferente das outras duas que são iguais.

 

Assegurar que os itens não clicáveis não se parecem com links

Se um texto não tiver uma ligação, deve-se evitar o uso do sublinhado. A experiência de navegação do utilizador ensinou-o que, por norma, o que estiver sublinhado é sempre uma ligação para outra página. Isto significa que independentemente de um texto estar sublinhado e não ter qualquer ligação, muitos utilizadores vão tentar clicar e sentir-se frustrados por não a conseguirem abrir.

No corpo do texto não devem ser usadas cores diferentes em palavras frases ou parágrafos. O texto deve ser constante mantendo a mesma cor em todas as páginas, de forma a evitar que o uso de uma cor diferente num texto sugira a existência de uma ligação para outra página que efetivamente não existe.

 

Assegurar espaçamento extra nos links

Relativamente aos links, que por norma são muito pequenos, é necessário criar um espaçamento extra (chamado padding) à volta das ligações. Isto surge com o propósito de simplificar a navegação porque as ligações que surgem em apenas um caractere, são demasiado estreitas e difíceis de clicar.

A área clicável das ligações só cresce, e dá uma melhor apresentação visual ao utilizador, através da criação de um espaçamento extra. Este garante que os utilizadores de smartphones conseguem acertar confortavelmente com o dedo nas ligações correspondentes à paginação, não necessitando de fazer zoom (aproximar a imagem) nem correr o risco de clicar sem querer na ligação do lado.

 

Garantir acesso à homepage a partir de todas as páginas

Todas as páginas do sítio devem permitir um acesso fácil e direto à página principal.

A experiência de navegação dos utilizadores habituou-os a voltarem à página principal sempre que queiram iniciar uma nova tarefa ou reiniciar a tarefa que estavam a fazer. Estes devem poder voltar à página principal de forma rápida e intuitiva.

A imagem ou logótipo do sítio tem que ter uma ligação para a página principal. Ainda assim, há muitos utilizadores que não têm um nível de experiência de navegação tão elevado e é precisamente a pensar neles que deve ser incluído, no menu principal, uma ligação para aceder à página inicial do sítio.

Essa ligação deve estar escrita em português: “Página Inicial”, ou “Início” em vez de “Homepage” ou “Home”. O uso de uma imagem como ligação para a página inicial deve ser feito para que seja claro o seu propósito.

 

Texto dos links deve fazer sentido quando lido fora do seu contexto

As ligações devem apresentar-se para que os utilizadores as compreendam e antecipem o seu propósito antes de clicarem.

Por vezes, o uso de termos simples e demasiado explicativos como “clique aqui” pode revelar-se contra produtivo na medida em que quando lido fora do contexto não dá nenhuma informação adicional. Existem utilizadores com necessidades especiais que dependem de sistemas de leitura de ecrã e que ativam a opção de ler apenas as ligações na página ignorando o resto.

Desta forma, em vez de termos as seguintes ligações: “Para registar uma nova conta, clique aqui” – devemos usar ligações que digam: “Registe uma nova conta”, identificando imediatamente a ação que se vai realizar.

 

Texto dos links deve refletir o título da página de destino

As ligações devem ter textos consistentes com o título ou o cabeçalho principal da página de destino. Desta forma, os utilizadores devem entender imediatamente que chegaram à página que pretendiam depois de clicarem numa ligação.

 

Evitar o uso de carrosséis

Após a realização de testes a utilizadores, constatou-se que a utilidade dos carrosséis é quase nula. Por norma, os utilizadores percepcionam o primeiro ou o segundo item do carrossel e continuam a navegar fazendo descer a página com o rato (scroll) para ver o que falta da página. As outras imagens ou figuras do carrossel têm por norma uma visibilidade muito reduzida. Isto é um exemplo do que não fazer se pretendermos que estes conteúdos sejam vistos pelos utilizadores na página. Eles devem estar acessíveis e visíveis, sem haver a necessidade de usar a navegação extra proporcionado pelo carrossel nem ter que esperar que este mude a visibilidade dos conteúdos que vai apresentando automaticamente.

 

Se por alguma razão o uso de um carrossel for essencial, existe um conjunto de regras cujo cumprimento é desejável:

- Dar visibilidade e facilidade de acesso aos controlos de navegação;

- As setas do teclado devem permitir navegar pelo carrossel;

- Deve ser clara a indicação de qual o item que está a ser visualizado e quantos mais existem no carrossel. Isto pode ser feito através do uso de uma lista de thumbnails (miniaturas) que indique o item atual; uma indicação descritiva que mostre que estamos, por exemplo no item "1 de 4", em que "1" é o item atual e "4" é o total de itens do carrossel; ou pode-se usar uma pista visual que permita perceber o número total de itens e qual o item que estamos a ver (ex: utilização de círculos num dos cantos inferiores do carrossel);

- Se a rotação automática estiver ativa, deve parar mal o utilizador pare o rato em cima do carrossel. No caso de o utilizador estar a navegar com o teclado, a rotação deve parar automaticamente assim que seja feito foco no carrossel.

 

Localização do utilizador

O utilizador deve ser constantemente informado da sua localização, por intermédio de um apontamento (feedback) visual evidente no menu, assinalando a página onde este se encontra.

A navegação do tipo “breadcrumb” (navegação por categoria) pode complementar essa informação caso haja mais de dois níveis hierárquicos de navegação.

Desta forma, o utilizador consegue reconhecer a página onde está, assim como a sua localização na estrutura do sítio da internet.

 

Fornecer feedback nos elementos clicáveis

Para lá da necessidade dos itens clicáveis se distinguirem com facilidade relativamente a outros não clicáveis, deve-se dar também um esclarecimento (feedback) contextualizado no momento em que o utilizador passa o rato ou as setas do teclado em cima dos itens clicáveis.