Lopeta verkkosivustojen rakentaminen infinite scrollilla!

TL; DR: vaikka infinite scroll tarjoaa ratkaisun joissakin tapauksissa, se voi olla vähemmän kuin ihanteellinen käyttäjille.

ääretön vieritys voi olla hämmentävää, hallitsematonta ja aiheuttaa käyttäjilleen stressiä.

tässä artikkelissa selitämme, miksi sinun täytyy lopettaa verkkosivustojen rakentaminen äärettömällä vierityksellä. Mutta aluksi, katsotaanpa lyhyt historia vieritys.

lyhyt historia vierittämisestä

ymmärtää, mitä käärö todella on, katsotaan mistä termi käärö tulee.

käärö (n.): n. 1400,”pergamentti-tai paperirulla”

kääröjä käytettiin alun perin silloin, kun tiedosta tuli pitkä (kuten uskonnollisesta sisällöstä). Niin paljon sisältöä tuli vaikeaksi hallita, lukea ja kirjoittaa.

kun tietokoneet tulivat elämäämme, tarvitsimme vielä tavan navigoida suurten sisällönpalojen läpi.

kirjakääröjen kehitys tietokoneissa

rivit (ja sarakkeet)

Internetin alkuvuosina UX-suunnittelijat keksivät/tutkivat monia tapoja hakea/vierittää sisältöä. Ennen kuin netti oli suosittu, vieritimme viivoja näytöllämme.

Vaakakääröt tekivät vierityksestä työkalun paitsi sisällön lukemiseen, myös tavan navigoida tietokoneen näytöllä.

Windows (ei käyttöjärjestelmä yksi)

rullien käyttäminen ruudun navigointiin rohkaisi ihmisiä luomaan Windowsia. Windows, voit tarkastella useita paloja sisältöä kerralla.

verkkosivut

vieritys ratkaisee hyvin perustavanlaatuisen ongelman, joka meillä on verkkosivuja selatessamme. Vieritys voi kuitenkin aiheuttaa monia ongelmia käyttäjille ja vaikuttaa negatiivisesti käyttökokemukseen. Katsotaanpa tarkemmin.

verkkosivujen navigointiin keksityt kokemukset

aion yrittää määritellä, miten kehittäjät ja suunnittelijat loivat kokemuksia käyttäjien navigoimiseksi verkkosivuillaan.

aloitetaan opettelemalla joitain taustasivujärjestelmiä:

Offsetpohjainen sivutus

tämä on tunnetuin sivutusjärjestelmä. Tässä tekniikassa meidän on ensin löydettävä, kuinka monta kohdetta meidän on pakinoitava.:

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

kaikkien kohteiden laskemisen jälkeen on laskettava sivut. Oletetaan, että näytämme 10 kohdetta per sivu:

-- First page itemsSELECT * FROM posts LIMIT 10

ja jos haluamme hypätä sivulle 3, meidän on hypättävä ensin 30 kohteita käyttäen OFFSET:

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

ja lähetämme sivutus tiedot asiakkaalle seuraavasti:

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

edut ja haitat offset-pohjainen sivutus

• 👍 hyvä: helppo hypätä mille tahansa sivulle
• 👍 hyvä: asiakaskokemus on vapaampi
• 👎 huono: suorituskykyongelmat
• 👎 huono: Kahdennetut kohteet voidaan näyttää, jos TIEDOT muuttuvat

Kohdistinpohjainen sivutus

Big data teki taulukkomäärän laskemisen vaikeaksi, koska se kasvaa jatkuvasti (ajattele Twitteriä). Joten, kehittäjät keksivät uudempia tekniikoita sivuuttamaan tiedot: cursors.

jokaisella rivillä on oltava yksilöllinen kohdistin. Sinun ei tarvitse laskea koko taulukkoa, minkä vuoksi on mahdotonta tietää todellista sivumäärää:

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

Oletetaan, että jokaisessa viestissä on ainutlaatuinen kohdistinkenttä (tai sen tunnus tässä esimerkissä), joka helpottaa sivutusta. Asiakas saa sivutiedot seuraavasti:

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

ja voit kysyä seuraavaa sivua kohdistimen avulla:

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

hyödyt ja haitat kohdistin-pohjainen sivutus

• 👍 hyvä: suoriutuvampi, ei taulukkomääriä
• 👍 hyvä: päällekkäisten kohteiden näyttäminen ei ole mahdollista, jos joku lisää rivin taulukon keskelle
• 👎 huono: mahdotonta hypätä mille tahansa sivulle
• 👎 Huono: asiakas ei ole vapaa kokemuksen kanssa, kokonaissivua ja nykyistä sivua ei lasketa

Katsotaanpa joitakin navigointimenetelmiä.

kokemus: klikinpohjainen

tekniikka: offset-tai kursoripohjaista

Tätä käytetään lähinnä blogien navigointiin. Tämä on vanhin versio infinite scrolling. Tämän lähestymistavan avulla käyttäjä ei välttämättä tiedä, mihin sisältö päättyy.

numeroitu sivutus

kokemus: klikkauspohjainen

tekniikka: offsetpohjainen

tämä on käyttökelpoisin (ME: n mukaan) navigointityyppi. Se käyttää offset – pohjaista sivutusta, jonka avulla voit hypätä haluamallesi sivulle tai siirtyä loppuun tai alkuun yhdellä napsautuksella.

Google käyttää tällaista navigointia hakutuloksissa:

Load more

the experience: click trigger-based

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

tämä on yksi uusimmista sivutusmenetelmistä, ja siinä käytetään myös infinite Scrollsin aikaisempaa versiota.

yllä olevassa esimerkissä käyttäjä napsauttaa ”Load More” – painiketta nähdäksesi enemmän sisältöä.

Infinite scrolls

the experience: scroll-based

the technique: cursor-based — may also be offset-based but would be VERY kömpelö

Infinite scrolls ovat uusin kokemus cursor based pagination techniques.

Hugh E. Williams väittää keksineensä infinite scrollin vuonna 2005 Microsoftilla.

Metafizzy loi myös työkalun, jonka avulla kehittäjät voivat rakentaa äärettömiä kääröjä.

Stop building websites with infinite scroll!

tähän osioon asti on käyty läpi, miten tähän päädyttiin. Puhutaan nyt siitä, miksi täällä on syvältä.

Finding footer

Footer on hyvin perusyksikkö verkkosivun anatomiassa, aivan kuten otsikkokin. Sivustot pitävät joitakin yksityiskohtaisia tietoja ja linkkejä alatunnisteessa, kuten puhelinnumerot, osoitteet, ja ohje-ja tukilinkit. Jos käyttäjät etsivät tätä yksityiskohtaista tietoa, he useimmiten selaa alas löytää alatunnisteen.

äärettömillä kääröillä käyttäjän voi olla vaikea yrittää löytää alatunnistetta. Ääretön vieritys tekee sivun lopun löytämisen mahdottomaksi. Ei voi päästä pohjaan sivuston voi tehdä käyttäjä korosti (mikä ei ole suuri).

sivustot, joilla on ääretön syöte (kuten Twitter), ratkaisevat alatunnisteongelman laittamalla tämän vaatimat tiedot ja linkit sivupalkkiin. Sivupalkki on ratkaisu tähän asiaan, mutta ei hyvä. Alatunnisteen pitäisi pysyä alatunnisteessa.

älä käytä ääretöntä vieritystä, jos sinulla ei ole aikajanaa tai syötettä

sosiaalisen median sovellukset toimivat ajan kanssa. Käyttäjien tarkoituksena on suunnistaa menneisyyteen. Tällöin infinite scroll helpottaa navigointia. Täällä infinite scroll on hyvä suorituskyky, erityisesti mobiili.

mutta jos sinulla on verkkokauppa, uutiset, aikakauslehti tai blogisivusto, ja käyttäjän aikomuksena on liikkua kohteissa tai artikkeleissa, infinite scrollista tulee heille painajainen. Aikajanapohjaisessa listauksessa ihmiset eivät useimmiten etsi treffejä tai ainutlaatuista hetkeä. Kohde-pohjainen luettelot, käyttäjä haluaa löytää kohde. Infinite scrolls tehdä kohteita lähes mahdotonta käyttäjien löytää.

antaa käyttäjille enemmän valtaa

käyttäjät eivät yleensä pidä UIs: stä, kun he kokevat, etteivät voi hallita sitä.

vieritystapahtuma ei ole kovin tarkoituksellinen tehdä jotain. Ihmiset navigoivat sivulla, ja jos he haluavat kutsua toiminnon, he useimmiten klikkaavat tai koskettavat (tunnetaan laukaisijoina). He ilmoittavat päätöksestään käyttöliittymälle. Mutta vieritys käynnistyy ilman mitään päätöstä.

äärettömät kääröt tekevät sivuista vähemmän hallittavia käyttäjille. Käyttäjät voivat myös kohdata hyppy glitches.

laita äärettömän vierityksen sijaan ”load more” – painike, joka on liipaisin. Tämä antaa hallinnan käyttäjälle. (Suosisin vanhan tyylin numeroitua sivutusta, mutta oletamme käyttävämme kohdistinpohjaista sivutusta juuri nyt).

käyttäjät voivat mennä minne haluavat

ihmiset navigoivat sivujen välillä, lisäävät kirjanmerkkejä, jakavat sivuja ystäviensä kanssa jne.

äärettömät kääröt eivät kuitenkaan voi pitää valtiota suunnitelmallaan. Käyttäjät eivät voi jakaa nykyistä tilaansa — mikä tarkoittaa myös sitä, ettet voi seurata käyttäjien toimia analytiikkatyökalujen avulla.

jos taustavalaistustekniikkasi on kursoripohjainen, on lähes mahdotonta antaa käyttäjiesi mennä minne tahansa. Jos sinulla on verkkokauppasivusto, anna käyttäjille mahdollisuus siirtyä haluamiinsa tuotteisiin.

lisäksi, jos listauksessa on ”Lajittele” – toiminto, käyttäjälle on näytettävä sivutus. Aakkosjärjestetyssä luettelossa käyttäjiä ei saa pakottaa vierittämään alaspäin K-kirjaimella alkaviin tuotteisiin.he tulevat hulluiksi tästä kokemuksesta.

käyttäjien tulisi antaa nähdä, missä he ovat. Käyttäjät Selaa jonkin aikaa, ja koska se on tilaton muotoilu, he eivät tiedä, kuinka monta kertaa ”Seuraava sivu” ladattu. Kun he päivittävät sivun, ne nollautuvat takaisin alkuperäiselle sivulle. Käyttäjä joutuu sitten vierittämään takaisin alas löytääkseen, missä he olivat ennen.

Conclusion

Infinite scrolls on muutamassa tapauksessa mukava, mutta ne eivät yleensä ole ongelmien ratkaisijoita, vaan ongelmien tekijöitä. UX-ihmisten ei pitäisi pitää infinite scrollingiä hopealuotina sivutusongelmiensa ratkaisemiseksi. Lopeta verkkosivustojen rakentaminen äärettömällä vierityksellä.