Web design móvel 10 dicas para melhorar a usabilidade

Espera-se que a navegação na web móvel se transforme na próxima grande plataforma da Internet. Agora é fácil navegar na rede praticamente de qualquer lugar, utilizando dispositivos móveis que cabem em uma mão por causa da tecnologia. Ser pequeno na implementação de boa usabilidade no design da Web para dispositivos móveis dificulta a navegação em vários sites populares para dispositivos móveis. O design para dispositivos móveis precisa ser mais simples do que o site padrão e mais baseado em tarefas para que o trabalho seja feito porque os usuários procuram algo específico e urgente.

Você deve levar em conta como usar o mínimo do espaço disponível para seus principais conteúdos e permanecer interessante para os usuários móveis. Evite imagens grandes e animações em flash, pois isso reduzirá a velocidade do seu site. Lembre-se de que a funcionalidade é mais importante do que o estilo para websites para dispositivos móveis. Se o site não estiver codificado e projetado adequadamente, ele poderá ficar melhor em um telefone, pior em outro ou pior, sem exibir nada. Teste, valide e verifique se é compatível com todos os dispositivos móveis.

Para ajudar você a criar um website acessível não apenas em computadores desktop ou laptop, mas também em dispositivos móveis, aqui estão algumas coisas a serem consideradas no design da Web para dispositivos móveis com imagens de amostra e o link direto da versão do website para dispositivos móveis.

1. Decida a resolução da tela

O mundo mobile contém uma rica variação de considerações sobre design, desde diferentes tamanhos de tela e resolução até uma variedade de formas. Procure encontrar um equilíbrio entre a largura de tela suficiente e o tamanho da audiência. Descubra as especificações dos dispositivos móveis atuais e use seu melhor julgamento. O que é desafiador para os desenvolvedores de dispositivos móveis é a maneira de fazer com que um seja exibido adequadamente em uma variedade de tamanhos de tela sem precisar recriar páginas para diferentes plataformas.

Aqui está uma lista de resoluções da web populares em dispositivos móveis a partir de fevereiro de 2011 apresentado pela Uxbooth.com com o artigo publicado, Considerações para o Mobile Web Design (Parte 2): Dimensões, por David Leggett. O autor explica alguns pontos sobre dimensões de exibição e soluções para design de layout.

2. Divida as páginas da web em pequenas porções

É difícil ler longas seções de texto, portanto, colocá-las em várias páginas limita a rolagem para uma direção. Livre-se do conteúdo de baixa prioridade. Stick para uma única coluna de texto que envolve então não há rolagem horizontal.

Para o exemplo abaixo, a versão do site para celular da CBS News mostra apenas a seção principal de notícias e divide os artigos de notícias em pequenas partes. Enquanto Treehugger se apresenta com seus artigos recentes e tweets mais recentes com algumas das características do site completo. Ambos os sites têm o usuário clicar em um link de texto para ver o restante do artigo.

Notícias da CBS

Treehugger

3. Simplifique o design

Simplicidade equivale à usabilidade. Deixe-os se movimentar pelo site sem dificuldade. Evite a inclusão de tabelas, quadros e outras formatações. Se você usar o preenchimento, lembre-se de mantê-lo a um mínimo absoluto, muito menos do que você usaria para uma página da web normal. Em comparação com computadores desktop, quanto mais você clica nos links em websites para dispositivos móveis, mais você espera por causa do tempo de carregamento. Com isso, você precisa desmontar e simplificar seu site com o equilíbrio entre conteúdo e navegação.

Para nosso exemplo, o website da versão para celular da Best Buy lista apenas as categorias de produtos mais essenciais que reduzem o nível de hierarquia do conteúdo. Enquanto a página inicial do YouTube para celular mostra apenas os quatro últimos vídeos em destaque.

Melhor compra

Youtube

4. Opção para visualizar o site completo

Forneça um link para que os visitantes de dispositivos móveis retornem ao seu site completo para que o usuário encontre e visualize outros conteúdos e recursos acessíveis apenas para a versão de área de trabalho do site. Seus espectadores certamente farão muita rolagem vertical, portanto, ajude-os com os links "Voltar ao início" para que eles possam pular para o topo da página.

Como um exemplo, o Ars Technica tem seu botão de link para o site padrão colocado no cabeçalho. Enquanto o Shangri-La tem seu link completo colocado no rodapé.

Ars Technica

Shangri-La

5. Posicionamento de navegação

Conheça o seu público e fique atento ao que eles estão procurando. Descubra como eles vão querer navegar no seu site. Posicione o menu de navegação abaixo do conteúdo se os usuários de dispositivos móveis segmentados desejarem ver o conteúdo em constante mudança. O conteúdo e o título precisam estar visíveis primeiro para não atrapalhar a visualização do conteúdo da página. Para usuários que desejam navegar em uma categoria específica imediatamente, coloque a navegação na parte superior da página. Abaixo estão várias amostras de posicionamento de navegação usadas no design da Web para dispositivos móveis.

D & G

Politico

Horóscopo Diário

6. Use links de texto

Seu site principal pode usar menus flutuantes, rollovers ou outros gadgets extravagantes, mas um navegador móvel provavelmente não. Esteja ciente de que os elementos de página dinâmicos e os links gráficos consomem recursos, portanto, opte por links de texto bem rotulados.

Uma lista separada

Reddit

7. Faça uma distinção entre o link selecionado

Mover o cursor para baixo rolará a página e realçará os links de uma só vez. Portanto, é importante orientar claramente o usuário sobre qual item está em foco. Isso pode ser feito alterando a cor da fonte e do plano de fundo dos links e botões ou simplesmente adicionando alguns preenchimentos ao redor dos links para aumentar a área clicável em cerca de 44 px por 44 px. Geek Squad e Diesel fizeram uso de fontes grandes para texto clicável.

Geek Squad

Diesel

8. Links de Equilíbrio

Cada download de página consome tempo e recursos do sistema, sendo que estes últimos são escassos, portanto, tente não forçar o visitante do site a se aprofundar em uma infinidade de páginas para acessar as informações solicitadas. Encontre um equilíbrio entre o número de links em cada página e a profundidade do site.

Flickr

Twitter

9. Reduzir entrada de texto do usuário

É difícil inserir texto em versões móveis de sites. Substitua-os por botões de opção ou lista, para que eles possam optar pelo que precisam com facilidade. Lembre-se de que os usuários de celulares não têm acesso ao teclado e mouse convencionais. Quanto menor a URL, melhor porque é monótono digitar URLs longos.

Para o nosso exemplo abaixo, Fedex fez uso de lista de verificação e menus suspensos. Enquanto Tumblr fez você escolher o seu idioma usando o menu drop-down.

Fedex

Tumblr

10. Não aparece ou atualiza

Navegadores móveis normalmente não suportam pop-ups. E se eles tivessem, eles teriam um espaço muito estreito para aparecer. Fique longe de usá-los para evitar resultados imprevisíveis. Além disso, não atualize as páginas periodicamente para evitar o preenchimento da memória limitada do dispositivo. Deixe o usuário atualizar o conteúdo.

Em poucas palavras

Seja criativo e aplique seu design da web para celular de uma nova maneira. Torne seu conteúdo atraente e utilizável. Dê a seus usuários o que eles querem, quando quiserem. Os usuários não querem se aprofundar mais no site apenas para encontrar o que estão procurando na Web para dispositivos móveis.

Você tem sites preferidos para celular que realmente o inspiraram? Você pode compartilhar algumas de suas dicas de design da Web para dispositivos móveis? Nos informe!

Leitura Adicional

1. Web design responsivo (alistapart.com)
2. Torne seu site amigável para celular (pensevitamin.com)
3. W3C mobileOK Checker (w3.org)
4. Simulador de iPhone