Il front office è ciò che i clienti vedono ogni volta che visitano il tuo negozio. Si tratta quindi dell’interfaccia, dei prodotti, delle foto, delle descrizioni, dell’intero processo di acquisto, ecc.
Come cliente è tutto ciò che vedrai nel negozio durante l'esperienza di navigazione e di acquisto, dall'inizio alla fine.
Come proprietario del negozio dovresti conoscere il tuo front office come le tue tasche, non solo perché è doveroso conoscere il tuo negozio dentro e fuori, ma anche perché è bene che tu comprenda chi sono i tuoi clienti, quali e quante pagine visitano e dove cliccano durante una normale sessione di acquisto, dove potrebbero bloccarsi, come aiutarli, ecc.
Anche se pensi di conoscere il tuo front office a memoria, è importante che tu lo riveda di tanto in tanto, come se lo visitassi per la prima volta. Esplora il tuo sito web, acquista un prodotto, contatta il servizio clienti: potresti fare alcune scoperte e vedere alcuni aspetti da migliorare! |
PrestaShop viene fornito con un tema predefinito che utilizza il bianco su sfondo grigio chiaro. Questo semplice design è voluto in quanto adatto a qualsiasi settore di attività: automobili, fotografie, oggetti d'antiquariato o qualsiasi altra cosa! È stato progettato per essere facile da navigare, ergonomico, conforme alle normative e adattato a tutte le dimensioni degli schermi e ai dispositivi.
Se hai installato PrestaShop nella versione esempio vedrai prodotti di abbigliamento.
Dato che il proprietario del negozio può cambiare il tema del front office in qualsiasi momento, grazie alla ricchezza dei temi disponibili sul sito web Addons di PrestaShop (https://addons.prestashop.com/it/), baseremo questo capitolo esclusivamente sul tema predefinito.
Si noti che qui descriviamo il tema predefinito con le sue impostazioni e moduli predefiniti. L'attivazione di altri moduli o ovviamente l'utilizzo di un altro tema può modificare drasticamente l'esperienza di acquisto.
Sia che il cliente arrivi nella prima pagina digitando l’indirizzo web o atterri in una sotto-pagina attraverso un motore di ricerca, disporrà sempre di molte opzioni per navigare nel catalogo.
L’header è una piccola barra di contenuti, accessibile da una qualsiasi delle pagine del front office.
Contiene diversi strumenti e collegamenti essenziali che si applicano a tutto il negozio ed è suddiviso in due parti.
Un piccolo contenitore con:
Un contenitore più grande con:
L’header non cambia quasi mai durante tutta l'esperienza di acquisto.
La parte essenziale dell'header è il carrello. Come impostazione predefinita si visualizzano solo il numero di prodotti effettivamente contenuti in esso (se presenti). Il cliente può cliccare sul testo per accedere al riepilogo del carrello della spesa da cui è possibile avviare il processo di pagamento.
Il footer inizia con un piccolo contenitore che presenza due aspetti:
Il footer dà accesso alle pagine che possono essere utili per gli utenti.
Si noti che tutto questo contenuto può essere modificato dal proprietario del negozio dall'interno del back office, sia tramite le impostazioni di preferenza sia tramite la configurazione del modulo.
TLa colonna a sinistra nell’impostazione predefinita viene visualizzata in una pagina di categoria quando viene attivata dal back office. Funziona principalmente come pratico segnaposto per la navigazione e per gli strumenti disponibili.
Una categoria è una struttura gerarchica per l’ordinamento dei prodotti: può contenere un numero qualsiasi di sottocategorie, consentendo di navigare in modo semplice dalle liste di categorie partendo dalle più generali e giungendo a prodotti più specifici grazie a un percorso logico.
Un negozio PrestaShop può avere tutte le categorie e sottocategorie necessarie, con un numero infinito di prodotti all’interno di un determinato livello di categoria. Tutte le categorie sono in effetti sotto categorie della categoria radice "Home".
La navigazione dettagliata visualizza un blocco con diversi criteri disponibili per filtrare i prodotti, i principali attributi, funzionalità e intervalli di prezzo. È molto utile nell’aiutare i clienti a trovare facilmente un prodotto.
È qui che avviene la magia. La sezione centrale cambia costantemente in risposta alle scelte dei clienti.
La prima pagina predefinita fornisce al cliente un'ampia panoramica del negozio e delle sue possibilità. Lo slider con immagini che si alternano è utile per fornire un quadro generale del negozio.
Lo slider è seguito da un elenco di "Prodotti popolari" evidenziati a seconda delle scelte più frequenti.
La maggior parte dei navigatori esperti visiterà il negozio tramite un motore di ricerca, atterrando direttamente su un prodotto o su una categoria. È bene che ci siano pochissimi ostacoli nella home page che dovrebbe essere su misura per i nuovi utenti. |
Categorie, tag, marchi, fornitori, ricerca, pagina speciali, pagina dei best sellers o nuovi prodotti: PrestaShop fornisce molti percorsi per un prodotto, ma i clienti hanno a disposizione un elenco familiare dei prodotti in base al contesto scelto.
Nonostante il diverso contenuto, il design di queste liste sono molto simili per far sì che sia familiare anche per i nuovi arrivati. Mostrano tutti un elenco di prodotti organizzati in una griglia, con:
Questa visualizzazione in elenco consente al cliente di vedere in breve le informazioni principali dei prodotti quando già conoscono tutto ciò di cui hanno bisogno di quel prodotto, favorendo un processo decisionale più rapido.
Spostandosi sul prodotto si attiva una veloce animazione, si visualizzano le diverse combinazioni e un collegamento "Visualizzazione rapida". Facendo clic sul collegamento "Visualizzazione rapida" viene visualizzata una finestra popup con le informazioni principali del prodotto e un pulsante "Aggiungi al carrello".
Le categorie possono disporre di un'immagine di intestazione con un messaggio introduttivo, come definito dal proprietario del negozio.
L'elenco dei prodotti per categoria o marca può essere ulteriormente ordinato per prezzo (dal più basso al più alto o dal più alto al più basso), nome (da A a Z o da Z a A) o pertinenza.
Qui tutte le informazioni inserite dal proprietario del negozio sono messe a disposizione dell'utente. A seconda del tema, una pagina del prodotto può essere molto approfondita con informazioni estese o semplicemente presentare le caratteristiche più importanti. La caratteristica principale del tema predefinito è quella delle immagini del prodotto, con uno strumento in basso che consente ai clienti di visualizzare le varie immagini disponibili.
Accanto alle immagini ci sono due blocchi:
Sotto il blocco del carrello troverai un blocco di rassicurazione per far conoscere ai tuoi clienti i diversi vantaggi nell'acquistare nel tuo negozio o per essere più trasparente sui termini di pagamento e di consegna.
Nella parte inferiore della pagina prodotti è presente una tabella di sezione. Le più usuali sono:
Facendo clic sul link "Carrello: prodotti XX" nell'header, il cliente giunge alla pagina di riepilogo del carrello della spesa che rappresenta il primo passo del processo di ordine, prima di accedere alla pagina del pagamento. Riassume il contenuto del carrello e mostra nuovamente il blocco di rassicurazione. Qui è dove il cliente viene rassicurato che l'ordine contiene solo i prodotti desiderati, né più né meno.
Cliccando sul bottone "Checkout" l’utente è reindirizzato sulla pagina dedicata al checkout divisa in 4 sezioni:
Il cliente può tornare indietro al passo precedente cliccando sul relativo titolo.
La pagina di pagamento è stata volontariamente privata di qualsiasi distrazione come ad esempio la colonna di sinistra, il piè di pagina e altri link che possono allontanare il cliente dall'acquisto. È ancora possibile uscire dal processo di pagamento facendo clic sul logo del negozio nell'intestazione.
Poiché la registrazione è una delle principali cause di perdita clienti nei negozi online, PrestaShop semplifica la creazione di un account.
Quando clicca sul link "Accedi" nell'header il visitatore viene portato alla pagina di autenticazione in cui può accedere. Se ha bisogno di creare un nuovo account, il link "Nessun account? Creane qui uno" lo reindirizzerà al modulo di creazione account.
Il modulo di creazione dell’account si divide in due parti:
Once registered, the customer is redirected to the "Your account" page, where many options can be accessed: order history, credit slips, vouchers, and access to the previously entered information.
Among the available links is "Add first address". This will be the default address for this customer - there can be many more. If the customer only has one registered address, it will be used both as the shipping and the billing address. During the order process, the customer can choose to use a different address for the billing address, and create that new address on the fly. |
The whole process of buying a product on a PrestaShop site can follow different paths, but they all reach the same conclusion, which in e-commerce lingo is called the "conversion funnel": from the moment the cart is filled and the customer starts to check out, he or she has to progress through various validation screens until the order is validated and can be processed.
The purchase path is called a conversion funnel because this is where a lot of online shops lose clients due to overly long, complicated or numerous screens. Read more on Wikipedia: http://en.wikipedia.org/wiki/Conversion_funnel. |
This process starts when the customer clicks the cart summary's "Checkout" button, and always follows the same sequence of screens:
The delivery address page. If the user account has no registered address, the customer is directly taken to the address creation form.
Two addresses are necessary for an order:
If the customer needs to have the order billed to an address other than the delivery one, he or she can click the "Billing address differs from shipping address" link and either select an address from the currently registered ones,or create a new one. If an address turns out to be wrong, the customer can use the "Edit" link to correct it. |
The payment page.
The customer can choose many payment options, depending on what the shop owner has set up. The customer clicks on the chosen method and depending on the method, is either sent over to the chosen third-party handler or continues to one of PrestaShop's pages where he or she can enter the needed details, such as a validation before displaying check or bank wire information.
Check and bank wire are installed by default, but PrestaShop makes it easy to offer payment through PayPal, Hipay or any other 3rd party providers. See the modules available in PrestaShop's back office, or check the Addons marketplace for even more modules: http://addons.prestashop.com/. |
The customer needs to agree with the shop's terms of service before completing the purchase and validation the order. Which is done by clicking on the "Order with an obligation to pay" button.
Il front office è ciò che i clienti vedono ogni volta che visitano il tuo negozio. Si tratta quindi dell’interfaccia, dei prodotti, delle foto, delle descrizioni, dell’intero processo di acquisto, ecc.
Come cliente è tutto ciò che vedrai nel negozio durante l'esperienza di navigazione e di acquisto, dall'inizio alla fine.
Come proprietario del negozio dovresti conoscere il tuo front office come le tue tasche, non solo perché è doveroso conoscere il tuo negozio dentro e fuori, ma anche perché è bene che tu comprenda chi sono i tuoi clienti, quali e quante pagine visitano e dove cliccano durante una normale sessione di acquisto, dove potrebbero bloccarsi, come aiutarli, ecc.