Smettere di costruire siti web con scorrimento infinito!

TL;DR: Mentre infinite scroll fornisce una soluzione in alcuni casi, può essere meno che ideale per gli utenti.

Infinite scroll può essere disorientante, incontrollabile e può causare stress agli utenti.

In questo articolo, spiegheremo perché è necessario interrompere la creazione di siti web con scorrimento infinito. Ma per iniziare, diamo un’occhiata a una breve storia di scorrimento.

Una breve storia di scrolling

Per capire cos’è veramente scroll, vediamo da dove viene il termine scroll.

scroll (n.): c. 1400,”rotolo di pergamena o carta”

Rotoli originariamente erano usati per quando le informazioni diventavano lunghe (come i contenuti religiosi). Così tanto contenuto è diventato difficile da gestire, leggere e scrivere.

Quando i computer sono entrati nella nostra vita abbiamo ancora bisogno di un modo per navigare attraverso grandi pezzi di contenuti.

L’evoluzione delle pergamene nei computer

Linee (e colonne)

Nei primi anni di Internet, i progettisti UX hanno inventato/esplorato molti modi di paging/scorrimento del contenuto. Prima che il web fosse popolare, stavamo scorrendo le linee sul nostro schermo.

Le pergamene orizzontali hanno reso lo scorrimento uno strumento non solo per leggere il contenuto, ma anche un modo per navigare sullo schermo del computer.

Windows (non quello del sistema operativo)

L’utilizzo delle pergamene per navigare nello schermo ha incoraggiato le persone a creare Windows. Utilizzando Windows, si sarebbe in grado di visualizzare più parti di contenuti in una sola volta.

Pagine Web

Lo scorrimento risolve un problema fondamentale che abbiamo durante la navigazione delle pagine web. Tuttavia, lo scorrimento può causare molti problemi agli utenti e può influire negativamente sull’esperienza dell’utente. Diamo un’occhiata più da vicino.

Le esperienze inventate per navigare nelle pagine web

Cercherò di definire come sviluppatori e designer hanno creato esperienze per navigare gli utenti nelle loro pagine web.

Iniziamo imparando alcuni sistemi di impaginazione back-end:

Impaginazione basata su offset

Questo è il sistema di impaginazione più noto. In questa tecnica, in primo luogo, dobbiamo trovare quanti elementi dobbiamo impaginare:

-- All posts countSELECT COUNT(*) AS total FROM posts

Dopo aver contato tutti gli elementi, dobbiamo calcolare le pagine. Supponiamo vi mostriamo 10 elementi per pagina:

-- First page itemsSELECT * FROM posts LIMIT 10

E se vogliamo passare alla pagina 3, abbiamo bisogno di saltare il primo 30 elementi utilizzando OFFSET:

-- Third page itemsSELECT * FROM posts LIMIT 10 OFFSET 30

E vi invieremo le informazioni di impaginazione per il cliente come segue:

{ "pagination": { "items_count": 100, "current": 3, "total_pages": 10 }, "items": }

Pro e contro di offset a base di impaginazione

• 👍 Bene: Facile per passare a qualsiasi pagina
• 👍 Bene: L’esperienza del client è più libero
• 👎 Male: problemi di Prestazioni
• 👎 Male: Gli elementi duplicati possono essere visualizzati se i dati cambiano

Impaginazione basata sul cursore

I big data hanno reso difficile calcolare il conteggio della tabella poiché è in costante crescita (pensa a Twitter). Così, gli sviluppatori si avvicinò con nuove tecniche per impaginare i dati: cursori.

Ogni riga deve avere un cursore univoco. Non è necessario contare l’intera tabella il che rende impossibile conoscere il conteggio delle pagine effettivo:

-- Get extra 1 item to get its cursor.SELECT * FROM posts ORDER BY id DESC LIMIT 11

Supponiamo che ogni post abbia un campo cursore univoco (o il suo ID in questo esempio) per aiutare l’impaginazione. Il cliente avrà informazioni di impaginazione come segue:

{ "pagination": { "next": 1234 // extra item's ID (cursor), null if end of data. }, "items": }

E non si può chiedere per la pagina successiva con il cursore:

-- Offsetting records using 1234 cursorSELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11

Pro e contro del cursore a base di impaginazione

• 👍 Bene: di Più performante, non conta
• 👍 Bene: visualizza elementi duplicati non è possibile se qualcuno inserisce una riga al centro della tabella
• 👎 Male: Impossibile passare a qualsiasi pagina
• 👎 Male: il Client non è in connessione con l’esperienza, la totale pagina e pagina corrente non vengono calcolati

diamo un’occhiata ad alcune tecniche di navigazione.

L’esperienza: click-based

La tecnica: offset-based o cursore-based

Questo è utilizzato principalmente per navigare blog. Questa è la versione più antica di scorrimento infinito. Utilizzando questo approccio, l’utente potrebbe non sapere dove finisce il contenuto.

Impaginazione numerata

L’esperienza: click-based

La tecnica: offset-based

Questo è il tipo di navigazione più utilizzabile (secondo me). Utilizza l’impaginazione basata su offset che consente di passare alla pagina desiderata, o andare alla fine o iniziare con un solo clic.

Google utilizza questo tipo di navigazione nei risultati di ricerca:

Carica di più

L’esperienza: click trigger-based

La tecnica: cursor-based — può anche essere offset-based, ma sarebbe imbarazzante

Questa è una delle più recenti tecniche di impaginazione, e utilizza anche la versione precedente di infinite scrolls.

Nell’esempio precedente, l’utente fa clic sul pulsante “Carica altro” per visualizzare più contenuti.

Infinite scrolls

The experience: scroll-based

The technique: cursor-based — può anche essere offset-based ma sarebbe MOLTO imbarazzante

Infinite scrolls sono la più recente esperienza di tecniche di impaginazione basate sul cursore.

Hugh E. Williams afferma di aver inventato infinite scroll nel 2005 su Microsoft.

Metafizzy ha anche creato uno strumento per aiutare gli sviluppatori a costruire infinite pergamene.

Smettere di costruire siti web con scorrimento infinito!

Fino a questa sezione, abbiamo esaminato come siamo arrivati qui. Ora parliamo del perché qui fa schifo.

Finding footer

Footer è un’unità di base dell’anatomia della pagina web, proprio come un’intestazione. I siti mantengono alcune informazioni dettagliate e link nel piè di pagina come numeri di telefono, indirizzi e link di aiuto e supporto. Se gli utenti stanno cercando queste informazioni dettagliate, per lo più scorrono verso il basso per trovare il piè di pagina.

Con infinite pergamene, gli utenti possono avere difficoltà a cercare di trovare il piè di pagina. Lo scorrimento infinito rende impossibile trovare la fine della pagina. Non essere in grado di raggiungere il fondo di un sito web può rendere l’utente stressato (che non è grande).

I siti con un feed infinito (come Twitter) risolvono il problema del piè di pagina mettendo queste informazioni e link richiesti nella barra laterale. La barra laterale è una soluzione a questo problema, ma non buona. Piè di pagina dovrebbe rimanere a piè di pagina.

Non utilizzare infinite scroll se non si dispone di una timeline o feed

Le applicazioni di social media funzionano con il tempo. L’intenzione degli utenti è quella di navigare nel passato. In questo caso, infinite scroll semplifica la navigazione. Qui, infinite scroll è buono per le prestazioni, specialmente nei dispositivi mobili.

Ma se si dispone di un e-commerce, notizie, rivista, o un sito web blog, e l’intenzione dell’utente è quello di muoversi gli elementi o articoli, infinite scroll diventa un incubo per loro. In un elenco basato sulla timeline, le persone per lo più non cercano una data o un momento unico. Negli elenchi basati su elementi, l’utente desidera trovare un elemento. Le pergamene infinite rendono i tuoi oggetti quasi impossibili da trovare per i tuoi utenti.

Dare agli utenti un maggiore controllo

Gli utenti in genere non amano le interfacce utente quando sentono di non poterlo controllare.

Un evento di scorrimento non è molto intenzionale per fare qualcosa. Le persone navigano nella pagina e, se vogliono chiamare un’azione, fanno principalmente clic o toccano (noti come trigger). Informano l’interfaccia utente sulla loro decisione. Ma scroll viene attivato senza alcuna decisione.

Le pergamene infinite rendono le pagine meno controllabili per gli utenti. Gli utenti possono anche incontrare difetti di salto.

Invece di scorrimento infinito, mettere un pulsante “carica di più”, che è un trigger. Questo darà il controllo all’utente. (Preferirei l’impaginazione numerata vecchio stile, ma supponiamo di usare l’impaginazione basata sul cursore in questo momento).

Consentire agli utenti di andare dove vogliono

Le persone navigano tra le pagine, segnalibro alcuni di loro, condividere pagine con i loro amici, ecc.

Tuttavia, le pergamene infinite non possono mantenere lo stato in base al suo design. Gli utenti non possono condividere il loro stato attuale, il che significa anche che non è possibile tenere traccia delle azioni degli utenti utilizzando strumenti di analisi.

Se la tua tecnica di impaginazione back-end è basata sul cursore, è quasi impossibile consentire agli utenti di andare ovunque. Se si dispone di un sito di e-commerce, dare agli utenti il controllo per navigare verso i prodotti che vogliono.

Inoltre, se hai una funzionalità” ordina per ” nella tua inserzione, devi mostrare all’utente un’impaginazione. In un elenco ordinato in ordine alfabetico, non devi costringere gli utenti a scorrere verso il basso fino ai prodotti che iniziano con K. Impazziranno con questa esperienza.

Dovresti consentire agli utenti di vedere dove si trovano. Gli utenti scorrono per un po ‘ e, poiché si tratta di un design senza stato, non sanno quante volte viene caricata la “pagina successiva”. Quando aggiornano la pagina, verranno ripristinati fino alla pagina originale. L’utente dovrà quindi scorrere verso il basso per trovare dove si trovavano prima.

Conclusione

Le pergamene infinite sono belle in alcuni casi, ma di solito non sono risolutori di problemi, ma creatori di problemi. Le persone UX non dovrebbero considerare lo scorrimento infinito come un proiettile d’argento per risolvere i loro problemi di impaginazione. Smettere di costruire siti web con scorrimento infinito.