30 de dezembro de 2009

Interfaces de (micro) navegação

Interfaces de (micro) navegaçãoOutro dia me lembrei de um projeto que teve interferência (malsucedida) de um colaborador: o layout original do site tinha navegação por menus comuns (barra de navegação) e o colaborador (programador) substituiu este menu (comum) por um menu expansível, do tipo acordeão.

O problema estava no fato de que em cada tópico (ou link) o menu acordeão (do tipo "exibe-um-oculta-os-demais") exibia muito conteúdo (página inteira ou mais) não necessariamente padronizado (formulários, listas, tabelas) o que gerava uma confusão para quem navegava na interface: ao contrário do projeto original (menu tradicional, fixo), a navegação não permitia ir para qualquer ponto do site, com um mínimo de cliques.

Isso me leva a algumas recomendações preliminares, mesmo sem testes de usabilidade que validem essas hipóteses, a priori.

Antes de tudo queria diferenciar os elementos de micronavegação[1] menus, lista e barra de navegação:
  • Menus:
    conjunto de opções (links) verticais onde o tópico principal é visível todo o tempo e os subtópicos por seleção direta. Veja o exemplo 1 abaixo;
  • Lista (de opções ou seleção):
    conjunto de opções verticais onde todos os tópicos são visíveis, ou são visíveis através de rolagem. Veja o exemplo 2 abaixo;
  • Barra de navegação:
    conjunto de opções verticais ou horizontais, que pode ter nível único ou subníveis, sendo todos sempre visíveis. Veja o exemplo 3 abaixo;
Link1
Link2
Link3
Link1
      Link2
      Link3
Link1 . Link2 . Link3
Exemplo 1 Exemplo 2 Exemplo 3

Existem situações mistas, onde a barra de navegação é composta por diversos menus de nível único (exemplo 4) ou multinível (exemplo 5). Neste caso, a nomenclatura adotada normalmente é a primeira (barra de navegação) que contém a segunda categoria (menus).

Exemplo 4
Exemplo 4

Exemplo 5
Exemplo 5

Vale lembrar que menus e listas são elementos de interface que podem ser utilizados em outras situações que não navegação de hipertexto (formulários para seleção de opções e envio de dados, por exemplo). Estas, assim como a barra de navegação são estruturas de micronavegação como os hiperlinks (ou hipervínculos) ou links de hipertexto por permitirem acesso direto à informação.

1. Barra de navegação de nível único
  • podem ocorrer em uma página (sumário ou índice) ou mais páginas;
  • devem pelo menos indicar a seção do site em que o usuário se encontra;
  • em mais de uma página devem manter o mesmo desenho (aparência, posição e organização) a fim de gerar consistência na navegação, evitando que o usuário tenha de pensar para onde deve ir;
  • se prestam a navegação "rasa" (simples).
Link1 . Link2 . Link3 Link1
Link2
Link3
Horizontal Vertical
Exemplo 6

2. Menus de navegação nível único ou multinível
    Exemplo 7
    Exemplo 7
  • podem ocorrer em uma ou mais páginas;
  • como os os sub-tópicos não são sempre visíveis, a página deve indicar a seção do site em que o usuário se encontra;
  • devem mater o mesmo desenho (aparência, posição e organização) a fim de gerar consistência na navegação;
  • se prestam a navegação profunda;
3. Barra de navegação do tipo BredCrumb Trails (Trilhas de migalha de pão)
  • ocorrem em em várias páginas;
  • por natureza, indicam a seção do site ou categoria em que o usuário se encontra;
  • se prestam a estruturas de navegação profunda;
  • os BC de caminho por reproduzirem o histórico do navegador, devem ser implementados via programação;
Link1 > Link2 > Link3
Exemplo 8

4. Guias de navegação
  • podem ocorrer em várias páginas, mas normalmente estão relacionadas a seção de um conteúdo (site) ou função (aplicativo);
  • servem para sinalizar navegação "rasa" (sem subníveis dentro de cada tópico);
  • devem mater o mesmo desenho (aparência, posição e organização) a fim de gerar consistência na navegação seja horizontal ou vertical.
Exemplo 9
Exemplo 9
Exemplo 9

5. Listas de navegação com rolagem
  • podem ocorrer em uma ou mais páginas;
  • devem permitir indicar, como qualquer link de hipertexto, a última página navegada, a página atual páginas não-visitadas; essa indicação pode ocorrer na própria página, próxima da lista.
Link1 Link2 Link3
Exemplo 10

6. Menus de navegação expansíveis (acordeão)
  • podem ocorrer em uma ou mais páginas;
  • listas verticais que exibem conteúdo não devem exceder uma tela em resolução mínima [2], tanto para listas do tipo "exibir-uma-ocultar-outras" (exemplo 11) como para as "exibir-mais-de-uma-lista" (exemplo 12) para não desorientar o usuário;
  • listas horizontais devem ocorrer em apenas uma linha, para não desorientar o usuário com excesso de opções;
  • listas verticais longas devem ocorrer com rolagem e formatação (ou ordenação, conforme exemplo 13) que indique hierarquia.
Exemplo 11.

Exemplo 12 e exemplo 13.

7. Menus de navegação tabulares (ou tabelas de links)
  • podem ser do tipo pop-up/de salto (sobre a página) ou inline (dentro da página);
  • dependendo do tamanho, pode ter rolagem;
  • podem ocorrer em uma ou mais páginas;
  • sumarizam ou indexam [3] ou conteúdo de uma seção do site;
  • se prestam a estruturas de navegação complexas, mas não substitui um mapa do site;
  • não devem exceder a largura e altura de uma página, na resolução mínima [2].
Exemplo 14.

8. Mapa do site
  • descrição geral e completa da estrutura do site;
  • é o segundo nível de navegação dentro de um hipertexto, logo após as estruturas de micronavegação;
  • não devem ter links ocultos;
  • devem estar ordenados como índice ou sumário [3].
Exemplo 15.

9. Sistema de buscas

Normalmente por palavras-chave, é uma forma de gerar uma tabela de links que contenham os termos ou palavras procuradas. Atualmente o recurso de pré-busca contextual (tabela de links gerados enquanto se digita um termo) está se tornando um recurso popular nos buscadores de internet.
  • normalmente se situa na área principal de um site (topo ou box);
  • o uso de sistemas de busca próprio ou de terceiros geralmente se restringe ao site em questão;
  • deve ser utilizado em sites complexos ou com conteúdo extenso/específico;
  • o conteúdo indexado deve ser baseado em texto, ou classificado por texto atraves de tags descritivas (no caso de imagens ou mídia não-textual como vídeo, áudio, animações)
Exemplo 16.

10. Nuvem de links e marcações
  • Nuvem de links (link cloud)
    são um conjunto ou tabela de links gerados a partir de sistemas de buscas normalmente dentro de um corpo fechado[4] como um blog ou favoritos mas podendo ocorrer em buscas em corpo abertos como a Internet.
  • Nuvem de marcações (tag cloud)
    estão dentro do que se classifica como Folksonomia (Classificação Popular, numa tradução livre): uma comunidade dentro de um corpo fechado(fórum, blog) define suas palavras-chaves para classificar o próprio conteúdo ali gerado, facilitando a classificação e localização de assuntos, sem "engessar" a classificação e localização de assuntos com palavras-chave pré-definidas.
Atualmente ambos estão assumindo um papel semelhante ou paralelo ao mapa do site ou sistema de buscas, ao exibirem links relevantes conforme o número de acessos ou popularidade (termos mais utilizados num corpo fechado) dentro de um termo ou assunto.
  • podem ser ou não contextuais (relacionados a um termo ou assunto) , pois podem reunir todos os termos mais populares dentro de um corpo fechado ou aberto;
  • a hierarquização dos termos é visual, por tamanho da fonte, cor ou estilo.
Internet, Comunidades, Vídeos, Podcast, MP3, Fotografias, Redes de relacionamento.
Exemplo 17.

________________________________________
Notas:
[1] Uma razoável descrição e taxonomias de elementos de navegação podem ser lida neste artigo.
[2] no momento (dez.2009) a resolução mínima de tela para navegação é de 800x600 pixels, o que dá uma área útil do navegador (visualização) em torno de 760x410 pixels.
[3] Indexação: Listagem ou organização por ordem alfabética ou de assunto; Sumarização: Listagem ou organização, por ordem cronológica.
[4] “Corpos fechados” segundo BRUSILOVSKI (2001) estão relacionados com sistemas de recuperação de informação que fazem “busca dentro de um site”; aqui uso o termo para me referir a um conjunto de páginas relacionadas dentro de um blog, site de blogs ou blogs que compartilhem uma mesma estrutura de nuvem de tags/marcações. "Corpos abertos", por oposição, seriam espaços que abrangem uma ou mais redes de computador como a internet.

Referência:
BRUSILOVSKY, Peter. Adaptive Hypermedia: User Modeling and User-Adapted Interaction, Holanda:Kluwer Academic Publishers, 2001.

0 comentários neste post

Postar um comentário

Atenção comentarista!
  • Todos os comentários serão rigidamente moderados;
  • Identifique-se! Comentários anônimos não são recomendados;
  • Comentários com três ou mais links serão removidos;
  • Comentários escritos em miguxês ou excesso de gírias serão removidos;
  • Comentários escritos com predominância de maiúsculas serão removidos;
  • Por favor, prove que você é coerente, educado e bem informado: conheça o restante do site, saiba quem somos, sobre o que, para quem e como escrevemos antes de comentar futilidades;
  • Respeite as opiniões dos autores e dos outros comentaristas. Seja breve e sem ofensas;
  • Escreva comentários relevantes e que contribuam de alguma forma para o bem da humanidade;
  • Não seja um inútil social. Lembre-se que o mundo não gira ao seu redor.