5 alternativas inteligentes para o menu Hamburger
O espaço da tela é um recurso precioso no celular. Para enfrentar o desafio do pequeno espaço na tela e, ao mesmo tempo, tornar a navegação acessível, os designers costumam confiar na ocultação da navegação atrás do ícone do hambúrguer, um excelente exemplo de navegação oculta. Neste artigo, veremos por que a navegação oculta cria uma má experiência de usuário e quais alternativas estão disponíveis para os designers.
Por que o menu Hamburger é ruim para o UX
No celular, a navegação visível é usada 1,5 vezes mais do que o hambúrguer
Se você está trabalhando em produtos digitais, provavelmente já leu dezenas de artigos descrevendo como o cardápio de hamburguer no celular prejudica as métricas de UX. A principal desvantagem é sua baixa capacidade de descoberta, e isso é feito por números reais. Em estudos qualitativos, NNGroup encontrado essa navegação oculta é menos detectável que a navegação visível ou parcialmente visível. Isso significa que, quando a navegação está oculta, os usuários são menos propensos a usar a navegação. Menus de hambúrguer levam ao engajamento, reduzem a velocidade de exploração e confundem as pessoas.
Então, o que devemos usar em vez disso?
Embora não exista uma regra rígida para aplicativos e sites para dispositivos móveis, uma recomendação geral é usar visível - as principais opções de navegação são mostradas em uma barra de navegação visível - ou navegação combinada , onde algumas das principais opções de navegação são visíveis e alguns estão escondidos sob um elemento interativo.
1. Barra de abas
Se você tiver um número limitado de destinos de nível superior em seu website ou aplicativo, uma navegação com guias pode ser a solução. Quando um menu é visível na parte superior ou inferior, é basicamente anunciado que existe uma navegação e que as pessoas podem ver as opções de navegação desde o início.
As guias parecem ser o padrão de navegação mais simples. No entanto, algumas coisas devem ser consideradas ao projetar este tipo de navegação:
- A barra de guias permite que 5 ou menos opções de navegação sejam exibidas.
- Uma das opções deve estar sempre ativa e deve ser visualmente destacada, por exemplo, usando uma cor contrastante.
- A primeira guia deve ser a home page e a ordem das guias deve estar relacionada à prioridade ou ordem lógica no fluxo do usuário.
- É melhor usar ícones junto com rótulos para cada opção de navegação. Ícones sem rótulos funcionam apenas para ações comuns, como um ícone de lupa para pesquisa e para interfaces que os usuários usam com frequência (por exemplo, Instagram).
Dica: para economizar espaço na tela, a barra de navegação pode ser ocultada / revelada na rolagem para baixo e para cima.
2. Barra de guias com opção "Mais"
Quando você tem mais de 5 destinos de nível superior, uma solução prática pode ser mostrar as 4 seções priorizadas e ter um 5º elemento como uma lista das opções restantes.
Os princípios de design para essa solução são basicamente os mesmos da barra de guias. Há apenas uma exceção: o último elemento é o item "mais".
O item "mais" pode funcionar como um menu suspenso ou até vincular a uma página de navegação separada com as seções restantes. A primeira vista, esta solução não é muito melhor do que o menu de hambúrguer, já que também oculta o conteúdo e seu rótulo não diz muito sobre o que está escondido por trás dele. Se você priorizar corretamente as opções de navegação, no entanto, a maioria dos usuários terá 4 ou 5 opções visíveis de navegação de prioridade máxima na tela o tempo todo, para que a experiência de navegação para elas seja melhorada.
3. Menu Recolhendo Progressivamente
O menu de redução progressiva, também conhecido como padrão "Prioridade +", é um menu que se adapta à largura da tela. Ele mostra o máximo possível da navegação e coloca todo o resto sob um botão "mais". Basicamente, este padrão é uma versão sofisticada da navegação 'Tab bar + more', onde o número de opções de navegação escondidas atrás do menu “more” depende do espaço disponível na tela. A flexibilidade desta solução proporciona uma melhor experiência do usuário do que uma barra de guias 'estática' + mais '.
4. Navegação rolável
Semelhante aos dois padrões anteriores, essa é outra abordagem para listas mais longas. Se você tiver várias opções de navegação sem uma grande distinção em prioridades, por exemplo, gêneros musicais, você pode listar todos os itens em uma exibição rolável. Ao tornar a lista rolável, você permite que os usuários se movam de um lado para o outro.
A desvantagem desta solução é que ainda apenas os poucos itens principais são visíveis sem rolagem e todos os demais estão fora da vista. Esta é, no entanto, uma solução aceitável quando se espera que os usuários explorem o conteúdo, por exemplo, categorias de notícias, categorias de música ou em uma loja online.
5. Navegação em tela cheia
Enquanto com outros padrões mencionados neste artigo, a luta é minimizar o espaço ocupado pelos sistemas de navegação, o padrão em tela cheia adota a abordagem exatamente oposta. Essa abordagem geralmente dedica a home page exclusivamente à navegação. Os usuários tocam ou deslizam o dedo para revelar opções de menu adicionais à medida que rolam para cima e para baixo.
Esse padrão funciona bem em sites e aplicativos baseados em tarefas e direcionados, especialmente quando os usuários tendem a se limitar a apenas uma ramificação da hierarquia de navegação durante uma única sessão. O afunilamento de usuários a partir de páginas gerais de visão geral até páginas detalhadas ajuda-os a se concentrar no que estão procurando e a se concentrar no conteúdo de uma seção individual.
Navegação em tela cheia no Yelp
Usando a navegação em tela cheia, os designers podem organizar grandes blocos de informações de maneira coerente e revelar informações sem sobrecarregar o usuário. Depois que o usuário decidir onde ir, você poderá dedicar todo o espaço da tela ao conteúdo.
Conclusão
Com padrões de navegação para dispositivos móveis, não há uma solução única para todos os tipos; Isso sempre depende do seu produto, dos seus usuários e do contexto. No entanto, a base de toda navegação bem projetada é a arquitetura de informações: estrutura clara, prioridades e rótulos baseados nas necessidades de seus usuários. Ajudar os usuários a navegar deve ser uma prioridade máxima para todos os designers de aplicativos. Tanto os usuários iniciantes quanto os que retornam devem ser capazes de descobrir como navegar pelo seu aplicativo com facilidade.