Uma olhada no padrão de design de menu fora da tela

Uma olhada no padrão de design de menu fora da tela

É assim que um menu fora da tela funciona: o usuário clica em um ícone ou executa algum tipo de ação (por exemplo, deslizando da esquerda para a direita em um dispositivo touchscreen) que resulta em um menu de navegação vertical deslizando para a tela a partir da tela .

Esta demonstração fora da tela é um bom exemplo do padrão de design em ação . Um ícone popular que denota a disponibilidade de um menu fora da tela em um site é chamado de navicon .

O navicon se parece com um conjunto de três linhas empilhadas. Este ícone também é chamado de “ícone do menu de hambúrguer” porque, bem, lembra o contorno de um hambúrguer. Você não precisa necessariamente usar um navicon como acionador do seu menu off-canvas; você também pode usar um botão rotulado com um termo convencional como “Menu”. Isso pode até ser uma opção melhor; os resultados de um teste A/B da empresa de publicação na web Exis sugerem que os usuários da Internet ainda não estão familiarizados com o navicon.

A propósito, outro termo para menu fora da tela é gaveta de navegação , mas este último está associado especificamente ao desenvolvimento do Android. Embora ambos funcionem da mesma maneira.

Quando usar o padrão de design de menu fora da tela

Em geral, o padrão de design de menu fora da tela é uma ótima opção para sites responsivos que precisam exibir muitos links que não caberiam em uma barra de navegação horizontal superior tradicional. Para explorar este ponto, vamos falar sobre alguns casos em que um menu off-canvas é uma boa escolha.

Menus com muitos links

Para mim, a barra de navegação horizontal superior ainda é o tipo mais familiar de menu de navegação do site.

É o que os usuários da Internet estão acostumados, especialmente aqueles de nós que não cresceram com dispositivos móveis de tela sensível ao toque. Mas alguns sites precisam de mais espaço do que a largura do layout permite. Nesse caso, um menu off-canvas pode ser implementado como solução para o problema.

Como o menu do site possui muitos links, o menu off-canvas é uma boa opção aqui. O conteúdo do menu é tão extenso que requer até uma barra de rolagem própria.

Menus com categorias

Um menu de navegação vertical à esquerda ou à direita do layout do site é uma boa maneira de apresentar links organizados em categorias, pois o usuário pode ver rapidamente todos os links disponíveis.

Compare o menu de navegação vertical com o padrão de design do menu suspenso , outra maneira de criar um menu que tenha categorias. Os menus suspensos não nos permitem acessar todos os links em uma visualização ou ação. Portanto, se um usuário não tiver certeza de onde um determinado link pode estar, ele terá que percorrer várias categorias até encontrar o que está procurando. Neste cenário hipotético, foram necessárias quatro ações do usuário para encontrar o link de destino A O layout de navegação vertical é ótimo para um menu que organiza seus links em categorias.

É quase perfeito. Mas ocupa muito espaço na tela, o que não é um problema quando o usuário está balançando um monitor de computador widescreen de 36”, mas rapidamente se tornará um quando ela mudar para seu dispositivo móvel. O padrão de design de menu off-canvas aborda o problema usando o conceito de divulgação progressiva ; o menu só é exibido quando o usuário deseja vê-lo.