Jako projektanci doświadczeń użytkowników, jesteśmy przytłoczeni obsesją wydajności i szybkości aplikacji/strony. Nic w tym dziwnego, ta narracja przewija się cały czas, a napędzają ją również cyfrowi giganci.
Amazon twierdzi, że wydłużenie czasu ładowania strony o 1 sekundy, przyczyniłoby się do straty 1,6 miliarda dolarów rocznie. Google natomiast utraci 8 milionów wyszukiwań, gdy prędkość wyszukiwarki spadnie o cztery dziesiąte sekundy.
➡️ Szybkość + intuicyjność
Równie ważnym elementem, co prędkość ładowania, jest intuicyjność interfejsu.
Jeśli interfejs będzie intuicyjny i będzie jasno prowadził do celu, użytkownik nie zwróci aż tak dużej uwagi na czas. Intuicyjny interfejs w odbiorze będzie wydawał się szybszy, nawet jeśli faktycznie nie jest. Jak tego dokonać?
➡️ Najprostsze rozwiązanie – wireframy
Wejdź sobie na Youtube, Facebooka lub stronę Kayak. Przy wolniejszym internecie, zanim załaduje się treść, zobaczysz na krótką chwile początkowy ekran, które pokazuje jak będą ułożone elementy. Jest to zarys, sugerujący, że elementy za chwilę zostaną wczytane.
➡️ Przewiduj za użytkownika
Jeśli użytkownik musi czekać, zaangażuj go, a czas oczekiwania nie będzie dla niego tak uciążliwy.
W życiu codziennym, w windach instaluje się lustra, a na skrzyżowaniu montuje się przyciski do zmiany sygnalizacji, chociaż połowa z nich i tak nie działa 😉
W projektowaniu masz wiele opcji. Możesz pokazać ciekawą animację, wyświetlić jakiś cytat, dodać mini wskazówki powiązane z użytkowaniem aplikacji. Zobacz na ten idealny przykład, gdzie dodano grę wideo, by uprzyjemnić oczekiwanie.
➡️ Odwróć uwagę
Kolejna metoda, to odwrócenie uwagi, tak żeby użytkownik nie miał czas pomyśleć, że coś się ładuje.
👀 Dlatego spróbuj zredukować kółeczka spinerów – loadingu, na rzecz mikrointerakcji. Przykład. Dając tego typu animację zyskujesz kilka milisekund oraz sprawiasz przyjemniejszą interakcję z elementem ładowania.
👀 Animacje nadają się idealnie, są potężnym narzędziem do budowania pozytywnych doświadczeń. Popatrz na ten przycisk. Czy czas potrzebny na publikację, byłby tak przyjemnie postrzegany, gdyby przycisk był statyczny?
👀 A tutaj przykład animacji, która zniwelowała nieco długi okres oczekiwania tworzenia kopii zapasowej.
Tego typu interakcje oraz animacje, przenoszą uwagę użytkownika na dany element, tym samym nie pozwalają rozmyślać nad czasem ładowania.
➡️ Nie zamrażaj interfejsu
Najgorszą opcją jest brak ruchu i zamrożenie użytkownika podczas ładowania. Tego typu sytuacja ma często miejsce,
gdy w czasie ładowania wyświetla się spinner lub ekran zostaje przyciemniony.
W tym momencie użytkownik nie może nic kliknąć, aplikacja jest nieaktywna. Użytkownik nie lubi być zablokowany, dlatego powinien nadal móc wykonywać ruchy w Twojej aplikacji, mimo ładowania się danego elementu.
➡️ Paski postępu
Jednym z najczęściej wybieranych rozwiązań do zakomunikowania procesu ładowania jest pasek postępu.
👀 Wyświetlając pasek, zadbaj, by nie przekłamywał. Często paski ładują się dosyć sprawnie do 99%, a potem proces ładowania zatrzymuje się na dłuższą chwilę.
👀 Szybkie ładowanie paska na początku, sugeruje użytkownikowi, że proces zostanie zakończony w miarę sprawnie. Tymczasem przy 99% użytkownik musi czekać trzy razy tyle czasu. Użytkownik w tym czasie mógłby wykonać jakieś inne zadanie.
👀 Paski postępy powinny poruszać się płynnie, nie powinny skakać np. z 3% do 40%. Natomiast musisz wiedzieć, że użytkownicy wolą paski postępu, które są nieco szybsze na początku drogi oraz na jej końcu.
👀 Dodatkowo warto pokazać tutaj to badanie, które wykazało, że migający pasek postępu wydaje się szybszy niż statyczny.
💥 Tip – paski postępu rozpoczynaj od początkowej wartości 1%, a nie 0%. Daje to poczucie użytkownikowi, że postęp się rozpoczął i jest w toku.
💥 Tip – szersze okienko paska postępu, sprawi, że użytkownik odbierze upływający czas jako szybszy, ponieważ wskaźnik postępu musi wykonać większy dystans niż przy wąskim okienku.
