Stop met het bouwen van websites met infinite scroll!

TL; DR: hoewel infinite scroll in sommige gevallen een oplossing biedt, kan het minder dan ideaal zijn voor gebruikers.

Infinite scroll kan desoriënterend zijn, oncontroleerbaar, en kan uw gebruikers stress veroorzaken.

In dit artikel zullen we uitleggen waarom u moet stoppen met het bouwen van websites met oneindige scroll. Maar om te beginnen, laten we eens kijken naar een korte geschiedenis van het scrollen.

een korte geschiedenis van scrollen

om te begrijpen wat scroll echt is, laten we eens kijken waar de term scroll vandaan komt.

scroll (n.): c. 1400,”rol van perkament of papier”

rollen werden oorspronkelijk gebruikt voor wanneer informatie lang werd (zoals religieuze inhoud). Zoveel inhoud werd moeilijk te beheren, te lezen en te schrijven.

toen computers in ons leven kwamen, hadden we nog steeds een manier nodig om door grote stukken inhoud te navigeren.

de evolutie van rollen in computers

regels (en kolommen)

in de beginjaren van het internet vonden/verkenden UX-ontwerpers vele manieren om de inhoud op te roepen/te scrollen. Voordat het web populair was, scrolden we lijnen op ons scherm.

horizontale rollen maakten het scrollen niet alleen een hulpmiddel om de inhoud te lezen, maar ook een manier om op het computerscherm te navigeren.

Windows (niet het besturingssysteem)

het gebruik van scrolls om door het scherm te navigeren moedigde mensen aan om windows te maken. Met behulp van windows, zou je in staat zijn om meerdere stukken van de inhoud te bekijken in een keer.

webpagina ‘s

scrollen lost een zeer fundamenteel probleem op dat we hebben tijdens het browsen van webpagina’ s. Scrollen kan echter veel problemen veroorzaken voor gebruikers en kan een negatieve invloed hebben op de gebruikerservaring. Laten we eens beter kijken.

de ervaringen die zijn uitgevonden om door webpagina ’s te navigeren

ik ga proberen te definiëren hoe ontwikkelaars en ontwerpers ervaringen hebben gecreëerd om gebruikers in hun webpagina’ s te navigeren.

laten we beginnen met het leren van een aantal back-end paginering systemen:

Offset-gebaseerde paginering

Dit is het meest bekende paginering systeem. In deze techniek moeten we eerst uitzoeken hoeveel items we moeten pagineren:

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

na het tellen van alle items, moeten we de pagina ‘ s berekenen. Laten we aannemen dat we 10 items per pagina tonen:

-- First page itemsSELECT * FROM posts LIMIT 10

en als we naar de pagina 3 willen gaan, moeten we eerst 30 items overslaan met OFFSET:

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

en we sturen de paginatie informatie als volgt naar de klant:

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

voors en tegens van offset-gebaseerde paginering

• 👍 goed: gemakkelijk om naar een willekeurige pagina te springen
• Good goed: de Clientervaring is vrijer
• Bad slecht: prestatieproblemen
• Bad slecht: Dubbele items kunnen worden weergegeven als gegevens veranderen

Cursor-gebaseerde paginering

Big data maakte het moeilijk om het aantal tabellen te berekenen omdat het voortdurend groeit (denk aan Twitter). Zo, ontwikkelaars kwamen met nieuwere technieken om de gegevens te pagineren: cursors.

elke rij moet een unieke cursor hebben. U hoeft niet de hele tabel te tellen, waardoor het onmogelijk is om het werkelijke aantal pagina ‘ s te weten:

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

stel dat elke post een uniek cursor veld heeft (of zijn ID in dit voorbeeld) om paginering te helpen. De klant heeft de volgende informatie over de paginering:

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

en u kunt de volgende pagina vragen met de cursor:

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

voors en tegens van cursor-gebaseerde paginering

• 👍 goed: meer performant, geen tabeltellingen
• Good goed: het tonen van dubbele items is niet mogelijk als iemand een rij in het midden van de tabel invoegt
• Bad slecht: onmogelijk om naar een pagina te springen
• Bad slecht: Client is niet vrij met de ervaring, totale pagina en huidige pagina worden niet berekend

laten we eens kijken naar enkele navigatietechnieken.

de ervaring: click-based

de techniek: offset-based of cursor-based

dit wordt voornamelijk gebruikt om door blogs te navigeren. Dit is de oudste versie van oneindig scrollen. Met behulp van deze aanpak, de gebruiker kan niet weten waar de inhoud eindigt.

genummerde paginering

the experience: click-based

the technique: offset-based

dit is het meest bruikbare navigatietype (volgens mij). Het maakt gebruik van offset gebaseerde paginering die u toelaat om te springen Naar de pagina die u wilt, of ga naar het einde of begin met slechts één klik.

Google gebruikt dit soort navigatie in zoekresultaten:

laad meer

the experience: click trigger-based

the technique: cursor-based-may also be offset-based but would be awkward

Dit is een van de nieuwste paginering technieken, en het gebruikt ook de vorige versie van infinite scrolls.

in het voorbeeld hierboven klikt de gebruiker op de knop” Meer laden ” om meer inhoud te zien.

oneindige rollen

the experience: scroll-based

the technique: cursor-based-may also be offset-based but would be VERY awkward

oneindige rollen zijn de nieuwste ervaring van cursor-based paginering technieken.Hugh E. Williams beweert dat hij infinite scroll heeft uitgevonden in 2005 op Microsoft.

Metafizzy heeft ook een tool gemaakt om ontwikkelaars te helpen oneindige rollen te bouwen.

stop met het bouwen van websites met oneindige scroll!

tot aan deze sectie hebben we bekeken hoe we hier kwamen. Laten we nu praten over waarom het hier klote is.

Finding footer

Footer is een zeer basiseenheid van webpagina-anatomie, net als een header. Sites houden een aantal gedetailleerde informatie en links in de voettekst, zoals telefoonnummers, adressen, en help-en ondersteuningslinks. Als gebruikers op zoek zijn naar deze gedetailleerde informatie, scrollen ze meestal naar beneden om de voettekst te vinden.

met oneindige rollen kunnen gebruikers moeilijk de voettekst vinden. Oneindige scroll maakt het vinden van het einde van de pagina onmogelijk. Niet in staat zijn om de bodem van een website te bereiken kan de gebruiker stress (dat is niet geweldig).

de sites met een oneindige feed (zoals Twitter) lossen het probleem met de voettekst op door deze vereiste informatie en links in de zijbalk te plaatsen. De zijbalk is een oplossing voor dit probleem, maar niet een goede. Footer moet op footer blijven.

gebruik geen oneindige scroll als u geen tijdlijn of feed

sociale media-toepassingen werken met de tijd. De bedoeling van de gebruikers is om door het verleden te navigeren. In dit geval maakt infinite scroll de navigatie eenvoudiger. Hier, infinite scroll is goed voor de prestaties, vooral in mobiele.

maar als u een e-commerce, nieuws, tijdschrift, of een blog website, en de bedoeling van de gebruiker is om te bewegen rond de items of artikelen, oneindige scroll wordt een nachtmerrie voor hen. In een tijdlijn gebaseerde lijst, mensen meestal niet op zoek naar een datum of uniek moment. Op item-gebaseerde lijsten, de gebruiker wil een item te vinden. Oneindige scrolls maken uw items bijna onmogelijk voor uw gebruikers te vinden.

Geef gebruikers meer controle

gebruikers houden over het algemeen niet van de ui ‘ s wanneer ze het gevoel hebben dat ze er geen controle over hebben.

een scroll-gebeurtenis is niet erg opzettelijk om iets te doen. Mensen navigeren door de pagina, en als ze willen een actie te bellen ze meestal klikken of aanraken (bekend als triggers). Zij informeren de gebruikersinterface over hun beslissing. Maar scroll wordt geactiveerd zonder enige beslissing.

oneindige rollen maken de pagina ‘ s minder controleerbaar voor de gebruikers. Gebruikers kunnen ook tegenkomen springen glitches.

in plaats van oneindig scrollen, zet je een “load more” knop, wat een trigger is. Dit geeft de gebruiker controle. (Ik zou liever oude stijl genummerde paginering, maar we gaan ervan uit dat we gebruik maken van de cursor gebaseerde paginering op dit moment).

gebruikers toestaan om te gaan waar ze willen

mensen navigeren tussen pagina ‘s, bladwijzers van sommige pagina’ s, pagina ‘ s delen met hun vrienden, enz.

echter, oneindige rollen kunnen de status niet behouden door zijn ontwerp. Gebruikers kunnen hun huidige status niet delen — wat ook betekent dat u de acties van gebruikers niet kunt volgen met behulp van analysehulpmiddelen.

als uw back-end paginering techniek cursor-gebaseerd is, is het bijna onmogelijk om uw gebruikers toe te staan om te gaan waar dan ook. Als u een e-commerce website, geven gebruikers controle om te navigeren naar de producten die ze willen.

bovendien, als u een “Sorteer op” functionaliteit in uw lijst hebt, moet u de gebruiker een paginering tonen. In een alfabetisch geordende lijst moet je gebruikers niet dwingen om naar beneden te scrollen naar producten die beginnen met K. Ze zullen gek worden met deze ervaring.

u moet gebruikers toestaan om te zien waar ze zijn. Gebruikers scrollen voor een tijd, en omdat het een staatloos ontwerp, ze weten niet hoe vaak de “volgende pagina” geladen. Wanneer ze de pagina verversen, zullen ze helemaal terug naar de originele pagina resetten. De gebruiker zal dan terug naar beneden moeten scrollen om te vinden waar ze eerder waren.

conclusie

oneindige rollen zijn in een paar gevallen leuk, maar zijn meestal geen probleemoplossers, maar probleemmakers. UX mensen moeten niet overwegen oneindig scrollen als een zilveren kogel om hun paginering problemen op te lossen. Stop met het bouwen van websites met oneindige scroll.