Portalo al limite: una panoramica dei siti Web a scorrimento lungo

Pubblicato: 2022-03-11

Long scroll, o infinite scroll, i siti web sono esattamente questo: le pagine sono molto più lunghe della pagina “media” del sito e quindi scorrono “all'infinito”. Questi tipi di siti sono diventati popolari con siti di social media e siti come Pinterest che includono molti contenuti generati dagli utenti, nonché alcuni siti di notizie e blog: anche i siti Web e i portfolio personali stanno iniziando a impiegare lunghe tecniche di scorrimento per aumentare coinvolgimento degli utenti e la durata del tempo che le persone trascorrono su un sito.

Lo scorrimento infinito è diventato un modello di progettazione popolare e comune, tuttavia, ci sono alcune potenziali insidie ​​di cui i progettisti dell'interfaccia utente dovrebbero essere a conoscenza quando progettano un sito che utilizza lo scorrimento lungo. Esistono anche alcuni tipi di siti in cui non è appropriato utilizzare un modello di progettazione a scorrimento lungo.

Lo scopo e i vantaggi di Long Scroll

Uno dei maggiori vantaggi dei siti Web a scorrimento lungo è che mantengono i visitatori su un sito più a lungo. Quando le persone non devono prendere una decisione consapevole per consumare più contenuti, è meno probabile che facciano clic.

Pensa a questo come simile al modo in cui Facebook, YouTube, Netflix e siti simili riproducono automaticamente i video al termine di quello che un utente sta visualizzando. Sanno che se un visitatore deve fare uno sforzo per fare clic su un nuovo video, è altrettanto probabile che faccia clic su un sito completamente diverso. Ma se i video continuano a essere riprodotti, è più probabile che continueranno a guardarli.

Quando i siti a scorrimento lungo sono codificati correttamente, caricano un nuovo URL con ogni nuovo contenuto. Ciò equivale a più visualizzazioni di pagina per il sito, che possono aumentare le entrate pubblicitarie e il valore complessivo del sito.

Lo scorrimento lungo è popolare sui siti di notizie, che caricano più contenuti mentre l'utente scorre
La home page di Mashable carica automaticamente più contenuti mentre l'utente scorre, mantenendoli sulla pagina più a lungo.

Come per qualsiasi decisione UX, è importante valutare i vantaggi e gli svantaggi per le persone che utilizzeranno effettivamente il sito prima di decidere un formato. Lo scorrimento lungo può essere un'ottima opzione per alcuni tipi di siti, mentre in altre situazioni tutto ciò che fa è frustrare gli utenti. È importante imparare la differenza tra i due.

Quando utilizzare lo scorrimento lungo (e quando non farlo)

La cosa fondamentale da ricordare quando si considera lo scorrimento lungo è che il contenuto dovrebbe dettare il formato indipendentemente dal tipo di sito progettato. I siti Web a scorrimento lungo sono ottimi per alcuni tipi di contenuti, ma possono presentare un enorme errore di UX con altri tipi.

Nel complesso, i siti orientati alle attività e agli obiettivi non beneficiano di design a scorrimento infinito (ad esempio, siti di e-commerce e tutorial o altri siti didattici in cui gli utenti desiderano vedere progressi definiti). Questi tipi di siti devono dare agli utenti un senso di completamento e realizzazione, che è più difficile da ottenere con siti a scorrimento lungo.

Etsy, ad esempio, ha provato un design a scorrimento infinito nel 2012 e ha finito per tornare all'impaginazione. Hanno scoperto che mentre i clienti acquistavano ancora più o meno alla stessa velocità, il coinvolgimento degli utenti è diminuito. Anche cose come il numero di ricerche eseguite sono diminuite.

Etsy si è allontanato da un lungo sito Web a scorrimento ed è tornato all'impaginazione
Etsy ha finito per abbandonare la lunga pergamena a favore del ritorno ai risultati di ricerca impaginati dopo aver eseguito i test.

Un'opzione che alcuni siti di eCommerce offrono ai visitatori è l'opzione "Visualizza tutto" quando si guardano le pagine dei prodotti. Ciò offre all'utente la possibilità di visualizzare il sito in un formato di scorrimento infinito se sceglie di farlo, preservando le pagine dei risultati più brevi per gli utenti che preferiscono quel formato.

L'impaginazione è utile anche quando è importante che le persone visualizzino le informazioni in ordine cronologico. Laddove un sito Web a scorrimento di una pagina potrebbe incoraggiare le persone a scorrere e saltare avanti, l'impaginazione rallenta il visitatore e aumenta la probabilità che consumino le informazioni nell'ordine corretto.

Laddove un sito Web a scorrimento di una singola pagina può davvero brillare è su siti in cui la lettura di contenuti o articoli aggiuntivi è il flusso naturale. Questo vale per cose come siti di notizie o blog di attualità. Gli utenti di questi siti spesso vogliono acquisire grandi quantità di informazioni contemporaneamente e lo scorrimento infinito lo rende molto più semplice.

Un'altra area ovvia in cui lo scorrimento infinito è una scelta UX popolare sono i siti di social media o i siti con molti contenuti generati dagli utenti. Facebook, Pinterest e Twitter utilizzano tutti lo scorrimento infinito. Questi siti vogliono mantenere gli utenti sul sito il più a lungo possibile e lo scorrimento infinito lo fa bene.

Costi psicologici di Long Scroll

Gli effetti psicologici di qualsiasi decisione progettuale dovrebbero essere sempre considerati con attenzione. Quando si tratta di siti Web a scorrimento di una pagina, ci sono effetti psicologici a favore e contro di esso.

La prima cosa da considerare è che agli utenti non dispiace fare clic in modo mirato. Il clic ha fatto parte dell'informatica, delle interfacce utente grafiche e di Internet praticamente sin dal suo inizio. Le persone sono abituate a quel particolare tipo di interazione e non verranno disattivate se devono fare clic su alcuni collegamenti per accedere a più contenuti.

A molti utenti non piace lo scorrimento infinito per impostazione predefinita. Trovarsi di fronte a una pagina estremamente lunga da scorrere può sembrare un po' come annegare in un mare infinito di informazioni. Quando gli utenti cercano informazioni specifiche, lo scorrimento è raramente il modo più efficiente per trovarle.

Poiché non visualizzerà accuratamente la lunghezza della pagina, lo scorrimento infinito interrompe la barra di scorrimento sul lato della pagina. Sebbene non tutti gli utenti utilizzino la barra di scorrimento, a questo proposito, quelli che lo fanno potrebbero trovare frustrante lo scorrimento infinito.

Lo scorrimento infinito rimuove anche il senso di completamento che gli utenti ottengono dal completamento di un'attività o dal raggiungimento di un obiettivo in una pagina e quindi facendo clic sulla pagina successiva. Perdere questo senso di completamento può scoraggiare gli utenti e indurli a cercare altre fonti per le stesse informazioni o attività.

Un altro impatto psicologico negativo che possono avere i siti Web a scorrimento lungo è che gli utenti tendono a visualizzare i contenuti che si trovano più in basso nella pagina come meno importanti del contenuto in alto. L'uso delle intestazioni può aiutare in questo, poiché in qualche modo "reimposta" il cervello del visitatore su dove si trova la "parte superiore".

Best practice per i siti Web a scorrimento lungo

Se è stato stabilito che il progetto di un sito Web è adatto per un design a scorrimento lungo, ci sono alcune best practice da tenere a mente per assicurarsi che offra un'esperienza utente ottimale.

Per prima cosa, elimina il piè di pagina! Quando il contenuto viene caricato continuamente, il piè di pagina verrà spostato continuamente dalla parte inferiore della pagina. Ciò significa che qualsiasi contenuto o informazione contenuta nel footer rimarrà nascosto. Peggio ancora è quando gli utenti intravedono il footer ma lo perdono di vista prima che abbiano la possibilità di fare clic su qualsiasi cosa. L'uso di un piè di pagina appiccicoso è un modo per aggirare questo problema, sebbene l'eliminazione del piè di pagina sia spesso un'opzione migliore.

Un ottimo modo per interrompere la lunga UX di scorrimento: inserisci informazioni importanti nel piè di pagina
Barbican non ti permette mai di vedere tutte le informazioni preziose nel loro footer perché non appena ci arrivi, più contenuto si carica, spingendolo fuori dallo schermo.

L'uso di segnali visivi è importante, soprattutto se non è immediatamente evidente quando viene caricata la schermata principale che c'è più contenuto nella pagina. I siti con un'immagine di intestazione di grandi dimensioni o contenuti visivi che riempiono lo schermo quando viene caricata la pagina, spesso includono una freccia (a volte animata) o immagini simili per indicare che sono presenti più contenuti di seguito.

I segnali visivi sono importanti per i siti Web a scorrimento di una pagina
Dynamit include una piccola freccia nella parte inferiore della schermata iniziale per indicare ai visitatori che devono scorrere.

La navigazione dovrebbe essere costantemente visibile, utilizzando un'intestazione permanente o una barra laterale fissa con collegamenti di navigazione. L'eccezione è sui dispositivi mobili, dove le intestazioni adesive possono occupare spazio prezioso sullo schermo. Facebook lo gestisce bene facendo scomparire l'intestazione quando gli utenti scorrono verso il basso, ma poi riappare quando iniziano a scorrere di nuovo verso l'alto.

Il browser web Chrome fa qualcosa di simile con i suoi controlli nella parte inferiore dello schermo; scompaiono quando l'utente scorre verso il basso e riappaiono quando inizia a scorrere verso l'alto. È un modo molto intuitivo per creare un'interfaccia che massimizza lo spazio disponibile sullo schermo.

Una caratteristica fondamentale dell'esperienza utente che fortunatamente è diventata più comune nei siti Web a scorrimento infinito è la modifica dell'URL man mano che si scorre ogni sezione. Alcuni lo fanno con segnalibri interni all'interno della pagina. Altri siti, in particolare siti di notizie e blog, aggiornano l'intero URL quando l'utente scorre. Questo è importante, in quanto consente agli utenti di collegarsi esattamente al contenuto a cui desiderano collegarsi, indipendentemente dalle modifiche alla pagina stessa.

Alcuni web designer scelgono di creare quello che potrebbe essere considerato un sito "ibrido" a scorrimento lungo, con un pulsante "carica altro" che carica il contenuto direttamente sulla stessa pagina. Alcuni designer dell'interfaccia utente lo usano ripetutamente nella pagina, mentre altri scelgono di includerlo solo una volta, dopodiché trasformano il sito in un formato a scorrimento lungo più tradizionale.

Oltre a queste considerazioni sulla progettazione specifiche del sito Web a scorrimento lungo, altre best practice per l'interfaccia utente e l'esperienza utente per la creazione di buoni design si applicano ancora ai siti che utilizzano lo scorrimento infinito.

Esempi di scorrimento lungo fatto bene

Un'animazione di scorrimento del sito Web migliora l'esperienza dell'utente
Il sito Story of Zohra utilizza segnali visivi quando inizi a scorrere.


I portfolio sono una buona opportunità per un sito Web a scorrimento di una pagina
Il sito Merbis Photography & Filmmaking è un ottimo esempio di sito portfolio che utilizza lo scorrimento infinito.


Un sito web a scorrimento di una sola pagina
Il sito di Windows of New York carica tutto il contenuto direttamente sulla home page.


Le tecniche del sito Web a scorrimento in parallasse sono spesso combinate con lo scorrimento lungo
Il sito Like There Is No Tomorrow combina lo scorrimento lungo con le tecniche di scorrimento in parallasse.


Una sottile animazione di scorrimento del sito Web aumenta il piacere dell'utente
Il sito web di The Faces of New York Fashion Week, un lungo feed di foto dell'evento, è un candidato perfetto per il formato a scorrimento lungo.


Un esempio di un sito Web a scorrimento infinito unico
Il sito Web di John Ball adotta un approccio leggermente diverso: le immagini di sfondo scorrono all'infinito mentre il contenuto del testo rimane fermo.


I collegamenti a ciascuna lettera a destra migliorano l'esperienza utente su questo sito Web a scorrimento di una pagina
Il sito web Fake It Digital utilizza un lungo scorrimento per mostrare le sue definizioni alternative umoristiche di termini comuni di business, design e marketing.

Poi c'è questo sito, di Andrew McCarthy. Sebbene il design sia unico, scorre all'infinito con le stesse informazioni più e più volte. Dal momento che McCarthy è un designer, è probabilmente una scelta deliberata per distinguersi dalla massa.

I designer spesso si divertono con i formati a scorrimento lungo

E un altro esempio di Sam Rosen, che continua anche a ripetere lo stesso contenuto più e più volte, anche se questo sito torna all'inizio anziché ricaricare tutto il contenuto.

Le tecniche di scorrimento all'infinito possono variare ampiamente tra i siti

Conclusione

Sebbene i siti Web a scorrimento lungo non siano una novità, stanno raggiungendo un nuovo livello di maturità. I designer non li utilizzano più solo come la prossima cosa "grande" e stanno invece prestando attenzione a come il modello influisce sull'esperienza dell'utente.

Seguire le migliori pratiche durante la creazione di siti Web a scorrimento infinito consente ai progettisti di creare un'esperienza utente che delizia gli utenti anziché frustrarli. Allo stesso tempo, i siti Web a scorrimento lungo correttamente implementati possono anche aiutare i marchi a raggiungere gli obiettivi del loro sito Web.

• • •

Ulteriori letture sul blog di Toptal Design:

  • Design persuasivo: utilizzare efficacemente la psicologia avanzata
  • Psicologia del design e neuroscienze di Awesome UX
  • L'esperienza è tutto: la guida all'esperienza utente definitiva
  • The Ultimate UX Hook: design anticipatorio, persuasivo ed emotivo in UX
  • Le vere e provate leggi della UX (con infografica)