Mobile e-commerceMelhores práticas para criar um excelente e-commerce para o celular

Interface limpa

A experiência de comprar no celular é melhor quando o foco está apenas nos produtos. Deixe o usuário navegar livremente pelo catálogo, tirando do caminho informações, navegação e promoções desnecessárias.

Fotos de qualidade

A tela do celular é pequena, não deixe a imagem do produto ainda menor. É prazeroso navegar por fotos grandes e de alta qualidade que mostram os detalhes do produto. Ah! Elas devem ser otimizadas para celular e nada de incluir imagens desnecessárias.

Visivelmente tocável

Se no desktop é importante que links e botões se destaquem dos demais elementos, no mobile é imprescindível. Além de visível, os elementos tocáveis devem ser grandes para tornar a navegação ainda mais confortável.

Feedbacks claros

Ao interagir com o site, o usuário sempre espera que alguma coisa aconteça. A falta de feedback – ou um feedback muito escondido – pode ser confundido com perda de conexão, por exemplo.

Atenção aos formulários

O checkout é o ponto alto da navegação do e-commerce e o momento mais delicado da compra. Por isso, alguns cuidados especiais devem ser tomados com os formulários no celular:

Atenção aos formulários

Desabilitar a autocorreçãoCampos como nomes de ruas, nomes de pessoas,

e-mails e abreviações costumam ser corrigidospelo celular, causando frustração ao usuário,que é obrigado a apagar e digitar novamente.

Adaptar o tecladoAlguns campos podem ser facilmente preenchidos ao utilizar um teclado específico. Por exemplo, o teclado

numérico para campos como telefone, complemento de endereço, etc.

Próximo e AnteriorNo iOS existe uma variação do teclado que permite o usuário navegar rapidamente entre os campos de um formulário. Os botões Próximo e Anterior devem ser

permitidos sempre que possível.

Maiúsculas e minúsculasÉ comum o celular alter a primeira letra para maiúscula e isso pode ser irritante para o usuário em campos como e-

mail e senha. O melhor é desabilitar esta opção em campos específicos.

Navegação adequada

Swipers SearchersUsuários que adoram navegar sem barreiras, passando o dedo em imagens e conteúdos, seja procurando algo específico ou apenas dispostos a encontrar uma oferta imperdível. Se o conteúdo estiver fácil de ler no celular, eles ficam felizes em passar um bom tempo descobrindo o site.

Usuários práticos que sabem o que querem e acessam o site com um objetivo específico. Geralmente um campo de busca posicionado sempre no mesmo lugar em todas as páginas do site é o suficiente para agradá-los.

Comprar sem logar

Rapidez ControlePermita que o usuário compre sem precisar se cadastrar no site. Ele pode estar com pressa e o formulário de cadastro é uma barreira no fluxo.

Vários motivos fazem com que os usuários não gostem de se cadastrar em sites: mais uma senha para memorizar, mais um site com seus dados pessoais salvos, mais e-mails com promoções. Permitir que o usuário compre sem passar por um cadastro é deixá-lo no controle da situação.

Progressive Enhacement

ResumoNome bonito para um conceito bem simples: melhorar progressivamente. A estratégia surgiu da área de desenvolvimento e diz respeito basicamente a utilizar tecnologias conforme o browser suporta – começando das versões mais antigas até chegar aos mais modernos.

Em experiênciaDo lado do design e da experiência de uso, também podemos aplicá-lo. O usuário de um celular Android de baixo custo deve ter uma ótima experiência de compra, da mesma maneira que o consumidor que acessa o site por um iPhone 6S. Isso significa enxugar ou promover funcionalidades conforme o contexto de uso.

A gente sabe, mas só pra não esquecer

Call-to-action naprimeira parte da tela

Links devem ser fáceispara tocar

Campos de formulários grandes e altos

Botões com pelomenos 50x50 pixels

Quanto menos o usuáriotiver que preencher,

melhorConteúdos baseados na localização do usuário

Facilitar o envio doitem por e-mail

Trocar longas descriçõespor rápidas demonstrações

Carrinho e wishlist sincronizados com

desktop

https://copyhackers.com/2013/10/mobile-ecommerce-copywriting/

https://econsultancy.com/blog/64947-14-inspiring-mobile-commerce-websites/

https://econsultancy.com/blog/65146-10-brands-leading-the-way-with-mobile-commerce-design

http://www.webdesignerdepot.com/2014/12/4-simple-ways-to-perfect-the-ux-of-mobile-ecommerce/

http://www.webdesignerdepot.com/2012/09/best-practices-for-mobile-e-commerce/

https://econsultancy.com/blog/63895-fallen-hero-s-responsive-website-shows-improved-traffic-and-conversions

https://webinsider.com.br/2016/01/26/nao-deixe-o-formulario-mobile-irritar-o-cliente/

Referências