Le pagine di descrizione dei prodotti nei siti di e-commerce hanno particolare importanza. Se un utente non è in grado di capire e apprezzare il prodotto da quella pagina, non procederà all’acquisto.

Le indicazioni di usabilità classiche per le pagine di prodotto sono, tutto sommato, generiche e di buon senso:

• Facilitare la navigazione (quando mai non dovremmo facilitarla?…)
• Facilitare la scansione visiva che segue un pattern a F (vecchia storia, nemmeno sempre vera)
• Usare buone immagini (chi vorrebbe usare immagini pessime?)
• Non usare le descrizioni originarie del produttore per descrivere il prodotto, ma personalizzarle evidenziando quello che può essere utile per il vostro utente
• Eliminare il rumore visivo
• Rendere sempre chiaro e facilmente disponibile la call to action, cioè in questo caso il bottone di aggiunta al carrello.

Anche le nostre vecchie indicazioni del 2004 reggono ancora. Tutte queste cose sono vere ma troppo generiche. Nei test di usabilità di incontrano spesso comportamenti degli utenti che spiazzano:

• scarso uso degli strumenti di navigazione che con tanta cura avevamo progettato;
• scarso utilizzo di informazioni testuali che invece avevamo con attenzione redatto;
• cecità selettiva a funzioni che a noi sembravano così ovvie.

Un recente studio di usabilità di Baymard che si occupa proprio delle pagine di prodotto, identifica con chiarezza un problema che spesso vedo anch’io nei test di usabilità, non solo di pagine commerciali: la scarsa attenzione che gli utenti dedicano ai testi nelle pagine, peggiorata dalla presenza di foto che calamitano l’attenzione. Questo è particolarmente grave sulle pagine di prodotto, naturalmente.

Un’immagine vale più di 1000 elenchi puntati

Secondo lo studio, le immagini sono molto utili a dare agli utenti un’idea delle proporzioni, dei dettagli del prodotto. Riescono anche, se costruite bene, a far sembrare il prodotto attraente. Sono uno strumento talmente buono che ben il 56% degli utenti nello studio guardava come prima cosa proprio quelle.

Tuttavia le immagini nella maggior parte dei casi non rispondono a domande specifiche sul prodotto: ad esempio non dicono il peso, le dimensioni esatte, il profumo, il tessuto, in generale i materiali, la compatibilità con qualcos’altro, l’esistenza o la predisposizione per accessori.

Questi sono tutti aspetti importanti per i prodotti, e sono di solito contenuti nel testo descrittivo a fianco della foto. Oppure sotto, specialmente su mobile. Sfortunatamente, però, un pattern di comportamento molto comune è quello per cui dopo aver visto le foto, l’utente scorre rapidamente il testo descrittivo senza leggerlo, e a volte senza nemmeno espandere gli eventuali dettagli a comparsa del testo.

In tal modo, le informazioni che pure ci sono non vengono lette.

Una soluzione parziale: immagini con l’aggiunta di testo

La soluzione proposta da Baymard al problema è quella di arricchire le immagini con informazioni testuali, che, poiché inserite nel contesto, aiutano a rispondere a dubbi e domande degli utenti. Ecco un semplice esempio:

In questa scheda le immagini fanno comprendere il tipo di lampada e l’utilizzo tipico, ma per conoscere le dimensioni e capire se queste sono adatte alla nostra stanza dovremmo consultatre la descrizione a fianco. Nel caso specifico, inoltre, l’informazione è accessibile solo cliccando su “Visualizza altri dettagli prodotto”

In questa immagine, invece, le informazioni sulle dimensioni esatte sono fornite attraverso testo presente direttamente nell’immagine, aiutando quindi a capire se il prodotto faccia al caso nostro.

L’esempio dovrebbe rendere bene l’idea, e altri esempi riguardanti frigoriferi, jeans e zaini li trovate nell’articolo originale di Baymard.

Sono tutte informazioni che sono presenti anche nelle descrizioni, ma che gli utenti trovano già guardando le immagini, riducendo il rischio di abbandono per non averle viste nel testo.

Scegliere le informazioni decisive per l’acquisto per prodotti sufficientemente generici

Uno dei problemi riguarda evidentemente la decisione su quali informazioni è importante inserire: per alcuni prodotti può essere ovvio (taglia, peso, dimensioni di accessori interni come le tasche), per altri meno: una macchina fotografica professionale ha talmente tante specifiche che è impossibile inserirle tutte in una foto. D’altra parte, questo è un genere di prodotto per esperti, i quali è più probabile cerchino nelle descrizioni le specifiche, visto che sanno esserci e sanno essere importanti.

Le indicazioni valgono dunque soprattutto per acquisti di prodotti rivolti a un pubblico non specialistico, che si acquistano ogni tanto, ma le cui caratteristiche variano grandemente: elettrodomestici, mobili, vestiti, accessori.

Il problema del mobile e altre considerazioni

L’aggiunta di testo nelle immagini porta in primo piano un’altra difficoltà: quella di costruire immagini con testi che siano ugualmente leggibili sia su desktop che su mobile. Sia la disposizione sia la leggibilità del testo deve essere adeguata in entrambe le situazioni. Solo se per ragioni di densità o di orientamento non fosse possibile rendere le immagini con testo leggibili anche su smartphone, sarà necessario mostrare immagini differenti, progettate appositamente per il dispositivo.

Si noti che questo è in qualche modo anche una specie di caso di accessibilità inversa: gli utenti che utilizzano i lettori vocali, per esempio, è più probabile leggano proprio il testo, anziché le descrizioni (se presenti) delle foto. Quel tipo di utente ha in questo caso addirittura un vantaggio rispetto a chi usa la modalità visiva, perché ha minori probabilità di essere distratto dalle immagini. Oltre ad avere in media una maggior abitudine all’elaborazione rapida di molte informazioni verbali.

Un problema che va oltre le sole immagini, da verificare in ogni tipo di sito

Un’ultima considerazione: ci sono ovviamente molti altri aspetti importanti delle pagine di prodotto:

• l’accesso e l’ordinamento dei giudizi degli altri acquirenti,
• la stratificazione delle informazioni in schede o tab a comparsa,
• la presentazione di bundle o prodotti correlati

Ma il fatto che le informazioni testuali vengano spesso mancate, pur se presenti, costituisce a mio parere un problema di usabilità e comprensibilità enorme, che va preso in esame prima degli altri, perché vanifica anche una progettazione altrimenti a regola d’arte.

Si potrebbe pensare che questo fenomeno di “sorvolamento delle informazioni presenti” sia colpa delle sole immagini, che calamitano l’attenzione distogliendola dal testo, e forse una certa quota del comportamento è ascrivibile anche a questo. Ma, come ho detto, il comportamento si osserva in qualunque tipo di pagine nei test. Sia in quelle inframmezzate da foto, che nei cosiddetti “muri di testo”, ed è forse più legata al tipo di task che viene richiesto.

La questione merita verifiche anche sperimentali più approfondite, ma una ipotesi potrebbe infatti essere che sia l’orientamento al compito (ricerca, acquisto, transazione immediata) a indurre un comportamento di scorrimento rapido e poco preciso dei testi. Lo scopo finale infatti non sarebbe quello di comprendere il testo, ma solo decidere sull’acquisto o sulla transazione. Oppure quello di trovare un’informazione puntuale.

Le attività di comprensione prevedono immersione nel testo, perché lo scopo è proprio capire cosa il testo dica, frase dopo frase, formando una rappresentazione coerente del significato complessivo. Ma in molte attività sul web semplicemente non ci interessa questo. Non se ne deve concludere che la gente non legga sul web in assoluto, ma che non c’è alcuna garanzia che legga quando sta tentando di adempiere a un’attività pratica, tipo acquistare.

Lo studio dei contesti di utilizzo del web (e del computer/smartphone in generale) è in realtà poco sviluppata, e meriterebbe probabilmente migliori approfondimenti. Una vecchia ma ancora valida introduzione al tema, per chi fosse interessato, è reperibile in questo articolo del 2001 di Maguire.