”Infinite scroll can sometimes be a good feature, but it also comes with drawbacks, especially in an eCommerce setting.”
Fördelar
- Kan uppmuntra engagemang & utforskning
- Besökare tenderar att fortsätta skrolla istället för att klicka på ”Nästa sida”. (minskar interaktionskostnader)
- Kan fungera bra för inspirationsshopping (mode, inredning, osv.), där besökaren inte har en specifik produkt i åtanke. Annars sociala media, några former av nyhetsflöden (tids- eller popularitetsstyrda objekt) och/eller sajter med stora mängder användargenererat innehåll där användarna förväntar sig en kontinuerlig ström av uppdateringar.
- Kan kännas snabbare (upplevd prestandaförbättring)
- Färre hela sidladdningar, vilket håller besökaren i samma flöde.
- Med korrekt lazy loading laddas endast synligt innehåll, vilket kan förbättra laddningstider (men detta är inte spcifikt för infinite skroll).
- Kan funka bättre för mobilanvändare
- Mobilanvändare skrollar naturligt, skroll är mer intuitivt än tryck. Även på stationär dator/laptop.
- Paginering med små knappar kan vara irriterande att trycka på.
- Efterliknar sociala medieflöden (vana vid UX)
- Besökare är vana vid oändlig skroll från vissa sociala medieplattformar.
- Kan fungera bra för mycket visuella webbplatser (t.ex. Pinterest-liknande listor).
- Kan minska avvisningsfrekvensen
- Om besökare slipper klicka för att se fler objekt kan de stanna längre på sidan.
- Dock fungerar detta bara om innehållet är engagerande.
Nackdelar
- Dålig användarupplevelse & brist på kontroll
- Svårt att navigera: besökare kan inte enkelt hoppa tillbaka till en tidigare produkt eller hitta var de slutade efter att ha klickat på en produkt.
- Ingen känsla av framsteg: med paginering vet man att man är på ”sida 3 av 10”. Med oändlig skroll finns ingen tydlig slutpunkt.
- Ökad distraktion: besökare som vet vad de letar efter får skrolla genom irrelevant innehåll. När en målinriktad användare besöker en webbplats och vet exakt vad de söker, men det de vill ha är placerat långt ner i en oändlig skroll av innehåll, tvingas de ändå att bläddra igenom en mängd irrelevant material först. Det finns inget sätt att snabbt hoppa direkt till deras önskade destination.
- Förvirrande upplevelse: stör besökarens förväntningar, särskilt på nyhetssidor.
- Känsla av desorientering: besökare kan känna sig vilse när de navigerar på en sida som aldrig tar slut, vilket kan påverka deras förmåga att hitta specifik information.
- Kontext är viktigt: generellt sett: oändlig skroll passar sociala medier, men inte strukturerade sidor.
- Svårt att hitta slutet – Eftersom allt ligger i ett långt flöde kan det vara svårt att uppskatta hur mycket det är kvar (hur länge till ska jag behöva skrolla innan jag hittar min produkt/innehållet jag söker – eller se om det ens finns). Hur tar jag mig till de sista produkterna eller hur tar jag mig förbi allt detta som inte är intressant. Kan det jag söker finnas längre fram (har jag tid/ork att utforska det)?
- Prestandaproblem & långsam laddning
- Hög minnesanvändning: webbläsaren fyller på DOM:en med mer innehåll (ex. fler produkter), vilket kan orsaka fördröjningar och lagg – särskilt på svagare enheter.
- Ökad serverbelastning: om det implementeras dåligt kan det skapa onödiga databasförfrågningar och göra sidan långsammare för alla.
- SEO & indexeringsproblem
- Svårt för sökmotorer att indexera: Google föredrar paginerat innehåll med tydliga URL:er. Oändlig skroll kan dölja produkter från sökmotorer.
- Svårt att skapa unika URL:er: besökare kan inte enkelt dela en länk till ”sida 5” av en produktkategori.
- Tillgänglighetsproblem
- Fungerar dåligt med tangentbordsnavigation: många besökare (särskilt de som använder skärmläsare) föredrar paginerat innehåll. Det är väldigt svårt att hantera en lösning för de som inte har pekdon eller surfar med touchskärm. En variant kan vara att erbjuda besökaren att byta till traditionell paginering. För en nybörjare eller en användare som bara navigerar med tangentbordet kan det vara oerhört frustrerande att försöka nå innehåll som är otillgängligt eftersom mer och mer laddas in längs vägen.
- Kan orsaka obehag för känsliga besökare: konstant innehållsladdning kan vara desorienterande.
- Sidfoten blir otillgänglig/allt innehåll under blir otillgängligt
- Viktiga länkar blir svåra att nå oändlig skroll skjuter sidfoten längre ner, vilket gör det svårt att komma åt saker som ofta finns där, som: Kontakt, Integritetspolicy, FAQ, Villkor osv.
- ”Don’t Place Content After the Infinite Scroll – sticking a website footer beneath a sea of endlessly loading content saddles users with a Sisyphean task. They’ll get annoyed, and rightly so.”
- Problem med filtrering & sortering
- Skrollpositionen nollställs: om en besökare ändrar ett filter kan oändlig skroll ofta återställa allt, vilket gör att de förlorar sin plats.
- Sortering fungerar dåligt: att ändra sorteringsordning (t.ex. ”pris: Lågt till Högt”) kan tvinga en fullständig omladdning, vilket bryter flödet.
- Avsevärt svårare att koda (=tidskrävande)
- Speciellt för att försöka addresera mycket av ovanstående punkter.
Hybridlösning
Paginering + ladda mer/fler-knapp (istället för klassisk indelning i 1, 2, 3 osv)
- Ger användaren kontroll: De kan gå till en specifik sida och hoppa tillbaka utan att förlora sin plats.
- Förbättrar prestanda: Laddar bara in det som behövs, vilket minskar minnesanvändningen.
- SEO-vänligt: Google kan indexera varje sida korrekt.
- Fungerar med filtrering & sortering: Ingen risk att besökarens val nollställs.
- Sidfoten är alltid tillgänglig: viktiga länkar förblir enkla att nå.
Andra nackdelar med oändlig skroll kvarstår: Det är fortfarande svårt att återgå till sin tidigare plats efter att ha klickat på en länk, och användare får fortfarande ingen känsla av framsteg genom att ”bli klar” med en sida.
Överväger fördelarna nackdelarna?
För en e-handelswebbplats med 200+ produkter per kategori, troligtvis inte.
Oändlig skroll passar bättre för innehållsdrivna, inspirationsbaserade sajter (som Pinterest), men för en strukturerad produktvisning skapar det fler problem än fördelar.
Man behöver ha med sig att oändlig skroll snabbt blir blir tröttsamt och svårnavigerat om man inte hittar det man letar efter. I ett fall så som en klassisk ehandel så är en gedigen kategorisering och bra, relevanta, filterval effektivt. Är det riktigt bra så ska man inte ens behöva en sökfunktion (även om vissa gärna föredrar den ingången så klart). Då lär man sällan ha särskilt många produkter att visa ändå när besökaren väl ha trattat sig ner.
En oändlig skroll måste vara ruggigt välkodad om det ska fungera och det tar tid. Det är kanske sällan dessa pengar är motiverade att lägga om man ser till föregående stycke. Ett exempel på ett brutalt frustrerande scenario som tyvärr är ganska vanligt är när besökaren skrollat i tio minuter för att hitta en intressant produkt, väljer att klicka in på produkten för att sedan gå tillbaka och fortsätta men då får starta om från början.
Om någon insisterar på oändlig skroll kan en hybridlösning kanske vara ett alternativ som balanserar prestanda, SEO och användbarhet. Men här kan man säga att brytgränsen går någonstans kring 75-100 produkter, sen är vinsterna med traditionell paginering tydliga. Samtidigt som en god produtksajt har både kategorisering, filtrering och sök på plats vilket snabbt bör avgränsa antalet produkter till ett mindre antal, där alla kan visas direkt – således är oändlig skroll onödigt/oanvänt.
”Testa oändlig skroll först”. Innan du lägger tid på att koda, ta reda på vilket problem du försöker lösa”. Om målet är att öka tid på sidan och minska avvisningsfrekvensen, bör du skapa en prototyp och testa den på en bred grupp användare, inklusive personer med funktionsnedsättningar, för att se om designen faktiskt uppfyller målet. Oavsett om du väljer oändlig skroll, ”ladda mer”-knappar, paginering eller bara en sökruta, är det viktigaste steget att testa lösningen och samla in användarfeedback.
(summering:)
Annars, en traditionell paginering med 24-48 produkter per sida ger tydligare navigering och bättre prestanda. Man får en förutsägbarhet som kan vara mycket värdefull; besökare vet ungefär hur mycket innehåll som finns och hur långt de behöver gå igenom, vilket skapar en mer logisk och förutsägbar upplevelse.
Bättre struktur och navigering ger besökaren bättre kontroll över innehållet och kan enkelt hoppa mellan sidor för att hitta specifik information. Detta är särskilt användbart i t.ex. e-handel eller sökresultat.
Bättre prestanda och bättre SEO eftersom enbart en begränsad mängd innehåll laddas per sida vilket minskar belastningen på både webbläsaren och servern, vilket leder till snabbare laddningstider. Varje sida kan indexeras individuellt, vilket gör det lättare för sökmotorer att hitta och ranka innehållet.
Etsy-exemplet
Etsy övergick från oändlig skroll till traditionell paginering eftersom det minskade engagemanget. Besökare tappade bort sig i sökresultaten, klickade mindre och sparade färre favoriter. Otydlig navigering och frånvaron av en sidfot gjorde upplevelsen sämre. Paginering visade sig vara mer effektivt helt enkelt.
Den har några år på nacken men essensen i berättelsen är fortfarande aktuell https://danwin.com/2013/01/infinite-scroll-fail-etsy/
Slutsats
Valet mellan oändlig skroll och paginering beror på vilken typ av innehåll och användarupplevelse som önskas.
- Oändlig skroll fungerar bäst för sociala medier, bildflöden och nyhetssajter där besökaren vill konsumera nytt innehåll utan att leta specifikt.
- Paginering är bättre för e-handel, sökresultat och informationssidor där det är viktigt att kunna navigera enkelt och hitta specifikt innehåll.
📌 Om en sida innehåller många produkter eller artiklar som behöver vara lätta att hitta senare, är paginering allt som oftast det bättre alternativet!
Om du ska oändlig skroll ha tänk på detta:
- Erbjud möjligheten att hoppa framåt. Tvinga inte användarna att slösa tid på att skrolla igenom innehåll de vet att de inte behöver för att komma till det de letar efter. Inkludera knappar som låter dem hoppa till en viss sektion, bokstav eller siffra.
- Bygg hela tiden om url:en dynamiskt så att den speglar det subset av objekt besökaren är på. På så vis har man hela tiden en ”delbar länk”.
- Bygg in stöd för att spara exakt vart i flödet besökaren står och vid bakåtklick/återgång så bör besökaren landa på exakt samma plats.
- Bygg in möjlighet att växla till vanlig paginering för de som inte surfar med pekdon eller touch.
- Bygg in någon form av publicerat paginerat sidsystem som sökmotorer kan indexera – dessa bör dock skicka besökarna till din riktiga sida. Det finns många sätt att lösa detta på tror jag och svårt att ge något konkret lösning. Men indexeringen är viktig och bör ej förbises.
- All viktig information under en oändlig skroll behöver finnas någon annanstans. Lättillgängligt.
- Det blir dyrt.
Exempel:
Ser man till hur ex. H&M gör så behöver vi välja kön först, därefter en huvudkategori i form av plaggtyp (jackor, byxor). Man kan inte gå direkt på jackor, de tvingar besökaren till ett smalare val innan resultat visas. Det jag tänker är alltså att man har ett antal taxonomier som kommer att valla besökaren ganska straight on mot rätt utbud direkt.
Blåkläder ger besökaren möjlighet att göra 1,2,3 kategorival direkt (på ett och samma klick så att säga) när de i menyn länkar till ex Herr – Jackor. Men jag kan även nå Alla produkter (https://www.blaklader.se/sv/alla-produkter). Men med 1 180 produkter framme så är det ändå effektivt gjort.
- Paginering med 50 produkter per sida.
- Sorterat på Nyheter men med möjlighet att ändra till: artikelnummer, popularitet, namn, pris
- Lätttillgängliga kategori och filterval. Med 2-3 klick bland filterna är jag nere på 1-2 produkter som matchar det jag söker.
- Dvs, ett väldigt snabb flöde att hitta rätt
- På Blåkläder tycks det vara plaggtyperna och kön som är egentliga kategorier, resten är attribut. Varje kategori har sin egna ”sida”, indexerbar och till synes snarlik alla andra produktsidor. Det man gör visuellt är dock att hantera både kategorier och attribut som filter i ett ett enda stort filterbibliotek. Men för varje kategorisida så är vissa specifika filter utvalda och ses direkt i kontakt med produktflödet. Övriga filter kan fällas ut.
Källor:
https://www.nngroup.com/articles/infinite-scrolling-tips/
https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1
https://builtin.com/articles/infinite-scroll
https://www.smashingmagazine.com/2013/05/infinite-scrolling-lets-get-to-the-bottom-of-this
