Categorias

Newsletter

  • Mobile UX/UI Design

    Como projetar um site responsivo? Navegação

    Projetar modelos de navegação pode ser um desafio quando falamos em diferentes tamanhos de tela. Portanto, alguns métodos populares podem ajudar a tornar a navegação […]


    Projetar modelos de navegação pode ser um desafio quando falamos em diferentes tamanhos de tela. Portanto, alguns métodos populares podem ajudar a tornar a navegação em um site responsivo mais ágil. 

    A principal preocupação ao projetar um site responsivo é saber aproveitar o espaço, principalmente em telas pequenas. Por isso, é preferível que o usuário comece a interagir com o conteúdo sem que a navegação fique no meio do caminho, o que significa limitar o espaço destinado à navegação.

    Segundo , ao projetar um site responsivo é importante manter em mente que:

    • O espaço para navegação horizontal é limitado;
    • Possibilidade de cerca de 4 links em um menu horizontal;
    • Botões, links e alvos muito pequenos dificultam a seleção.  Fique atento aos “dedos gordos”.
      Confira “Identificando Usabilidade em sites móveis
    • Menus verticais ocupam muito espaço;
    • Um bom primeiro passo é reduzir os itens do menu ao necessário.Você realmente precisa de 10 links? É possível agrupar seus links em quatro ou cinco categorias principais? Se sim, como lidar com uma sub navegação dentro de cada seção?

    Abaixo estão modelos dos simples aos mais complexos de navegação sugeridos por Brad Frost.

    Padrões simples

    Top Nav ou abordagem “não fazer nada”

    O nome dessa abordagem já é bastante sugestivo. Significa simplesmente que o o menu de navegação continua da mesma maneira que visualizado em telas maiores, ele continua no topo, as fontes e o espaçamento diminuem, e o máximo que pode acontecer aqui é o empilhamento dos links verticalmente. Devido a sua facilidade de implementação, é encontrado em muitos sites mobile.

    A grande vantagem dessa abordagem é a simplicidade. Uma questão importante é que ele não funciona muito bem para sites com diversos itens no menu. Também é propenso a problemas de “dedos gordos”, já que na redução do tamanho do menu os links se tornam muito pequenos e difíceis de navegar com precisão.

    modelos navegacao responsivos top nav V

    modelos navegacao responsivos top nav IV

    modelos navegacao responsivos top nav I

    Footer Anchor ou Âncora de Rodapé

    Como o nome sugere, a navegação é deslocada para o rodapé, deixando apenas um link âncora no topo do site que permite o usuário ir direto para o footer. A grande sacada desse padrão é abrir espaço para o conteúdo da página mantendo o usuário com acesso a navegação de maneira rápida e fácil. É relativamente fácil de implementar, não requer javascript e provém um ótimo suporte. O único conselho dado por Frost é manter em mente que pular direto do cabeçalho para o rodapé do site pode deixar alguns usuários desorientados.

    Momentum

    footer anchor

    Contents Magazine

    footer anchor2

    Footer Only ou Rodapé

    Similar ao Footer Anchor, a única diferença é que não possui âncora no cabeçalho. Os usuários mobile precisam scrollar todo o site até o final para encontrar e navegar no menu.

    Pea

    pea

    Fray

    nav-fray-650x295

    Menu de seleção

    Outro padrão bastante utilizado é transformar a navegação em um menu de seleção, ou seja, transformar sua navegação em um menu drop-down. Isso possibilita salvar bastante espaço, mas pode ser complicado caso sua navegação inclua submenus.
    Five Simple Steps

    Tela do Five Sample Steps

    Retreats 4 Geeks

    Tela do Retreats 4 Geeks

    Viljami Salminen

    Tela Responsive Design

    The toggle

    O toggle de certa maneira também é um menu de seleção só que com uma funcionalidade em JavaScript bem mais elegante. Em telas pequenas, a navegação é resumida em um link “Menu”, que quando pressionado revela a navegação em linhas horizontais. O resultado é uma navegação que economiza espaço e é fácil de acessar.

    É importante se assegurar de que a navegação continue acessível para usuários com pobre suporte de JavaScript. Aaron Gustafson desenvolveu uma técnica para isso chamada “Build a Smart Mobile Navigation Without Hacks“.

    Green Belt

    Tela Greenbelt

    Starbucks

    Tela de navegação do app da Starbucks

    William & Mary

    Tela do app William & Mary

    Atlanta Ballet

    Tela do Atlanta Ballet

    Navigation Fly-Out

    Esse modelo é inspirado no padrão Off-Canvas de layout, exemplificado aqui. Ao invés de aparecer a cima ou a baixo do conteúdo, a navegação é localizada para os lados, off screen, e desliza para a direita ou para a esquerda quando solicitada, em forma de slide. Esse padrão teve grande suceso após ser utilizado pelo Facebook em sua versão mobile.

    menuicon

    menu_800px_1x  menufication-slide

    demo-2

    Priority +

    Como o nome sugere, esse padrão mostra apenas os links considerados mais importantes para a navegação, escondendo os menos importantes em baixo de um link genérico “mais”, “outros”, ou similares.

    Esse modelo pode ser bastante efetivo para casos onde um número grande de links se faz necessário. Porém, decidir quais itens são mais importantes que outros, requer realizar suposições pelos usuários, e por mais que nós esperamos estar corretos em relação as preferências de nossos usuários, sabemos que há possibilidade de que muito deles procurem por outra coisa.

    The Sweat Hat Club

    Tela do The Sweet Hat Club

    Tela mobile do The Sweet Hat Club

    Pull Down

    Usando o conceito de “puxar para baixo”, esse padrão substitui um elemento de interface do usuário com um gesto natural e é bastante utilizado. Ele tira proveito de uma convenção de smartphones de puxar para baixo o topo da página para atualizar o conteúdo, o que pode em alguns casos confundir o usuário, que puxará para baixo achando que irá atualizar o conteúdo e não revelar a navegação.

    Dconstruct

    Tela Dconstruct

    pulldown

    dow_dribble

    Padrões complexos

    The Multi Toggle

    O Multi Toggle é igual ao Menu Toggle, só que com mais níveis de categorias. Ao tocar na categoria pai, o usuário revela as categorias filiadas por baixo. Frost aconselha o uso de sinal de mais (+) ou acento circunflexo para baixo (? ?) para que os usuários saibam que  há conteúdo.

    Exemplo de navegação Multi Toggle

    The Ol’ Right-to-Left

    Uma das navegações mais modernas e elegantes, esse padrão é uma mistura de vários padrões.

    Os itens são compostos em um menu de navegação, ao ser tocado temos um menu com uma categoria pai, como o multi-toggle. O próximo nível de navegação é um deslize para fora da tela para a direita.

    A animação da direita para a esquerda é sem dúvida elegante e funciona muito bem para navegações que tem um monte de níveis.

    Sony

    sony

    The ‘Skip the Sub-Nav’

    A Sub-navegação inclui itens da categoria pai, contudo, o conteúdo estará disponível nas páginas de destino, ou seja, para acessar os itens filiados é necessário ir para uma tela diferente, o que impossibilita o usuário de visualizar de primeira todos os itens da sub-navegação.

    WWF

    wwf

    Carouseul +

    Esse padrão é um carrousel contendo uma categoria pai com opções de sub-navegação abaixo. O usuário pode navegar horizontalmente pelas opções de navegação ou usar as setas direta-esquerda para mover o carousel.

    Não expõe todas as categorias pai de uma vez, como a priority +, o Carousel + fica girando o que pode fazer com que o usuário não veja todas as opções a sua disposição.

    Intel

    intel

    Path Style

    Padrão ortemente dependente de CSS3 e JavaScript. Quando um usuário pressiona um botão em destaque e  itens de menu se expandem ao redor do botão principal. Para fechar o menu, o usuário deve selecionar uma das opções apresentadas ou pressionar o botão principal novamente. Você pode obtê-lo a partir desse script.

    4S8iJ

    Esses são apenas alguns dos padrões que existem atualmente por aí, muitos outros surgem a cada momento, e você deve se sentir livre para explorar as diversas possibilidades nesse mundo de interfaces responsivas. E aí, qual o que você gostou mais?

    FIQUE ATUALIZADO !

    Insira aqui o seu email para receber gratuitamente as atualizações do blog!

    I will never give away, trade or sell your email address. You can unsubscribe at any time.


    • Felipe Couto

      Teus posts são sempre muito úteis pra mim Andrea! VALEUUU!

      • Andrea Pachecø

        Que bom! A gente se empenha pra isso! 🙂

    • Alessander

      Abordagem rica em detalhes e bem convincente. Aguardando anciosamente os próximos posts ^_^’ v

    • Ana Carolina Teixeira

      Excelente contribuição com a galera de design. Parabéns pela iniciativa. Não conhecia o blog mas vou ler sempre a partir de agora 😉