Twój Spinner ładowania to zabójca UX! Oto alternatywa

Wiemy, że nienawidzisz czekać. Każdy to robi.

W badaniu z 2017 r. Google stwierdził, że:

• Czasy ładowania od 1 do 3 sekund zwiększyły współczynnik odrzuceń o 32%.
• Czas ładowania 1-5 sekund zwiększył współczynnik odrzuceń o 90%.
• Czas ładowania 1-6 sekund zwiększył współczynnik odrzuceń o 106%.

Ludzie nie lubią czekać, chyba że jest ku temu dobry powód, a im dłużej trzeba czekać, tym mniej tego powodu się kumuluje. Dlatego widoczność stanu systemu jest jedną z 10 heurystyk użyteczności firmy Nielsen w zakresie projektowania interfejsu użytkownika. Widoczność stanu systemu oznacza:

„Projekt powinien zawsze informować użytkowników o tym, co się dzieje, poprzez odpowiednią informację zwrotną w rozsądnym czasie”.

I tutaj wkraczają wskaźniki ładowania. Dobry wskaźnik ładowania:

1. Informuje użytkowników, że aplikacja działa.
2. Sprawia, że ​​czekanie jest znośne.
3. Daje użytkownikom na co popatrzeć.

Najczęstszym wskaźnikiem ładowania w projektowaniu interfejsu użytkownika jest – zgadłeś – pokrętło ładowania.

Ale czasami trzeba zakwestionować powszechną praktykę, aby przekraczać granice i odkrywać innowacyjne rozwiązania. W tym przypadku spinner ładowania ma wady, które projektanci przeoczyli zbyt długo.

Spinner Design: dlaczego ładowanie spinnerów jest do bani

Jeśli chodzi o animacje ładowania, spinner ładowania jest niefortunnym wyborem, szczególnie w przypadku oczekiwania dłuższego niż 10 sekund. Czemu?

Zacznijmy od krótkiej historii.

Moje pierwsze wspomnienie o ładowaniu spinnera pochodzi sprzed ponad dziesięciu lat, na długo przed tym, jak poznałem doświadczenie użytkownika. To właśnie w szkolnym laboratorium komputerowym natknąłem się na fatalną, przerażającą rzecz, którą moi przyjaciele i ja nauczyliśmy się nazywać Wirującym Kołem Śmierci. Okazuje się, że nie jest to rzadka nazwa dla kursora oczekiwania macOS.

Obraz czekającego kursora macOS z How-To Geek.

Podobnie jak Spinning Wheel of Death, spinnery ładowania nie dają żadnych informacji zwrotnych – żadnych oznak postępu. Nieskończenie się kręcą, nie mówiąc nam nic o postępach, jakie poczyniła aplikacja. To frustrujące dla użytkowników i wręcz wywołujące złość, gdy się spieszysz.

Zadajesz pytania takie jak:

• Kiedy zakończy się ładowanie?
• Czy to już prawie koniec?
• Czy to jest zepsute?

Ale twoje pytania pozostają bez odpowiedzi, więc poddajesz się.

Co gorsza, błystki spowalniają czas.

Czy kiedykolwiek byłeś w trakcie treningu, desperacko pragnąc, aby stoper się skończył? Lub nie możesz się doczekać ucieczki z klasy? W takich przypadkach obserwowanie zegara i czekanie bez celu sprawia, że ​​czas pełznie. Spinners robią to samo, bez korzyści z odliczania. Są jak czekanie na jedzenie w restauracji z burczącym żołądkiem; tylko, nie wiesz, czy szef kuchni dostał twoje zamówienie.

Jasne, wczytywanie animacji nie kontroluje czasu, ale nasze zadowolenie z zadania wpływa na jego postrzeganie. Kiedy dobrze się bawimy, zegar przyspiesza. Kiedy nienawidzimy czekać, zwalnia.

I po raz kolejny spinner zachęca użytkowników do rezygnacji.

Ponadto chcesz, aby Twoje treści były wartościowe dla użytkowników – spełniały, a nawet przekraczały ich oczekiwania. Jeśli przypadkiem strona nie jest taka, jak oczekiwali, dodatkowa frustracja spowodowana zbyt długim wpatrywaniem się w tarczę powiększa szkody.

Aby przejrzeć, spinner ładowania:

1. Nie daje żadnych oznak postępu.
2. Nie odpowiada na pytania użytkownika.
3. Sprawia, że ​​oczekiwanie wydaje się dłuższe niż jest.
4. Nie przygotowuje oczekiwań użytkownika.

Twoje opcje animacji ładowania

Najlepszym sposobem naprawienia frustracji użytkownika za pomocą pokrętła ładowania jest usunięcie tej frustracji od samego początku. Oznacza to skrócenie czasu oczekiwania, aż zniknie lub użycie alternatywnego wskaźnika postępu.

Ponownie, dobry wskaźnik ładowania lub postępu:

1. Sprawia, że ​​postrzeganie czasu przez użytkownika jest szybsze.
2. Daje poczucie, że aplikacja robi postępy.

Dwa główne typy wskaźników postępu stosowanych w projektowaniu UX to nieokreślone wskaźniki postępu i określone wskaźniki postępu. Czynnikiem decydującym jest czas.

Pomysł polega na tym, że używasz typowego pokrętła ładowania, gdy nie wiesz, jak długo potrwa ładowanie, i używasz określonego wskaźnika, takiego jak pasek postępu, gdy wiesz. Określona animacja ładowania wskazuje, jak długo użytkownik musi czekać, z podpowiedziami, takimi jak procent ukończenia, pozostałe minuty lub pasek, który się zapełnia.

Nieokreślony vs określony wskaźnik postępu z Material Design.

Problem z tą strategią polega na tym, że nigdy nie wiadomo dokładnie, jak długo coś się ładuje. Możesz zgadywać, ale to wszystko. Dlatego wiele wskaźników odliczania będzie liczyć w ten sposób: pozostało 10 minut, pozostało 9 minut, pozostało 8 minut, pozostało 7 minut, pozostało 10 minut, pozostało 8 minut i tak dalej. Zakończy ładowanie i ostatecznie osiągnie 0, ale nie wcześniej niż zabierze użytkownika na przejażdżkę.

Jak w pełni wykorzystać ładowanie animacji

Poniżej omówimy alternatywne rozwiązanie dla spinnerów i pasków postępu. Mimo to, jeśli jesteś zdeterminowany, aby wybrać bardziej tradycyjną ścieżkę lub przeprowadziłeś badania UX i stwierdziłeś, że są one preferowanym wyborem dla twoich odbiorców, masz kilka wskazówek, których należy przestrzegać.

Po pierwsze, używaj pokrętła ładowania tylko przez czas oczekiwania poniżej 10 sekund. W przypadku opóźnień powyżej 10 sekund stwórz iluzję postępu za pomocą określonych wskaźników, aby użytkownicy dłużej byli zainteresowani.

Kiedy projektujesz spinnery lub inne animacje ładowania:

1. Bądź tak kreatywny i zabawny, jak to tylko możliwe
2. Zrób to na markę
3. Podaj jak najdokładniejsze oszacowanie realizacji
4. Wyjaśnij, dlaczego użytkownik czeka
   – Proszę czekać, obliczamy Twoje wyniki.
   – Proszę poczekać, aż wszystko przygotujemy.
   – Zbieramy Twoje dane.
   – 21 z 30 sprawdzonych plików.
5. Nie używaj animacji, jeśli strona załaduje się w czasie krótszym niż jedna sekunda.

Przykładowe gify z ekranu ładowania z Hacker Noon.

Moglibyśmy kontynuować o ulepszaniu animacji ładowania, ale nie o tym jest ten artykuł. Ponieważ bez względu na to, jak zabawna jest animacja ładowania, podkreśla ona czas oczekiwania i nie zapewnia wyraźnego poczucia postępu.

Po to są ekrany szkieletowe.

Progresywne ładowanie za pomocą ekranów szkieletowych

Badania porównujące spinnery i ekrany szkieletowe wykazały, że ekrany szkieletowe są postrzegane jako szybsze i sprawiają, że użytkownicy są szczęśliwsi. Kim więc jest ten rzekomy bohater?

Jak wiecie, ładowanie spinnerów zajmuje ekran, dopóki interfejs użytkownika nie zostanie całkowicie załadowany, w którym to momencie wszystko pojawia się naraz.

Ekrany szkieletów wykorzystują inną taktykę i odsłaniają każdą część interfejsu użytkownika w miarę postępu ładowania. Rozpoczyna się od szkieletowego zarysu projektu interfejsu, a następnie przechodzi do wyświetlania elementów po zakończeniu ładowania. Ta strategia nazywa się stopniową progresją, a szczegóły zwykle pojawiają się w kolejności zarysu szkieletu (zwanego również zastępczym interfejsem użytkownika), tekstu, a następnie obrazów.

Przykładowy szkielet ekranu Facebooka z Facebook Engineering.

Wykorzystywane przez znane firmy, takie jak LinkedIn, Instagram, Facebook i Google, ekrany szkieletowe oferują lepsze wrażenia na ekranie ładowania, zmieniając pasywne czekanie w aktywne czekanie.

Czekanie pasywne ma miejsce wtedy, gdy po prostu siedzisz i nie masz nic do roboty, jak podczas oglądania obracającego się spinnera. Aktywne czekanie ma miejsce wtedy, gdy robisz coś, co sprawia wrażenie postępu podczas czekania. Ładowanie szkieletu zachęca do aktywnego oczekiwania, dając użytkownikowi nowe informacje do przetworzenia za każdym razem, gdy ekran się aktualizuje.

W ten sposób ekran szkieletu odwraca uwagę od czasu, na który czekasz, i umieszcza go na rzeczywistym dowodach postępów, które mają miejsce przed tobą, dzięki czemu proces ładowania wydaje się szybszy. A ponieważ pokazuje, co zostało załadowane, a co pozostało, pozwala użytkownikowi zbudować dokładne oczekiwania dotyczące interfejsu użytkownika.

Stopniowe ładowanie Instagrama w akcji.

Podczas implementacji ekranu szkieletowego upewnij się, że zastępczy interfejs użytkownika dokładnie odzwierciedla wygląd ostatecznego interfejsu użytkownika. W przeciwnym razie tworzysz przepaść między oczekiwaniami a rzeczywistością.

Niektóre narzędzia i strony internetowe, takie jak Medium i Grafika Google, wykorzystują progresywne ładowanie obrazu, aby dodać kolejny krok w postępie. Progresywne ładowanie obrazu ma miejsce wtedy, gdy przed pełnym wczytaniem wyświetlasz dominujący kolor lub rozmytą wersję obrazu.

Możesz także zaprojektować animacje ładowania na ekranach szkieletowych, aby wskazać wczytywanie. Na przykład Facebook ma wyszarzone paski tekstowe na ekranie szkieletu, które wykonują własny ruch ładowania podczas ładowania strony.

Użytkownicy postrzegają ekrany z ruchami ładowania od lewej do prawej oraz wolnymi i stałymi ruchami ładowania, aby były szybsze.

Problemy ze szkieletem ekranu

Jak zawsze pojawiają się krytycy – największym problemem jest to, że szare bloki są nudnym i nieatrakcyjnym rozwiązaniem dla użytkowników, którzy oczekują świetnych treści.

W pewnym stopniu ta troska mija się z sednem ekranu szkieletu: wskazywać na wspaniałą zawartość, która jest szybko w drodze. Żaden użytkownik nie oczekuje ani nie chce w ogóle ekranu ładowania, ale ekrany szkieletowe zapewniają komfort wiedzy, że interfejs działa i będzie dostępny w ciągu kilku sekund.

Oczywiście szare bloki stają się irytujące, gdy między każdą fazą postępu jest zbyt długi okres oczekiwania. Im dłuższy czas oczekiwania, tym gorzej. Tak jest w przypadku wszystkich wskaźników obciążenia, ponieważ jak ustaliliśmy na początku, nikt nie lubi długo czekać.

W przypadku ekranów szkieletowych pomaga wdrożyć wiele faz progresji, aby nadal aktywować skupienie użytkownika. Istnieją słabo zaprojektowane ekrany szkieletowe, które przechodzą od szarego zastępczego interfejsu użytkownika do wszystkiego naraz, co jest sprzeczne z celem. Skuteczne progresywne ładowanie wyświetla treści, gdy tylko są gotowe, aby informować użytkowników, interesować ich i mieć nadzieję.

Jeśli czas oczekiwania jest odrobinę dłuższy niż idealny, możesz rozważyć użycie pokrętła na kilka sekund przed wyświetleniem zastępczego interfejsu użytkownika i załadowaniem treści. Może to dać ci trochę czasu, o ile pojawi się zastępczy interfejs użytkownika, aby pokazać znaczny postęp.

Jeśli czas ładowania jest zbyt długi, skrócenie czasu oczekiwania jest zawsze najlepszą opcją i powinno być Twoim priorytetem. Istnieje wiele powodów, dla których Twoja witryna może działać wolno.

Przetestuj: dobry UX zaczyna się od użytkownika

Doświadczenie użytkownika zaczyna się od samego użytkownika i żadna odpowiedź nie jest odpowiednia dla wszystkich, nawet jeśli dotyczy większości. Dlatego zapewnienie dobrego wrażenia użytkownika zaczyna się od przetestowania Twoich pomysłów, aby ustalić, co najlepiej sprawdza się w przypadku Twoich odbiorców.

W tamtych czasach oferowanie najlepszego projektu przędzarki było najlepszym, co mogłeś zrobić.

Teraz dobrze zaprojektowane progresywne ładowanie jest wartą rozważenia alternatywą. Przyspiesza postrzegany czas oczekiwania, zapewnia poczucie postępu, wskazuje, co pozostało do załadowania i doradza oczekiwaniom użytkownika.

Ale to nie znaczy, że nadszedł czas, aby przestać kwestionować najlepsze praktyki. Czasy korzystania z długich, mało pouczających animacji ładowania mogą być już za nami, ale pewnego dnia coś przezwycięży ograniczenia ekranów szkieletowych w taki sam sposób, jak w przypadku spinnerów.

Do tego czasu, jeśli chcesz dowiedzieć się więcej o tym, jak poprawić swój UX, skontaktuj się z nami. Uwielbiamy rozmawiać o strategii.