Os problemas de design do novo padrão de navegação da Globo.com
Introduzido no topo das páginas do G1 e do Globo Esporte, o novo menu está longe de ser uma solução ideal para os milhões de usuários diários do portal
A Globo.com sempre esteve à frente no que diz respeito a soluções de design para sites informativos, tanto que dita tendência até hoje para portais brasileiros. Desde como é organizada a estrutura da informação, quanto à adoção de padrões visuais que viraram o senso comum de vários portais do país. Nos últimos dias eles publicaram o novo modelo de navegação do portal e acabei percebendo alguns problemas.
O mobile first que não funciona em mobile
Não tenho acesso a dados estatísticos das plataformas mais usadas para acessar o portal. Porém levando em consideração estatísticas gerais, imagino que o aumento do acesso por tablets e smartphones tenha sido o grande motivo para que a nova navegação fosse criada com a filosofia mobile first. Mas três coisas não fazem sentido:
- As páginas iniciais e de cada notícia do G1 ou Globo Esporte (onde o menu está sendo usado) não são responsivas. Apesar da homepage da globo.com ser.
- Existe uma versão exclusiva mobile dos sites em m.globo.com, m.g1.globo.com e m.globoesporte.globo.com com outro padrão de navegação.
- A nova navegação, apesar de ser responsiva, não suporta touch events.
Isso quer dizer que ao tentar entrar no portal usando um tablet, você não vai conseguir usar a navegação principal. Mas veja primeiro o comportamento no desktop.
Em tablets, como o iPad, o hover simplesmente não existe. E o problema é que isso não é tratado para ser substituído pelo touch event. A navegação de links como "editorias", "na tv" e "utilidades" simplesmente pára de funcionar.
Usei o iOS Simulator para gerar o gif animado, mas testando no dispositivo temos o mesmo comportamento:
Isso seria facilmente resolvido se o hover event fosse substituído pelo evento touchstart, no próprio código JavaScript que define os comportamentos do menu dropdown com eventos de mouse. Claro, caso touch events forem detectados.
A Síndrome do dropdown com caminho mais longo
Se focarmos apenas no funcionamento do componente no desktop com mouse, os problemas não acabam. O usuário que precisa acessar links do segundo nível do menu é forçado a fazer um caminho mais longo com o ponteiro do mouse, ou a possuir uma agilidade desnecessária.
Para entender melhor o problema, veja novamente o menu agora numa imagem estática:
Agora imagine que você está lá com o ponteiro do mouse sobre "editorias" e quer ir até "tecnologia e games", que fica no final da lista do segundo nível do menu. Que caminho você faria com o ponteiro do mouse?
Claro, uma linha diagonal de "editorias" (Ponto A) até “tecnologia e games” (Ponto B). Mas veja o que acontece se esse caminho é tomado:
Ao passar com o ponteiro por "na tv" e "utilidades" você ativa o segundo nível de cada um desses links, perdendo seu alvo "tecnologia e games". O usuário tem duas alternativas: ser forçado a fazer um caminho mais longo e ineficiente em forma de L invertido:
Ou aumentar consideravelmente a velocidade do movimento com o ponteiro, exigindo uma habilidade desnecessária com a precisão do mouse.
Para resolver o problema, o comportamento deveria ser semelhante ao menu da Amazon.
Com JavaScript é possível "mapear" a área imaginária marcada com o triângulo laranja e fazer com que os links (da esquerda) dentro dela tenham um delay no hover maior que os que estão fora dela, inclusive proporcional à distância do link "editorias".
[Update: Aparentemente eles resolveram este problema depois da publicação deste post, aumentando o delay geral do hover dos itens.]
Inacessível para quem precisa navegar usando teclado
Usuários com problemas motores, que são impedidos de usar mouse para navegar pelas interfaces, também não conseguem usar o menu. Já que o novo componente do portal não dá suporte à navegação pelo teclado usando a tecla TAB. Pelo menos em nenhum dos três mais populares navegadores na plataforma OS X (Chrome, Safari e Firefox), onde testei. Mesmo ligando opções de acessibilidade do sistema operacional da Apple.
A impressão que fica é que quem tomou a decisão de publicar a navegação não incluiu teste no processo de design, seja Teste A-B ou com os usuários. A preocupação maior pareceu seguir a tendência desse novo design pattern para menus de navegação, apenas pra estar na moda. Grande bola fora da gigante brasileira.
