In che modo abbiamo eliminato gli svantaggi cruciali di 3 nella progettazione di un controllo di una pagina nella nostra estensione?

one page checkout

Aggiornato su 31-Jan-2018

Il pagamento di una pagina è stato nel dibattito da molto tempo ormai. L'intera idea di checkout semplificato ruota intorno all'ottimizzazione dell'esperienza di acquisto del visitatore del negozio. Il sito di shopping porterà a conversioni solo quando i clienti sono in grado di completare la transazione senza sforzo.

In che modo il checkout di una pagina può ottimizzare il tuo sito?

Gli acquirenti online preferiscono effettuare acquisti solo se il negozio online offre un approccio facile e con il minimo sforzo. Ecco alcuni dei modi in cui questa funzione può ottimizzare il sito di shopping e migliorare l'esperienza dell'utente.

  • La maggior parte degli e-marketers sostengono l'incorporazione di un checkout a pagina singola in quanto è un approccio più semplice per i clienti per completare le loro transazioni. Gli acquirenti online preferiscono andare con l'idea di un pagamento in un'unica pagina in quanto riduce il tempo impiegato nel ricaricare le pagine web.
  • L'idea di utilizzare il super checkout è più convincente rispetto all'idea tradizionale in cui i clienti devono passare da una pagina all'altra per riempire tutti i dettagli. Gli e-sellers possono aiutare il cliente a completare la transazione con il minimo sforzo. Anche se il numero di campi rimane quasi lo stesso, gli acquirenti possono visualizzare la lunghezza del modulo rimasto da riempire. Ciò fornisce loro una motivazione psicologica per completare la transazione.

Ci sono dozzine di articoli su argomenti come "Dovresti scegliere un pagamento di una pagina?" "Pro e contro di One Page Checkout" e così uno. La maggior parte di questi articoli risolve efficacemente gli inconvenienti, ma sembra che stiamo promuovendo questi inconvenienti come se fossero lì per sempre e comunque non possono essere abbattuti.

Diciamoci la verità, ogni nuova introduzione ha alcuni svantaggi di sicuro. A poco a poco, con lo sviluppo e la ricerca, questi svaniscono definitivamente.

In questo blog, parlerò con 3 di una verifica di una pagina che abbiamo eliminato dal nostro Estensione di controllo di una pagina Magento e anche la PrestaShop Modulo di pagamento per una pagina. La maggior parte di questi svantaggi non sono mai stati presenti nella nostra estensione di pagamento, poiché ci siamo presi cura di loro durante la fase di sviluppo e di test.

Problemi risolti in una pagina risolti

1. Così tanti dettagli su una singola pagina? Sarà congestionato

La maggior parte delle pagine di checkout, se presentate in passato, presentavano questo problema. È stato davvero un compito enorme regolare tutto da un controllo multipagina su una singola pagina.

La sfida più problematica è stata quella di adattare tutti quegli elementi di checkout su una singola pagina e dovrebbe fornire anche una vista completa dell'intera pagina di checkout. Inoltre, tutti gli elementi di checkout come il login, il modulo per l'indirizzo di consegna, il modulo per l'indirizzo di fatturazione, le opzioni di pagamento, le opzioni di spedizione e la recensione del carrello non devono sovrapporsi e non devono sovrapporsi a se stessi.

Questo è quello che ci siamo inventati:

Opzioni di login

Un sacco di HTML, CSS, JS e Ajax sono stati ottimizzati dai nostri progettisti per adattare tutti gli elementi in modo ordinato e chiaro su una singola pagina e anche per mantenere ottimale il tempo di caricamento della pagina. Inoltre, grazie ai nostri designer, dopo tutto ciò, c'era spazio sufficiente per aggiungere il Opzione di accesso social usando Facebook e Google+ sulla nostra pagina di pagamento.

2. Il modulo sulla pagina è congestionato senza spazi bianchi e l'uso corretto dell'etichetta

Durante la progettazione delle forme, gli aspetti principali che stavamo cercando erano:

  • Mantenere le forme compatte
  • Tutti i campi necessari dovrebbero essere lì
  • I campi dovrebbero avere spazi bianchi appropriati
  • Le etichette non dovrebbero confondere gli utenti
  • L'amministratore dovrebbe essere in grado di scegliere il campo modulo che desidera mostrare sulla pagina ai clienti.

etichette

Le etichette stavano venendo fuori come una delle maggiori preoccupazioni qui. Se dovessimo mantenere le etichette sul lato dei rispettivi campi, la lunghezza orizzontale del modulo darebbe molto meno spazio per le altre sezioni della pagina.

Abbiamo anche pensato a un design del modulo in cui dovremmo saltare le etichette e utilizzare i Placeholder al posto di essi. Qualcosa come questo:

Modulo di contatto

Ma c'era un problema in questo. Per moduli considerevolmente lunghi come i moduli di fatturazione e indirizzo, se il cliente una volta riempiva i dettagli e la fase successiva se desiderava ricontrollarli, si confondeva con quelli che effettivamente sono questi dettagli. Dato che il segnaposto svanisce mentre digiti, e non c'è neanche un'etichetta, rimane sempre una confusione se i miei dettagli sono giusti o sbagliati.

Non volevamo che i tuoi clienti entrassero in tale confusione e dimenticassero l'obiettivo principale di fare un acquisto, ecco perché abbandoniamo l'idea. Altrimenti, avrebbe potuto risparmiare molto spazio.

Infine, abbiamo deciso di non scendere a compromessi con l'esperienza dell'utente e abbiamo adottato il posizionamento dell'etichetta sopra i campi come mostrato in questa immagine:

Campo indirizzo di fatturazione

Ha salvato lo spazio orizzontale di cui avevamo bisogno per altri elementi e ha anche aiutato l'un l'altro la funzione che è stata discussa di seguito.

I campi necessari

Dopo aver affrontato il posizionamento dell'etichetta, l'ultima cosa nelle forme che ci ha dato un incubo era includere tutti i campi necessari nel modulo. Il problema è che il termine necessario è abbastanza relativo qui. Un campo modulo che è necessario per il proprietario di un negozio potrebbe non essere di alcuna utilità per l'altro.

Ad esempio, il numero di partita IVA e il nome della società sono un campo necessario del proprietario di un negozio che ha un'attività di vendita B2B. Anche tutti i tuoi clienti aziendali europei avrebbero bisogno di questo campo per effettuare gli acquisti nel tuo negozio. D'altra parte, un proprietario del negozio che vende direttamente ai singoli consumatori non avrebbe alcun uso dei campi come il numero di partita IVA e il nome della società.

Come lo abbiamo gestito?

Era giunto il momento di aprire un po 'la nostra estensione per il checkout e offrire ai proprietari dei negozi un accesso di sviluppo semplice ma cruciale. Aggiungiamo una funzione nel nostro modulo, utilizzando la quale l'amministratore può facilmente abilitare, disabilitare, aggiungere ed eliminare un campo dal modulo di verifica. Anche questo, senza modificare il codice. Tutto questo può essere fatto dal back-end stesso.

Super Checkout

Quindi, se uno dei campi non è utilizzabile per il proprietario di un negozio, può semplicemente nasconderlo con un semplice clic e salvare. Non è necessario passare attraverso i complessi codici Magento o PrestaShop per farlo ora.

3. Ricarica frequente della pagina sull'aggiornamento del carrello

Quei controlli su più pagine hanno una pagina dedicata per la modifica dei carrelli della spesa. Per noi è stata una sfida includere il carrello nella pagina di pagamento. I clienti aggiornavano frequentemente il carrello aumentando o diminuendo il numero di prodotti, rimuovendo un prodotto dal carrello e così via.

Tutte queste richieste richiedevano un ricaricamento della pagina per aggiornare tutti i dettagli e le informazioni del check-out in base all'ultimo stato del carrello. Se un prodotto è stato rimosso dal carrello, è necessario aggiornare il costo totale, la quantità di prodotto del carrello, i metodi di spedizione e così via.

Sarebbe diventato così irritante per i clienti se la pagina di pagamento si ricaricasse di tanto in tanto. Questa sfida è affrontata da ogni sviluppo di checkout di una pagina. Tuttavia, siamo riusciti a risolverlo con il carrello degli acquisti basato su Ajax e la richiesta di aggiornamento del modulo.

Conferma il campo dell'ordine

Ora, con il carrello acquisti e gli aggiornamenti Ajax, se un cliente cambia qualcosa nel carrello, tutti i dettagli dipendenti si aggiornerebbero automaticamente senza ricaricare l'intera pagina di pagamento. Anche il cliente può applicare un codice coupon al carrello e la pagina convalida il coupon senza essere ricaricato.

Ecco come abbiamo risolto questi problemi nella nostra estensione di checkout. Puoi avere una demo gratuita per provare tutte queste funzionalità dell'estensione. Demo gratuito per il controllo di una pagina Magento e PrestaShop e OpenCart.

Questa funzionalità può essere aggiunta a un sito Prestashop con l'aiuto del componente aggiuntivo di super controllo di una pagina Prestashop. Le stesse estensioni sono disponibili anche per Magento, Opencart e altre piattaforme di eCommerce. Sia che utilizzi l'addon Prestashop, l'estensione Magento o il plug-in OpenCart, consente ai clienti di completare la transazione e di acquistare il prodotto sulla stessa pagina. È una delle migliori caratteristiche per ridurre il tasso di uscita alla pagina di pagamento. I clienti sono infastiditi se vengono reindirizzati alla procedura di pagamento per completare l'acquisto. Pertanto, il pagamento di una sola pagina fa in modo che i clienti possano completare l'acquisto archiviando tutti i dettagli necessari in un'unica pagina e fornisce ai clienti un approccio semplice per completare l'acquisto.

Potrebbe piacerti anche:

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *