Práticas recomendadas para navegação na Web para dispositivos móveis
A forma como as pessoas acessam informações on-line está evoluindo. O Google informa que até o próximo ano (2013) mais da metade das visitas ao site virão de dispositivos móveis em vez de desktops ou laptops.
Não apenas o meio de acessar a Web está mudando, mas também as necessidades da maioria dos usuários móveis que estão on-line com seu smartphone ou dispositivo portátil estão mudando; tornando-se mais focado e orientado a tarefas.
Os proprietários de smartphones de hoje usam seus telefones para realizar tarefas específicas, como verificar locais de destinos, horários de transporte público e saldos bancários. Embora a navegação na Internet em dispositivos portáteis ocorra (especialmente quando estão em longas filas ou esperando por um ônibus), muitas pessoas preferem navegar na web a partir do conforto de sua casa ou escritório.
O espaço da tela é limitado em dispositivos portáteis, e os usuários de dispositivos móveis estão ocupados, muitas vezes fazendo várias tarefas enquanto pesquisam informações online com um polegar ou um dedo.
Por esses motivos, a navegação em sites para dispositivos móveis é ainda mais crucial do que a navegação em um site tradicional. Entender as perguntas e as necessidades do visitante típico do site, as limitações de seu dispositivo e o que irá frustrá-los é crucial para o design de navegação eficaz em um site para dispositivos móveis.
O que os usuários de celular estão perguntando quando ficam on-line?
Compuware O estudo de 2011, What Would Want from Mobile, descobriu que 95% dos usuários estavam pesquisando informações locais com seus smartphones ou dispositivos portáteis. Seria, portanto, uma boa prática para as empresas de tijolo e argamassa exibirem a navegação em seus locais, horários e informações de contato de forma proeminente em sites para dispositivos móveis.
Coloque-se no lugar do usuário típico do site. Dê uma olhada nas análises para o tráfego móvel. Escolha as três ou quatro categorias principais que os usuários procuram e selecione os nomes das categorias que refletem as pesquisas mais comuns.
Se este for um site para dispositivos móveis para uma empresa física, exiba um botão para localização e informe as informações de forma proeminente.
Você sempre pode adicionar um link para "visitar nosso site" e os interessados podem ver uma versão mais elaborada do site para celular no conforto do escritório ou em casa com o laptop.
7 For All Mankind conhece seus usuários.
Projetando para um ambiente diferente
Além dos parâmetros e distrações do ambiente externo, os web designers também devem avaliar os dispositivos ao projetar elementos de navegação.
Um arquiteto não defende exatamente o mesmo projeto de edifício para o meio da cidade, deserto ou floresta, um bom web designer considera as oportunidades e limitações do ambiente móvel para criar a navegação mais utilizável para a mobilidade.
O problema, é claro, é que o designer não sabe qual dispositivo o usuário final está segurando quando visita o site, uma situação que pode ser abordada usando ferramentas de design responsivas, como consultas de mídia CSS para resolver problemas de localização, tamanho e tamanho. conteúdo adaptável. Seja projetando um novo site para celular usando design responsivo ou adaptando um site existente para celular, ainda existem algumas práticas recomendadas válidas para navegação.
Menus de navegação para a tela pequena
Os designers da Web sabem que os usuários de dispositivos móveis se comportam de maneira diferente quando acessam a Web em seus smartphones e dispositivos portáteis do que em seus computadores desktop ou laptop. Encontrar espaço para navegação em uma tela pequena pode ser complicado, mas com um planejamento cuidadoso é possível alcançar um design de navegação móvel.
Com apenas quatro botões de navegação e o número de reserva gratuito exibido com destaque, o site móvel da Loews Hotels é fácil de usar e fácil de navegar.
Prática recomendada 1: reduzir o número de botões de menu
Isso pode ser complicado ao projetar uma versão otimizada para dispositivos móveis de um site existente, especialmente um que tenha muitos links no design da área de trabalho. Limite seus botões de navegação principais a cinco ou menos, adicionando menus aninhados, se necessário.
Melhor prática 2: reduzir o número de toques
Mantenha o número de ações a serem realizadas em um dispositivo móvel no mínimo. Os menos taps e cliques para encontrar o que o usuário está procurando o melhor. É muito fácil cometer um erro. Sempre inclua um botão de retorno fácil de encontrar: você não quer frustrar mais o usuário.
Prática recomendada 3: navegação de rolagem
Mantenha os elementos de navegação mais cruciais no topo. Os dispositivos móveis têm tamanhos de tela diferentes, portanto, pense cuidadosamente sobre a importância de cada categoria, pois os que estão mais abaixo na lista podem exigir a rolagem em smartphones com menos espaço na tela.
Prática recomendada 4: botões empilháveis
Os usuários de dispositivos móveis veem seu site em retrato em vez de paisagem, como fazem em um computador. Adapte sua navegação para a web móvel apresentando-a verticalmente. Leia em vez de atravessar. Isso funciona melhor para sites com no máximo cinco categorias no menu e quando é improvável que mais categorias sejam adicionadas.
Melhor prática 5: menu aninhado
Às vezes conhecida como navegação recolhível, essa é uma boa opção para sites que exigem conteúdo na tela, bem como um menu e aqueles que esperam adicionar categorias e itens de menu.
Otimizando a navegação de mobilidade para touchscreen e botões minúsculos
Telas sensíveis ao toque e pequenos botões significam novas considerações para os web designers. Os usuários de dispositivos móveis não têm o luxo de um mouse clicável para localizar um pequeno botão ou link de menu. Eles estão à mercê de seus dedos e polegares, o que significa que eles estão apontando para áreas na tela com muito menos precisão do que se estivessem usando um mouse, e podem ficar facilmente frustrados se suas batidas não estiverem produzindo resultados imediatos.
Web designers podem tornar a navegação mais fácil para usuários móveis, adicionando mais espaço ao redor de links de menu ou substituindo os links por botões para categorias de menu.
Torná-lo maior torna mais fácil encontrar uma área rapidamente e clicá-la com um minúsculo botão de telefone, ou tocá-la com um dedo ou polegar. Como o dedo médio requer uma área clicável de pelo menos 44 px x 44 px, isso pode fazer com que os botões e áreas de navegação ofusquem o restante do conteúdo na tela. No entanto, isso pode ser adequado ao propósito do site e do usuário, especialmente se o conteúdo da página inicial for secundário aos principais itens de menu.
Idealmente, o design deve permitir que o usuário da tela sensível ao toque amplie o botão de navegação, se necessário.
Dicas para otimização
- Defina o menu na parte superior ou inferior da tela, dependendo do objetivo principal dos usuários do site. Se eles estiverem procurando conteúdo e provavelmente rolando, colocar o menu na parte inferior dá a eles outro lugar para ir em seu site, em vez de deixar o site para um mecanismo de pesquisa ou site concorrente.
- Parcialmente oculte o menu para acomodar outro conteúdo na tela, revelando o menu completo quando os usuários o tocarem. Isso mantém o menu na frente e no centro, sem prejudicar o conteúdo útil.
- Coloque um link de menu na parte superior da tela e adicione um botão de navegação na parte inferior.
- Altos e finos podem ser ótimos para supermodelos, mas em navegação na web móvel curta e larga é lindo. A navegação muito curta também ajuda quando você tem títulos de categoria mais longos - o texto se ajusta melhor.
- Reduza a altura das imagens de cabeçalho ou substitua-as por um logotipo menor para aumentar o espaço de navegação.
- Mantenha os problemas de branding e design consistentes, prestando atenção à tipografia, à cor e ao estilo dos botões de navegação, em vez de usar um espaço valioso com gráficos e imagens grandes.
- Encurte o texto, especialmente nos botões de menu e nos títulos das categorias. Em alguns casos isso é extremamente difícil, e um menu empilhável com espaço para mais texto em cada linha é uma alternativa preferível.
- Simplifique o máximo possível. Remova o máximo possível da página inicial para focar apenas fornecendo os principais itens que a maioria dos usuários deseja.
Navegação móvel não-nos
Os usuários de dispositivos móveis estão ocupados, distraídos e em movimento. Eles não querem variedade na escolha de quais botões escolher e você não quer que eles fiquem frustrados e deixem o site devido à paralisia da análise.
Não lhes dê muita escolha.
Evite a rolagem horizontal e não pairar! Menus deslizantes também podem ser frustrantes para usuários móveis. Em sua busca para simplificar e agilizar a navegação, não pense que você precisa ser chato. A navegação criativa não é uma coisa ruim, mas deve ser intuitiva. O usuário deve poder ver facilmente onde encontrar as informações que deseja rapidamente.
Conclusão
A relativa novidade dos dispositivos móveis como método de acesso à web significa que a navegação móvel está em constante evolução, à medida que diferentes designs são testados, ajustados ou descartados.
O que funciona para um conjunto de usuários em um site pode ser um desastre com um site diferente, pois as informações que o usuário pesquisa são completamente diferentes. Além disso, o mesmo usuário aborda sites diferentes com finalidades diferentes: um usuário de celular que procura um site de notícias em seu telefone provavelmente quer manchetes, não informações de contato; que é precisamente o que ela quer quando visita o site móvel para seu dentista ou cabeleireiro.
Embora os elementos de navegação de um website para dispositivos móveis possam diferir de um site tradicional, o objetivo é o mesmo: os visitantes da Web têm uma pergunta quando ficam on-line. Onde fica a loja? O que está acontecendo no mundo? Qual é o saldo da minha conta bancária? Uma ótima navegação leva os usuários às respostas de maneira rápida e simples.
Atenda suas necessidades imediatas e eles retornarão, aumentando o tráfego para o site, tornando seus clientes felizes e levando a referências e mais negócios de web design móvel para você.
Quais abordagens para navegação móvel você prefere como designer? Que tal como usuário? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de internet móvel via Shutterstock.