UX de comércio eletrônico para a experiência móvel

O termo “comércio móvel” foi introduzido há 20 anos por Kevin Duffey quando ele sugeriu que um dispositivo móvel poderia funcionar como um ponto de venda no bolso do cliente. Considerando as limitações tecnológicas da época, quem imaginaria que um dia poderíamos explorar, revisar e comprar mercadorias com facilidade em um pequeno dispositivo de bolso?

Não posso exagerar como o celular está mudando a forma como interagimos com nossos consumidores; temos que abraçar essas mudanças. – Joel Anderson, CEO do Walmart

O crescimento surpreendente do comércio eletrônico também impulsionou o crescimento do comércio eletrônico móvel, que agora vale quase US$ 700 bilhões. O e-commerce móvel é atualmente a maior fatia do gigante mercado online. Mais de 80% dos americanos fizeram uma compra online no último mês – há três anos, o número era de apenas 11,6%.

Um relatório da Business Insider Intelligence sugeriu que o comércio móvel aumentará até 45% até 2020. A pesquisa da ComScore concordou e, em 2016, relatou um aumento de 44% nos gastos via dispositivos móveis em comparação com 2015.

Apesar dos altos números de vendas, mais de 60% dos usuários ainda se sentem preocupados em ter suas informações financeiras hackeadas ao usar o celular. No entanto, a satisfação do cliente ainda é bastante alta, com gigantes do varejo móvel como Amazon e Apple recebendo uma taxa de satisfação de mais de 80%.

Práticas recomendadas de UX de comércio eletrônico móvel para o sucesso

Suporta zoom de imagem por gestos de beliscar e toque duplo

As pessoas estão familiarizadas com gestos como tocar duas vezes e beliscar para ampliar as imagens no celular. Durante um estudo de usabilidade de comércio eletrônico móvel, o Baymard Institute descobriu que, naturalmente, os compradores querem poder inspecionar o produto minuciosamente e estão preocupados com os pequenos detalhes. Os usuários que estavam interessados ​​em comprar um produto, mas não podiam explorá-lo com o zoom, não se sentiam à vontade para comprá-lo e muitas vezes não se comprometiam com a venda.

É bastante surpreendente que, dos 50 aplicativos de comércio eletrônico móvel de maior bilheteria, mais de 40% não suportassem gestos de zoom. Mesmo os sites que ofereciam versões de close-up de imagens tiveram taxas de rejeição semelhantes, o que sugere que o suporte a gestos de zoom de imagem de produto em um aplicativo de comércio eletrônico móvel é fundamental.

Considerando o pequeno tamanho da tela dos dispositivos móveis, esse é um problema específico da plataforma. Apoiar pelo menos um desses recursos colocará um aplicativo na empresa dos 50% melhores aplicativos de comércio eletrônico, ou seja, a lista de maior bilheteria.

Alguns fatores a serem considerados:

• Imagens de baixa resolução são o equivalente a imagens sem zoom. Os usuários estão interessados ​​em ver os detalhes de um produto com clareza e precisam de imagens de alta resolução para isso. A opção de ampliar uma imagem de baixa qualidade é praticamente inútil, pois não permite que o usuário veja detalhes.
• O Baymard Institute descobriu que 50% dos aplicativos não indicam aos usuários que eles podem beliscar ou tocar duas vezes nas imagens dos produtos. Indicar a disponibilidade de zoom de imagem é importante. Embora esses gestos sejam comumente conhecidos pelos usuários móveis, ainda é preciso mostrar que eles estão disponíveis. O uso de ícones ou representações visuais é recomendado para isso.

Forneça um recurso "Salvar" para o carrinho de compras

Como mencionado anteriormente, o pequeno tamanho da tela dos dispositivos móveis é o principal obstáculo quando se trata de comércio eletrônico móvel. O Baymard Institute observou que mais de 61% dos usuários móveis costumam usar seus desktops para concluir uma compra em vez de usar o telefone.

Um recurso de “salvar carrinho de compras” reduz o número de abandonos de carrinho e permite que os compradores salvem itens para uma compra posterior. Os carrinhos de compras persistentes permitem que os clientes continuem suas compras sem a necessidade de procurar o produto desejado na devolução - um recurso que 55% dos compradores usariam.

Veja como reter esses clientes:

1. Faça o carrinho funcionar como uma lista de desejos salvando os itens adicionados ao carrinho.
2. Crie uma opção para permitir que os compradores recebam e-mails com itens salvos. Exiba lembretes de que eles podem usar a área de trabalho para finalizar a compra.

Use formulários descritivos e bem rotulados

A aplicação de práticas recomendadas para formulários móveis é outra consideração. É importante que o design de UX de um aplicativo ou site de comércio eletrônico, ao mesmo tempo em que elimine qualquer confusão, permita que os usuários preencham formulários o mais rápido possível.

Aqui estão as práticas recomendadas para usabilidade de formulários para dispositivos móveis:

• Coloque etiquetas de formulário acima do formulário para melhorar a legibilidade, facilidade de uso e clareza. Explicar por que certas informações são necessárias reduzirá a ansiedade do usuário ao preencher formulários em seu celular.
• Combine as entradas de texto com o teclado apropriado. Exiba um teclado de discagem ao inserir números de telefone e dígitos de cartão de crédito e um teclado de texto ao inserir endereços e texto. Isso reduzirá os erros do usuário e acelerará o preenchimento do formulário.
• Limite o número de campos de entrada para reduzir o esforço de digitação. Menos campos de entrada gerarão um formulário menos carregado e melhorarão o fluxo de checkout de UX.
• Avance automaticamente cada campo na tela quando concluído. Isso não obstruirá nenhuma visão dos campos incompletos.
• Use steppers em vez de menus suspensos para reduzir o esforço do comprador. Os steppers são usados ​​para aumentar ou diminuir o valor em uma quantidade constante e são uma solução mais rápida de trabalhar e mais atraente aos olhos.

Fornece auto-sugestão inteligente, detecção automática, pesquisa de endereços e erros

O principal objetivo por trás da auto-sugestão é tornar mais fácil e rápido para os usuários preencherem formulários. A sugestão automática prevê consultas de pesquisa comuns e ajuda os compradores a encontrar produtos com mais facilidade.

A usabilidade móvel pode ser melhorada usando a detecção automática do tipo de cartão de crédito. A detecção automática agiliza o processo de compra fornecendo feedback imediato para os tipos de cartão suportados. A automação do maior número possível de processos de entrada de dados – de preferência com recursos visuais – melhora a experiência do usuário e afetará positivamente as taxas de conversão.

A pesquisa e validação de endereços aceleram o processo de checkout — várias APIs (como Google Places e USPS) facilitam a implementação desse recurso.

Fornecer validação de entrada em linha para erros também é uma prática recomendada no design de UX móvel. A falta de desempenho rápido é uma grande frustração para os compradores de comércio eletrônico. Isso pode ser ajudado fornecendo aos usuários feedback ao vivo sobre seu progresso (durante o checkout, por exemplo), especialmente quando eles cometem um erro inadvertido. Isso permite que os usuários corrijam seus erros imediatamente, o que afeta a usabilidade de maneira positiva.

Use microinterações para melhorar a experiência de usuário do Mobile Shopping

Microinterações são detalhes na interface de um produto destinados a realizar uma única tarefa enquanto melhoram o fluxo natural do produto. Curtir e classificar um produto, escolher uma cor e tamanho e deslizar para baixo para atualizar os dados são exemplos de microinterações.

Considerando o quão comuns elas são, as microinterações podem fazer ou quebrar o UX de um aplicativo de comércio eletrônico móvel.

As microinterações podem ser usadas para:

• Orientar o usuário pelo aplicativo de forma mais intuitiva;
• Transmitir uma melhor sensação de confiança, reduzir a ansiedade do comprador e aumentar o conforto psicológico geral devido a interações mais suaves e naturais;
• Evite erros futuros e forneça feedback imediato aos usuários com base nas atividades que eles concluíram; e/ou
• Melhore a interação do usuário com o aplicativo respondendo às notificações.

Forneça uma interação fácil e orientada para o polegar

Compreender as formas mais comuns de os compradores segurarem seus dispositivos móveis melhora a experiência e a usabilidade do usuário de comércio eletrônico móvel. Em 2013, Steven Hoober perguntou “Como os usuários realmente seguram os dispositivos móveis?” e observou como as pessoas interagem e seguram seus smartphones e notou três principais padrões comportamentais que devem orientar o design de UX móvel.

Adaptar as interfaces à forma como as pessoas usam os telefones celulares naturalmente aumentará o conforto do usuário e reduzirá a ansiedade do comprador. Os dispositivos móveis e os tamanhos de tela variam, mas a “zona do polegar”, um aspecto crítico do design e da experiência do usuário, permanece a mesma.

Projetando em torno da “zona do polegar”:

• Resolve problemas potenciais com navegação e exploração
• Melhora a interação acomodando melhor os gestos e o alcance dos dedos
• Converte melhor e melhora a usabilidade colocando elementos importantes em zonas “fáceis de alcançar”

Considerações para o design de comércio eletrônico móvel orientado à conversão

Transmita uma sensação de segurança em aplicativos de comércio eletrônico para dispositivos móveis

A segurança é uma das maiores preocupações dos usuários ao fazer compras em dispositivos móveis. Comunicar que suas transações são seguras agrega muito valor à percepção positiva que os compradores têm em relação a uma loja.

Aqui estão algumas técnicas de design de UX que comunicam segurança aos usuários e reduzem a ansiedade do usuário:

• Torne os rótulos dos botões sugestivos e claros para onde os compradores estão indo. Palavras como “prosseguir”, “seguro” e “criptografado” fortalecerão o conforto psicológico dos usuários.
• Use símbolos de cadeado para garantir aos compradores que suas transações são seguras.
• Use selos de confiança de provedores de segurança como McAfee Secure e Norton. Isso ajuda os usuários a perceber um site de forma positiva (estudo do Baymard Institute).
• Aplique os princípios da psicologia das cores no design para uma percepção ainda melhor da confiança dos compradores. Alguns desses princípios incluem cores orientadas para o público e específicas de gênero.

Priorize a pesquisa (e mantenha-a acima da dobra)

Os compradores usam um site ou aplicativo de comércio eletrônico móvel para explorar produtos ou comprar um produto específico; consequentemente, uma pesquisa bem projetada assume importância crítica para um aplicativo de comércio eletrônico móvel. O eBay acredita que sua pesquisa no site é um dos recursos mais importantes para os compradores móveis e a enfatiza ao colocá-la no centro e acima da dobra na interface.

Considerações importantes para a pesquisa móvel:

• Certifique-se de que está visível! Manter a barra de pesquisa de fácil acesso e acima da dobra oferece aos compradores uma maneira de pesquisar produtos sem esforço.
• Forneça pesquisa antecipada usando dados adquiridos de padrões de pesquisa comuns e exiba produtos relacionados nas páginas de resultados de pesquisa.
• Forneça opções avançadas de filtragem que permitem que os clientes encontrem os produtos desejados de forma rápida e sem esforço.

Um aspecto importante a ser considerado ao exibir formulários de pesquisa é que eles são valiosos apenas nos primeiros estágios da interação do usuário com o aplicativo. Os usuários geralmente pesquisam o aplicativo no início de sua jornada de compra e pode haver casos em que a exibição de um formulário de pesquisa posteriormente na jornada pode prejudicar o UX.

Por exemplo, durante o processo de checkout, a pesquisa não é mais útil e apenas distrairá porque pode fazer com que os usuários percam o foco e abdiquem do compromisso com a compra.

Forneça um checkout suave, fácil e rápido

Estudos mostraram que o processo de checkout é a parte mais estressante de concluir uma compra online. O Baymard Institute relata uma taxa de 35% de abandono de carrinho por causa da exigência de criar uma conta antes de comprar. Para diminuir as taxas de abandono de carrinho, é importante criar um processo de checkout fácil e rápido que não peça aos compradores que se registrem primeiro.

Estudos de usabilidade constataram que mais de 60% dos usuários tiveram dificuldade em encontrar a opção de checkout de convidado; ergo, a opção de check-out do convidado deve ser claramente visível e de fácil acesso.

Aqui estão algumas sugestões para um fluxo de checkout de comércio eletrônico aprimorado:

• Para promover o envolvimento do usuário, rotule cada etapa do processo de checkout numerando e exibindo a etapa atualmente ativa.
• Use representações visuais como barras de progresso para exibir o avanço no processo de checkout.
• Forneça uma opção para se registrar e fazer login durante o processo de checkout, mas faça uma escolha.
• Para reduzir a ansiedade e as taxas de rejeição, sugira que os usuários efetuem login ou registrem-se após o checkout, caso tenham feito o checkout como convidado.
• Aplique técnicas de divulgação progressiva para melhorar o foco do usuário e carregar conteúdo 30% mais rápido.

Em resumo: Quais são algumas das principais características do design de comércio eletrônico móvel bem-sucedido?

• Fornece fluxos de processo de inscrição e checkout rápidos e fáceis
• Instila uma sensação de segurança e confiança exibindo ícones, emblemas, avaliações e depoimentos apropriados
• Fornece interação projetada em torno de zonas fáceis de usar
• Usa navegação consistente e condensada
• Incorpora pesquisa rápida e fácil filtragem de produtos
• Compreende a relação direta entre o estresse, a ansiedade e as taxas de conversão do usuário para aplicativos móveis
• Fornece experiências de carregamento rápido e responsivas de sites para dispositivos móveis
• Suporta gestos para zoom de imagem do produto

O espaço de comércio eletrônico móvel só vai ficar maior

As tendências de comércio eletrônico móvel mostram que o mercado de comércio eletrônico móvel está crescendo exponencialmente e o crescimento da indústria criou uma infinidade de benefícios para os vendedores. No entanto, com isso vieram muitas práticas recomendadas e padrões para o design de comércio eletrônico móvel que os vendedores devem seguir para serem bem-sucedidos.

Os compradores esperam um aplicativo móvel que funcione bem, tenha uma aparência bonita e seja adaptado aos seus comportamentos. Embora cada aplicativo seja diferente com suas próprias limitações e objetivos, seguir os princípios fundamentais descritos neste artigo ajudará a criar aplicativos de comércio eletrônico móveis bem-sucedidos.

Faça o download de uma folha de dicas de melhoria de UX de comércio eletrônico móvel

• • •

Leia mais no Blog Toptal Design:

• Tendências proeminentes de comércio eletrônico e sua influência no design (com infográfico)
• eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
• eCommerce UX – Estratégias e Princípios Essenciais de Design
• O melhor guia para design de sites de comércio eletrônico
• eCommerce redesenhado: como pequenas mudanças fizeram grandes melhorias na experiência do usuário