Você tem um site para celular? É responsivo ou você usou um plugin agradável para fazê-lo ficar bom? Converte?
Com o uso da internet em todos os lugares, a experiência do usuário do seu site mobile (ou mobile UX) deve receber tanta atenção quanto a experiência do usuário do seu site na versão desktop.
Neste artigo, gostaria de compartilhar 10 coisas que você deve fazer em relação à experiência do usuário (UX) em seu site para celular. Deixe-me fazer uma diferenciação para começar. Embora todas as coisas mencionadas neste post também se aplicam a tablets e phablets, eu tive meu iPhone em mente para escrever este artigo.
1. Use um projeto mobile UX baseado em tarefas
Crie seu site para celular e sua estrutura com o usuário em mente. Ele ou ela usa um telefone celular. Ele / ela provavelmente precisa verificar algo em seu site. O que poderia ser? Pense um pouco sobre as coisas que os visitantes fazem em seu site (verifique o Google Analytics, use o senso comum sobre sua empresa ou teste-o). Decida as principais ações que seus usuários faram no seu site em dispositivos móveis. E otimizar UX (experiência do usuário) mobile para se certificar de que estes são acessíveis com a maior facilidade possível.
Você precisa fazer as coisas de uma forma que se alguém encontrar seu site e começar a navegá-lo, certifique-se de que eles podem facilmente encontrar e concluir o que queriam fazer. Em seu celular ou tablet, provavelmente há um monte de aplicativos que eles estão acostumados a usar. Se o seu site tem muito movimento a capacidade de atenção do seu usuário será menor do que o normal. Distrações estão em toda parte, não apenas no celular / tablet. Projete sua UX mobile para certificar-se de que eles façam as coisas, antes de ir para outros aplicativos em vez disso.
2. Adicionar um sticky menu com uma opção de pesquisa
Um dos principais elementos da mobile UX para mim é a pesquisa. Quando o usuário mobile deslocar a página para baixo eu quero que minha opção de pesquisa esteja sempre disponível.
Se você é um corretor de imóveis, ou vende roupas on-line, essa opção de pesquisa também pode ser o elemento mais importante na sua página inicial mobile. Por favor, mostre essa opção de pesquisa na área de conteúdo nesse caso, e torne-a disponível através de um sticky menu.
Mais uma coisa sobre UX móveis relacionados com a pesquisa: ter a opção é apenas um passo. Certifique-se de suas páginas de resultados de pesquisa interna tenha uma visão impressionante também. A imagem à direita é um belo exemplo do que não deve ser feito. O que mais se destaca é a falta de separação dos resultados. Certifique-se de resultados individuais podem ser distinguidos.
3. Não adicionar separadores desnecessários
Após a captura de tela acima, tendo em vista a falta de separação dos resultados de pesquisa; isso não significa que eu quero que você use todos os tipos de separadores no seu site mobile. Os separadores ocupam espaço e isso pode ter uma influência negativa sobre o mobile UX. Pense em formas de estilo e elementos para que todos eles pareçam seções separadas, sem a necessidade de um separador. Use bordas, espaços em branco, cabeçalhos. Há muitas coisas que podem ser feitas para melhorar esse mobile UX sem adicionar elementos de linha que ocupam espaço.
4. Use formulários curtos
Como no seu site desktop, seu site para celular pode e deve visar a conversão. Comprar produtos, ou obter um orçamento para seus serviços. Inscrever-se em sua newsletter ou simplesmente preencher um formulário de contato são todas ações que precisam de informações do usuário. Em um telefone celular, formulários de seis páginas vão arruinar o mobile UX. Se eu ainda me lembro do seu site quando eu voltei para o escritório para trabalhar no meu computador desktop, eu poderia preencher estes dados (é um formulário de seis páginas!).
Para mobile UX você tem que manter os formulários o mais curto possível. Remova todas as coisas que você realmente não precisa perguntar. Boletim de Notícias? Apenas o endereço de e-mail (com um tipo = campo de entrada de e-mail). Citar? Sobrenome e endereço de e-mail. Loja? Endereço de entrega e Endereço da fatura? Pelo menos tenha a opção copiar o endereço de entrega para o endereço da fatura.
5. Bom senso nas cores!
Seu site de desktop provavelmente parece fantástico usando todas as cores do arco-íris que estavam disponíveis, mas em seu site para celular, o efeito será negativo. Haverá menos foco. Seu site não tem que ser apenas preto e branco, mas um fundo branco agradável, letras pretas e uma ou talvez duas cores de apoio são realmente suficientes para um mobile UX melhor.
Eu encontrei uma leitura interessante para planos de fundos borrados em aplicativos: Elegância e Refinamento de Interfaces Móveis com base em planos de fundos borrados. Eu não penso que nós estamos lá ainda, mas isto poderia igualmente fornecer as opções visuais agradáveis para determinados Web sites.
6. Usar um tamanho apropriado dos pontos de toque
Mobile UX: Usar o tamanho apropriado dos pontos de toque parece óbvio, mas ainda não é comum. Os Web site móveis são navegados geralmente com um polegar. Precisamos ser capazes de clicar em elementos com o polegar. No Google Insights tem um guia Tamanho apropriado dos pontos de toque.
Idealmente, o tamanho dos botões devem estar entre 44px e 57px em uma tela padrão e 88px a 114px em uma tela de alta densidade (retina). Isso permite que a área seja suficiente para que a ponta do dedo média possa facilmente ativar um botão.
Há uma coisa que está intimamente relacionada com as áreas de botão: Elementos de toque podem estar muito próximos. É muito chato clicar em um link e acabar em outro lugar, só porque o link ao lado dele está muito perto do link que você queria. O Google disponibiliza a ferramenta de teste de compatibilidade com dispositivos móveis, que analisa a experiência do usuário em seu site mobile, se elementos clicáveis estão muito próximos e muito mais. Essa ferramenta não é o Santo Graal do mobile UX, mas você pode usá-la para testar sua mobile UX facilmente, por que não mantê-la em mente ao projetar seu site para celular, especialmente ao projetar elementos como um menu mobile ou links de rodapé.
7. Não use muitos tamanhos de fonte
A verdade seja dita: eu quase esqueci desta. Tamanho da fonte é realmente importante para UX mobile. Você não pode apenas usar todos os tamanhos de fonte de desktop em seu site mobile. Há duas razões para isso:
- O tamanho da tela do celular. Você não quer que o título preencha a tela, você quer ter certeza de que o artigo começa na primeira visualização da página. Você não quer que a fonte básica (como a fonte de seu parágrafo) seja muito pequena para ser lida a ponto de ter que aplicar o zoom.
- Você criará uma bagunça usando mais de três tamanhos de fonte. As diferenças de tamanho serão muito mais visíveis. É por isso que eu iria limitar o número de tamanhos de fonte para dois, talvez três.
8. Otimizar para velocidade
Outro fator importante para o nível correto de mobile UX é a velocidade. Em minhas revisões de Website, uso ferramentas múltiplas para verificar a velocidade do site. Na maioria das vezes, há duas áreas principais de melhoria. O primeiro sempre parece óbvio para nós: otimização de imagem. Apenas ocultar conteúdo é uma solução de design preguiçosa. Mas eu sou culpado de esconder por exemplo imagens às vezes também, para impedi-las de carregar. Você deve pelo menos reduzir o tamanho da imagem usando https://tinyjpg.com/ ou https://tinypng.com/ ou https://www.websiteplanet.com/pt-br/webtools/imagecompressor/. Ao lado disso, você deve combinar e minificar os arquivos CSS e JavaScript que são carregados. Quanto menos conexões tiverem que ser feitas com o servidor, mais rápido será o site e melhor será o UX mobile.
9. Alternar para site desktop e voltar para versão mobile
Não importa o quão bem projetado seja seu mobile UX, eu realmente gosto quando um site também permite a mudança para a versão desktop e volta novamente para a versão mobile. Tanto Phablets como o iPhone 6 Plus permitem que você facilmente veja a versão desktop dos sites, mas pode ser mais conveniente que o site mobile permita isso. Alguns sites para dispositivos móveis podem não possuir determinadas seções nas quais você está acostumado na versão de desktop do site: uma opção para alternar ajudará.
Uma alternativa é projetar para uma infinidade de larguras de navegador para atender a visitantes de todos os tipos de dispositivos. O número de dispositivos móveis está crescendo rapidamente, e também as variedades de largura do navegador. Parece muito trabalhoso projetar e redesenhar o site para todas as larguras, repetidas vezes.
10. Teste sua mobile UX novamente. E de novo.
Ao desenvolver um site responsivo para seus visitantes, você precisa ter certeza de que todas as alterações em seu site desktop também é testada na versão mobile do seu site. Essa é a única maneira de garantir que seu site para celular esteja sempre atualizado.
Concluindo, UX mobile é sobre um monte de coisas. Neste artigo, discutimos estas 10 maneiras de melhorar seu próprio mobile UX:
- Usar um projeto baseado em tarefas
- Adicionar um sticky menu com uma opção de pesquisa
- Não adicionar separadores desnecessários
- Faça os formulários o mais curto possível
- Não adicione muitas cores em seu projeto
- Certifique-se de que os botões e links podem ser clicados
- Não use muitos tamanhos de fonte
- Faça o seu site o mais rápido possível
- Adicione uma opção para alternar para o site desktop
- Teste todas as alterações no seu website em dispositivos móveis
Conclusão!
Estas são apenas 10 coisas que eu acho que você deve levar em consideração ao otimizar seu mobile UX. Tenho certeza que você pode ter mais dicas para completar esta lista, e estou realmente ansioso para saber suas opiniões sobre o assunto: Quais outras coisas que você sente que um site mobile deve levar em conta?
