Melhorando interações na tela de checkout de e-commerce

Publicado em , por: Guilherme Pereira

Em um determinado projeto B2B, um problema recorrente reportado pelo cliente era o fato de que durante o processo de compra alguns usuários relatavam dificuldade no fechamento da compra. Segundo os mesmos, algumas informações dos produtos não eram exibidas quando tentavam acessar a loja por meio de alguns dispositivos móveis.

Investigando mais a fundo, foi detectado que a tabela onde os produtos eram exibidos na tela de checkout, dependendo da resolução do dispositivo gerava um scroll na horizontal, escondendo determinados campos e consequentemente o entendimento da informação principalmente para aqueles que a acessavam via mobile. Considerando que esse  mesmo cliente possui uma quantidade considerável de usuários que acessavam a aplicação diariamente via mobile essa era uma melhoria que precisava ser analisada mais a fundo, ponderada e principalmente estimada.

O impacto seria apenas no front-end e o projeto foi aprovado pelo cliente. Para isso, foi construído um protótipo de alta fidelidade em html/css e validado a disposição dos elementos da tabela em cada breakpoint antes mesmo de alterar o código final do projeto.

A tabela na tela do cart e sequencialmente checkout possuiam cerca de 7 colunas + o resumo da compra que era exibido no grid ao lado quando acessados via desktop.  Buscando a melhor e mais transparente experiência para os usuários, criei um grid flexível ao invés de uma estrutura engessada de table, permitindo assim que as colunas da tabela se adequassem ao formato de cada tela e possibilitando o usuário visualizar todas as informações relacionadas aos produtos que foram adicionados no cart.

Cart page visualizado em diferentes formatos de tela, com estrutura modular e responsiva.

Para não afetar a atual interface desktop e evitar mudanças drásticas na interface que o usuário já estava acostumado, mantive no desktop as 7 colunas e a lista de produtos que já existia:

Tabela de produtos adicionados no cart. Desktop view.

Já no tablet, devido ao espaço limitado, algumas colunas foram remanejadas e o cabeçalho da tabela passou a fazer parte como label de alguns campos:

 

Por fim no mobile e dispositivos menores, as colunas mais uma vez foram remanejadas evitando-se em todo o momento o scroll horizontal e consequentemente ocultar alguma informação:

É importante destacar que melhorias como essas por mais que pareçam muito relevantes precisam ser estudas e analisadas com calma. As perguntas a serem feitas no mínimo precisam ser:

Ok, temos um problema, mas qual o impacto real desse problema para o cliente?

Procure estimar o problema com dados reais, por exemplo, usando o Google Analytics para investigar a quantidade de acessos, dispositivos mais utilizados, taxa de abandono do carrinho… O importante não é resolver o problema de imediato mas sim entender qual o impacto real que ele gera no negócio do cliente.

Quanto tempo ou qual esforço para arrumar esse bug?

Nessa fase é muito importante ter noção do esforço necessário para resolver. Por isso é preciso dispender tempo para estudar o código, conversar com diferentes especialistas, front, back, arquiteto… E por fim determinar se o esforço necessário para resolver o problema condiz com as expectativas do projeto e cliente.

Ok, encontramos uma solução, mas o esforço é muito alto. O que fazer?

Quando nos deparamos com tal tipo de dilema, a melhor alternativa é procurar e estudar maneiras alternativas, mais rápidas e baratas ou ainda refletir se o impacto para solucionar o problema encontrado é maior e mais caro do que deixá-lo como está.

Por fim, cabe lembrar que melhorias são sempre bem vindas em qualquer projeto, mas apenas passíveis de serem implementadas de forma sustentável a medida que temos o conhecimento do quê, quanto, quando e porquê será implementada. Com isso em mente, tendemos a ser mais assertivos na escolha, estimativa e execução de um projeto.

Curtiu? deixe seu comentário

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *