#PrzemoPatterns: Loading cz. 2

W nawiązaniu do poprzedniego wpisu o charakterystyce samego loadera, dziś opiszę dwie, bardziej ogólne porady dotyczące ładownia danych i tego, jak uczynić ten proces bardziej user-friendly.

Rozwiązania te są często wykorzystywane dla stron/produktów, które procesują duże ilości danych lub na które potrzeba nieco więcej czasu na przetworzenie.

Stan szkieletu strony (skeleton states)

To uproszczone wersje komponentów używanych podczas wstępnego ładowania strony, w celu wskazania, że informacje na stronie nie zostały jeszcze w pełni załadowane. Powinny pojawiać się tylko przez kilka sekund i znikać, gdy składniki i treść zapełnią stronę.

Bardzo często szkielet strony wykorzystuje ruch do zakomunikowania, że strona nie utknęła i że dane są nadal ładowane. Może to pomóc w zmniejszeniu niepewności użytkownika.

Szczególnie warto użyć stanów szkieletowych dla komponentów opartych na kontenerach, takich jak kafelki i listy strukturalne, lub komponentów opartych na danych, takich jak tabele danych i karty.

Według badań przeprowadzonych przez Nielsen Norman Group, szkielet strony w tle podczas ładowania znacznie poprawia wrażenie użytkowników czekających na treść.

Leniwe ładowanie (lazy loading)

Bez względu na złożoność naszych komponentów, jeśli mamy dużą ilość danych, dobrą opcją będzie zastosowanie tzw. lazy loadingu. “Leniwe ładowanie" oznacza odłożenie całkowitego załadowania danych, by uruchomić je tylko wtedy, gdy użytkownik wykaże taką chęć.

Może się to zdarzyć na trzy sposoby:

1. Infinite scroll: gdy wykryjemy, że nasz użytkownik dotarł do końca listy lub strony, albo jest tego bliski, wtedy dopiero zaczynamy pobierać większą ilość treści.

2. Innym sposobem jest umożliwienie użytkownikowi decyzji poprzez kliknięcie przycisku w stylu “Załaduj więcej”. W ten sposób nie będziemy niepotrzebnie rozpychać strony, chyba, że użytkownicy wyraźnie nas o to poproszą :)

3. Paginacja to kolejna z opcji lazy lodingu. Dzięki niej pozwalamy użytkownikom zadecydować, kiedy chcą zobaczyć więcej treści (czyli przejść na kolejny widok), a także ograniczamy jej zakres do rozsądnej ilości widocznej na danej stronie.

Tego rodzaju patternów jest oczywiście więcej, niemniej jednak w mojej zawodowej pracy, te dwa wyżej wspomniane (skeleton i lazy loading) sprawdzają się najczęściej.

Ciekaw jestem jak to wygląda u Was :)