UX e-commerce: come gestire al meglio le tabelle di confronto
Cosa troverai in questo articolo. Le tabelle di confronto sono uno strumento chiave per migliorare l’esperienza utente e ottimizzare le conversioni sugli e-commerce, perché rendono il processo decisionale più rapido e facilitano acquisti consapevoli. Esse permettono di visualizzare, a colpo d’occhio e in sintesi, le principali differenze tra prodotti o servizi favorendo anche strategie di upselling e riducendo i resi. Esistono tabelle di confronto statiche, più adatte a un numero limitato di prodotti, e dinamiche, che consentono all’utente di selezionare le opzioni da confrontare; è possibile ottimizzarne la leggibilità e l’usabilità seguendo alcune semplici strategie, ma è importante anche essere consapevoli dei casi in cui le tabelle risultino meno utili e si renda necessario ricercare alternative per una UX ottimale.
Le tabelle di confronto rappresentano uno degli strumenti più efficaci per aiutare gli utenti a orientarsi tra diverse opzioni di prodotti o servizi all’interno di un e-commerce. In questo articolo esploriamo come sfruttarle al meglio per migliorare la user experience, fornendovi consigli pratici su quando e come implementarle, oltre a suggerirvi alternative valide nei casi in cui non si rivelino la soluzione ideale.
In quali casi è necessario implementare una tabella di confronto?
Come dimostrato dal caso della SERP di Google che, nel corso degli ultimi anni, sfruttando le potenzialità dell’intelligenza artificiale, è stata sempre più arricchita nel tentativo di accentrare un numero crescente di informazioni, chi interagisce con il motore di ricerca si aspetta di accorciare il più possibile il proprio percorso di ricerca delle informazioni, trovandosi, laddove possibile, di fronte a panoramiche complete dell’argomento cui è interessato.
Se estendiamo questo principio di economia mentale ad altre azioni condotte tipicamente su un sito web, e in particolare sugli e-commerce, possiamo immediatamente comprendere l’importanza delle tabelle di confronto, lo strumento che più di tutti permette di visualizzare a colpo d’occhio le differenze fra vari prodotti relativamente a parametri dirimenti per l’acquisto: ad esempio, tali parametri potrebbero essere, per una tastiera da PC, l’essere wireless o meno; per un mixer, invece, la capienza del serbatoio; per un paio di cuffie la presenza della tecnologia di cancellazione attiva del rumore e così via.
Le tabelle di confronto hanno una struttura tipica così organizzata: a ogni colonna corrisponde un diverso prodotto che incrocia, sulle righe, le funzionalità e/o caratteristiche principali; queste possono essere espresse in parole, numeri o, in forma più sintetica, simboli come “✓” e “X” qualora si voglia semplicemente segnalare, rispettivamente, la presenza o assenza di una data caratteristica. Questa impostazione grafica permette agli utenti di mettere rapidamente a confronto prodotti di categoria analoga ma di livello differente.
Diciamo subito che non si tratta di uno strumento da implementare unicamente nei grandi e-commerce: qualsiasi sito può beneficiarne, anche fossero solo due i prodotti comparabili all’interno di una tabella, proprio per la sintesi e la chiarezza che essa è in grado di offrire all’utente permettendogli di compiere acquisti più informati (e riducendo, in conseguenza, le probabilità di futuri reclami e richieste di reso) ma anche abbreviare il processo di conversione stesso. Inoltre, dal lato di chi vende, una tabella di confronto può essere opportunamente stilizzata non solo per mettere in maggiore evidenza il prodotto con caratteristiche migliori, ma anche con un prezzo superiore incentivando così l’upselling.
Pertanto le tabelle di paragone possono essere utilizzate anche su siti web che non prevedano la vendita di prodotti, ma, ad esempio, di servizi, abbonamenti, pacchetti di lezioni, pacchetti di viaggi, versioni standard/freemium/premium di un’app e così via. Inoltre, si rivelano particolarmente utili in tutti quei casi in cui gli utenti tendano a compiere decisioni di tipo compensatorio, ovvero guardino ai meriti individuali di ogni oggetto e confrontino vantaggi e svantaggi in relazione a una serie di criteri.
Le decisioni di tipo compensatorio sono tipiche di situazioni in cui le alternative a disposizione siano poche (in genere meno di 7); all’opposto, se le alternative sono molte, gli utenti tendono più spesso a effettuare decisioni di tipo non compensatorio, restringendo il bacino di oggetti fra cui scegliere in base a un fattore iniziale, ad esempio il prezzo. Pensate al caso della ricerca di un hotel su una piattaforma di prenotazioni come Booking.com: il comportamento tipico è quello di filtrare gli hotel disponibili nella città dove si viaggerà restringendo le strutture papabili a quelle la cui tariffa per notte sia inferiore a un certo budget che ci si è posti.
Quando è possibile evitare di inserire una tabella di confronto?
La prima situazione in cui è normale, anzi consigliabile evitare l’inserimento di tabelle di confronto è quella delle decisioni di tipo non compensatorio di cui parlavamo nel paragrafo precedente. Se sul vostro e-commerce di abbigliamento avete 30 diversi cocktail dress neri piuttosto simili fra loro, una tabella di confronto sarà per voi perfettamente inutile; vi basterà implementare i giusti filtri prodotto per permettere ai vostri utenti di navigare e scegliere il prodotto giusto sulla base dei criteri per loro più importanti: lunghezza delle maniche? Tessuto? Sostenibilità? Individuate voi quelli più importanti analizzando le ricerche degli utenti, code lunghe comprese.
L’esempio ci permette di introdurre un’altra istanza in cui l’utilizzo di tabelle di confronto non è realmente necessario, ovvero quello di prodotti che non necessariamente si escludano a vicenda. Un utente potrebbe infatti anche decidere di acquistare due cocktail dress, ma di stili lievemente diversi per abbinarli a più outfit; difficilmente acquisterà, di contro, due forni microonde diversi nello stesso momento. Anche oggetti unici o difficilmente comparabili fra loro – come nel caso dei pezzi di artigianato – non trovano logica collocazione all’interno di una tabella di confronto.
Inoltre, nel caso di oggetti molto semplici, economici e facilmente sostituibili gli utenti non sussiste il bisogno di paragonare tutte le loro caratteristiche prima di effettuare l’acquisto; gli utenti tenderanno infatti ad acquistare il prodotto una volta ottenute a proposito le informazioni minime necessarie. Come esseri umani, siamo naturalmente portati a preferire una soluzione che potrebbe non essere ideale ma è sufficiente per i nostri bisogni del momento in modo da ridurre il carico cognitivo ed emotivo della decisione: gli psicologi chiamano questa strategia cognitiva “satisficing”, dalla combinazione di “satisfy”, soddisfare, e “suffice”, essere sufficiente).
Quali tipi di tabelle di confronto esistono?
È possibile implementare tabelle di confronto statiche oppure dinamiche. Le tabelle di confronto statiche sono più indicate quando si devono confrontare meno di 5 prodotti e contengono un set di prodotti decisi a priori dal venditore; si adattano benissimo a pacchetti e abbonamenti e consentono a chi sviluppa di avere maggiore controllo sul loro aspetto e la disposizione delle informazioni al loro interno. Logicamente nel momento in cui si decide, qualsiasi sia la motivazione, di aumentare il numero di prodotti all’interno di questo tipo di tabella, è necessario aggiornarne l’HTML manualmente.
Al contrario, le tabelle di confronto dinamiche si adattano automaticamente all’aumentare dei prodotti al loro interno, che è l’utente stesso a selezionare attraverso un pulsante “Confronta” o tramite checkbox. Questo layout, indubbiamente, più flessibile porta con sé inevitabili rinunce in termini di controllo dell’aspetto visuale.
Tabelle di confronto: problemi di UX più frequenti e consigli di ottimizzazione
Il problema principale di UX nelle tabelle di confronto riguarda il contenuto. Spesso, infatti, i metadati del prodotto non sono stati compilati nel dettaglio e il risultato, specialmente nelle tabelle dinamiche, sono informazioni incomplete e poco significative per l’utente. Prima di optare per l’inserimento di tabelle di confronto, dunque, sarebbe il caso di accertarsi che le schede prodotto siano complete in tutti i loro dettagli.
Una volta fatto ciò, è di cruciale importanza prestare attenzione alla leggibilità delle informazioni, riducendo la quantità di testo inserita all’interno delle varie celle e impiegando layout “standard” in linea con le aspettative degli utenti. Soprattutto, bisogna evitare disallineamenti ed elementi di disturbo per la facilità di lettura: il modello ideale prevedere di inserire nelle colonne i prodotti da confrontare e utilizzare invece le righe per presentare e riassumerne le caratteristiche, assicurandosi comunque che la quantità di informazioni presenti sia essenziale e permetta agli utenti di destreggiarsi agilmente fra somiglianze, differenze e parole chiave.
Come migliorare la leggibilità delle tabelle di confronto? Ecco alcuni consigli:
1. Non usate frasi intere, ma lavorate per parole chiave;
2. Utilizzate colori a contrasto che rendano il testo leggibile rispetto allo sfondo: potete testare la leggibilità dei colori che avete scelto usando strumenti gratuiti online;
3. Impiegate sfumature diverse per lo sfondo delle diverse colonne, alternando, ad esempio, bianco e grigio, in modo tale da separare visivamente le informazioni che riguardano un dato prodotto da quelle che riguardano il successivo;
4. Limitate gli elementi delle tabelle statiche a 5, ma verificate che la visualizzazione non sia compromessa sui dispositivi mobili: potreste dover limitare a 2 il numero di prodotti visualizzabili da smartphone;
5. Indicate chiaramente le divisioni fra una riga e l’altra e fra una colonna e l’altra utilizzando un sottile spazio bianco o altri tipi di separatori grafici;
6. Rendete fisse le intestazioni delle colonne se la lista di attributi da confrontare occupa più di una schermata: la nostra memoria a breve termine è limitata e rischiate che i vostri utenti si trovino a scorrere la pagina in su e in giù svariate volte in un movimento per loro frustrante.
Un ulteriore consiglio che possiamo darvi per ottimizzare la UX delle vostre tabelle di confronto è quello di astrarvi dal linguaggio di settore e immedesimarvi nei vostri utenti: talvolta è preferibile rinunciare ai tecnicismi e privilegiare espressioni che rendano subito chiaro al consumatore finale il risvolto pratico della specifica caratteristica dell’oggetto. Ecco un esempio di come tradurre i dati tecnici di un mixer da cucina in termini pratici nella sua scheda:
• Potenza del motore: 500 watt Sufficiente per tritare il ghiaccio in pochi secondi o fare frullati con ingredienti più duri come carote e noci;
• Capacità del contenitore: 1.5 litri Adatto per preparare fino a 4 porzioni di zuppa o 3 bicchieri di smoothie;
• Numero di velocità: 3 Perfette per passare da una consistenza liscia a una più granulosa in base alle tue ricette.
Nel caso in cui un testo di questo tipo risulti troppo lungo o non vogliate rinunciare al dato tecnico puro, potreste pensare di includere, all’interno della relativa cella della tabella, un link a una pagina con maggiori informazioni o, ancora meglio, un simbolo
“ℹ️” su cui lasciare fermo il mouse (fare click da mobile) per visualizzare tutte le informazioni extra.
Inoltre potreste lasciare gli utenti liberi di scegliere le informazioni da includere nella tabella implementando una funzione “collapse” per le righe della tabella. Se pensate di saperla più lunga voi dei vostri utenti su ciò che è utile per loro sapere, potete sempre creare tabelle con un set di dati standard scelti da voi ma dando comunque la possibilità di espandere tali tabelle per visualizzare la scheda tecnica completa.
Come dicevamo, è possibile che queste implementazioni siano di difficile realizzazione sui dispositivi mobili: uno schermo più piccolo significa poter affiancare meno colonne e impilare meno righe, ma anche affidarsi maggiormente alla memoria a breve termine dell’utente che invece ha serie limitazioni (connaturate all’essere umano). Al di là di osservare ancora più fedelmente le indicazioni fornite sinora, sarà dunque consigliabile vagliare anche opzioni alternative alle tabelle di confronto, come l’implementazione di una navigazione a schede.
Per quanto non equivalente per quanto riguarda decisioni di acquisto di tipo compensatorio, dal momento che non rende possibile il confronto affiancato, la navigazione a schede permette perlomeno di passare da un prodotto all’altro ed esplorarne le caratteristiche in maniera più fluida rispetto a quanto avviene avendo a che fare con una lista o paragrafo di testo da scorrere o dovendo saltare da una scheda del browser all’altra. Per approfondire altri errori comuni nella UX mobile puoi leggere questo articolo di Seed.
Coming soon:
Il blog di Seed torna fra due settimane: parleremo ancora di come monitorare il successo di una strategia SEO a tutto tondo. Tornate a leggerci!
