Scroll fading: cos’è e come può aiutare la UX
Cosa troverai in questo articolo. Scroll fading e scroll jacking sono due tecniche di design che servono ad arricchire l’interazione di un utente con una pagina web. Rispettivamente, si servono di animazioni e di un “dirottamento” della velocità e direzione di scorrimento della pagina per attirare l’attenzione dell’utente su determinati elementi. La prima tecnica, più diffusa, serve soprattutto a mettere in evidenza porzioni di testo, immagini o video ed evitare che sfuggano all’attenzione del lettore. Tuttavia, quando si implementa questa soluzione, ci sono alcune buone pratiche di cui bisogna necessariamente tenere conto per far sì che contribuiscano a migliorare, anziché intralciare, l’esperienza dell’utente.
Indice
Se ben usato, lo scroll fading è una tecnica che può migliorare nettamente la UX di una pagina web e incoraggiare le conversioni. Se non sapete in cosa consista questa soluzione di design o se non sapete come implementarla secondo le migliori pratiche CRO, questo è l’articolo che fa per voi.
Cos’è lo scroll fading e per cosa viene usato
Sia i test di eye tracking sia gli dimostrano come l’interazione tipica degli utenti con le pagine web non sia caratterizzata da una lettura attenta, ma piuttosto da una sorta di veloce scansione durante la quale essi si soffermano solo sugli elementi più prominenti visivamente. Per questo motivo, si tende a suddividere le informazioni in frammenti più piccoli così che risulti più semplice per l’utente interagire con esse. Lo scroll fading è una tattica di animazione attraverso la quale l’utente ha l’impressione che alcuni elementi in pagina compaiano, scompaiano o si modifichino quando egli raggiunge un certo punto della pagina.
Questa tattica viene impiegata per diverse ragioni:
- Attirare l’attenzione degli utenti su specifici elementi, corrispondenti con quelli che scompaiono o compaiono attraverso l’effetto di animazione; può essere quindi un modo per segmentare un contenuto molto lungo ed evitare che l’utente perda per strada informazioni salienti, ma anche per mettere in evidenza una CTA;
- Ridurre i tempi di caricamento della pagina: poiché i contenuti vengono caricati nel momento in cui vengono resi visibili all’utente, si risparmia molta banda dedicandola tutta ai contenuti above-the-fold;
- Implementare fra i contenuti dati aggiornati in tempo reale (ad esempio un contatore di visitatori, di clienti che hanno effettuato acquisti o hanno lasciato recensioni da 5 stelle e così via) che fanno sembrare il sito sempre “fresco” contribuendo alla sua immagine di autorevolezza.

Le differenze con lo scrolljacking
Un altro tipo di design dello scroll, leggermente diverso dallo scroll fading, è lo scrolljacking (da scroll, scorrere, e hijacking, dirottare). Quest’ultimo modifica letteralmente il modo che l’utente ha di scorrere la pagina, dunque sovrascrive il naturale movimento del sistema operativo in termini di direzione e velocità. Al contrario lo scroll fading si limita ad attivare un’animazione quando l’utente raggiunge un certo punto della pagina.
Esistono casi in cui scroll fading e scrolljacking sono usati insieme: difficilmente si tratta di una decisione in grado di aiutare le conversioni, perché la combinazione fra animazioni dello scroll fading e perdita di controllo dei movimenti da parte dell’utente nello scroll tipica dello scrolljacking è frustrante per la maggior parte delle persone, a cui causa un sovraccarico cognitivo.
Best practice per migliorare la UX con lo scroll fading
Quando una scelta operata in una determinata sezione della pagina influisce su un’altra sezione, producendo una modifica all’interno di questa, il fatto di avere uno scroll fading non migliora, ma anzi intralcia l’utente, perché la sua aspettativa è più comunemente quella di essere trasportato automaticamente verso la sezione modificata, e non di dover scorrere in autonomia la pagina avanti e indietro. Con questo sistema, poi, non sempre è chiaro all’utente quale azione nella sezione X abbia attivato la modifica Y, per cui comincia a scorrere in su e giù entrando in confusione.
Questo problema, detto della persistenza degli elementi, è da tenere in considerazione quando si decide di implementare sul proprio sito lo scroll fading. Gli elementi persistenti sono però utili per bloccare informazioni importanti che siano state caricate la prima volta attraverso un’animazione ma che l’utente desideri tornare a vedere: in questo caso, evitare di attivare nuovamente l’animazione va incontro alle aspettative e alle necessità dell’utente.
Correlato a questo problema c’è quello dell’illusione della completezza, ovvero la percezione ingannevole secondo la quale tutto il contenuto visibile sia anche completo, percezione che si acuisce in presenza dello scroll fading. Ciò che invece la limita è un buon copywriting: se il testo che compare e scompare è scritto secondo le buone pratiche della scrittura sul web, dunque conciso, ma denso di informazioni utili, di effetto e graficamente rilevanti, allora quelle informazioni verranno trattenute dagli utenti.
Anche la velocità con cui il testo compare e scompare è importante: se è troppo lenta, infatti, gli utenti tendono a ignorare completamente gli elementi testuali (parliamo di animazioni di durata superiore ai 500 ms). Fate sempre i vostri A/B testing utilizzando velocità comprese fra i 100 e i 400 ms e valutate cosa funzioni meglio.
Ovviamente, perché l’animazione funzioni, essa deve caricarsi per intero: se dunque prevede sia testo che immagini, entrambi devono caricarsi nello stesso lasso di tempo. La sensazione dell’utente, altrimenti, è di essersi perso qualcosa di importante; non solo, ma le immagini possono contribuire in modo significativo a veicolare emozioni che sono necessarie per il percorso di conversione dell’utente e la loro assenza può rivelarsi deleteria. È meglio, comunque, fare in modo che solamente uno solo di questi elementi – o l’immagine o il testo, quello su cui volete che l’utente concentri la propria attenzione – venga caricato attraverso un’animazione.
Concludiamo questa serie di consigli raccomandandovi di evitare l’uso dello scroll fading su dispositivi mobili, dove il carico cognitivo dovuto alla serie di scroll è naturalmente maggiore rispetto alla navigazione da desktop e lo diventa ancora di più in presenza di questa soluzione di design. Inoltre, l’illusione di completezza è ancora più forte a causa del maggiore spazio vuoto che si trova spesso fra i diversi segmenti di pagina.
Coming soon:
La prossima settimana, sul blog di Seed, parleremo di percorsi ingannevoli nella UX di un sito e di come evitarli. Tornate a leggerci!