Aplicando as técnicas do Google de usabilidade para sites mobile
Para ajudar as marcas na tarefa de proporcionar uma melhor experiência móvel em seus sites e portais, o Google e a AnswerLab, especializada em experiência do usuário, fizeram um estudo exclusivo: durante 119 horas, voluntários visitaram sites nos smartphones e responderam a algumas perguntas. O resultado disso foi a lista de 25 princípios de design móvel, que você vê agora e que traz técnicas para a navegação ideal, da home à busca, dos formulários às melhores maneiras de converter os usuários.
Desde janeiro de 2016 fizemos diversas análises de usabilidade no portal do VivaReal, uma delas publicada aqui no nosso medium e que levantava os problemas nas principais features do site. Além dessa, houve outras análises pontuais e que fazem parte do nosso processo de desenvolvimento de produtos. Todas elas, em algum momento, identificaram problemas no portal móvel que coincidiram com boa parte das boas práticas sugeridas pelo documento do Google.
Então, nesse trimestre, um dos nossos objetivos era fazer o cruzamento de todos os problemas encontrados em nosso site mobile com as 25 técnicas. A análise se divide em 5 áreas: “Página Inicial e Navegação”, “Campo de Busca e Resultados”, “Compra, Cadastro e mobilidade”, “Formulário de Entrada” e “Usabilidade e Visual”. Em cada uma dessas áreas há tópicos de requisitos que devem ser seguidos para ter uma melhor experiência no site mobile.
Abaixo listamos as áreas e os itens que foram de melhor proveito para elaborar a evolução e otimização do portal móvel do VivaReal.
PÁGINA INICIAL E NAVEGAÇÃO
Mantenha os menus curtos: Os usuários de web mobile não têm paciência para percorrer uma longa lista de opções para encontrar o que querem. Por isso, o menu deve ser curto e ter categorias separadas, para facilitar a procura.
Neste caso, o site móvel do VivaReal tem um menu curto, mas seu maior problema é a hierarquia de informação e de interação, pois existem cenários que o menu pode mudar, dependendo se o usuário estará "logado" ou não. Com esta técnica desenvolvemos um novo menu mais direcionado e funcional de acordo com o cenário apresentado.
Não permita que as promoções roubem a cena: As pessoas ficam distraídas com um banner promocional e não percebem os botões de navegação logo abaixo, o que dificulta descobertas sobre ofertas da empresa. Você precisa saber o que é mais importante e dar o destaque necessário a isso.
No nosso caso, nossas publicidades no site móvel são única e exclusivamente um incentivo ao usuário para baixar nosso aplicativo nas apps stores existentes. Seus formatos não ferem as regras do Google, sendo o seu maior problema os bugs de implementação.
CAMPO DE BUSCA E RESULTADOS
Implemente filtros de busca: Os usuários abandonam os sites nos quais não conseguem reduzir o volume de resultados. Mas também não permita que os usuários filtrem a busca ao ponto de ela mesma não gerar nenhum resultado.
A análise do Google mostra a importância de investir em bons filtros para melhorar a experiência de busca dos usuários. Os maiores problemas encontrados em nossos filtros estão relacionados a bugs de implementação, que muitas vezes se tornavam impeditivo para dar continuidade ao fluxo a partir de um smartphone.
Um ponto interessante levantado a partir desse tópico foi a relevância dada aos nossos filtros na interface. Atualmente nossos filtros tem a mesma paleta de cor e mesmo padrão do restante da página e para melhorar isso, estão sendo desenvolvidas soluções visuais que podem ajudar o usuário a utilizar mais e mais os nossos filtros para que tenham resultados mais assertivos.
FORMULÁRIOS
Facilite a forma de inserir informações: Formulários devem ter bons inputs, componentes que facilitam a interação e feedbacks claros.
Reduza erros e faça validação em tempo real: Utilize nomenclaturas visíveis para que o usuário não coloque seu endereço residencial no campo de e-mail. E valide os erros em tempo real para avisá-lo caso haja algum problema antes de enviar o formulário.
Ambos os pontos levantados acima são bastante relevantes para o portal móvel do VivaReal. Uma das nossas principais features é o formlead e nele há problemas de usabilidade como a falta de validação contextual em alguns campus e os feedbacks não muito claros. Com a análise, um novo formlead está sendo projetado e testado a partir desses insights.
USABILIDADE E VISUAL
Otimize o site inteiro para mobile: Todas as páginas são importantes para você conquistar seu consumidor, desde a home, passando por busca, os produtos e o formulário até a experiência de compra. O usuário não pode clicar em algo no site mobile e encontrar uma página formatada para desktop.
Ofereça imagens de produtos expansíveis: Em sites com anúncios, é muito importante disponibilizar a opção de close-ups de alta resolução dos produtos para a visualização dos detalhes. Os consumidores realmente querem ver o que estão comprando.
A feature que mais teve otimização a partir desses tópicos foi a nossa galeria de fotos. Totalmente relacionada à usabilidade e ao visual do portal móvel, com os insights gerados, estamos desenvolvendo uma galeria otimizada para dispositivos móveis onde o usuário tem controle das ações que podem ser realizadas, garantindo assim uma boa experiência independente da plataforma ou resolução.
Além desses pontos, foram levantados diversos outros que já tinham as soluções desenvolvidas e priorizadas em backlogs. A ideia agora é ter como base essas 25 técnicas para a elaboração das novas telas e novas features melhorando em um curto prazo a usabilidade do mobile site VivaReal. =)
