Design UX móvel: A que deves prestar atenção quando otimizares o teu site para dispositivos móveis

12 min.
Mobile UX Design Best Practices

Como podes tornar o teu site uma experiência agradável para uso móvel? O que significa experiência do utilizador para os dispositivos móveis? Que princípios de design podes aplicar? Encontrará srespostas a todas estas perguntas neste artigo. Vejamos mais de perto as melhores práticas para o design UX móvel!

Porquê design UX móvel?

Movimentos de design como Mobile First têm vindo há já algum tempo a tentar desviar a nossa atenção para os telefones móveis. Neste momento, a maioria dos sites profissionais funcionam bem em dispositivos móveis. É claro que os/as designers conscienciosos têm contribuido para isto. Mas também aqueles/as que gerem um site costumar utilizar estruturas como Bootstrap ou temas WordPress prontos. Aqui, a visualização responsiva já se encontra normalmente integrada. Isto poupa aos desenvolvedores e desenvolvedoras uma quantidade incrível de tempo. 

Contudo, a utilização do Bootstrap, temas WordPress, etc. suporta o risco de o design ser concebido para o ambiente de trabalho - e depois apenas adaptado para dispositivos móveis.

Porque é que isto é um problema? Quem visita o teu site através de dispositivos móveis tem outras necessidades que não são necessariamente satisfeitas apenas pela adaptação estética e técnica do site.

O User Experience Design é baseado na resolução de problemas. A questão inicial aqui é sempre: que problemas podem ter os/as utilizadores/as e como resolvê-los? Assim, no contexto dos dispositivos móveis, deves considerar uma questão-chave: que problemas adicionais surgem quando os/as utilizadores/as visitam o teu site a partir de um dispositivo móvel?

Utilização de smartphones na Alemanha

Segundo um estudo da marktest.com, em julho de 2020 mais de 7 milhões de pessoas em Portugal usam um smartphone, o que representa 89.9% dos residentes no Continente com 15 e mais anos. A posse deste tipo de dispositivo tem registado uma tendência ascendente ao longo dos últimos anos. O número de portugueses que compra online continua igualmente a subir e o smartphone é cada vez mais usado.

Muitos de nós usamos os nossos smartphones especialmente quando estamos em trânsito. A experiência do utilizador é fortemente influenciada por fatores externos: pode haver muito ruído à nossa volta. Também podemos estar em movimento - a interação com o telefone é menos precisa. As influências da luz podem mudar rapidamente entre muito claro e muito escuro. A receção pode mudar entre boa e má ou até mesmo ser interrompida por completo. Quem visita o teu site pode usar tarifas pré-pagas, por isso tenta evitar sites que utilizem muitos dados num curto espaço de tempo.

A posição pode ser menos confortável e os teus utilizadores e utilizadoras menos descontraídos em resultado disso. Geralmente temos menos paciência porque temos menos tempo para tarefas individuais. Se algo não funcionar no mais curto espaço de tempo - ou se tivermos de esperar demasiado tempo para que o conteúdo seja carregado - temos tendência a cancelar o processo no smartphone e dedicar a nossa breve atenção a outro site.

A vontade de ler um texto longo ou fazer scrolling é também menor. Procuramos informação claramente estruturada em pequenos pedaços. Podemos também ter apenas uma mão livre.

As razões para se navegar na internet com um smartphone são muito diferentes das razões dos/as utilizadores/as de computadores de mesa: com o telemóvel, ou queremos procurar informação específica ou tentar passar o tempo. 

Quando navego pelo um site comercial a partir do meu smartphone, estou provavelmente mais interessado/a na informação básica:

  • Qual é o endereço?
  • Como é que lá chego?
  • Quais são os horários de abertura?
  • Como posso entrar em contacto?
  • Que produtos são oferecidos?
  • Quais são os preços?

A única questão que resta é: o teu site móvel está otimizado? Para se perceber melhor o que isso significa em detalhe, resumi os princípios de UX mais importantes para o design móvel.

Design UX móvel: 13 princípios que deves implementar de imediato

1. Conteúdo

Os/As visitantes do teu site têm objetivos diferentes, dependendo dos dispositivos que utilizam para aceder ao teu site. Os textos longos em dispositivos móveis significam muitas vezes muito scrolling para encontrar o que pretendem. Como utilizadores/as móveis, estamos à procura de informação rápida e concisa. Quem visita a tua loja no telemóvel está mais propenso/a a querer saber que produtos ofereces do que a aprender mais sobre o teu percurso.

Por conseguinte, o conteúdo deve ser adaptado. No smartphone e no tablet existe uma hierarquia diferente da que existe no computador de mesa. Há aqui várias possibilidades:

  • Omitir completamente o conteúdo: Para alguns conteúdos, pode ser uma boa ideia escondê-los completamente. Este pode ser o caso quando se trata de algo que simplesmente não funciona ao telefone, ou se o volume de dados consumido exceder o benefício para o/a utilizador/a.
  • Encurtar o conteúdo: Podes assumir a estrutura do teu site, mas encurtar o conteúdo longo em conformidade e criar um link para uma subpágina, por exemplo. Desta forma, os/as visitantes podem decidir se esta informação é ou não relevante para eles/as.
  • Alterar a disposição do teu conteúdo: Podes rever a estrutura do teu conteúdo e organizá-lo de forma diferente em dispositivos móveis. Os produtos poderiam então vir primeiro lugar e o pano de fundo da loja depois. Desta forma, poupa-se o scrolling desnecessário, mas mostra-se ainda assim todo o conteúdo.

No exemplo seguinte, adaptei o conteúdo do site de um restaurante (à esquerda) para o tornar mais amigável. Reduzi o texto e liguei-o a uma subpágina com um CTA (à direita). Também ajustei o tipo de letra, mas falarei sobre isso mais tarde.

Mobile UX Design Best Practices
Versão móvel original de um site de amostra
Mobile UX Design Best Practices
Versão móvel otimizada de um site de amostra

2. Layout

No seu artigo Design for Fingers, Touch, and People, Steven Hoober relata os resultados da sua extensa pesquisa sobre a utilização de smartphones. A técnica do polegar é frequentemente utilizada como guia. Aqui, é importante o raio que o polegar pode fazer pelo ecrã. Sugere-se frequentemente que os cantos superiores são zonas absolutamente tabu que os/as utilizadores/as não conseguem alcançar. Contudo, de acordo com os resultados da suapesquisa, isto não é inteiramente verdade.

As 6 formas mais comuns de segurar os smartphones:

Mobile UX Design Best Practices
Como as pessoas preferem segurar os seus smartphones

Isto resulta na seguinte divisão ideal dos elementos para os smartphones:

Mobile UX Design Best Practices
O melhor layout para conteúdos primários, secundários e terciários

O resultado: a informação mais importante deve ser colocada no meio do ecrã em dispositivos móveis.

3. Minimalismo

Uma abordagem minimalista ao design nunca é errada. Mas especialmente num dispositivo mais pequeno, sentimo-nos apertados e confusos por muito conteúdo e muito pouco espaço em branco. Torna-se pouco claro onde a informação está escondida e como lá chegamos.

A versão móvel do Streetartnews aparece estruturada e clara. Nas páginas de conteúdo existem apenas os elementos mais necessários e fonte serif bem legível com espaçamento de linha apropriado:

Mobile UX Design Best Practices
A hierarquia visual é ainda mais importante nos dispositivos móveis.
Mobile UX Design Best Practices
Um espaçamento de linha maior torn a leitura mais fácil em dispositivos móveis.

4. Consistência

É importante que o teu site seja consistente em todas as plataformas. O Google resolveu isto de forma muito elegante. Não importa de que dispositivo acedo ao Google: reconheço imediatamente a marca Google.

Mobile UX Design Best Practices
A versão desktop do Google
Mobile UX Design Best Practices
E é este o aspeto do Google no tablet.
Mobile UX Design Best Practices
A versão móvel do Google

A tua marca deve também refletir-se nos dispositivos móveis, apesar do design minimalista. Se o teu site tiver uma área de utilizador, as alterações feitas devem ser adotadas em conformidade em todos os dispositivos.

5. Media

As imagens devem ter um tamanho adequado e também ser exibidas neste tamanho, para que nada tenha de ser distorcido ou dimensionado. O carregamento desnecessariamente longo também pode ser evitado desta forma. A transição entre o formato paisagem e retrato pode ser a mais difícil: Dependendo do conteúdo da imagem, deves mostrar apenas parte da imagem ou armazenar as imagens especialmente para dispositivos móveis. Para sites com muitas imagens, deves integrar o carregamento diferido ou utilizar os plugins correspondentes do WordPress. 

Otimizar imagens WordPress: 6 plugins para compressão de imagens

A otimização de gráficos e imagens para o teu site WordPress é um passo fácil e importante para melhorar o teu tempo de carregamento. Mostramos-te seis plugins populares do WordPress, que fazem a compressão das tuas imagens por ti.

O mesmo se aplica aos vídeos. Aqui também há uma mudança de paisagem para retrato. Os vídeos também devem ser configurados de forma que sejam silenciosos e não comecem sozinhos. Os vídeos geralmente devem ser otimizados para a web, mas isto é particularmente importante para dispositivos móveis.

6. Tipo de letra

Mais importante do que a aparência do teu site é sempre a sua funcionalidade. Isto inclui texto legível. O tamanho padrão do texto em HTML é 16px. Este tamanho é utilizado a menos que especifiques o contrário. Dependendo da fonte, contudo, o teu texto pode parecer maior ou menor. 

Tudo sobre tipografia e fontes web

Regra geral, um tamanho de fonte de 16px é ideal para textos de corpo e entrada de texto em smartphones. Para mais informações sobre tipo de letra na web, consulta o nosso artigo"Como encontrar a fonte perfeita para o seu site" e a publicação no blogueType Sizes for Every Device" da UX Matters.

No entanto, para tornar a tipografia mais legível, há algumas outras coisas a considerar:

  • Contraste entre a cor da fonte e o fundo: Especialmente porque os dispositivos móveis também são utilizados no exterior, isto é particularmente importante. Isto também se aplica ao resto do teu site. Um bom contraste entre os elementos facilita a visualização do teu site. ContrastChecker.com analisa a tua escolha de cor e permite-te saber se as cores combinadas têm contraste suficiente entre elas.
  • Espaçamento: Se o teu texto estiver demasiado junto, torna-se difícil de ler. O espaçamento entre linhas para computadores de secretária e dispositivos móveis pode ser diferente.
  • Centrar: A minha regra básica é nunca usar justificação em sites. A justificação pode parecer agradável à primeira vista, mas garante que o fluxo de leitura é interrompido. A letra centrada tem um efeito semelhante. As secções de texto nos dispositivos móveis só devem, portanto, ser centradas em casos especiais.
Mobile UX Design Best Practices
Justificado numa página de amostra
Mobile UX Design Best Practices
Texto centrado à esquerda numa página de amostra

Aqui mais uma vez o exemplo da EggShop: Para tornar o texto (esquerda) mais legível, aumentei o tamanho da fonte para 16px e defini a altura da linha para 1,7 (direita). Também centrei o texto à esquerda e reduzi algum espaçamento para cima, ou seja, retirei otítulo duplo. Na versão de computador o título duplo faz sentido. Na versão móvel apenas cria espaços brancos indesejados e duplicação. 

Poder-se-ia ir um pouco mais longe, destacando as palavras-chave. Isto permite aos utilizadores e utilizadoras percorrerem o texto ainda mais rapidamente e ainda assim obterem informações relevantes para si próprios/as. Algumas fontes são geralmente muito desadequadas para pequenos ecrãs, porque perdem a sua legibilidade quando dimensionadas. Mesmo as fontes leves, que parecem elegantes no computador, podem ser menos legíveis no smartphone.

A navegação do teu site deve ser tão intuitiva quanto possível. Isto significa que, ao criares a tua arquitetura de navegação, é melhor utilizares as estruturas existentes como guia. Isto facilita aos utilizadores e utilizadoras a navegação no teu site. Intuitivo é, por exemplo, rolar para baixo e para cima para navegar através por um site, mas não necessariamente para a esquerda ou para a direita.

Um menu vertical tornou-se o menu principal no telemóvel. Mas também no computador de secretária vemos cada vez mais frequentemente um menu vertical em vez de um horizontal. Acima ou abaixo deste está geralmente o menu secundário, se necessário um pouco menos proeminente. Em alternativa, este pode também estar localizado na parte inferior. 

Os menus secundários podem ser, por exemplo, configurações linguísticas ou links para redes sociais. Se for necessário um terceiro menu, este será colocado como menu desdobrável. Isto pode ser um login ou logout, por exemplo.

Se o teu site é mais do que uma página, é especialmente importante que os/as visitantes possam sempre descobrir facilmente onde estão.

CTA e links

Mobile UX Design Best Practices
A regra de ouro (Fonte: UX Matters)

Os elementos interativos devem ser exibidos em tamanho maior . Desta forma, quem visita o teu site sabe o que pode lá fazer e é capaz de clicar no que quer. A disposição entre eles também desempenha um papel importante. Deve ser deixado espaço suficiente para reduzir o risco de tocar acidentalmente no link falso ou botão errado. Botões como "Logout", "Apagar", "Submeter" também devem ser colocados à distância de outras Call-To-Actions, para que não sejam acidentalmente acionados.

Mobile UX Design Best Practices
Air Inuit mostra as interações de uma forma muito clara e de fácil utilização.

Interação oculta

É bastante comum permitir interações através de múltiplos caminhos desde que haja uma forma de os/as novos/as visitantes ainda poderem utilizar o teu site. Isto permite-te oferecer atalhos aos utilizadores e utilizadoras que regressam sem dificultar o início.

Links

Se quiseres acrescentar mais funcionalidades ao teu site, faz sentido utilizares os sistemas existentes - em vez de programares novos. Isto é o caso, por exemplo, se o cliente de e-mail do/a utilizador/a for utilizado em vez de um formulário de contacto. Ou com a integração de indicações através da App preferida do/a utilizador/a. Isto facilita-lhes a utilização do teu site, na medida em que podem utilizar Apps que já conhecem para resolver certas tarefas.

8. UI Design Patterns

Tal como para o desktop, é uma boa ideia utilizares soluções comprovadas, também chamadas UI Design Patterns, ao construires o teu site ou loja de comércio eletrónico. Alguns destes padrões podem ser usados em múltiplos dispositivos, outros são mais específicos. Além disso, este e-book da UXPin provou ser um bom ponto de referência.

Pequenos ecrãs em particular oferecem pouco espaço para a navegação. Sites não estruturados e confusos destacam-se de forma particularmente negativa.

À semelhança dos UI Design Patterns, é aconselhável uma pessoa orientar-se por sites já existentes e aplicações web de sucesso e analisá-los:

  • Onde está normalmente localizado o menu?
  • Qual é a sua aparência?
  • O que acontece quando o pressiono? 

Contudo, deve ser crítico ao fazer isto para que não copies quaisquer erros ou "maus" elementos UX. 

Mobile UX Design Best Practices
Crustac.fr escolheu o UI Pattern Burger Menu para tornar a navegação intuitiva para todos.

9. Formulários

Os formulários longos podem ser cansativos e rapidamente parecer confusos. Em geral, só deves utilizar formulários em dispositivos móveis se necessário. Ao integrares formulários, deves certificar-te de que apenas solicitas a quantidade de dados que é realmente necessária e forneces ao utilizador ou utilizadora o respetivo teclado. Isto é feito utilizando os tipos de formulários HTML apropriados. Isto diz ao navegador qual é a entrada e o teclado apropriado é fornecido.

Em alternativa, podes integrar enchimento automático ou sugestão de conteúdo. Ou utilizas o login das redes sociais em vez de um longo processo de registo.

Mobile UX Design Best Practices
Login social (também chamado Single Login) no Pinterest.

10. Feedback

Uma vez que usamos dispositivos móveis com as nossas mãos, tendemos a esperar obter feedback real: feedback que se baseia em objetos reais. Isto pode ser, por exemplo, um botão que dá a aparência de ser pressionado quando o pressionamos.

Se este tipo de feedback não se adequa ao teu conceito, ainda assim é importante forneceres algum feedback. Quem nunca pressionou num link ou botão muitas vezes seguidas e ficou sem a certeza se simplesmente não funcionava ou se a ligação à internet tinha desaparecido. Isso é algo a evitar. Há truques comuns para isto, tais como carregar animações. O importante é que o/a utilizador/a saiba que a sua interação funcionou e que algo irá acontecer.

11. Tratamento de erros

Cometem-se erros. Carregas simplesmente no link errado e acabas no site errado. Ou submetes algo que ainda não estava pronto. É importante que os erros não tenham (ou tenham o menor número possível de) consequências negativas. As funcionalidades de desfazer e botões de retrocesso são bons para isto. O botão home é também aqui incrivelmente importante: a âncora se os teus ou tuas utilizadoras se perderem. Desta forma, sabem sempre como voltar à página inicial.

12. Velocidade

O tempo de carregamento do teusite< /a> também pode ser um problema em dispositivos móveis. Especialmente se quiseres aceder a partir de redes instáveis, o tempo de espera não deve ser tão longo que desencoraje os/as visitantes.

13. Acessibilidade

A acessibilidade é um tema transversal que está finalmente a ganhar cada vez mais importância. A ideia básica e a missão: A web deve ser acessível a todas as pessoas. Isto é especialmente relevante para pessoas com deficiências, o que pode afetar a maneira como as pessoas acessam e usam a web.

Se ignorares a questão da acessibilidade, já estás a excluir 20% da população mundial da possibilidade de utilizarem o teu site. Em suma, negligenciar a acessibilidade não é bom para o teu negócio. Mas mais importante, é terrível para a criação de um mundo mais justo.

Ferramentas para testes UX

Dependendo de como o teu site é construído, poderás ter uma forma de editar a visualização móvel diretamente. Em regra, são necessários alguns ajustes manuais do CSS. Existem várias opções de teste:

  • Ferramentas de inspeção no navegador: Os populares navegadores oferecem a possibilidade de inspecionar o teu site com as chamadas ferramentas de desenvolvimento. Aí também podes verificar o teu site em dispositivos de diferentes tamanhos. Outras boas ferramentas para testes de sitessão Responsinator e BrowserStack Responsive.
Mobile UX Design Best Practices
Ferramentas de desenvolvimento no Google Chrome
  • No dispositivo: A forma mais eficaz de veres o teu site é no próprio dispositivo. Por isso, os testes no teu próprio telemóvel ou tablet nunca devem faltar. Uma vez que seria muito caro possuir todos os aparelhos em casa, existem os chamados emuladores.
  • Emuladores: Este software é fornecido pelo próprio fabricante do sistema operativo. Aí podes desenvolver e ver os teus resultados diretamente no navegador - adaptados ao tamanho do dispositivo e respetivo sistema operativo, como Android ou iOS.

Conclusão: Melhores práticas para design móvel

Ao implementares estas dicas, podes tornar a experiência móvel do teu site e atrair mais clientes. E talvez os exemplos e as melhores práticas te ajudem a desenvolver novas ideias para o teu site. Infelizmente, o design móvel é ainda muitas vezes negligenciado num site - o que tem um impacto negativo na taxa de conversão de utilizadores móveis.

Para mais informações sobre design UX móvel, recomendo vivamente os Web Fundamentals do Google e este artigo para um melhor design UX móvel.

As tuas perguntas sobre design UX móvel

Tens perguntas para a Sonja sobre design UX móvel? Aguardamos o teu comentário. Interessas-te por web design e desenvolvimento? Então segue a RAIDBOXES no Twitter, Facebook, LinkedIn ou através da nossa newsletter.

Depois de estudar design de jogos e escrita criativa na verde Auckland, na Nova Zelândia, a Sonja especializou-se em design de web e aplicações e seu desenvolvimento. O seu foco é a gamificação e a exploração da motivação e experiência do utilizador, aliado à paixão e curiosidade pelas tendências tecnológicas.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.