Opri construirea site-uri web cu parcurgere infinit!

TL;DR: în timp ce infinite scroll oferă o soluție în unele cazuri, poate fi mai mică decât ideală pentru utilizatori.

parcurgerea infinită poate fi dezorientantă, incontrolabilă și poate provoca stresul utilizatorilor.

în acest articol, vă vom explica de ce trebuie să opriți construirea site-urilor web cu derulare infinită. Dar pentru a începe, să ne uităm la o scurtă istorie a derulării.

o scurtă istorie a derulării

pentru a înțelege ce este defilarea cu adevărat, să vedem de unde provine termenul defilare.

parcurgere (n.): c. 1400,”rola de pergament sau hârtie”

suluri inițial au fost folosite pentru atunci când informațiile au devenit lungi (cum ar fi conținutul religios). Atât de mult conținut a devenit dificil de gestionat, citit și scris.

când computerele au intrat în viața noastră, încă aveam nevoie de o modalitate de a naviga prin bucăți mari de conținut.

evoluția sulurilor în computere

linii (și coloane)

în primii ani ai internetului, designerii UX au inventat/explorat multe moduri de paginare/derulare a conținutului. Înainte ca web-ul să fie popular, derulam linii pe ecranul nostru.

sulurile orizontale au făcut ca derularea să fie un instrument nu numai pentru citirea conținutului, ci și o modalitate de a naviga pe ecranul computerului.

Windows (nu Sistemul de operare)

utilizarea sulurilor pentru a naviga pe ecran a încurajat oamenii să creeze windows. Folosind windows, veți putea vizualiza mai multe bucăți de conținut simultan.

pagini Web

defilare rezolvă o problemă foarte fundamentală avem în timp ce navigarea pe paginile web. Cu toate acestea, derularea poate cauza multe probleme utilizatorilor și poate avea un impact negativ asupra experienței utilizatorului. Să aruncăm o privire mai atentă.

experiențele inventate pentru a naviga pe paginile web

voi încerca să definesc modul în care dezvoltatorii și designerii au creat experiențe pentru a naviga utilizatorii în paginile lor web.

să începem prin a învăța câteva sisteme de paginare back-end:

paginare bazată pe Offset

acesta este cel mai cunoscut sistem de paginare. În această tehnică, în primul rând, trebuie să găsim câte elemente trebuie să paginăm:

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

după numărarea tuturor elementelor, trebuie să calculăm paginile. Să presupunem că vom afișa 10 articole pe pagină:

-- First page itemsSELECT * FROM posts LIMIT 10

și dacă vrem să trecem la pagina 3, trebuie să omitem mai întâi elementele 30 folosind OFFSET:

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

și vom trimite informațiile de paginare clientului după cum urmează:

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

Pro și contra paginării bazate pe offset

• 👍 bun: ușor pentru a sari la orice pagină
• bun: experiența clientului este mai liber
• rău: probleme de performanță
• rău: Elementele Duplicate pot fi afișate dacă datele se schimbă

paginarea bazată pe Cursor

datele mari au făcut dificilă calcularea numărului de tabel, deoarece este în continuă creștere (gândiți-vă la Twitter). Deci, dezvoltatorii au venit cu tehnici mai noi pentru a pagina datele: cursoare.

fiecare rând trebuie să aibă un cursor unic. Nu trebuie să numărați întregul tabel, ceea ce face imposibilă cunoașterea numărului real de pagini:

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

să presupunem că fiecare postare are un câmp cursor unic (sau ID-ul său în acest exemplu) pentru a ajuta la paginare. Clientul va avea informații de paginare după cum urmează:

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

și puteți cere Pagina următoare folosind cursorul:

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

Pro și contra paginării bazate pe cursor

• 👍 bun: mai performant, niciun tabel nu conteaza
• bun: afisarea elementelor duplicate nu este posibila daca cineva introduce un rand in centrul tabelului
• rau: imposibil de salt la orice pagina
• rau: Clientul nu este liber cu experienta, pagina totala si pagina curenta nu sunt calculate

sa aruncam o privire la cateva tehnici de navigare.

experiența: pe bază de clic

tehnica: offset-based sau cursor-based

acesta este utilizat în principal pentru a naviga pe bloguri. Aceasta este cea mai veche versiune de defilare infinită. Folosind această abordare, este posibil ca utilizatorul să nu știe unde se termină conținutul.

paginare numerotate

experiența: click-based

tehnica: offset-based

acesta este cel mai utilizabil (în funcție de mine) tipul de navigare. Utilizează paginarea bazată pe offset, care vă permite să săriți la pagina dorită sau să mergeți la sfârșit sau să începeți cu un singur clic.

Google folosește acest tip de navigare în rezultatele căutării:

încărcați mai multe

experiența: faceți clic pe trigger-based

tehnica: cursor-based — poate fi, de asemenea, offset-based, dar ar fi ciudat

aceasta este una dintre cele mai noi tehnici de paginare, și folosește, de asemenea, versiunea anterioară a infinite scrolls.

în exemplul de mai sus, utilizatorul face clic pe butonul „Încărcați mai mult” pentru a vedea mai mult conținut.

suluri Infinite

experiența: scroll-based

tehnica: cursor-based — poate fi, de asemenea, offset-based, dar ar fi foarte ciudat

suluri Infinite sunt cea mai nouă experiență de tehnici de paginare bazate pe cursor.

Hugh E. Williams susține că a inventat infinite scroll în 2005 pe Microsoft.

Metafizzy a creat, de asemenea, un instrument pentru a ajuta dezvoltatorii să construiască suluri infinite.

opriți construirea site-urilor web cu derulare infinită!

până la această secțiune, am analizat cum am ajuns aici. Acum hai să vorbim de ce aici e de rahat.

găsirea subsolului

subsolul este o unitate foarte de bază a anatomiei paginii web, la fel ca un antet. Site-urile păstrează câteva informații detaliate și linkuri în subsol, cum ar fi numere de telefon, adrese și linkuri de ajutor și asistență. Dacă utilizatorii caută aceste informații detaliate, aceștia derulează mai ales în jos pentru a găsi subsolul.

cu suluri infinite, utilizatorii pot avea un timp de greu încercarea de a găsi subsol. Parcurgerea infinită face imposibilă găsirea sfârșitului paginii. A nu putea ajunge în partea de jos a unui site web poate face utilizatorul stresat (ceea ce nu este grozav).

site-urile cu un flux infinit (cum ar fi Twitter) rezolva problema subsol pune aceste informații necesare și link-uri în bara laterală. Bara laterală este o soluție la această problemă, dar nu una bună. Subsolul ar trebui să rămână pe subsol.

nu utilizați derulare infinită dacă nu aveți o cronologie sau un flux

aplicațiile de Social media funcționează cu timpul. Intenția utilizatorilor este de a naviga în trecut. În acest caz, infinite scroll facilitează navigarea. Aici, parcurgerea infinită este bună pentru performanță, în special în mobil.

dar dacă aveți un e-commerce, știri, Reviste, sau un site de blog, iar intenția utilizatorului este de a muta în jurul valorii de elemente sau articole, parcurgere infinit devine un coșmar pentru ei. Într-o listă bazată pe cronologie, oamenii nu caută în mare parte o dată sau un moment unic. Pe listele bazate pe elemente, utilizatorul dorește să găsească un element. Suluri Infinite face elementele aproape imposibil pentru utilizatorii dvs. pentru a găsi.

oferiți utilizatorilor mai mult control

utilizatorilor, în general, nu le plac UIs-urile atunci când simt că nu le pot controla.

un eveniment de defilare nu este foarte intenționat să facă ceva. Oamenii navighează pe pagină și, dacă doresc să apeleze la o acțiune, fac mai ales clic sau ating (cunoscute sub numele de declanșatoare). Ei informează UI despre decizia lor. Dar parcurgerea este declanșată fără nicio decizie.

sulurile Infinite fac paginile mai puțin controlabile pentru utilizatori. Utilizatorii pot întâlni, de asemenea, erori de sărituri.

în loc de derulare infinită, puneți un buton „încărcați mai mult”, care este un declanșator. Acest lucru va oferi control utilizatorului. (Aș prefera paginarea numerotată în stil vechi, dar presupunem că folosim paginarea bazată pe cursor chiar acum).

Permiteți utilizatorilor să meargă oriunde doresc

oamenii navighează între pagini, marchează unele dintre ele, Partajează pagini cu prietenii etc.

cu toate acestea, sulurile infinite nu pot păstra starea prin designul său. Utilizatorii nu pot partaja starea lor actuală — ceea ce înseamnă, de asemenea, că nu puteți urmări acțiunile utilizatorilor folosind instrumente de analiză.

dacă tehnica de paginare back-end este bazată pe cursor, este aproape imposibil să permiteți utilizatorilor să meargă oriunde. Dacă aveți un site web de comerț electronic, oferiți utilizatorilor control pentru a naviga la produsele pe care le doresc.

în plus, dacă aveți o funcționalitate „Sortare după” în înregistrarea dvs., trebuie să afișați utilizatorului o paginare. Într-o listă ordonată alfabetic, nu trebuie să forțați utilizatorii să deruleze în jos la produse care încep cu K. vor înnebuni cu această experiență.

ar trebui să permiteți utilizatorilor să vadă unde se află. Utilizatorii defila pentru un timp, și pentru că este un design apatrid, ei nu știu de câte ori „Pagina următoare” încărcat. Când reîmprospătează pagina, se vor reseta până la pagina originală. Utilizatorul va trebui apoi să deruleze înapoi în jos pentru a afla unde au fost înainte.

concluzie

sulurile Infinite sunt frumoase în câteva cazuri, dar de obicei nu rezolvă probleme, ci fac probleme. Oamenii UX nu ar trebui să ia în considerare derularea infinită ca un glonț de argint pentru a-și rezolva problemele de paginare. Opri construirea site-uri web cu defilare infinit.