Apresentação feita para o time de Usabilidade e Inovação do Grupo Boticário, sobre as melhores práticas para sites de e-commerce no celular.

1. Mobile e-commerce
Melhores práticas para criar um excelente e-commerce para o celular

2. 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.

3. 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.

4. 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.

5. 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.

6. 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:

7. Atenção aos formulários
Desabilitar a autocorreção
Campos como nomes de ruas, nomes de pessoas,
e-mails e abreviações costumam ser corrigidos
pelo celular, causando frustração ao usuário,
que é obrigado a apagar e digitar novamente.
Adaptar o teclado
Alguns 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 Anterior
No 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.

8. Navegação adequada
Swipers Searchers
Usuá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.

9. Comprar sem logar
Rapidez Controle
Permita 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.

10. Progressive Enhacement
Resumo
Nome 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ência
Do 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.

11. A gente sabe, mas só pra não esquecer
Call-to-action na
primeira parte da tela
Links devem ser fáceis
para tocar
Campos de formulários
grandes e altos
Botões com pelo
menos 50x50 pixels
Quanto menos o usuário
tiver que preencher, melhor
Conteúdos baseados na
localização do usuário
Facilitar o envio do
item por e-mail
Trocar longas descrições
por rápidas demonstrações
Carrinho e wishlist
sincronizados com desktop

12. 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