Knowband Blog | Ecommerce Modules

Como eliminamos as desvantagens cruciais do projeto 3 de um Checkout de uma página em nossa extensão?

Joe Parker

Atualizado em 31-Jan-2018

O checkout de uma página está no debate há muito tempo. Toda a ideia de checkout simplificado gira em torno da otimização da experiência de compra do visitante da loja. O site de compras levará a conversões somente quando os clientes conseguirem concluir sua transação sem esforço.

Como um checkout de uma página pode otimizar seu site?

Os compradores on-line preferem fazer compras somente se a loja na Web oferecer uma abordagem fácil e com esforços mínimos. Aqui estão algumas das maneiras pelas quais esse recurso pode otimizar o site de compras e melhorar a experiência do usuário.

Existem dezenas de artigos sobre tópicos como "Você deve escolher um checkout de uma página?" "Prós e contras de uma página Checkout" e assim por diante. A maioria desses artigos resolve efetivamente as desvantagens, mas parece que estamos promovendo essas desvantagens como se elas estivessem lá para sempre e não pudessem ser derrubadas de qualquer maneira.

Vamos encarar a verdade, cada nova introdução tem alguns contras, com certeza. Gradualmente, com o desenvolvimento e a pesquisa, esses contras desaparecem com certeza.

Neste blog, vou abordar 3 tais contras de um checkout de uma página que eliminamos da nossa Extensão de pagamento de uma página do Magento e também o PrestaShop Módulo de checkout de uma página. A maioria desses contras nunca esteve presente em nossa extensão de checkout, pois cuidamos deles durante a própria fase de desenvolvimento e teste.

Uma página de checkout corrigiu as desvantagens

1. Tantos detalhes em uma única página? Será congestionado

A maioria das páginas de checkout, quando introduzidas no passado, tiveram esse problema. Foi realmente uma tarefa enorme ajustar tudo, desde um checkout de várias páginas em uma única página.

O desafio mais problemático foi encaixar todos esses elementos de checkout em uma única página e fornecer uma visão completa de toda a página de checkout. Além disso, todos os elementos de check-out, como login, formulário de endereço de entrega, formulário de endereço de cobrança, opções de pagamento, opções de envio e revisão do carrinho não devem se sobrepor, nem devem se sobrepor a si mesmos.

Isto é o que nós conseguimos:

Um monte de HTML, CSS, JS e Ajax foram adaptados por nossos designers para encaixar todos os elementos de forma clara e precisa em uma única página e também para manter o tempo de carregamento da página ideal. Além disso, graças aos nossos designers, depois de tudo isso, havia espaço suficiente para adicionar o Opção de login social usando o Facebook e o Google+ na nossa página de checkout.

2. O formulário na página está congestionado sem espaços em branco e com o uso correto do rótulo

Ao projetar os formulários, os principais aspectos que procurávamos eram:

Etiquetas

Os rótulos estavam saindo como uma grande preocupação aqui. Se mantivéssemos os rótulos ao lado dos respectivos campos, o comprimento horizontal do formulário forneceria um espaço muito menor para as outras seções da página.

Também pensamos em um design de formulário em que pulássemos os rótulos e usássemos marcadores de posição no lugar deles. Algo assim:

Mas havia um problema nisso. Para formulários consideravelmente longos, como formulários de faturamento e endereço, se o cliente preenchesse os detalhes e, posteriormente, se quisesse refazê-los, ele ficaria confuso sobre quais seriam esses detalhes. Como o espaço reservado desaparece à medida que você digita e também não há rótulo, sempre fica confuso se meus detalhes estiverem certos ou errados.

Não queríamos que seus clientes entrassem em tamanha confusão e esquecessem o objetivo principal de fazer uma compra. É por isso que abandonamos a ideia. Caso contrário, poderia ter economizado muito espaço também.

Por fim, decidimos não comprometer a experiência do usuário de qualquer forma e adotamos o posicionamento do rótulo acima dos campos, conforme mostrado nesta imagem:

Ele salvou o espaço horizontal que precisávamos para outros elementos e também ajudou em um outro recurso que foi discutido abaixo.

Os campos necessários

Depois de lidar com o posicionamento do rótulo, a última coisa nos formulários que nos deu um pesadelo foi incluir todos os campos necessários no formulário. O problema é que o termo necessário é bastante relativo aqui. Um campo de formulário que é necessário para um proprietário de loja pode ser inútil para o outro.

Por exemplo, o número do IVA e o Nome da empresa são um campo necessário do proprietário de uma loja que possui uma empresa de vendas B2B. Todos os seus clientes empresariais europeus também precisariam desse campo para fazer as compras em sua loja. Por outro lado, o proprietário de uma loja que vende diretamente para os consumidores individuais não faria uso dos campos como Número de IVA e Nome da empresa.

Como lidamos com isso?

Foi a hora de abrirmos um pouco a nossa extensão de checkout e dar aos donos de lojas um acesso de desenvolvimento fácil, mas crucial. Adicionamos um recurso em nosso módulo, usando o qual o administrador pode facilmente ativar, desativar, adicionar e excluir um campo do formulário de check-out. Isso também, sem editar o código. Tudo isso pode ser feito a partir do próprio backend.

Então, se algum dos campos não for utilizável para um dono de loja, ele pode simplesmente ocultá-lo com um simples clique e salvar. Não é necessário passar pelos códigos Magento ou PrestaShop complexos para fazer isso agora.

3. Atualização freqüente da página na atualização do carrinho

Esses checkouts de várias páginas têm uma página dedicada para editar os carrinhos de compras. Foi um desafio para nós incluir o carrinho de compras na página de checkout. Os clientes atualizavam frequentemente o carrinho aumentando ou diminuindo as contagens de produtos, removendo um produto do carrinho e assim por diante.

Todas essas solicitações exigiam um recarregamento de página para atualizar todos os detalhes e informações de checkout de acordo com o status mais recente do carrinho. Se um produto foi removido do carrinho, precisamos atualizar o custo total, a quantidade do produto do carrinho, os métodos de envio e assim por diante.

Teria se tornado tão irritante para os clientes se a página de checkout fosse recarregada de vez em quando. Este desafio é enfrentado por cada desenvolvimento de verificação de uma página. No entanto, conseguimos corrigi-lo com o carrinho de compras baseado no Ajax e a solicitação de atualização de formulário.

Agora, com o carrinho de compras do Ajax e atualizações, se um cliente alterar alguma coisa no carrinho, todos os detalhes dependentes serão atualizados automaticamente sem recarregar toda a página de checkout. Até mesmo o cliente pode aplicar um código de cupom ao carrinho e a página validaria o cupom sem ser recarregada.

Foi assim que resolvemos esses problemas em nossa extensão de checkout. Você pode ter uma demonstração gratuita para experimentar todos esses recursos da extensão. Demonstração gratuita de uma página Magento de PrestaShop de OpenCart.

Esta funcionalidade pode ser adicionada a um site Prestashop com a ajuda do add-on de pagamento extra de uma página Prestashop. As mesmas extensões estão disponíveis para Magento, Opencart e outras plataformas de comércio eletrônico também. Quer você vá para o addon Prestashop, extensão Magento ou plug-in OpenCart, ele permite que os clientes concluam suas transações e façam a compra do produto na mesma página. É um dos melhores recursos para reduzir a taxa de saída na página de checkout. Os clientes ficam irritados se forem redirecionados para um longo processo de checkout para concluir a compra. Assim, o check-out de uma página garante que os clientes possam concluir a compra arquivando todos os detalhes necessários em uma única página e fornece aos clientes uma abordagem fácil para concluir a compra.

Também poderá gostar de: