Web design responsivo, por ser um fenômeno tão recente no desenvolvimento web, ainda tem muito para ser explorado, discutido, criado e evoluído. Quando o assunto são maneiras de se navegar pelos conteúdos do site então, aí é que a criatividade pode ser extrapolada para trazer resultados surpreendentes! Por exemplo, você já ouviu falar do Menu Cortina (ou Curtain Menu)?
Neste artigo, conheça o Menu Cortina (Curtain Menu), um novo tipo de menu para navegação mobile que traz soluções inteligentíssimas e consonantes à UX, pronto para ser um dos menus mobile mais úteis até o momento.
Joey Rabbitt é um designer digital que já trabalhou com clientes como Lionsgate, HBO e, atualmente, trabalha na Sony PlayStation (SCEE). Ele desenvolveu o Menu Cortina justamente para o PlayStation.com, passando por vários rascunhos internos e protótipos antes de passar por testes de usabilidade com a Nielsen Norman Group.
Do desktop para mobile
Tornou-se claro que o menu drop-down, como um elemento de interface de usuário, tem raízes firmes no design de desktop devido a 2 fatores nativos que permitem uma experiência aceitável.
- Input de mouse permite ao visitante o hover, convenientemente revelando o conteúdo sem a necessidade de cliques ou taps.
- A proporção de paisagem (landscape) de uma tela em desktop permite que o conteúdo se distribua no eixo horizontal
Infelizmente, nenhum destes 2 pontos são aplicáveis no contexto de dispositivos móveis devido a seu método de input touch-screen e, principalmente, devido à orientação vertical (portrait).
Padrões de navegação mobile existentes
Enquanto pesquisava por padrões de navegação mobile existentes, Rabbitt notou 2 padrões comuns para menus mutli-level. Ambos com suas próprios vantagens e desvantagens.
1. A mecânica do accordion
O visitante escolhe um dentre vários links primários que se “expandem” para revelar opções secundárias. Quando o menu está inicialmente aberto, a pessoa pode claramente enxergar todos os links de navegação primária.
Entretanto, é possível ver pelo exemplo abaixo que, se uma categoria contém muitos links, uma vez que a pessoa faça sua escolha, existe o potencial de outras categorias serem “empurradas” para fora da tela. Se uma categoria contém uma longa lista de links, também é possível que isso aconteça com links primários, requerendo à pessoa que use a rolagem ou “feche” seções do menu para navegar entre as categorias.
Um melhoramento seria um menu que retivesse a visibilidade de todas as categorias primárias mesmo quando uma delas fosse expandida.
2. A mecânica do “Voltar”
Outra solução comum para exibir múltiplos níveis de links é usar um botão “Voltar”. Esse métodos mostra um conjunto de links primários que se escondem uma vez que a pessoa faça uma seleção, só sendo mostrados novamente quando se clica em uma opção de “Voltar” ou “Acima”, para retornar ao nível anterior.
O problema, para Joey, é essa necessidade de remover todas as opções da navegação primária, adicionando um passo extra na navegação.
Um melhoramento seria um menu que permitisse à pessoa escolher entre categorias sem passos desnecessários.
Com isso em mente, Joey quis projetar um menu que tivesse melhores nestes 2 pontos.
O Menu Cortina (Curtain Menu)
Um menu mobile diferente para navegação multi-level, que usa camadas deslizantes, tal como um par de cortinas.
Bem parecido com sua contraparte de menu desktop dropdown, o conteúdo é dividido em 2 níveis: um conjunto primário de links, em que cada contém um grupo de links secundários e; ambos os níveis de links são mostrados ao mesmo tempo.
Porque o espaço horizontal da tela é limitado em dispositivos de orientação portrait, links se empilham uns em cima dos outros ao invés de se disporem lado a lado.
Quando o visitante abre o menu, a “cortina” da esquerda desliza para mostrar o conjunto primário de links.
Ambos os níveis de links são mostrados ao mesmo tempo.
Quando a pessoa faz uma seleção, a “cortina” da direita, contendo os links secundários, desliza à tela. Todas as categorias de nível primário continuam visíveis, prevenindo a necessidade de “fechar” alguma opção (accordion) ou “Voltar”. Foi usada animação nas camadas sobrepostas para evidenciar a hierarquização das opções.
O uso de ícones na cortina da esquerda permite que a cortina da direita seja expandida quase que totalmente, otimizando o espaço disponível em tela. Os ícones também são indicativos para os que preferem navegar entre as categorias mais rapidamente.
Ícones não são sempre explícitos o bastante para fazerem sentido sem a descrição, então os labels são inclusos para auxiliar os visitantes.
Todas as categorias de nível primário continuam visíveis, prevenindo a necessidade de “fechar” alguma opção (accordion) ou “Voltar”.
As pessoas veem ambos, ícones e labels, usados nos links da navegação primária quando abrem o menu pela primeira vez. Isso não somente mostra a todos a mecânica básica do menu, mas, também, informa sobre as categorias disponíveis. Uma vez que se tenha navegado para um link secundário, quando o menu abrir da próxima vez, revelará ambas as cortinas imediatamente a fim de evitar que seja preciso clicar na categoria primária todas as vezes.
Foi incluído um handle na cortina da direita que permite que aqueles que quiserem ver os labels das categorias primárias possam deslizar a cortina à vontade.
Geralmente, há espaço vertical suficiente para comportar uma quantidade lógica de categorias na cortina da esquerda sem a necessidade de scroll — no entanto, esta continua sendo uma opção.
Se a cortina da direita contiver uma número grande de links, é possível rolar o conteúdo para cima e para baixo (overflow). Um pequeno efeito de fade na parte de baixo da cortina pode ser usado para indicar que há mais conteúdo.
Conclusão sobre o Menu Cortina (Curtain Menu)
O próprio Joey Rabbitt assume que a ideia do Menu Cortina não está “fechada” e que ainda há espaço para melhorias. Os testes continuam rumo ao aprimoramento. Mas convenhamos que, em seu atual estado, o “Curtain Menu” já se mostra bastante eficiente — lembre-se de que passou por uma bateria de testes de usabilidade com a Nielsen Norman Group — e, como já discutido anteriormente, mostra que as possibilidades e inovações referentes a interfaces em web design responsivo estão somente começando!