Opinião.18 Out 2012

Responsive Web Design - Padrões de Navegação

Quando falamos em Responsive Web Design pensamos em mudança. Essa mudança é representada, fundamentalmente, na forma como as empresas constroem e projetam as suas futuras aplicações web.

No desenvolvimento de sites responsive, isto é, sites que respondem ao seu ambiente (desktop, tablet e smartphone), chegamos à conclusão que existem uma série de fatores a considerar como o sistema de navegação. Por exemplo, a abordagem mais comum em grandes ecrãs é a utilização de sistemas horizontais para elementos de topo e de sistemas verticais para elementos laterais, mas quando pensamos em ecrãs pequenos (mobile) sabemos que a falta de espaço em largura e mesmo em altura dificulta a implementação dos mesmos.

Já existem padrões de interação para tamanhos pequenos de ecrã que ajudam a melhorar a compreensão e a usabilidade no que diz respeito à navegação. O mais importante passa por conseguir encontrar um equilíbrio entre o acesso à informação, que deve ser intuitivo e rápido, e o próprio sistema de navegação, que deve ser discreto e compacto para não comprometer a visualização do conteúdo principal.

Todas as soluções possuem as suas vantagens e desvantagens e é por isso que a cada novo projeto é necessário implementar novas e diferentes abordagens como algumas que são aqui apresentadas:

Select Menu - é usado um menu de seleção que compacta toda a listagem. Além de manter a navegação no topo do site ocupa muito pouco espaço, essencial em dispositivos mobile. Em contrapartida, os menus de seleção são difíceis de personalizar, estão dependentes da utilização de Javascript e são potencialmente confusos porque são usados normalmente no preenchimento de formulários, já para não falar que quando existem menus com multi-níveis as diferentes hierarquias não são muito percetíveis pelos utilizadores. Exemplos: Smashing Magazine, Five Simple Steps, Performance Marketing Awards.

Footer Anchor - no topo do site existe um link de âncora, normalmente com a designação de 'menu', que aponta para o fundo do site onde estão presentes todos os itens necessários à navegação. É fácil de implementar, não está dependente da utilização de Javascript, é fácil de navegar e ocupa pouco espaço pois o único elemento visível no topo do site é um ícone de menu. No entanto, a rápida passagem do topo para o fundo do site pode ser confusa para o utilizador. Exemplos: Barack Obama Site, Grey Goose.

Toggle - Esta é talvez a solução mais user-friendly. Tal como a técnica anterior, é usado um ícone de menu que de alguma forma mostra ao utilizador onde deve ir para ver a lista de itens de navegação. A grande diferença é que essa lista aparece logo no topo e no seguimento do 'botão'. É definitivamente menos confusa já que a sua utilização é parecida com os métodos usados em desktops e não aponta para o final do site. Em contrapartida, está dependente da utilização de Javascript e o funcionamento da animação em alguns dispositivos móveis pode não ser tão suave e natural como deveria. Exemplos: Starbucks, Treehouse Blog, Webdagene, dConstruct2012.

Left Nav Flyout – Esta interação é bem conhecida, pelo menos para os utilizadores que têm a aplicação do Facebook no seu smartphone. A zona de navegação é acedida através de um ícone de menu que, como o nome indica, revela a lista de itens através de uma grelha que desliza da esquerda para a direita. A evidente vantagem é que os milhares de utilizadores que acedem ao Facebook através dos seus smartphones já conhecem esta solução. Além disso é uma abordagem interessante ao nível gráfico e ocupa pouco espaço. Por outro lado, já é uma solução que requer mais cuidados na sua implementação e não é facilmente escalonável para ecrãs maiores. Exemplo: Kaemingk Christmas 2012.

São ainda usadas abordagens como o desaparecimento parcial ou total do menu de navegação (Hide n' Cry), que a meu ver só penalizam os utilizadores que usam regularmente os seus smartphones e que se veem privados de certas funcionalidades existentes por natureza no site e ainda abordagens como a aplicação do sistema de navegação no fundo do site (Footer Only) mas sem qualquer âncora no topo, obrigando o utilizador a fazer scroll. Exemplos: Pears, Authentic Jobs.

A adaptação da navegação em sites responsive está longe de ser linear. Existem sites com sistemas muito complexos que possuem multi-níveis com várias páginas e secções. Quando isso acontece é necessário procurar outras abordagens também mais complexas, mesmo que isso signifique um acesso mais lento à informação. Aqui estão alguns exemplos de sistemas de navegação multi-nível: Microsoft, Sony, Boston Globe.

Responsive Web Design é o reflexo da crescente acessibilidade dos utilizadores a dispositivos móveis, permitida em parte pelo avanço tecnológico e consequente baixa de preços dos equipamentos. Essas mudanças indicam que no futuro as aplicações web têm de deixar de ser estáticas e passar a ser fluidas. Os vários padrões de adaptação são particularmente desafiadores no que respeita aos sistemas de navegação, isto porque são também os que mais se alteram. Estes devem ser projetados tendo em vista os diferentes dispositivos e seus respetivos tamanhos, base de todo o conceito de Responsive Web Design, mas devem ser igualmente compreensíveis, lógicos e específicos para cada projeto.

Nota: Se visualizar os exemplos apresentados no seu desktop, redimensione lentamente a janela do seu browser tornando-a progressivamente mais pequena. Verá o layout a ajustar-se até ao tamanho mais pequeno (mobile).

Escrito ao abrigo do novo Acordo Ortográfico

Catarina Acúrcio