Przestań budować strony internetowe z nieskończonym przewijaniem!

TL;DR: chociaż nieskończone przewijanie zapewnia rozwiązanie w niektórych przypadkach, może być mniej niż idealne dla użytkowników.

nieskończone przewijanie może być dezorientujące, niekontrolowane i może powodować stres użytkowników.

w tym artykule wyjaśnimy, dlaczego musisz przestać budować strony internetowe z nieskończonym przewijaniem. Ale na początek spójrzmy na krótką historię przewijania.

krótka historia przewijania

aby zrozumieć, czym tak naprawdę jest przewijanie, zobaczmy, skąd pochodzi termin przewijanie.

1400, „rolka pergaminu lub papieru”

zwoje pierwotnie były używane, gdy informacje stały się długie (jak treści religijne). Tak wiele treści stało się trudne do zarządzania, czytania i pisania.

kiedy komputery pojawiły się w naszym życiu, wciąż potrzebowaliśmy sposobu poruszania się po dużych kawałkach treści.

ewolucja zwojów w komputerach

linie (i kolumny)

we wczesnych latach Internetu projektanci UX wynaleźli/zbadali wiele sposobów przywoływania/przewijania treści. Zanim sieć stała się popularna, przewijaliśmy linie na ekranie.

poziome przewijanie sprawiło, że przewijanie stało się narzędziem nie tylko do czytania treści, ale także sposobem poruszania się po ekranie komputera.

System Windows (nie SYSTEM OPERACYJNY)

używanie przewijania do nawigacji po ekranie zachęcało ludzi do tworzenia systemu windows. Korzystając z systemu windows, można przeglądać wiele elementów zawartości jednocześnie.

strony internetowe

przewijanie rozwiązuje bardzo podstawowy problem, który mamy podczas przeglądania stron internetowych. Przewijanie może jednak powodować wiele problemów dla użytkowników i może negatywnie wpływać na wrażenia użytkownika. Przyjrzyjmy się bliżej.

doświadczenia wynalezione do nawigacji na stronach internetowych

spróbuję zdefiniować, w jaki sposób programiści i projektanci tworzyli doświadczenia do nawigacji użytkowników na swoich stronach internetowych.

zacznijmy od nauki niektórych systemów paginacji back-end:

paginacja oparta na offsecie

jest to najbardziej znany system paginacji. W tej technice najpierw musimy znaleźć, ile elementów musimy paginować:

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

po zliczeniu wszystkich pozycji musimy obliczyć strony. Załóżmy, że pokażemy 10 elementów na stronie:

-- First page itemsSELECT * FROM posts LIMIT 10

a jeśli chcemy przejść do strony 3, musimy najpierw pominąć elementy 30 używając OFFSET:

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

a my wyślemy informacje o paginacji do Klienta w następujący sposób:

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

plusy i minusy paginacji offsetowej

• 👍 dobry: łatwo przejść do dowolnej strony
• 👍 dobry: doświadczenie klienta jest bardziej bezpłatne
• Bad zły: problemy z wydajnością
• 👎 zły: Zduplikowane pozycje mogą być wyświetlane, jeśli dane ulegną zmianie

paginacja oparta na kursorze

Big data utrudniło obliczenie liczby tabel, ponieważ stale rośnie (pomyśl o Twitterze). Programiści wymyślili nowsze techniki paginacji danych: Kursory.

każdy wiersz musi mieć unikalny kursor. Nie musisz liczyć całej tabeli, co uniemożliwia poznanie faktycznej liczby stron:

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

Załóżmy, że każdy post ma unikalne pole kursora (lub jego identyfikator w tym przykładzie), aby pomóc w paginacji. Klient będzie miał następujące informacje o paginacji:

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

i możesz poprosić o następną stronę za pomocą kursora:

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

plusy i minusy paginacji opartej na kursorze

• 👍 dobry: bardziej wydajny, nie liczy się tabela
• 👍 dobry: wyświetlanie zduplikowanych elementów nie jest możliwe, jeśli ktoś wstawia wiersz na środku tabeli
• Bad zły: niemożliwe jest przejście do dowolnej strony
• Bad zły: klient nie jest wolny z doświadczeniem, całkowita strona i bieżąca strona nie są obliczane

rzućmy okiem na niektóre techniki nawigacji.

the experience: click-based

the technique: oparty na offsecie lub kursorze

służy głównie do nawigacji po blogach. Jest to najstarsza wersja nieskończonego przewijania. Korzystając z tego podejścia, użytkownik może nie wiedzieć, gdzie kończy się treść.

numerowana paginacja

doświadczenie: oparte na kliknięciach

technika: oparte na offsecie

jest to najbardziej użyteczny (według mnie) typ nawigacji. Wykorzystuje paginację opartą na przesunięciu, która pozwala przejść do żądanej strony lub przejść do końca lub początku za pomocą jednego kliknięcia.

Google używa tego rodzaju nawigacji w wynikach wyszukiwania:

Załaduj więcej

doświadczenie: kliknij na podstawie wyzwalacza

technika: kursor na podstawie-może być również oparta na przesunięciu, ale byłaby niezręczna

jest to jedna z najnowszych technik stronicowania, a także wykorzystuje poprzednią wersję nieskończonych zwojów.

w powyższym przykładzie użytkownik kliknie przycisk „Załaduj więcej”, aby zobaczyć więcej treści.

nieskończone zwoje

doświadczenie: oparte na przewijaniu

technika: oparte na kursorze-może być również oparta na przesunięciu, ale byłaby bardzo niezręczna

nieskończone zwoje są najnowszym doświadczeniem technik paginacji opartych na kursorze.

Hugh E. Williams twierdzi, że wynalazł infinite scroll w 2005 roku na Microsoft.

Metafizzy stworzył również narzędzie, które pomaga programistom budować nieskończone zwoje.

przestań budować strony internetowe za pomocą nieskończonego przewijania!

do tej sekcji sprawdziliśmy, jak się tu znaleźliśmy. Teraz porozmawiajmy o tym, dlaczego tutaj jest do bani.

znajdowanie stopki

stopka jest bardzo podstawową jednostką anatomii strony internetowej, podobnie jak nagłówek. Witryny przechowują szczegółowe informacje i linki w stopce, takie jak numery telefonów, adresy oraz linki do pomocy i wsparcia. Jeśli użytkownicy szukają tych szczegółowych informacji, najczęściej przewijają w dół, aby znaleźć stopkę.

dzięki nieskończonym zwojom użytkownicy mogą mieć trudności z odnalezieniem stopki. Nieskończone przewijanie uniemożliwia znalezienie końca strony. Nie jest w stanie dotrzeć do dna strony internetowej może użytkownik podkreślił (co nie jest wielki).

strony z nieskończonym kanałem (jak Twitter) rozwiązują problem stopki umieszczając te wymagane informacje i linki na pasku bocznym. Pasek boczny jest rozwiązaniem tego problemu, ale nie dobrym. Stopka powinna pozostać na stopce.

nie używaj nieskończonego przewijania, jeśli nie masz osi czasu lub kanału

aplikacje społecznościowe działają z czasem. Intencją użytkowników jest poruszanie się po przeszłości. W tym przypadku nieskończone przewijanie ułatwia nawigację. Tutaj nieskończony przewijanie jest dobre dla wydajności, zwłaszcza w urządzeniach mobilnych.

ale jeśli masz e-commerce, wiadomości, magazyn lub stronę internetową bloga, a intencją użytkownika jest poruszanie się po przedmiotach lub artykułach, nieskończony przewijanie staje się dla nich koszmarem. Na liście opartej na osi czasu ludzie przeważnie nie szukają daty ani wyjątkowego momentu. Na listach opartych na elementach użytkownik chce znaleźć element. Nieskończone zwoje sprawiają, że twoje przedmioty są prawie niemożliwe do znalezienia przez użytkowników.

daj użytkownikom większą kontrolę

użytkownicy zazwyczaj nie lubią interfejsu użytkownika, gdy czują, że nie mogą go kontrolować.

Zdarzenie przewijania nie jest zbyt celowe, aby coś zrobić. Ludzie poruszają się po stronie, a jeśli chcą wywołać akcję, najczęściej klikają lub dotykają (znane jako wyzwalacze). Informują interfejs użytkownika o swojej decyzji. Ale przewijanie jest uruchamiane bez żadnej decyzji.

nieskończone zwoje sprawiają, że strony są mniej kontrolowane przez użytkowników. Użytkownicy mogą również napotkać skoki usterki.

zamiast nieskończonego przewijania, umieść przycisk „Załaduj więcej”, który jest wyzwalaczem. To da użytkownikowi kontrolę. (Wolałbym numerowaną paginację w starym stylu, ale zakładamy, że teraz używamy paginacji opartej na kursorze).

Pozwól użytkownikom iść tam, gdzie chcą

ludzie poruszają się między stronami, dodają do nich zakładki, udostępniają strony znajomym itp.

jednak nieskończone zwoje nie mogą zachować stanu według swojego projektu. Użytkownicy nie mogą udostępniać swojego aktualnego stanu — co oznacza również, że nie można śledzić działań użytkowników za pomocą narzędzi analitycznych.

jeśli twoja technika paginacji back-end jest oparta na kursorze, prawie niemożliwe jest umożliwienie użytkownikom dowolnego miejsca. Jeśli masz witrynę e-commerce, daj użytkownikom kontrolę nad nawigacją do produktów, które chcą.

Dodatkowo, jeśli masz funkcję „Sortuj według” w swojej ofercie, musisz pokazać użytkownikowi paginację. Na liście uporządkowanej Alfabetycznie nie możesz zmuszać użytkowników do przewijania w dół do produktów zaczynających się od K. oszaleją z tym doświadczeniem.

powinieneś pozwolić użytkownikom zobaczyć, gdzie są. Użytkownicy przewijają przez pewien czas, a ponieważ jest to konstrukcja bezpaństwowa, nie wiedzą, ile razy ładowała się „Następna strona”. Gdy odświeżą stronę, zresetują się do oryginalnej strony. Użytkownik będzie musiał przewinąć z powrotem w dół, aby znaleźć miejsce, w którym był wcześniej.

podsumowanie

nieskończone zwoje są ładne w kilku przypadkach, ale zwykle nie są rozwiązywaczami problemów, ale twórcami problemów. Ludzie UX nie powinni traktować nieskończonego przewijania jako srebrnej kuli, aby rozwiązać problemy z paginacją. Przestań budować strony internetowe za pomocą nieskończonego przewijania.