Tabs Modulares
Problema
O utilizador precisa de navegar dentro de um ou vários painéis sobrepostos de conteúdos ou funcionalidades sem ter de recarregar a página.
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 de forma clara a sua localização dentro de um conjunto de informação.
Quando usar
- Há vários painéis de conteúdo ou funcionalidades, mas apenas existe espaço para mostrar um painel.
- Os diferentes painéis de conteúdo ou funcionalidades não precisam de ser vistos em simultâneo.
- É necessária uma forma de navegar entre os vários painéis sem mudar de página. Para navegar entre diferentes páginas usar as tabs de navegação.
- Existem duas a dez categorias.
- Os títulos das categorias são relativamente curtos e as tabs não devem ultrapassar o espaço disponível na horizontal.
- É importante comunicar qual o painel que está seleccionado.
Como usar
- Apresentar uma única linha de tabs imediatamente acima do conjunto de painéis que elas irão controlar.
- Nunca sobrepor várias linhas de tabs para controlar um único conteúdo ou conjunto de funcionalidades.
- Separar visualmente as tabs.
- Ter sempre uma tab seleccionada com o seu conteúdo visível.
- Distinguir visualmente a tab seleccionada.
- O conteúdo deve estar visualmente ligado à tab a que está associado.
- Apenas um painel deve estar visível de cada vez.
- As tabs devem permanecer na mesma localização enquanto o utilizador vai clicando nelas.
- Seleccionar uma tab não deve afectar outras partes da página.
- Ao seleccionar uma tab não deve navegar para uma página diferente ou despoletar uma acção.
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.