Nesta aula, exploramos os principais componentes de navegação usados em interfaces e como eles ajudam o usuário a navegar, encontrar informações e executar ações com eficiência. Foram discutidas diferentes abordagens, exemplos práticos e boas práticas para aplicação.

Pontos principais da aula:

1. Objetivo da navegação:

   • Facilitar a jornada do usuário do ponto A ao ponto B, evitando que ele se perca.

   • Prover caminhos claros para recuperação caso o usuário saia de sua rota.

2. Tipos de navegação:

   • Barra de navegação inferior (mobile): Com até 5 itens, organiza funções principais do app.

   • Navegação lateral (web e apps): Menu que permanece fixo e organiza seções de maneira hierárquica.

   • Navegação superior (websites): Organiza acessos a páginas principais, com possibilidade de indicar links externos.

   • Hierarquia de navegação: Idealmente, limite-se a 3 níveis para evitar confusão.

3. Ações em botões:

   • Botões de ação (CTA) devem ter destaque e design único, diferenciando-os de menus de navegação.

4. Estados de navegação:

   • Default: Estado inicial do item.

   • Hover: Quando o cursor passa sobre o item.

   • Press: Quando o botão é clicado.

   • Active: Indica o item ou página atual.

   • Disabled: Indica itens desativados (evitar uso sem explicação clara).

5. Boas práticas:

   • Priorizar clareza e previsibilidade na navegação.

   • Indicar mudanças significativas, como links externos ou novas páginas.

   • Ajustar a navegação ao contexto, como esconder menus em páginas de checkout.

Links extras

• Artigo - 5 Navigation UX Tips to Improve the Usability of your Product & Applications