#PrzemoPatterns: Loader

Jedną z częstszych przyczyn irytacji użytkowników aplikacji jest długie ładowanie się danych. Jako programiści, dobrze wiemy, że są momenty, kiedy faktycznie potrzebujemy nieco więcej czasu, by dostać zwrotkę z backendu.

Techniczne rozwiązanie problemu nie zawsze będzie proste i szybkie, zatem w jaki sposób możemy wykorzystać wiedzę o UX i natychmiastowo ulepszyć wrażenia w oczekiwaniu na załadowanie danych?

Co powinien zawierać dobrze zaprojektowany loader?

ℹ️ Wskazówki

• Przede wszystkim, użytkownik powinien w ogóle wiedzieć, że strona jest w trakcie ładowania. Dodajmy zatem jakiś zrozumiały wskaźnik wizualny (np. spinner, progress-bar, klepsydrę etc.), który poinformuje, że operacja jest w toku.
• Wyjaśnijmy stan i przedmiot ładowania. Niech standardowe “ładowanie…” stanie się tekstem zastępczym, a my postarajmy się być bardziej szczegółowi np. “Trwa dodawanie kontaktów...”.
• Jeśli bliskie są Wam gry video, to sposobów na kreatywne wykorzystanie czasu spędzonego oczekując na np.: załadowanie mapy, znajdziecie w nich całą masę. Od copywritingu zorientowanego na przedstawiony świat i narrację, po tipy, które można wykorzystać w rozgrywce.
• Możemy zaciekawić użytkownika jakąś zabawną ilustracją lub ciekawostkami z branży - pozwoli to nieco wydłużyć oczekiwanie i zapobiec nerwowej reakcji użytkownika.
• Gdy ładowanie trwa między 2 a 10 sekund dobrym rozwiązaniem jest użycie progress-bara, gdy powyżej 10 sekund - naliczania procentowego (pencilandpaper.io).
• Dla dłuższego czasu ładowania, nie wystarczy wyłącznie informacja o tym, że „coś się dzieje”, często zbyt długa obserwacja nawet najpiękniej zapętlonej animacji powoduje powstanie w głowie pytania „Na pewno wszystko w porządku? Nic się nie zacięło?” Kto nie odmierzał paska postępu kursorem myszy przy instalacji, niech pierwszy rzuci kamieniem. Istotna jest tutaj informacja o ciągłości procesu, a więc zapewnieniu użytkownika, że proces wykonuje się i co istotniejsze wykazuje pewien cykliczny postęp.
• Dostępność: upewnijmy się, że stan ładowania jest wyraźny i widoczny, możemy również dodać dwie wersje odpowiednie dla jasnego/ciemnego tła.

Ciekawa animacja podczas ściągania pliku (kliknij, jeśli widzisz tylko statyczny plik):

Jak powinna zachowywać się strona w tle podczas ładowania, zobaczysz już w następnym wpisie z serii #PP!