Slutte å bygge nettsteder med uendelig bla!

TL;DR: mens uendelig rulle gir en løsning i noen tilfeller, kan den være mindre enn ideell for brukere.

Uendelig rulle kan være desorienterende, ukontrollabel, og kan føre til at brukerne stress.

i denne artikkelen vil vi forklare hvorfor du må slutte å bygge nettsteder med uendelig rulle. Men for å starte, la oss se på en kort historie med rulling.

en kort historie med rulling

for å forstå hva rulle egentlig er, la oss se hvor begrepet rulle kommer fra.

bla (n.): c. 1400,»rull med pergament eller papir»

Ruller opprinnelig ble brukt for når informasjonen ble lang (som religiøst innhold). Så mye innhold ble vanskelig å administrere, lese og skrive.

da datamaskiner kom inn i våre liv, trengte vi fortsatt en måte å navigere gjennom store deler av innholdet.

utviklingen av ruller i datamaskiner

Linjer (og kolonner)

I de tidlige årene av internett oppfant ux-designere / utforsket mange måter å bla/rulle innholdet på. Før nettet var populært, rullet vi linjer på skjermen vår.

Horisontale ruller gjorde rulling et verktøy, ikke bare for å lese innholdet, men også en måte å navigere på dataskjermen.

Windows (ikke OS one)

ved hjelp av ruller for å navigere på skjermen oppfordret folk til å lage vinduer. Ved hjelp av windows kan du se flere deler av innholdet på en gang.

Nettsider

Rulling løser et svært grunnleggende problem vi har når vi surfer på nettsider. Rulling kan imidlertid forårsake mange problemer for brukerne og kan påvirke brukeropplevelsen negativt. La oss ta en nærmere titt.

erfaringene oppfunnet for å navigere nettsider

jeg skal prøve å definere hvordan utviklere og designere opprettet opplevelser for å navigere brukere i sine nettsider.

La oss begynne med å lære noen back-end paginering systemer:

Offset-basert paginering

Dette er den mest kjente paginering system. I denne teknikken må vi først finne ut hvor mange elementer vi må paginere:

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

etter å ha talt alle elementene, må vi beregne sidene. La oss anta at vi viser 10 elementer per side:

-- First page itemsSELECT * FROM posts LIMIT 10

Og hvis vi vil hoppe til siden 3, må vi hoppe over først 30 elementer ved hjelp av OFFSET:

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

og vi vil sende paginering informasjon til klienten som følger:

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

Fordeler og ulemper med offset-basert paginering

• 👍 Bra: Lett å hoppe til en side
• 👍 Bra: klientopplevelsen er mer gratis
• 👎 Dårlig:Ytelsesproblemer
• 👎 Dårlig: Dupliserte elementer kan vises hvis data endres

Markørbasert paginering

Store data gjorde det vanskelig å beregne tabellantallet siden det stadig vokser (tenk På Twitter). Så utviklere kom opp med nyere teknikker for å paginere dataene: markører.

Hver rad må ha en unik markør. Du trenger ikke å telle hele tabellen som gjør det umulig å vite faktiske sidetall:

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

Anta at hvert innlegg har et unikt markørfelt (ELLER DETS ID i dette eksemplet) for å hjelpe paginering. Klienten vil ha paginering informasjon som følger:

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

Og du kan be om neste side ved hjelp av markøren:

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

Fordeler og ulemper med markørbasert paginering

• 👍 Bra: Mer performant, ingen tabell teller
• 👍 Bra: Viser dupliserte elementer Er ikke mulig hvis noen setter inn en rad i midten av tabellen
• 👎 Dårlig: Umulig å hoppe til en side
• 👎 Dårlig: Klienten er ikke gratis med opplevelsen, total side og nåværende side beregnes ikke

La oss ta en titt på noen navigasjonsteknikker.

opplevelsen: klikkbasert

teknikken: offset-basert eller markørbasert

dette brukes hovedsakelig til å navigere blogger. Dette er den eldste versjonen av uendelig rulling. Ved hjelp av denne tilnærmingen kan brukeren ikke vite hvor innholdet slutter.

nummerert paginering

opplevelsen: klikkbasert

teknikken: offsetbasert

dette er den mest brukbare (ifølge meg) navigasjonstypen. Den bruker offset basert paginering som lar deg hoppe til siden du ønsker, eller gå til slutten eller begynnelsen med bare ett klikk.

Google bruker denne typen navigasjon i søkeresultatene:

Last inn mer

opplevelsen: klikk utløserbasert

teknikken: markørbasert-kan også være offsetbasert, men vil være vanskelig

Dette er en av de nyeste pagineringsteknikkene, og den bruker også den forrige versjonen av uendelige ruller.

i eksemplet ovenfor klikker brukeren på» Last Inn Mer » – knappen for å se mer innhold.

Uendelige ruller

opplevelsen: rullebasert

teknikken: markørbasert-kan også være offsetbasert, men vil være veldig vanskelig

Uendelige ruller er den nyeste opplevelsen av markørbaserte pagineringsteknikker.

Hugh E. Williams hevder at Han oppfant uendelig rulle i 2005 På Microsoft.

Metafizzy opprettet også et verktøy for å hjelpe utviklere å bygge uendelige ruller.

Stopp å bygge nettsteder med uendelig bla!

Frem til denne delen har vi gjennomgått hvordan vi kom hit. La oss nå snakke om hvorfor her suger.

Finne bunntekst

Bunntekst er en veldig grunnleggende enhet av nettsidens anatomi, akkurat som en topptekst. Nettsteder inneholder detaljert informasjon og koblinger i bunnteksten, for eksempel telefonnumre, adresser og hjelp-og støttekoblinger. Hvis brukere søker etter denne detaljerte informasjonen, ruller de mest ned for å finne bunnteksten.

med uendelige ruller kan brukerne ha det vanskelig å prøve å finne bunnteksten. Uendelig rulle gjør det umulig å finne slutten av siden. Ikke å kunne nå bunnen av et nettsted kan gjøre brukeren stresset (som ikke er bra).

nettstedene med en uendelig feed (Som Twitter) løser bunntekstproblemet ved å sette denne nødvendige informasjonen og koblingene i sidepanelet. Sidepanelet er en løsning på dette problemet, men ikke en god en. Footer bør holde seg på footer.

ikke bruk uendelig rulle hvis Du ikke har en tidslinje eller feed

Sosiale medieapplikasjoner jobber med tiden. Brukernes hensikt er å navigere i fortiden. I dette tilfellet gjør uendelig rulle navigasjonen enklere. Her er uendelig rulle bra for ytelse, spesielt i mobil.

Men hvis du har en e-handel, nyheter, magasin, eller en blogg nettsted, og brukerens intensjon er å flytte rundt elementer eller artikler, uendelig bla blir et mareritt for dem. I en tidslinjebasert liste ser folk for det meste ikke etter en dato eller et unikt øyeblikk. På elementbaserte lister vil brukeren finne et element. Infinite ruller gjøre elementene nesten umulig for brukerne å finne.

Gi brukerne mer kontroll

Brukere liker vanligvis Ikke Uiene når de føler at de ikke kan kontrollere det.

en rullehendelse er ikke veldig forsettlig å gjøre noe. Folk navigerer på siden, og hvis de vil kalle en handling, klikker de for det meste eller berører (kjent som utløsere). De informerer UI om deres beslutning. Men bla utloses uten noen beslutning.

Uendelige ruller gjør sidene mindre kontrollerbare for brukerne. Brukere kan også støte på hoppefeil.

i Stedet for uendelig rulling, sett en» load more » – knapp, som er en utløser. Dette vil gi kontroll til brukeren. (Jeg foretrekker gammel stil nummerert paginering, men vi antar at vi bruker markørbasert paginering akkurat nå).

Tillat brukere å gå hvor de vil

folk navigerer mellom sider, bokmerke noen av dem, dele sider med sine venner, etc.

uendelige ruller kan imidlertid ikke beholde staten ved utformingen. Brukere kan ikke dele sin nåværende tilstand — noe som også betyr at du ikke kan spore brukernes handlinger ved hjelp av analyseverktøy.

hvis back-end-pagineringsteknikken din er markørbasert, er det nesten umulig å la brukerne gå hvor som helst. Hvis du har et e-handelsnettsted, gi brukerne kontroll for å navigere til produktene de vil ha.

I Tillegg, hvis du har en «sorter etter» – funksjonalitet i oppføringen din, må du vise brukeren en paginering. I en alfabetisk ordnet liste, du må ikke tvinge brukere til å bla ned til produkter som starter Med K. De vil gå gale med denne erfaringen.

du bør tillate brukere å se hvor de er. Brukere ruller for en tid, og fordi det er en statsløs design, vet de ikke hvor mange ganger «neste side» lastet. Når de oppdaterer siden, tilbakestilles de helt tilbake til den opprinnelige siden. Brukeren må da bla ned igjen for å finne hvor de var før.

Konklusjon

Uendelige ruller er fine i noen få tilfeller, men de er vanligvis ikke problemløsere, men problemmakere. UX-folk bør ikke vurdere uendelig rulling som en sølvkule for å løse sine paginasjonsproblemer. Stopp bygge nettsteder med uendelig bla.