UX per l’-ecommerce: le best practice

Prima di cominciare a parlare di come si possa utilizzare la user experience (UX) per ottenere risultati migliori od ottimizzare il layout  dei web di e-commerce (e-shop), è essenziale spiegare prima cos’è la UX.

UX è l’acronimo di User Experience (esperienza dell’utente) e spesso viene abbinato alla parola “design” come nelle espressioni “UX design” o “design della user experience”. L’abbinamento dell’acronimo UX con la parola “design” potrebbe indurci a pensare che lo UX design sia la stessa cosa del web design (progettazione della UI – User Interface – interfaccia utente), oppure del design di diverse pagine o che riguardi la grafica e il visual design.

Invece, l’obiettivo dello UX design è completamente diverso: il design della user experience vuole creare una relazione tra l’utente e il marchio, che metta l’utente al centro dell’attenzione. È il processo di design che ci accompagna nella progettazione di un prodotto o di un servizio, dalle sue fasi ideative fino al lancio o alla messa in produzione.

La differenza tra UX design e UI design e la spiegazione del perché, oltre che dalla grafica della pagina, i risultati possano dipendere anche dal modo in cui tale pagina è organizzata, possono essere comprese con il semplice esempio di due bottiglie di ketchup.

Nell’immagine a sinistra, vediamo le bottiglie di ketchup oggetto di un determinato design. Si può dire che, a prima vista, l’aspetto visivo di entrambe le bottiglie sia soddisfacente e adeguato allo scopo. Nell’immagine a destra, si può notare che nonostante entrambe le bottiglie abbiano un ottimo design, l’esperienza d’uso è diversa, il che avrà un ulteriore impatto sulle decisioni d’acquisto del cliente.  Una prova del fatto che è necessario prestare la stessa attenzione all’UX e all’aspetto grafico in generale.

Uno degli errori nel settore dell’e-commerce è non conoscere i propri clienti. Spesso ci concentriamo principalmente sui dati quantitativi, come gli analytics, gli aspetti tecnici, le specifiche delle funzionalità che vogliamo nel nostro store perché risolvano i nostri problemi specifici.

Ma così facendo non lasciamo abbastanza spazio ai clienti, non conosciamo le loro preoccupazioni ed esigenze primarie e non sappiamo dunque come soddisfarle, il che si riflette spesso sulla redditività, sulle performance nel nostro negozio on-line e su quella delle campagne in corso.

L’esempio che segue dimostra quanto sia importante concentrarsi sulla conoscenza del cliente. Prendiamo due persone dello stesso paese, della stessa età, con una famiglia, che vanno in vacanza negli stessi posti. Nonostante tutti questi tratti simili, ci sono molte altre cose che li allontanano, come la professione, lo stile di vita o la religione, tutti elementi in grado di influire sul loro comportamento di acquisto.

Gerarchia dei contenuti e layout per e-shop performanti

Abbiamo parlato di cos’è la UX, di cosa si occupa e perché è fondamentale utilizzarla. Ora la analizzeremo in modo più dettagliato, prendendo ad esempio la pagina di uno store on-line.

Home

Una delle pagine più importanti di un e-shop è senza dubbio la home page. È la prima cosa con cui il cliente entra in contatto dopo essere entrato e svolge un suo ruolo nel processo decisionale dei visitatori, visitatori che possiamo dividere in tre tipologie fondamentali:

1. il cliente che è entrato nell’e-shop perché sa esattamente cosa vuole
2. il cliente che ha una vaga idea di ciò che vorrebbe
3. il cliente che è in cerca di ispirazione, quindi non ha un’idea concreta di cosa vorrebbe acquistare.

Ogni cliente si approccia all’acquisto in modo diverso, quindi il layout della home page deve corrispondere al suo comportamento d’acquisto. Una delle basi è creare contenuti coinvolgenti sulla landing page, soprattutto se conosci bene i tuoi potenziali clienti.

Tuttavia, esistono delle regole generali su come creare contenuti adatti ai clienti dell’e-shop, come ad esempio i banner per le promozioni e i prodotti stagionali, a cui non è necessario dedicare inutilmente spazio perché non sempre ti porteranno tutti i click che ti aspetti. L’eccezione è rappresentata da uno sconto di fine stagione, o un’offerta allettante. Sotto il banner, è opportuno inserire le informazioni di base sull’acquisto che interessano all’utente: opzioni di pagamento, tempi di consegna del prodotto, spedizione, reclami, ecc.

Una delle cose che i clienti amano di più è la visualizzazione delle categorie più popolari in combinazione con i prodotti, come ad esempio I più popolari della categoria, I prodotti più popolari, I migliori prodotti in offerta o I marchi più popolari.

Le raccomandazioni di prodotti e la comunicazione degli sconti funzionano soprattutto per i clienti che non hanno ancora deciso cosa acquistare o che sono in cerca di ispirazione. Con i clienti potenziali, devi prima guadagnarti la loro fiducia. I feedback degli utenti o le verifiche dei portali di recensioni ti aiuteranno.

La parte inferiore della home page è utilizzata per comunicare i contenuti che i siti di e-commerce utilizzano per sostenere le vendite. Nella maggior parte dei casi si tratta di un blog o di post visualizzati dai social network. Se coinvolgi l’utente con i tuoi contenuti in questa sezione, è possibile che sia più motivato a iscriversi alla tua newsletter o a seguire i tuoi social network.

Header dellìe-shop

La home page deve aprirsi con un’intestazione (header), che per impostazione predefinita contiene il logo che funge collegamento alla home page. Poi, in genere, viene visualizzata la navigazione completa sotto forma di mega menu. Un elemento di fondamentale importanza è la casella di ricerca estesa. Infine, ma non meno importante, l’header dell’e-shop deve contenere elementi essenziali come il carrello con un riepilogo dei prezzi, il login/creazione dell’account o il clic sulla lista dei desideri.

L’intestazione è importante, soprattutto per i clienti che sanno già cosa vogliono e, nella maggior parte dei casi, si dirigono subito verso la ricerca, comportamento di solito associato a un’alta probabilità di acquisto. Il menu di navigazione è utilizzato soprattutto dai clienti che si trovano nella fase di scoperta del prodotto e hanno bisogno di più tempo per decidere.

Footer dell’e-shop

Il footer (piè di pagina)  è il luogo in cui l’utente cerca spesso informazioni su traffico, opzioni di pagamento, contatti, annunci, clic sui social network, ecc. Supponiamo che l’utente si abitui a scorrere fino in fondo alla pagina. In questo caso, è probabile che stia cercando qualcosa o che gli piaccia il contenuto dello store, quindi è consigliabile inserire nel footer, oltre ai contenuti di legge, anche i link alle categorie principali del negozio, in modo che i clienti possano continuare a navigare senza difficoltà.

Navigazione

La navigazione e la struttura dei negozi di e-commerce hanno un impatto significativo su metriche come il tasso di conversione, le vendite o la frequenza di rimbalzo. È logico che se gli utenti non riescono a capire dove e come trovare ciò che vogliono, o addirittura dove si trovano, abbandoneranno il sito web e non avranno alcun motivo per tornare. In assenza di una navigazione semplice e funzionale, non riusciranno a capire come visitare il catalogo dei prodotti, il blog, dove trovare l’ufficio o il negozio, ecc.

Se si chiede a un utente di immaginare la navigazione principale di un sito web o di un negozio online, di solito posiziona una barra orizzontale dei menu nell’intestazione. Uno spazio spesso utilizzato per supportare la navigazione principale è la barra laterale. Quando gli utenti cliccano su una categoria di primo livello, le relative sottocategorie appaiono nella barra laterale. Le funzioni di navigazione della barra laterale sono una soluzione eccellente per i negozi online o per i siti web che hanno bisogno di strutturare molte informazioni. Oltre ad ospitare le sottocategorie, offre uno spazio perfetto per i filtri dei prodotti.

Una soluzione standard ed efficace è il già citato mega menu, cioè una grande barra di navigazione che viene visualizzata quando il mouse passa sopra una voce del menu di navigazione principale. Si tratta di una maniera eccellente per inserire molte voci nella struttura delle categorie di prodotti o per mostrare un numero significativo di sotto-pagine di livello inferiore. Un layout così chiaro ha anche il vantaggio di liberare spazio, ad esempio per la visualizzazione di prodotti, pubblicità e altro, migliorando così l’esperienza del cliente.

Ricerca e risultati

Insieme al menu di navigazione, la ricerca è uno degli elementi di navigazione più critici. Gli utenti sono più propensi a cercare gli articoli desiderati se sanno che un negozio online offre il prodotto o la categoria che stanno cercando.

Un nostro studio dimostra che circa il 30% degli utenti abbandona un sito web o un negozio online se non trova ciò che sta cercando. Gli utenti scelgono tra il menu di ricerca e quello di navigazione in base a vari fattori, principalmente la tipologia di utenti a cui appartengono (come abbiamo visto sopra), le loro intenzioni e il segmento (nicchia o tipologia di prodotto) a cui appartiene il negozio online che stanno visitando.

Anche i risultati della ricerca giocano un ruolo a parte nel comportamento di acquisto degli utenti. Questo sito è molto simile al classico product listing di un e-shop. Tuttavia, un problema tipico dei motori di ricerca è che non sono abbastanza intelligenti da fornire all’utente risultati che riflettano i suoi interessi e il suo comportamento di acquisto. Pertanto, gli utenti spesso si ritrovano senza risultati, il che, in un terzo dei casi, comporta la loro immediata uscita dall’e-shop.

Il secondo problema comune è l’impossibilità di filtrare i prodotti trovati nella pagina dei risultati o lo scarso numero di filtri disponibili. Ciò significa che i filtri a faccette non funzionano e l’utente deve cercare tra i risultati invece di poter filtrare i prodotti in base alle proprie preferenze.

Product listing

Gli elenchi di prodotti sono una parte essenziale di un e-shop, perché  indirizzanio gli utenti verso le descrizioni di ciascun prodotto. Il layout minimo dei product listing  o più precisamente delle categorie mostrate nell’e-shop, deve comprendere:

Header esteso

L’intestazione estesa contiene il nome della categoria insieme alla descrizione di dove si trova l’utente. Puoi anche aiutare gli utenti aggiungendo suggerimenti per scegliere il prodotto giusto.

Breadcrumb

La navigazione breadcrumb, o filo di Arianna, o percorso di Pollicino, viene utilizzata in combinazione con la ricerca. Gli utenti la considerano uno strumento più facile per “viaggiare” verso una categoria che li interessa e di cui non conoscono, ad esempio, il nome esatto. In questo modo possono cliccare sui dettagli del prodotto ricercato e arrivare alla categoria desiderata utilizzando la breadcrumb.

Opzioni di ordinamento

Sotto il nome e la descrizione della categoria, si usa spesso visualizzare le sottocategorie o i filtri di prodotti con diverse opzioni di ordinamento. Tuttavia, per impostazione predefinita, sottocategorie e filtri tendono a essere visualizzati nella barra laterale.

Barra laterale

La barra laterale viene spesso utilizzata per visualizzare le sottocategorie, i filtri dei prodotti di una categoria o i filtri a faccette summenzionati. Supponiamo che i filtri della barra laterale non siano sufficientemente ottimizzati o che la struttura della categoria non sia stata adeguatamente elaborata. In questo caso, il contenuto della barra laterale è molto più lungo di quello della pagina e ciò influisce negativamente sul comportamento dell’utente.

Contenuto

Un elemento centrale è il contenuto della pagina, vale a dire i prodotti. Di ciascun prodotto si dovrebbe mostrare almeno:

1. Immagine di anteprima
2. Nome del prodotto
3. Prezzo, o prezzo originale
4. Disponibilità, oppure il tempo stimato di consegna e il numero di prodotti in magazzino
5. Il pulsante “Aggiungi al carrello” dipende principalmente dal segmento. Se si tratta di abbigliamento per cui è necessario scegliere la  taglia, allora il pulsante non ha molta importanza; se invece si tratta, ad esempio, di libri, allora il bottone “Aggiungi al carrello” ha più rilevanza.
6. Gli elementi di marketing – descrizione delle novità, sconti, saldi, confezioni risparmio, ultimi pezzi – offrono vari strumenti per aumentare l’appetibilità del prodotto agli occhi dell’utente
7. Nell’elenco puoi mostrare qualsiasi informazione relativa ai prodotti, in base a quelli che ritieni siano il fattore o i fattori critici che influenzano la decisione d’acquisto del cliente, come per esempio il numero di colori o altre varianti.

Una domanda frequente riguarda quale sia la paginazione ideale per uno store on-line, e se sia preferibile utilizzare il pulsante “Mostra di più” o le frecce. Entrambe le opzioni funzionano bene, ma la soluzione perfetta le combina, lasciando all’utente la possibilità di scegliere la soluzione più adatta a lui.

Quando elenchi i prodotti, evita lo scorrimento infinito, che viene utilizzato in casi completamente diversi di visualizzazione dei contenuti, ad esempio sui social network, nelle gallerie e così via, ma non durante gli acquisti.

Le informazioni sui prodotti

Le informazioni sui prodotti sono una delle principali pagine di conversione dell’e-shop ed è qui che avviene il maggior numero di decisioni. Possiamo dividere le informazioni che forniamo all’utente in due parti essenziali: la parte dedicata agli acquisti e la parte dedicata alle informazioni.

La parte dedicata agli acquisti

La parte dedicata agli acquisti presenta i parametri e le informazioni fondamentali che influenzano direttamente la decisione dell’utente. La composizione ideale di questa parte del dettaglio del prodotto consiste in:

Product photos/gallery

Always display as many product images as possible – video or video review of the product, everything in the best possible quality. Even from product photos/videos, the user gets a lot of information that may not be in the description. This section often uses labels or information about the discount/promotion, news, or various awards or certificates.

Product brand

Product brand with a click on its detail and can view all products and categories of the selected brands only.

Product name

Ideally, if, in addition to the product’s name, it also consists of a brand or with a designation of variation, e.g., red, metallic, XL, etc.

Product code

Great importance, especially in B2B e-commerce, but it also helps the customers who buy the same products repeatedly in the B2C e-shops, 

Category

The category in which the product is located plays a vital role in the user’s navigation, especially if the product is reached by an advertisement or discovered during an Internet search.

Product parameters

Product parameters – size, variants, colors, etc. – an essential role in decision-making, ideally located near the information with availability and price at the “add to cart” button. When the user changes any of the parameters, they should see changes in price, availability, or other values ​​that interest them.

Availability

Availability of the displayed product in the e-shop and stores.

Delivery

Delivery speed, or estimated delivery date – the more accurate an estimate you can give, the more satisfied the user will be after the purchase.

Add to cart button

The most important button on the page should always be clearly defined and unmistakable. Wherever it is on the site, it must always be clear that it is a button to add to the cart. The button’s pattern depends on the business segment, the method of communication, and the design of the e-shop itself. E.g., if you sell online luxury electric motorcycles, you can easily use the black button with the text buy. However, if you sell and deliver food, a green button with the text in the cart will probably be more appropriate. The button usually displays a field with the amount the user can or wants to add to the cart.

Product price

The most decisive part of the purchase. In e-shops, we often work with promotions and discounts, so it is important to communicate them. If you discount the product, display the discount label and the original price. It is also not the best solution to discount all products simultaneously, as this can undermine product exclusivity.

Additional functions

Additional functions such as wish list, share, or size chart are common elements a user is used to or expects in detail. A short product description, linked to the information part of the page, is usually placed after the product name.

E-shop benefits

A gift for purchase and information about the price of delivery, which is usually recalculated based on the number of products in the cart, or a loyalty system or simple return communication.

The information part

The information part of the product consists mainly of the main description of the product and its properties. It should also include a gallery, video reviews or presentations, a table of all product parameters, a description of the manufacturer, and various additional downloadable materials.

In this section, there is often a space for reviews or questions from visitors, such as a discussion in the form of Q&A. The reviews themselves are a valuable source of information for users and, at the same time, support the trustworthiness of the e-shop. The better the product detail is processed, and the better the products are described, the more likely users will buy in the e-shop.

Product detail is a great place where we can quickly help users discover other products or categories in the e-shop offer with the help of recommendations. It is advisable to place recommendations directly below the central shopping part on the product detail so that they gain enough space and don’t distract unnecessarily from the main product.

When viewing recommendations, it is essential to be careful that the user doesn’t confuse them, for example, with the mentioned variations. These should be placed higher near the shopping button and product parameters.

The shopping cart

The shopping cart is the gateway to the shopping process. The cart has a simplified interface compared to other parts of the site to help the user focus on completing a purchase and avoid shopping cart abandonment. A frequently used feature of the cart is the timing of the products, which alerts users that the products will only be there for a certain period, thus motivating them to make faster decisions and purchases.

The ideal composition of the shopping cart consists of the following parts and parameters:

• Simplified header without navigation – allows you to quickly return to the previous page or home page and view the next steps in the purchase process that await the user
• Information about free shipping, or a gift, working on the same principle – ideally placed below the header above the summary of products
• Summary of products in the cart – by default, it should display products with the final price and the possibility to change their numbers or remove them from the cart. Products need to show their selected parameters and the ability to click on their detail in the e-shop
• The final price of the products – is displayed immediately after the summary of the products and the place to the code for the discount coupon
• Product recommendation – the cart is an ideal place to support the purchase with a recommendation. The place to place referrals is just above or below the “go back” and “complete purchase” buttons. The position depends on the content of the products in the recommendation. If there are too many parameters in the block with the product and it takes up too much height, we place them entirely down, but if they are compact and not too high, we can comfortably place them above the mentioned buttons, then they get more user’s attention. However, never store recommended products in the cart summary above the inserted products. This will confuse users who expect to see completely different products, which may encourage them to leave the site.

Ideally, suppose you can already communicate to users in this section what payment and shipping options you can offer them when purchasing without having to go to the next steps just to find out information. In that case, you will improve your statistics and reduce your bounce rate.

Processo di acquisto

Il processo di acquisto più comunemente utilizzato prevede più fasi. A differenza di soluzioni alternative, come il processo d’acquisto in un solo passaggio o in una sola pagina, questo processo offre maggiori vantaggi e possibilità.

Il processo a una fase è efficace soprattutto per gli e-shop appena lanciati o nei casi più semplici, come quando gli e-shop non offrono più opzioni di pagamento e spedizione e gli utenti non sono abituati a fare troppi acquisti, nel senso che non comprano un numero elevato di articoli.

Tuttavia, lo svantaggio consiste nell’impossibilità di misurare il processo di acquisto, in quanto l’intero processo è costituito da una sola fase. L’acquisto di ogni utente implica l’abbandono dell’intero processo d’acquisto; in base a ciò, è difficile valutare dove sia il problema.

I vantaggi di un processo d’acquisto a più fasi risiedono, in particolare, nella chiarezza e nella possibilità di misurare molto meglio la performance dei vari passaggi del processo d’acquisto, che viene suddiviso in più fasi:

Carrello, o riepilogo del carrello

Riepilogo dei prodotti che il cliente ha scelto di aggiungere al proprio carrello.

Selezione delle modalità di pagamento e spedizione

Questa parte del processo d’acquisto è semplice, ma a condizione che tutte le opzioni che l’utente ha a disposizione siano sufficientemente descritte e corredate di tutte le informazioni fondamentali, non solo il nome del prodotto scelto e il costo, ma anche informazioni aggiuntive: la scelta della consegna tramite corriere, la compagnia di corrieri utilizzata, se la consegna avviene solo nei giorni feriali o anche nei fine settimana, la data stimata di consegna, ecc.

Supponiamo che il cliente scelga il ritiro di persona. In questo caso, dovrebbe avere la possibilità di selezionare un negozio e vedere automaticamente gli orari di apertura, l’indirizzo esatto del negozio, possibilmente anche il telefono e, ovviamente, la data in cui potrà ritirare la merce. Gli utenti visitano spesso le pagine dedicate alle modalità di spedizione e pagamento per sapere quale sarà il prezzo finale del loro acquisto comprensivo di costi di spedizione e quando riceveranno il prodotto, anche se non hanno ancora deciso di completare l’acquisto.

Accedere al proprio account e inserire i dati di fatturazione e spedizione

Questa è spesso la parte del processo di acquisto più frustrante per l’utente, poiché spesso si tratta di compilare dei moduli. Anche se l’utente non effettua il login, possiamo semplificare la compilazione utilizzando il nome, il numero di telefono e l’indirizzo e-mail. Verifica e conferma ogni campo al momento della compilazione in modo che l’utente sappia subito se ha inserito le informazioni corrette o meno. Chiedi all’utente di inserire i dati uno alla volta; se è interessato a registrarsi, visualizzerà i campi per inserire la password solo dopo aver selezionato questa opzione. Nelle fasi successive avrai bisogno degli indirizzi di fatturazione e spedizione.

Puoi facilitare la compilazione degli indirizzi da parte degli utenti con il completamento automatico. Se l’utente inserisce una via e un numero civico, non dovrai preoccuparti di compilare altri campi non necessari. Il completamento dei dati di solito termina con la concessione del consenso. Cerca di semplificare al massimo questa parte e di formularla nel modo più semplice possibile. Nella sezione dei dati personali, spesso c’è un campo per permettere al cliente di aggiungere una nota, ma se non sei sicuro di riuscire a tenerne conto, meglio lasciar perdere del tutto e non inserire il campo, riducendo così la probabilità di una cattiva esperienza dell’utente.

Riepilogo dell’intero acquisto e controllo dei dati inseriti

L’utente potrebbe decidere di cambiare qualcosa, quindi è consigliabile permettergli di tornare a qualsiasi passo della compilazione senza dover cliccare sui pulsanti “Indietro e continua”. In questo passaggio, l’utente deve vedere tutti i dati essenziali per decidere se acquistare e inviare l’ordine. Pertanto, non dimenticare di comunicare con chiarezza il prezzo finale dell’acquisto e, se possibile, la stima più accurata dei tempi di consegna dell’ordine.

Dopo l’invio dell’ordine, l’ideale è che l’utente arrivi direttamente al gateway di pagamento e solo dopo il pagamento alla cosiddetta “pagina di ringraziamento”.  In questo modo eviterai che l’utente chiuda la pagina prima di essere reindirizzato al pagamento, rendendo il processo di acquisto difficile non solo per lui ma anche per te. In linea di massima, anche la “pagina di ringraziamento” fa parte del processo di acquisto e fornisce principalmente informazioni sul buon esito dell’acquisto. Il suo grande vantaggio è che puoi ottenere informazioni dal cliente grazie a un semplice modulo.

In questa pagina, tra l’altro, puoi motivare l’utente anonimo o registrato a diventare un cliente fedele e a fare altri acquisti grazie a offerte speciali o codici sconto, oppure puoi indirizzarlo verso altri contenuti dell’e-shop, come raccomandazioni di prodotti o, ad esempio, articoli del blog, oppure ancora puoi chiedere il consenso all’invio di campagne e-mail e offerte.

Shopping da mobile

Lo shopping da mobile è una tendenza in crescita e i telefoni cellulari giocano un ruolo sempre più importante nel comportamento di acquisto degli utenti. È una pratica comune, prima di acquistare qualcosa, fare delle ricerche, in base alle quali gli utenti decideranno poi se e dove acquistare il prodotto. È interessante notare che, secondo gli ultimi dati, il 69% dei clienti effettua le proprie ricerche principalmente da dispositivi mobili.

Il trend crescente dello shopping da mobile è influenzato da molti fattori, come il progresso tecnologico, la copertura e la disponibilità di internet ad alta velocità, l’accessibilità dei dispositivi mobili, i servizi di pagamento mobile come Apple pay e Google pay, ma anche il supporto dei negozi on-line, che sviluppano le loro applicazioni di e-commerce e si impegnano per costruire la migliore esperienza di acquisto per l’utente. Uno dei  modi per creare una user experience positiva è capire come l’utente controlla il dispositivo mobile.

Layout della pagina e mappa termica

Grazie ai test e alle analisi del comportamento degli utenti, possiamo capire come questi interagiscono con lo schermo grazie alle mappe termiche. Questa tecnica di visualizzazione ci aiuta a definire con precisione come progettare l’interfaccia di un’applicazione o di un sito web in modo che l’utente possa utilizzarla comodamente. Ogni colore spiega quanto sia facile utilizzare le diverse parti dello schermo.

Queste informazioni sono essenziali per la progettazione dell’interfaccia utente e per  decidere come disporre i vari elementi più importanti. Infatti, la collocazione di elementi nei punti giusti dello schermo migliora notevolmente l’esperienza digitale, dato che lo spazio dello schermo dei dispositivi mobili è notevolmente più piccolo dello schermo dei computer tradizionali.

Gli elementi più importanti di uno store on-line shop nella visualizzazione da mobile:

Intestazione

L’intestazione deve rispettare determinati parametri per fungere da pratico elemento di navigazione; deve inoltre essere ridotta, non troppo alta, perché toglierebbe all’utente spazio  da dedicare al contenuto e renderebbe difficile la navigazione nell’e-shop. Dovrebbe contenere un logo che linka alla home. Spesso viene utilizzata la cosiddetta intestazione float, un’intestazione che rimane sempre visibile anche durante lo scrolling.

Logo

Una versione semplificata del logo si adatta facilmente al display del cellulare e non occupa molto spazio.

Hamburger menu

Una parte fondamentale dell’intestazione, che dà accesso al menu di navigazione e al carrello, dove viene sempre visualizzato la quantità di articoli inseriti.

Barra di ricerca

La barra di ricerca nella sua interezza, possibilmente non nascosta dietro l’icona della lente d’ingrandimento, non dovrebbe privare gli utenti della comodità di navigare nell’e-shop. Gli elementi chiave di una barra di ricerca ben progettata sono il posizionamento coernete, una dimensione adeguata ad ospitare query lunghe e un pratico testo placehoder per guidare gli utenti.

Ricerca da mobile

Una ricerca ottimizzata e funzionale sui dispositivi mobili gioca un ruolo fondamentale nell’esperienza del visitatore che sta scoprendo il nostro negozio on-line. L’ottimizzazione consiste nella corretta disposizione degli elementi e nella giusta  impostazioni delle loro interazioni, che semplificheranno il più possibile il controllo dell’utente, come ad esempio:

• La visualizzazione integrale del completamento automatico con la barra di ricerca sull’intero schermo del dispositivo: aumenta in modo significativo la chiarezza e la facilità d’uso della ricerca.
• Il completamento automatico: mostra i risultati a partire dal primo carattere digitato e, quando viene aperto, consiglia le categorie, le frasi più ricercate, i prodotti o gli articoli preferiti e altri contenuti.
• Quando si visualizzano i risultati del completamento automatico, la tastiera virtuale viene automaticamente nascosta in modo che l’utente abbia spazio sufficiente per visualizzare i prodotti.
• I risultati sono disposti in schede secondo parametri rilevanti, e l’utente l’utente può cliccare o spostarsi tra le schede semplicemente scorrendo le pagine.

La funzionalità della ricerca risiede nel suo comportamento quando interagisce con l’utente. Una ricerca accurata deve sempre condurre l’utente a un risultato pertinente e tenere conto del suo comportamento normale, indipendentemente da come scrive la frase di ricerca, se scrive un titolo con errori di battitura, se usa un termine gergale o un arcaismo, ecc.

Conclusioni

È probabile che, oggi più che mai, quello che  gli utenti cercano sia un’esperienza personalizzata. Per questo motivo, per un’attività online, un sito web bello da vedere non è sufficiente. Per avere successo e non  rischiare di perdere i tuoi clienti già dopo la loro prima visita, devi costruire per loro un’esperienza fluida e funzionale. Ci auguriamo che questo post ti abbia aiutato a mettere a fuoco quanto un uso corretto della UX possa essere efficace per rendere la tua attività online più attraente e farle conquistare più clienti.