UX CALENDAR – 17 DE DEZEMBRO – Menus diários

A navegação de um site é um critério essencial do seu sucesso. Para isso, os menus de navegação existem para orientar os usuários de forma eficaz. Eles devem ser claros para que sua visita seja o mais tranquila e agradável possível.

O papel dos menus de navegação :

  • Estruture e priorize o conteúdo e os recursos do produto
  • Destaque recursos essenciais
  • Simplifique a jornada do usuário

Na idade de “mobile-first” onde o mobile UX é uma questão chave, vamos descobrir juntos os diferentes tipos de menus de navegação mobile mais usados.

#1 O Tabber ou Tab Bar – um grande clássico

A barra de abas, um menu geralmente colocado na parte inferior do aplicativo, é de longe o mais difundido. Seu design clássico permite que o usuário navegue com uma mão, o que é um dos motivos de sua popularidade.

benefícios : exibe claramente o ponto de entrada e os recursos mais importantes.

desvantagens : Diante de um grande número de recursos, este modelo parece menos adequado.

fonte: https://dribbble.com/shots/4800174-Fluid-Tab-Bar-Interaction

#2 Navegação em Grade e Carrossel

A navegação em grade reúne os principais pontos de entrada na página inicial. No entanto, seu design não permite que os usuários vejam o conteúdo na primeira tentativa, o que dificulta suas escolhas. Cada vez menos aplicações utilizam este tipo de menu como navegação principal, no entanto é interessante para o desenho do índice de páginas secundárias ou pontos de entrada para ferramentas.

benefícios : Este tipo de navegação é simples, mas não é complexo de configurar. Sua eficácia pode ser otimizada tornando-a mais clara e óbvia.

desvantagens : A escolha das cores é essencial. Um design muito sofisticado pode causar fadiga visual ao usuário.

fonte: https://dribbble.com/shots/14723386–54-Bonsai-Gardening-99-Days-in-the-Lab

#3 A gaveta (“Drawer”), “Flyout” ou menu oculto

O menu da gaveta é uma boa alternativa à barra de guias que limita o número de recursos. O problema é resolvido reorganizando os elementos interativos verticalmente e ocultando parte da página atual.

benefícios : libera espaço e permite que os usuários se concentrem na página atual. 

desvantagens : Não é adequado para usuários que desejam passar rapidamente de uma categoria para outra (por exemplo, no comércio eletrônico).

fonte: https://dribbble.com/shots/3661919-Navigation-Drawer-Concept

fonte: https://dribbble.com/shots/4731003-Airbnb-Menu-transition-Mobile

#4 O menu do leme (“Leme”) ou barra de guias dobrada
(“Barra de Abas Dobráveis”)

A meio caminho entre a barra de abas e o botão flutuante, o nome deste menu é inspirado no leme do navio com outros botões de controle em ambos os lados. Ele é colocado e estruturado como a barra de guias clássica, mas libera espaço para outros recursos quando dobrado.

benefícios : Assim como a barra de guias, ela destaca o ponto de entrada dos principais recursos. Além disso, outros recursos específicos da página ativa podem ser adicionados.

desvantagens : O mesmo que o menu da gaveta. não é adequado para usuários que desejam navegar rapidamente de uma categoria para outra.

fonte: https://dubaimonsters.com/blog/create-a-functional-mobile-navigation-menu/

#5 O botão de ação flutuante (FAB)

Um botão de ação flutuante (FAB) é um botão circular que aciona a ação principal na interface do usuário do seu aplicativo. 

Seu nome é usado pela primeira vez pelo Google em projeto de material.

Ao contrário do menu do leme, sua localização e estrutura são gratuitas,
que permite mais recursos.

benefícios : Dá a possibilidade de integrar um maior número de funcionalidades.

desvantagens : não é adequado para usuários que desejam fazer malabarismos de uma categoria para outra instantaneamente. Além disso, na ausência de legendas, a iconografia pode ser difícil para alguns usuários entenderem.

fonte: https://dribbble.com/shots/3908815-Floating-button

#6 Navegação Combinada

Para ultrapassar os limites de certos tipos de menus, os designers não hesitam em combinar vários modos de navegação para melhor eficiência. aqui estão alguns exemplos:

Tabber + Leme

fonte: https://dribbble.com/shots/13986315-Floating-Button-File-Upload

Tabber + Botões de Ação Flutuantes

fonte: https://dribbble.com/shots/5722292-Tabbar-Animation/attachments/11019477?mode=media

Grade + Leme

fonte: Alex Permyakov- https://freefrontend.com/css-menu/

 

"Este não é meu nome!"

Mini jogo: NNomeados erroneamente, esses menus de “hambúrguer” na verdade são chamados de outra coisa. Você consegue encontrar a origem de seus nomes?

Clique para retornar
cardápio do Bento

Clique para retornar
O cardápio do hambúrguer

Clique para retornar
O cardápio do kebab

Clique para retornar
O cardápio da almôndega

Clique para retornar
O menu "Doador"

Clique para retornar
O menu "Hambúrguer vegetariano"

Conclusão

Os designers estão cada vez mais conscientes da importância do design do menu de navegação para melhorar a experiência do usuário. 

Seja no Android ou iOS, o menu Hambúrguer está sendo gradualmente substituído pelo menu Tab Bar, que está voltando desde seu auge em 2008.

Fazê-los eficientes e inovadores, os designers exploram todas as possibilidades técnicas integrando ícones maiores e mais claros.

Todos os dias nascem novas ideias, orientadas para uma navegação simplificada e uma melhor ergonomia.

E você, o que tem no cardápio hoje?

 

 

Sandra LE UI-UX Designer @UX-Republic

 

Nossos próximos treinamentos