Tabs (abas)

Abas que trocam vistas de conteudo relacionado no mesmo contexto, sem mudar de pagina.

Hard

O que é

Tab e a aba que agrupa conteudo em secoes rotuladas e deixa a pessoa trocar entre elas sem sair da pagina. E um dos padroes mais familiares de interface, ja que aparece no navegador com varios sites abertos e na tela de ajustes dividida por categoria.

A diferenca em relacao ao menu esta no escopo. Enquanto o menu leva pra outra area ou pagina, a tab organiza conteudo proximo dentro do mesmo contexto. Por isso uma tela de Configuracoes com abas Conta, Notificacoes e Privacidade mantem tudo acessivel sem fazer a pessoa sair dali.

A colocacao costuma ser horizontal no topo da secao, ou vertical em apps mais densos. O numero saudavel gira em torno de quatro a seis, porque acima disso o rotulo fica dificil de varrer e o excedente acaba pedindo um Mais. E vale lembrar que a aba precisa ser operavel por teclado, com foco visivel, pra nao excluir quem nao usa o mouse.

Em uma frase

A tela de configuracoes vira tres abas no mesmo contexto em vez de tres paginas separadas.

A pergunta que ele responde

Como mostro conteudo relacionado na mesma tela sem espalhar em varias paginas?

Quando usar

Faz sentido quando o conteudo e relacionado e cabe no mesmo contexto, sem precisar trocar de pagina.

Como não usar

O cuidado e nao encher de abas a ponto de o rotulo nao caber, e nao usar tab pra navegar entre areas que na verdade pediriam um menu.

Na prática

Pense numa tela de configuracoes que vira tres abas, Conta, Notificacoes e Privacidade, em vez de virar tres paginas separadas. A pessoa resolve tudo sem trocar de pagina.

Não confunda com

Vale separar tabs de menu. A aba troca conteudo relacionado dentro do mesmo contexto, enquanto o menu navega pra outra area ou pagina. E ela tambem e diferente da tab bar de app, que e a navegacao de topo posicionada no rodape do celular.

D

Em inglês

Tabs

Pronúncia

tebs

Também chamado de

tabs, abas, abas de conteudo

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre Tabs, Used Right