A posição do menu no desenvolvimento de interfaces

AGRADEÇA AO AUTOR COMPARTILHE!

Recentemente tive um impasse com meu professor de Interface Homem Máquina na faculdade. O motivo? A interface com menu do lado direito.

Não concordando com o argumento de que o menu à direita atrapalha a usabilidade do site para o usuário, resolvi fazer uma pesquisa maior sobre o assunto.

Para indexar as páginas em um site, os buscadores “enxergam” apenas o que está escrito na página, e não no código. Por isso muitos especialistas não recomendam colocar muitas imagens e gifs na parte superior do site.

Mesmo que o sistema real utilizado pela Google seja muito complexo, em geral vale a regra de “ver quem vem antes”. E com isso, quer dizer que a sua página é divida e lida em seções, que podemos definir com a ordem de prioridade abaixo:

Assim, o cabeçalho é lido primeiro, depois a parte da esquerda e, finalmente, a parte da direita. Podemos assemelhar isso à forma como nós mesmos enxergamos as páginas ao visitá-las.

Voltando à questão do posicionamento dos menus, caso um site tenha o menu à esquerda, isso quer dizer que os motores de buscar vão focar sua atenção ali. Já com o menu à direita, o conteúdo do site é focado, e não seu menu.

De uma forma geral, para sites que tem atualização constante – como seria o caso do projeto que apresentei, o menu à direita é uma boa opção, já que destaca seu conteúdo, tanto para o leitor, quanto para os mecanismos de buscas.

E como vocês podem ver, a interface não fica poluída por causa de um posicionamento de menu em si, mas por uma série de outros fatores, com o uso incorreto de cores, contrastes e imagens em excesso. Escolha o melhor posicionamento para seu site, tenha bom senso e seja feliz com sua interface :)

Concorda? Discorda? Deixe seu comentário!

Postado orininalmente em “Eu Faço Programas

AGRADEÇA AO AUTOR COMPARTILHE!

Gabii Fonseca

Mais artigos deste autor »

Gabriella Fonseca Ribeiro tem 21 anos e cursa Sistemas de Informação. Trabalha com desenvolvimento, pesquisa e otimização de websites - SEO, marketing digital, redes sociais e comunicação interativa. || www.eufacoprogramas.com


9 Comentários

Léo Cabral | SEO
1

Ótimo artigo Gabi.

Um outro ponto interessante é que o usuário já está mais do que acostumado com esse tipo de layout, já que o wordpress e joomla são hoje as plataformas mais populares de blogs e sites e a grande maioria dos templates para essas duas plataformas possuem o menu a direita.

Arriscaria-me a dizer que é justamente ao contrário. Menus do lado esquerdo hoje estão fora do usual.

Abraço!

Aderlan Rodrigues
2

Mas o que o posicionamento dos elementos tem a ver com o conteúdo e o menu?

O menu pode ser depois do conteúdo e fica na direita, esquerda, acima, abaixo, no meio… isso não importa, a visualização deve ser separada do código, você não usa padrões web e tableless!? Deveria.

diego
3

Se o menu for simples e objetivo e o site e focado em conteúdo , ou colocaria ele em cima como e caso de portais de noticia globo,o r7 e por ai vai , ou a direita como vc mesmo sugeriu fica diferente.. não dificultaria a utilização do menu

@gabii_fonseca
4

Aderlan, a discussão foi sobre interface, no sentido de usabilidade do usuário, focando o maior e mais diversificado grupo de usuários possível. O que foi questionado é que na maior parte dos sites de compra o menu está na parte esquerda da tela, e não na direita, como foi colocado. O menu, para ser eficiente e fácil de usar, não pode ser colocado em qualquer lugar. Não estou falando de padrões e tableless aqui – e é claro que trabalho com divs e css em meus projetos!

Carlos Santos
5

creio que o como o usuário está habituado com menus a esquerda, como vc mesmo disse, seria bom que deixasse alinhado a esquerda, isso facilitaria a vida do usuário que não tem que lembrar inconscientemente que no seu site o menu fica a direita.

Quanto a indexação pelos buscadores, acho q a sua afirmativa não é valida, pois os robos não veem as páginas como os seres humanos, eles veem o código.
Então basta vc estruturar o área do conteúdo antes da área de menu, e usar css para deixar estes menus a esquerda. Como o robo le o código fonte de cima para baixo, a posição do menu só tem importância no código, para os buscadores.

Diego Cardoso
6

Oi @gabi,

Sem dúvida, se realizarmos uma pesquisa na maioria dos casos o menu encontra-se a esquerda.
Particularmente estou tão acostumado a criar menus a esquerda que acho esquisito começar a criá-los do lado direto rs.

Muito bom o artigo.

Sucesso!

Ronaldo Toledo
7

Bom Gaby,

Eu acho super interessante o menu estar do lado direito, realmente alguns buscadores utilizam o metodo de leitura como se fosse o nosso, ele le o conteudo da pagina da esquerda para a direita, e se voce analisar as paginas antigamente eram escritas praticamente assim da esquerda para direita, claro que no fonte ficava uma linha embaixo da outra rs.

Pelo que eu vi, vou falar do Google porque é um dos maiores, ninguem ao certo sabe exatamente o funcionamento do buscador, pois ele tem seu motor constantemente atualizado e tambem pq é segredo de sucesso (senao microsoft copia e começa a da tela azul), ja foi revelado pela Google que seu algoritimo possui mais de 200 variaveis. Os buscadores eles enxergam as tags e os conteudos, ele tem uma hierarquia das regras e dos conteudos, tem mecanismos que ficam constantemente fazendo varreduras na internet e adicionando sites no seu banco e os classificando no PageRank .

Entao hoje com os motores atualizados nao acredito que a posicao do menu venha a interferir tanto em suas buscas, pois se voce analisar voce pode colocar praticamente o seu menu em qualquer lugar do seu arquivo fonte e no seu css setar o seu posicionamento. Entao levando em consideração o que nosso professor nos ensinou e que de fato confere com a realidade de buscadores mais antigos voce pode criar seu menu no inicio do fonte para ele ser indexado e no seu css coloca-lo a direita, mas vale lembrar que com motor de pesquisas igual ao Google, pode colocar o menu ate no espaço que ele acha rss…

E so mais uma coisa, tecnologia o conceito muda todos os dias, assim como menu a esquerda ja esta bem mudado. Parabens pela iniciativa de mudar menu de lugar, inovação e tudo.

Maicon Pinto
8

Se a idéia era levantar a questão do menu à direita ser tão acessível quanto menu à esquerda, a conclusão pra mim fica que isso já está se tornando padrão, pelo menos nas últimas atualizações do WordPress.

O conceito de menu à direita, ou esquerda, deve ser considerado o objetivo do site, mas de qualquer forma, assim como muitos já falaram, o código é uma coisa, e estilos e formatação do conteúdo é outra. Posicionar algo antes, ou depois, pode ser feito perfeitamente com CSS e é muito fácil.

Desejo muita PAZ e muita LUZ pra todos.

Abraços…

Erik Lopes
9

Ergonomia e usabilidade vai um pouco além de definir o SIDEBAR que é algo totalmente diferente de MENU como bem posicionado a direita, pois os temas do WordPress vem com SIDEBARS (reparem que eu escrevi SIDEBARS e não MENU) alinhados a direita. Vamos começar do início?

Quando vamos a um restaurante e olhamos o cardápio para ver o “conteúdo” do restaurante, a menos que seja um restaurante muito peculiar, eu duvido que alguém ja tenha se deparado com alguma página onde tem uma seção “últimas 5 entradas” ou “top 10 vinhos”. Isto porque o cardápio, ou MENU, é um mapa de todas as opções possíveis. Assim como um cardápio impresso, o MENU de uma HCI (Human Computer Interaction – Interação Humano Computador) também é um mapa de conteúdo informacional. O MENU deve ter uma atenção especial em uma GUI ( Graphical User Interface – Interface gráfica de usuário) pois é nele que encontramos todas as informações que precisamos para realizar as operações de Interação entre Homem e computador.

Quanto aos SIDEBARS alinhados a direita dos temas de WordPress, estes seguem 2 princípios que não tem nada a ver com MENU. Quem tiver interesse pelo assunto, ao pesquisar, irá perceber que os SIDEBARS sempre existiram como forma de MENU complementar (local) ao MENU principal (global), isto quer dizer o SIDEBAR por sí não é o MENU do site ou aplicativo. Uma bicicleta pode parecer uma moto, mas mesmo assim a bicicleta é bicicleta e a moto é moto. O SIDEBAR na verdade sempre será um conteúdo que faz referência a outro, tanto é que podemos observar a marcação ASIDE sendo recomendada pela W3schools como um conteúdo que faz referência a outro no qual está contido e é isto que os temas do WordPress seguem.

“The tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.” ( W3schools – HTML Tag – , acessado em 26 de setembro de 2015.).

O segundo princípio e o principal a ser considerado quando o assunto é WordPress é a leitura. Todos nós sabemos que atualmente o WordPress é um poderoso CMS adotado por diferentes segmentos no mercado pela facilidade que proporcionam integrando o Front-end ao Back-end permitindo que um usuário crie e manipule Database em MySQL sem nunca digitar uma só linha de comando. Mais uma vez voltando ao início das “coisas”, alguém ainda se lembra que o foco principal das primeiras versões de WordPress estavam voltadas para blogs? Até porque não faria sentido nomear um CMS de ecommerce de “WORD” + “PRESS”. Então seguindo o raciocínio de leitura de um blog que virtualmente simula a leitura de um impresso, alguém já reparou que a área de preferência visual de um jornal ou revista fica a esquerda? Esta é a área por onde começamos a escanear visualmente as informações dispostas no impresso, a primeira página de um livro, jornal ou revista apesar de ser a parte da direita de uma folha ” aberta” nosso fluxo e ritmo de leitura ocidental é da esquerda para a direita de cima para baixo. E como o WordPress era voltado para blogs, nada mais justo que seguir este princípio. Mesmo assim percebemos que o MENU global permaneceu no topo e não nas laterais. O que temos nas laterais é uma breve listagem se conteúdo relacionado ou referente ao conteúdo em foco. E apesar da ironia, o layout apresentado como exemplo pelo autor neste post apresenta o MENU global no topo! Considerando que é um sistema de ecommerce e as principais operações de Interação são Meu Carrinho, Meus Pedidos e Minhas Compras.

Por último vale ressaltar que SIDEBAR alinhado a direita nada tem a ver com SEO, se trata de um estilo gráfico que se popularizou em carona a popularização do próprio WordPress. A marca registrada do WordPress É o SIDEBAR alinhado a direita, por isso temos tantos templates que seguem este layout. A usabilidade não está relacionada com a questão conteúdo, mas com a questão leiturabilidade (de texto corrido mesmo). Se vamos falar de usabilidade na web em um contexto geral de navegação e conteúdo, devemos levar em consideração o princípio da consistência das Heurísticas de Nielsen, uma vez que o usuário está habituado a um layout onde o MENU local (não o global) está sempre localizado a esquerda desde o princípio da história da web, mudar este local na verdade estaria resultando em uma falta de usabilidade no site.

É claro que nada impede a inovação e a criatividasde, se a proposta exigir algo diferenciado não vejo nada contra, o que eu sou contra é um texto sem fundamento que parte do princípio do gosto pessoal afirmar que a ergonomia e usabilidade, assuntos abordados em artigos e teses, que apresentam resultados provenientes de pesquisas de campo ser resumido a um simples “eu acho que a leitura começa pela esquerda, então vou colocar meu conteúdo a esquerda”.

Sem ofensas, eu sei que Web semântica é o assunto do momento, mas daí dizer que o Google tem um mecanismo que lê como um humano e faz análise de usabilidade é complicado, para não dizer embaraçoso.

Me desculpe, minha intenção não é ofender ou diminuir, mas isto é uma informação que está disponível para todos na internet e pode ter uma pessoa no início de uma carreira que veio parar neste post e seria interessante para esta pessoa saber que existem fundamentos, teorias e pesquisas relacionadas a esta área.

Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">