Como pivots e botões hambúrguer podem trabalhar em conjunto no Windows 10

By -

Recentemente o Windows 10 deu as caras ao público com seu design renovado. Novos controles foram adicionados a interface, outros foram remodelados, e alguns simplesmente sumiram. O que intriga muitos entusiastas do design Windows é o surgimento do ícone de menu, conhecido como “botão hambúrguer”, que é composto por três linhas horizontais, uma abaixo da outra.

Captura de Tela (66)

Menu hambúrguer – Como três simples linhas horizontais criaram tanta discórdia?

O que a equipe de design do Windows não esperava é que esse botão poderia dividir muitas opiniões. A maioria acha que a inclusão desse botão tira a originalidade do design do sistema da Microsoft, fazendo com que ele fique próximo dos designs dos apps de iOS e Android. Já outros acham que a inclusão do hambúrguer button significa uma evolução do sistema, que ficaria mais rico em termos visuais.

Vamos por partes. Primeiro: Quem criou o Hambúrguer Button?

O ícone de três linhas horizontais foi introduzido pelo designer Norm Cox, na interface gráfica do Xerox Star, na qual trabalhou toda a parte gráfica. A funcionalidade dele é a mesma que conhecemos hoje: Esconder comandos num só lugar, ao alcance do mouse.

origin

O menu hambúrguer e sua origem. No Xerox Star, em 1981

No início do século XXI o botão hambúrguer começou a ser utilizados em páginas web, partindo dai a ideia do design responsivo, ou seja, sites que se adaptam a tela onde ele é visualizado. Enquanto nas telas maiores os links apareciam de forma horizontal, nas telas menores esses links eram agrupados e escondidos nesse menu. Um exemplo: O atual site do Windows.

O botão hambúrguer no site do Windows.

O botão hambúrguer no site do Windows.

Então chegamos a plataforma mobile. O menu hambúrguer é muito utilizado na navegação entre seções do app. iOS e Android popularizaram o tal botão.

O botão hambúrguer em todo lugar

O botão hambúrguer em todo lugar

Enquanto que no Windows Phone 7 controles diferentes foram introduzidos. Os panoramas (que evoluíram para Hubs no Windows Phone 8.1) e Pivots. Eles forneciam uma navegação horizontal, onde o usuário simplesmente arrasta o dedo para a esquerda ou direita para visualizar mais conteúdo.

Windows Phone 7 e seus Panoramas e Pivots.

No Windows 10 a situação muda um pouco. Os pivots e panoramas são deixados de lado e o hambúrguer button ganha maior destaque. Mas pensando aqui com meus botões, pivots e hambúrguer buttons podem trabalhar em conjunto e o resultado pode ser bem interessante. Fiz alguns conceitos, e vou explicar minhas ideias aqui a partir de agora.

Figura 1. Um aplicativo universal rodando num PC, com Pivots e Hambúrguer button na mesma interface.

Figura 1. Um aplicativo universal rodando num PC, com Pivots e Hambúrguer button na mesma interface.

Aqui vemos um aplicativo do Windows 10. Normal até percebermos que há um controle pivot junto de um hambúrguer button. Mas o que os dois fariam num mesmo app? Vamos as explicações. O hambúrguer button serviria como se fosse um “mapa do app”, com as categorias principais do aplicativo. Já o pivot listaria as subcategorias daquela categoria principal.

O Menu hambúrguer acompanhado de ícones.

Figura 2. O Menu hambúrguer acompanhado de ícones.

No Windows 10 existe um menu lateral que começa com o símbolo do hambúrguer mas pode acompanhar outros ícones abaixo dele, que podem representar as seções do app.

Captura de Tela (71)

Figura 3. O menu hambúrguer aberto, com as categorias principais a mostra.

Nos telefones não seria diferente. Em telas menores a barra lateral fica oculta.

O mesmo aplicativo rodando em um smartphone.

Figura 4. O mesmo aplicativo rodando em um smartphone.

Em telas maiores que 5 polegadas o menu lateral exibe os ícones.

Menu com botões visíveis num celular.

Figura 5. Menu com botões visíveis num celular.

Conclusão: Esses dois controles, tão peculiares quando juntados, provém uma harmonia excelente. Cabe aos desenvolvedores e a própria Microsoft utilizá-los de forma correta.

  • Pingback: Os usuários tem vez e voz no design do Windows 10 Mobile | WinCentral()

  • Rubens Mateus Padoveze

    gostei, sugere ao desenvolvedores deixar das duas formas!

    • Leonardo Thomaz

      Boas notícias – No SDK do Windows 10 há possibilidade de ter um controle pivot e um hambúrguer button num mesmo aplicativo. O que ainda não se sabe é que poderemos integrar os dois pra conversarem entre si como propus na matéria.

      • Jack Silsan

        Ótima solução de design essa.
        Infelizmente, penso que a Microsoft está abrindo mão de uma identidade visual forte e bem diferenciada em relação às plataformas rivais, notadamente para tentar se popularizar – o menu hamburger nunca foi necessário

        • Rubens Mateus Padoveze

          também acho, onde tem tela de toque ir de lado para o outro é bem melhor, onde usa mouse, ai até pode ser uma boa o hamburger