Tabs de Navegação
O site Behance utiliza um sistema de tabs para a navegação principal.
Problema
O utilizador precisa de navegar dentro de um web site para localizar conteúdos ou funcionalidades e ter uma indicação clara da sua localização actual no web site.
Solução
As tabs, que são uma metáfora de um conjunto de ficheiros do "mundo físico", são uma das formas de assinalar o contexto onde o utilizador se encontra pois indicam visualmente e de forma clara a sua localização dentro de um conjunto de informação.
Quando usar
- Existem 3 a 10 títulos de categorias.
- Os títulos das categorias são relativamente curtos e previsíveis.
- Não é previsível que o nome das categorias mude frequentemente.
- A largura total da página é necessária para conteúdo.
- As categorias pertencem a um único web site
- É necessário representar as opções de navegação hierarquicamente superiores de um web site.
- É necessário indicar a localização corrente de um utilizador num web site.
- É necessário mudar a totalidade da página e não uma secção desta.
- É necessário ter uma forma de controlar as opções de navegação hierarquicamente superiores.
Como usar
- Apresentar uma única linha de tabs numa barra horizontal debaixo do cabeçalho do web site.
- Toda a área da tab deve ser "clicável" e não apenas o título da tab.
- A navegação por tabs deve estar presente em todas as páginas acessíveis através das tabs.
- Quando a lista de categorias se torna demasiado longa, deve considerar-se a utilização de uma navegação lateral.
- A tab seleccionada deve ser visualmente proeminente em relação às outras tabs.
- A página a que pertence a tab seleccionada deve estar "ligada" a esta através de pistas visuais. A selecção de uma nova página redesenha a página por completo e liga visualmente esta à tab em questão.
- Nunca sobrepor várias tabs.
- As tabs devem aparecer no mesmo local, à medida que o utilizador navega no conjunto de tabs.
Acessibilidade
Permitir que o utilizador navegue entre as várias tabs de forma lógica através da tecla tab.
Padrão adaptado da Yahoo! Design Pattern Library ao abrigo da licença
Creative Commons Attribution 2.5 License.