Guidelines: Menu de Imersão

Guidelines são recursos que auxiliam na construção de interfaces que venham se adequar ao objetivo de um projeto e aos usuários a quem se destinam. De acordo com Hix & Hartson (1993), guidelines são recomendações de como projetar uma boa interface.

Neste post em especial irei falar da tendência de guidelines em menus, de forma que o usuário fique imerso no conteúdo que lhe é oferecido, ou seja, ocupando um espaço minimo da tela, porém estando sempre visível.

Objetivo é permitir que o usuário fique centrado no conteúdo relevante, tendo um aumento no foco, melhor desempenho na ordem de leitura, na execuções de ações que lhe sejam exigidas ou destinadas e na visualização de um número maior ou mais detalhado de informações. Tudo isso sem que tenha a sensação que não possa reverter uma ação ou se deslocar para uma nova sessão, uma vez que o menu estará sempre visível.

Esta tendência que irei chamar aqui de “Menu de Imersão” pode ser vista com frequência em aplicativos mobile nos quais uma barra superior (ou inferior) ocupa de 24%-40% da tela contendo informações como: Título da sessão, branding, ícones funcionais e barras de procura.

(Esquerda: Facebook para iphone / Direita: Evernote para android)

Além disso essas características de menu de imersão podem ser encontradas facilmente em redes sociais, onde o foco deve estar no conteúdo, nas interações com outras pessoas.

http://www.facebook.com

http://www.twitter.com

http://uwall.tv

Pude notar que esse modelo vem sendo utilizado por alguns sites de empresas, que visam oferecer conteúdo não apenas corporativo, mas que ofereçam uma experiência de Branding ao seu target. Por exemplo, Coca cola.

http://www.cocacola.com.br

Essa guideline pode servir também para fornecer ao usuário um menu secundário ou informações secundárias, como no portal de noticias A Gazeta/ES, onde visualizamos um menu convencional para navegação no portal e um menu de imersão que permite navegar pelo globo.com

http://www.gazetaonline.com.br

O menu de imersão tem uma função de ancora, permitindo que o usuário navegue pelo site sem se preocupar em não conseguir retornar ao ponto de inicio, uma vez que este modelo de menu estará sempre visível. Um outro recurso que tem o mesmo proposito é a barra de busca, que auxilia o usuário encontrar caminhos e informações específicas, por tanto, um menu de imersão também pode ser um barra de procura, como no site do submarino, onde ao abaixarmos a barra de rolagem, um menu de imersão totalmente baseado em uma barra de busca surge e fica a disposição do usuário não sendo obrigado a retornar para o topo do site para ir a uma nova sessão ou realizar uma nova busca:

http://www.submarino.com.br

Conclusão:

Menu de imersão é um recurso que pode ser utilizado para que o conteúdo seja a grande estrela, permitindo que o usuário tem a segurança de usufruir dele sem que tenha o receio de não saber voltar, corrigir seus erros. Não existem regras para sua utilização, irá variar de acordo com o objetivo do projeto e do seu target, mas com certeza é uma ferramenta muito boa para conteúdos interativos, compartilháveis e conteúdos voltados para um ambiente mobile. Frisando que neste tipo de guideline, a consistência é algo fundamental para que o usuário não tenha dificuldades em utilizar ou identificá-lo.

Gabriel Pinheiro
@gabrielboco

Anúncios

4 comentários

  1. Cleo Morgause · março 2, 2011

    Gostei viu. Mas como eu posso fazer um Menu de inserção do meu site pra compartilhar conteúdo, igual quando se usa o hootsuite pra compartilhar links e ele usa o menu de inserção dele nas páginas compartilhadas?

  2. Gabriel Pinheiro · março 2, 2011

    Olá Cleo, que bom que gostou.

    Esse modelo de menu é utilizado para que o usuário fique imerso no conteudo, ele ocupa pouco espaço, deixando o conteúdo em destaque.

    No caso do hootsuite, pode ser considerado um menu de imersão, porque se trata da principal funcionalidade do site, assim como o submarino fez.

    Você pode pegar o http://uwall.tv/ como um exemplo disso. Ele tem funções de compartilhamento de conteúdo nas redes sociais direamente em seu menu.

    Espero ter ajudado.

    Qualquer coisa estou a diposição.

  3. Alessandro - NPossibilidades · março 10, 2011

    Ótimas dicas Gabriel, gostei do seu ponto de vista. Pena que acabei de mudar o layout do NPossibilidades, do contrário seguiria sim suas dicas. No visual atual fica difícil aplicar estas mudanças.

    Voltando à sua dica, já leu um livro chamado “Não me faça pensar”? Acho que é um material que pode ser adicionado ao seu post.

  4. Gabriel Pinheiro · março 10, 2011

    Obrigado Alessandro, para uma próxima mudança posso te auxiliar com algumas coisas, vai ser bem bacana.

    Quanto ao livro “Não me faça pensar” já li sim, é um ótimo começo para todo mundo que mexe com interfaces, pensar sempre no usuário final né.

    Vou inserir alguns pontos que o autor Steve Krug defende. Atualmente estou lendo Avaliação e projeto no design de interfaces do José Guilherme Santa Rosa e da Anamaria de Moraes.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s