Přestaňte vytvářet webové stránky s infinite scroll!

TL; DR: zatímco infinite scroll poskytuje v některých případech řešení, může být pro uživatele méně než ideální.

nekonečný svitek může být dezorientující, nekontrolovatelný a může způsobit stres uživatelů.

v tomto článku vysvětlíme, proč musíte přestat vytvářet webové stránky s nekonečným posouváním. Ale nejprve se podívejme na krátkou historii rolování.

stručná historie rolování

abychom pochopili, co je scroll skutečně, podívejme se, odkud pochází termín scroll.

scroll (n.): c. 1400,“role pergamenu nebo papíru“

svitky se původně používaly, když se informace staly zdlouhavými(jako náboženský obsah). Tolik obsahu bylo obtížné spravovat, číst a psát.

když počítače vstoupily do našich životů, stále jsme potřebovali způsob, jak procházet velkými kusy obsahu.

vývoj scrolls v počítačích

Řádky (sloupce)

V prvních letech internetu, UX návrháři vymysleli/prozkoumat mnoho způsobů, jak stránkování/rolování obsahu. Než byl web populární, posouvali jsme čáry na naší obrazovce.

horizontální svitky učinily rolování nástrojem nejen pro čtení obsahu, ale také pro navigaci na obrazovce počítače.

Windows (ne OS one)

použití svitků pro navigaci na obrazovce povzbudilo lidi k vytváření oken. Pomocí systému windows byste mohli zobrazit více kusů obsahu najednou.

webové stránky

rolování řeší velmi zásadní problém, který máme při procházení webových stránek. Posouvání však může uživatelům způsobit mnoho problémů a může negativně ovlivnit uživatelský dojem. Podívejme se blíže.

zkušenosti vynalezl procházet webové stránky

pokusím definovat, jak vývojáři a designéři vytvořili zkušenosti navigovat uživatele v jejich webové stránky.

Pojďme začít tím, že učení některých back-end stránkování systémy:

Offset-založené stránkování

To je nejvíce známý stránkování systém. V této technice musíme nejprve zjistit, kolik položek musíme stránkovat:

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

po započítání všech položek musíme stránky vypočítat. Předpokládejme, že jsme vám ukážu, 10 položek na stránku:

-- First page itemsSELECT * FROM posts LIMIT 10

A chceme-li přeskočit na stránku 3, musíme přeskočit první 30 položky pomocí OFFSET:

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

A my vám pošleme stránkování informace pro klienta takto:

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

Klady a zápory offset-založené stránkování

• 👍 Dobrý: Snadno přejít na libovolnou stránku
• 👍 Dobrý: klient zkušenost je více zdarma
• 👎 Špatný: problémy s Výkonem
• 👎 Špatné: Duplicitní položky mohou být zobrazeny, pokud změny dat

Kurzor-založené stránkování

Big data je těžké vypočítat tabulky počítat, protože je neustále roste (myslím, že o tom, Twitter). Vývojáři tedy přišli s novějšími technikami stránkování dat: kurzory.

každý řádek musí mít jedinečný kurzor. Nemusíte počítat celý stůl, což je nemožné vědět skutečný počet stránek:

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

Předpokládat, že každý příspěvek má jedinečné kurzor oblasti (nebo jeho ID v tomto příkladu) pomocí stránkování. Klient bude mít informace o stránkování následovně:

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

A můžete se zeptat na další stránky pomocí kurzoru:

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

Klady a zápory kurzor založené stránkování

• 👍 Dobrý: výkonější, žádná tabulka se počítá
• 👍 Dobrý: Ukazuje duplicitní položky není možné, pokud někdo vloží řádek do středu tabulky
• 👎 Špatné: Nemožné skok na libovolnou stránku
• 👎 Špatný: Klient není zdarma, se zkušeností, celkový počet stránek a aktuální stránka není vypočtena

Pojďme se podívat na některé navigační techniky.

zkušenosti: click-based

technika: offset-based nebo cursor-based

to se používá hlavně pro navigaci blogy. Toto je nejstarší verze nekonečného posouvání. Při použití tohoto přístupu nemusí uživatel vědět, kde obsah končí.

Číslované stránkování

zkušenosti: klepněte na tlačítko-založeno

technika: ofset-založeno

To je nejvíce použitelné (podle mě) typ navigace. Používá stránkování založené na ofsetu, které vám umožní přejít na požadovanou stránku nebo přejít na konec nebo začátek jediným kliknutím.

Google používá tento druh navigace ve výsledcích vyhledávání:

Načíst více

zkušenosti: klepněte na tlačítko trigger-založené

technika: kurzor na bázi- mohou být také na základě kompenzací ale bylo by trapné,

To je jeden z nejnovějších stránkování techniky, a to také používá předchozí verzi z nekonečné svitky.

ve výše uvedeném příkladu uživatel klikne na tlačítko „Načíst více“ a zobrazí další obsah.

Nekonečné svitky

zkušenosti: scroll-založeno

technika: kurzor na bázi- mohou být také na základě kompenzací, ale by bylo VELMI trapné,

Nekonečné svitky jsou nejnovější zkušenosti kurzor založené stránkování techniky.

Hugh e. Williams tvrdí, že vynalezl infinite scroll v roce 2005 na Microsoftu.

Metafizzy také vytvořil nástroj, který vývojářům pomáhá vytvářet nekonečné svitky.

přestaňte vytvářet webové stránky s infinite scroll!

až do této části jsme zkontrolovali, jak jsme se sem dostali. Teď pojďme mluvit o tom, proč tady naštve.

hledání zápatí

zápatí je velmi základní jednotkou anatomie webové stránky, stejně jako záhlaví. Weby uchovávají v zápatí některé podrobné informace a odkazy, jako jsou telefonní čísla, adresy, a odkazy na pomoc a podporu. Pokud uživatelé hledají tyto podrobné informace, většinou se posouvají dolů a najdou zápatí.

s nekonečnými svitky mohou uživatelé těžko hledat zápatí. Nekonečné posouvání znemožňuje nalezení konce stránky. Neschopnost dosáhnout spodní části webu může uživatele zdůraznit (což není skvělé).

stránky s nekonečnou posuv (jako je Twitter) řešit zápatí problém uvedení tohoto požadované informace a odkazy v postranním panelu. Postranní panel je řešením tohoto problému, ale není dobrý. Zápatí by mělo zůstat na zápatí.

nepoužívejte infinite scroll, pokud nemáte časovou osu nebo zdroj

aplikace sociálních médií pracují s časem. Záměrem uživatelů je procházet minulostí. V tomto případě infinite scroll usnadňuje navigaci. Zde je infinite scroll vhodný pro výkon, zejména v mobilních zařízeních.

ale pokud máte e-commerce, zprávy, časopis nebo web blogu a záměrem uživatele je pohybovat se po položkách nebo článcích, nekonečný svitek se pro ně stává noční můrou. V seznamu založeném na časové ose, lidé většinou nehledají datum nebo jedinečný okamžik. V seznamech založených na položkách chce uživatel najít položku. Nekonečné svitky, aby vaše položky téměř nemožné pro vaše uživatele najít.

Dát uživatelům větší kontrolu

Uživatelé obecně nemají rádi UIs, když mají pocit, že nemohou ovládat.

scroll událost není příliš úmyslné něco udělat. Lidé procházejí stránkou a pokud chtějí vyvolat akci, většinou kliknou nebo se dotknou (známé jako spouštěče). Informují UI o svém rozhodnutí. Ale scroll je spuštěn bez jakéhokoli rozhodnutí.

nekonečné svitky dělají stránky méně ovladatelné pro uživatele. Uživatelé se také mohou setkat se skákacími závadami.

místo nekonečného posouvání vložte tlačítko“ načíst více“, což je spoušť. Tím získáte kontrolu nad uživatelem. (Já bych raději starý styl číslované stránkování, ale předpokládáme, že používáme kurzoru na základě stránkování právě teď).

umožňuje uživatelům jít kamkoli chtějí

lidé procházejí mezi stránkami, některé z nich si ukládají do záložek, sdílejí stránky se svými přáteli atd.

nekonečné svitky však nemohou udržet stav podle svého návrhu. Uživatelé nemohou sdílet svůj aktuální stav — což také znamená, že nemůžete sledovat akce uživatelů pomocí analytických nástrojů.

pokud je vaše technika stránkování back-end založena na kurzoru,je téměř nemožné umožnit uživatelům jít kamkoli. Pokud máte web elektronického obchodování, dejte uživatelům kontrolu nad navigací k požadovaným produktům.

navíc, pokud máte v seznamu funkci „Třídit podle“, musíte uživateli zobrazit stránkování. V abecedně seřazeném seznamu nesmíte uživatele nutit, aby se posouvali dolů k produktům začínajícím K. s touto zkušeností se zblázní.

měli byste uživatelům umožnit vidět, kde jsou. Uživatelé posouvat po určitou dobu, a protože je to bez státní příslušnosti design, nevědí, kolikrát“ Další stránka “ načten. Když stránku obnoví, vrátí se zpět na původní stránku. Uživatel pak bude muset posunout zpět dolů a zjistit, kde byli dříve.

závěr

nekonečné svitky jsou v několika případech pěkné, ale obvykle nejsou řešiteli problémů, ale tvůrci problémů. Lidé UX by neměli považovat nekonečné posouvání za stříbrnou kulku, aby vyřešili své problémy s stránkováním. Přestaňte vytvářet webové stránky s infinite scroll.