e-Commerce Mobile: Porque seu menu deve estar próximo a parte inferior da tela

UX para dispositivos mobile: Barra de navegação inferior.

Designers sabem que o design é mais que algo bonito. O design também aborda como os usuários se relacionam com um produto, seja ele um site ou aplicativo. É como uma conversa. A navegação e usabilidade de um site é uma conversa. Não importa o quão bom seja o seu site, se os usuários não conseguem encontrar o que procuram.

Por que a barra de navegação inferior é tão importante?

Steven Hoober, em sua pesquisa sobre o uso de dispositivos móveis, descobriu que 49% das pessoas usam um polegar para realizar tarefas em seus smartphones.

Na figura abaixo, o diagrama que aparece nas telas dos dispositivos móveis são gráficos de alcance aproximado, nos quais as cores indicam as áreas que um usuário pode alcançar com o polegar para interagir com a tela.

Verde indica a área que um usuário pode alcançar facilmente, em amarelo uma área que requer esforço e em vermelho, uma área que exige que os usuários mudem a maneira como eles estão segurando o dispositivo.

É importante colocar as ações principais e mais usadas na parte inferior da tela, porque elas serão acessadas facilmente com clique de um polegar.


Barra de Opções
Muitos aplicativos seguem esta regra e usam a barra de navegação inferior (também conhecido como “barra de opções” ) para principais informações de um app ou site.

Aplicativo da Netflix – Barra fixa na parte inferior

A Bulking é um exemplo de e-commerce que já funciona assim. Traz as principais funcionalidades acessíveis com um clique, o que permite uma troca rápida entre as ações.

 

 

3 Regras importantes para uma barra de navegação Inferior

A navegação é geralmente um fluxo que leva os usuários onde eles querem ir. A navegação inferior deve ser direcionada para as páginas principais ou ações com similar importância. Esses destinos exigem acesso direto de qualquer lugar do aplicativo.

Um bom fluxo de navegação através da barra inferior segue estas três regras:

1. Mostre apenas os destinos mais importantes

Use de três a cinco seções na barra de navegação inferior. Se houver menos de três seções, considere usar guias em vez disso.

Evite usar mais de cinco seções na barra de navegação inferior, pois a área de clique dessas seções ficarão muito proximos uns dos outros. Isto provoca cliques acidentais e dificulta os usuários clicarem no que eles querem. E com cada secção adicional exibida, você aumenta a complexidade do seu aplicativo.

 

2. Ícones claros e boa área de clique

Ícones

Como as ações de navegação inferior são geralmente apresentadas em ícones, elas devem ser usadas para conteúdos que possam ser corretamente informados com esses ícones. Existem ícones universais que os usuários conhecem bem, principalmente aqueles que representam funcionalidades como busca, e-mail, carrinho de compras e assim por diante. Devemos usar e abusar deles!

Atenção: Não cometa o erro de usar ícones que não passam a mensagem correta. Alguns sites e aplicativos geralmente escondem funcionalidades por trás de ícones que são bastante difíceis de reconhecer.

Cor

Evite usar diferentes cores em ícones e nos títulos na barra de opções. Em vez disso, use a cor primária do site para indicar a seção em “clicada”.

À esquerda: Cores variadas fazem o seu aplicativo parecer uma árvore de natal. Direita: use apenas uma de suas cores primárias.

Siga uma regra simples – destaque um ação executada na Barra de Opções (incluindo o ícone e título) com a cor primária do site.

 

Menu inferior no site da Abrakadabra. A seção de filtros está ativa.

Se a tab bar for colorida, faça com que o ícone e o título da ação seja preta ou branca.

Títulos

Os títulos das seções devem fornecer descrições curtas e importantes aos ícones de navegação. Evite títulos longos, para os não cortarem e não ficarem legíveis.

Os elementos no menu devem ser fáceis de visualizar. Os usuários devem ser capazes de entender o que exatamente acontece quando clica em na seção desejada.

Área de Clique

Crie as seções com à área de clique grande o suficiente para ser facilmente tocado ou clicado. Para calcular a largura de cada seção na Tab Bar, divida a largura da resolução pelo número de seções.

Sugerimos também, criar todas as seções de navegação com a mesma largura da seção maior.

A guideline do Android sugere as seguintes dimensões para a barra de navegação inferior no celular.

Barra de navegação inferior fixa no celular. Unidades em density-independent pixels (dp).

Notificação de Quantidade no Carrinho

Você pode mostrar uma “notificação” na barra de opções com um número informando a quantidade de itens adicionados ao carrinho.

O Ícone na Tab bar deve mostrar a informação de forma discreta.

Veja também: Infográfico: Entenda como funciona a Taxa de Rejeição do e-Commerce

3. Torne a navegação clara

Uma boa navegação deve ser como se uma mão invisível guiasse o usuário ao longo da sua jornada. Por mais inovadora que seja a funcionalidade ou por mais atraente o design, ele é inútil se as pessoas não conseguirem encontrá-lo.

Comportamento

Cada ícone presente na barra de navegação inferior deve levar a uma ação direta e não deve abrir outros menus ou outros pop-ups. Ao clicar em um ícone, o usuário deve ser direcionado diretamente para a ação clicada ou atualizar a seção usada no momento.

Não use a Barra de Opções para comandos de interagir, editar ou excluir informações na tela. Se você precisar, crie uma usabilidade dedicada com ferramentas para isso.

Barra de ferramentas para iOS.

Mantenha uma consistência e coerência visual

Sempre que possível, exiba as mesmas seções de navegação em todas as orientações de tela . É melhor quando você dá aos usuários uma coerência visual fornecendo as mesmas ações em todas as orientações.

Esconda-a quando necessário

Se o conteúdo da tela for um conteúdo rolável, a tab bar pode ser escondida quando o usuário rolar para cima a fim de visualizar o conteúdo seguinte e voltar a aparecer se ele rolar para baixo, como se estivesse tentando voltar para o topo da tela.

Transições  Agradáveis

Evite usar transições laterais entre durante a seleção de seções quando ativas e inativas. Para essas transições, use Animação em cross-fade.

Relembrando

A barra de navegação inferior deve:

 

  • Ser visível e bem organizada (use três a cinco seções principais e evite conteúdo rolável na tab bar).
  • Clara (Os elementos da Tab bar devem ser fáceis de visualizar e a área de clique deve ser grande o suficiente para ser facilmente clicada) .
  • Simples (Certifique-se de que cada ícone de navegação leva ao destino correto e use todos os elementos necessários, incluindo a  barra de navegação inferior, em seu site repetidamente).

 

Conclusão

Ajudar os usuários a navegar deve ser uma alta prioridade para todos os sites e aplicativos. O objetivo por trás disso é criar um sistema de interação que se alinha naturalmente com os modelos mentais do usuário.

Você está projetando para seus usuários. Sempre pense sobre seu público alvo, pense nos objetivos que eles têm ao usar seu e-commerce e use a navegação da sua loja para ajudá-los a atingir esses objetivos. Quanto mais fácil o seu produto é de usar, mais ele será usado.


Este artigo é foi inspirado e adaptado para o mercado do e-commerce a partir do artigo “UX Design for Mobile: Bottom Navigation” publicado originalmente na UX Planet.

Artigos Relacionados