Najlepsze praktyki wdrażania animowanych wskaźników postępu na Twoją korzyść

Jeśli kiedykolwiek korzystałeś z komputera, równie dobrze możesz być świadomy animowanego symbolu Windows, który pojawia się podczas uruchamiania systemu. Rozwój do tego, co widzimy dzisiaj, wymagał ewolucji w zakresie projektowania i animacji, ale w systemie Windows 1995 obraz w ogóle się nie poruszał. Niektórzy z was mogą pomyśleć, po co w ogóle używać tych animowanych wskaźników?

Zastanów się jednak, czy wolałbyś raczej czekać i patrzeć na pusty ekran, aby zobaczyć, jak Twoje działanie zostało zakończone? A może zabawić się czymś znaczącym, dopóki ekran nie pojawi się ponownie?

Jedną z najbardziej kardynalnych cech projektowania interfejsu użytkownika jest możliwość pokazania jego postępu jako stanu systemu. Użytkownik musi wiedzieć, czy system jest świadomy swoich działań i odpowiednio na nie reaguje. Animowane wskaźniki postępu są w stanie pokazać aktualny kontekst operacji w niemal dowolnym momencie bez użycia rozbudowanych funkcji tekstowych lub wideo. Dzięki temu idealnie nadają się do informowania o stanie systemu, gdy postęp jest wykonywany w tle.

Dlaczego interakcja z użytkownikiem podczas postępu systemu jest ważna?

Kto nie lubi szybkiej odpowiedzi z aplikacji lub strony internetowej? Chociaż ma to duże znaczenie dla użytkownika, nie jest możliwe uruchomienie go z niezachwianą spójnością. Pewne czynniki są zawsze dodawane do równania, które mogą utrudniać szybkość aplikacji. Czynniki te obejmują głównie złe połączenie internetowe, niską wydajność z powodu dużego obciążenia, a nawet awarię programu. W takich okolicznościach najlepszym posunięciem byłoby zminimalizowanie napięcia użytkownika i zapewnienie, że aplikacja działa i poczyniono postępy. Aby to zrobić, musisz przekazać użytkownikowi informację zwrotną, aby czas nie odbił się na jego cierpliwości.

Zachowaj zainteresowanie użytkowników dzięki opiniom

Czas oczekiwania rozpoczyna się niemal natychmiast po wykonaniu akcji przez użytkownika. Ale to, co czyni go gorszym, to brak odpowiedniego wskaźnika reprezentującego postęp systemu. Użytkownik naturalnie zakłada, że ​​aplikacja nie odpowiedziała, gdy nie wyświetla powiadomienia, że ​​system zajmuje trochę czasu. Rezultaty mogą obejmować zarówno gwałtowne klikanie, jak i nawet porzucenie przez użytkownika, tylko dlatego, że aplikacja nie dostarczyła informacji zwrotnej na czas.

Akcje, które mają na celu ponowne uruchomienie postępu lub odświeżenie systemu, są często wykonywane, gdy ładowanie zajmuje więcej czasu niż oczekiwano. Po raz kolejny brak informacji zwrotnej nie może wskazywać na odpowiedź na żądanie, mimo że jest ono wykonywane w tle. Dlatego należy wprowadzić animowany wskaźnik, który będzie wspierał postępy systemu aplikacji w dowolnym momencie.

Jak używać wskaźnika postępu dla każdej czynności, która trwa dłużej niż jedną sekundę?

Zwykle, gdy ładowanie aplikacji zajmuje mniej niż 1 sekundę, postęp wydaje się prawie niezakłócony, a użytkownik nie traci koncentracji. Jeśli jednak czas ładowania przekracza 1 sekundę, należy podjąć środki, aby utrzymać zaangażowanie użytkownika. Krótka zwłoka staje się zauważalna, a użytkownik zaczyna zastanawiać się nad skutecznością zadania wykonywanego na aplikacji.

Dlatego aplikacja musi reagować za pomocą wskaźnika postępu, aby przedstawić wiarygodny powód oczekiwania i zmniejszyć niepewność użytkownika, zanim wymknie się to spod kontroli. Należy zauważyć, że akcja, której załadowanie zajmuje mniej niż jedną sekundę, niekoniecznie wymaga wskaźnika animacji, ale obraz może to zrobić. Jest to zalecane, ponieważ animacja migająca na ekranie za każdym razem, gdy wykonywana jest czynność, może zdezorientować użytkownika. Animowane wskaźniki postępu najlepiej wykorzystać do zneutralizowania skutków długiego oczekiwania i utrzymania zaangażowania użytkownika w aplikację lub stronę internetową.

Rodzaje wskaźników postępu

1. Nieokreślony: animowane wskaźniki oczekiwania służą do komunikowania się z użytkownikiem i informowania go o jego ostatniej czynności użytkownika. Najpopularniejszym i raczej najprostszym typem wskaźnika oczekiwania jest „Nieokreślony”. Tego typu wskaźniki informują użytkowników, aby zaczekali na zakończenie działania, jednocześnie nie wiedząc, ile czasu może zająć ukończenie postępu. Prawie zrozumiałe jest, że wskaźnik postępu nieokreślonego powinien być używany do szybkich działań, najlepiej w czasie od 2 do 10 sekund. Każdy dłuższy czas może wpłynąć na cierpliwość użytkownika. Może to zwiększyć współczynnik odrzuceń witryny i liczbę porzuceń aplikacji.
2. Określ: W przypadku wskaźnika postępu „Określ” czas jest dość rozciągnięty w animacji. Tego typu wskaźniki informują użytkownika o przybliżonym lub dokładnym czasie potrzebnym do ukończenia postępów. Są raczej bardziej popularnym rodzajem wskaźników oczekiwania, ponieważ pokazują postęp od momentu jego rozpoczęcia, ile osiągnięto i ile jeszcze potrzeba, aby zabić oczekiwanie. Pomaga to użytkownikowi zachować pewność co do postępów dokonywanych i pokazywanych przez animację, jednocześnie zwiększając ich chęć pozostania zaangażowanym w stronę internetową lub aplikację.

Wskaźnik zapętlonej animacji i wskaźnik wykonania procentowego

• Zapętlona animacja: zapętlony wskaźnik animacji ma przedstawiać postęp bez pokazywania przybliżonego lub dokładnego czasu ładowania. Dlatego większość zapętlonych animowanych wskaźników postępu jest nieokreślona. Na przykład wskaźnik postępu w systemie Windows 7 został zaprojektowany tak, aby wyświetlał tę samą powtarzającą się animację bez informacji zwrotnej o dokładnym czasie, jaki może zająć ukończenie postępu. Poza tym zawierał wszystko, począwszy od funkcji bootowania, ustawiania działania interfejsu i innych form ładowania danych. Z tych dwóch powodów użytkownicy nie wolą widzieć zapętlonego wskaźnika oczekiwania, który reprezentuje czas ładowania strony internetowej lub aplikacji.

• Wskaźnik procentu wykonania: Jak sama nazwa wskazuje, wskaźnik procentu wykonania pokazuje postęp ładowania, wypełniając zakres animacji, kółko lub pasek od 0% do 100%. Ponieważ pokazuje czas potrzebny na ukończenie postępu, wskaźnik procentu wykonania jest klasyfikowany jako określone wskaźniki oczekiwania. W przypadku tej szczególnej jakości najlepiej jest używać wskaźnika procentowego wykonania w przypadku zadań wymagających więcej niż 10 sekund do wykonania.

  Według badań 10 sekund to próg przeciętnej cierpliwości użytkownika. Poza tym użytkownik staje się lekkomyślny i niecierpliwi się, dopóki nie otrzyma dalszych informacji zwrotnych. Wyświetlając procentowy wskaźnik postępu dla procesów, których ładowanie trwa dłużej niż 10 sekund, możesz utrzymać użytkownika w stałym kontakcie ze stroną internetową lub aplikacją bez narażania jego cierpliwości.

Jak efektywnie wykorzystywać wskaźniki postępu?

Efektywne wykorzystanie wskaźników postępu w aplikacjach i witrynach internetowych może zadecydować o sukcesie lub porażce. Oto kilka wskazówek, które pomogą upewnić się, że wskaźniki postępu działają zgodnie z oczekiwaniami.

1. Poinformuj użytkownika o przyczynie oczekiwania: błędem nowicjusza jest utrzymywanie użytkownika w nieświadomości postępu ładowania, który odbywa się w tle. Zwiększa to ich skłonność do utraty cierpliwości i opuszczania aplikacji lub strony internetowej. Możesz na bieżąco informować użytkownika, wyświetlając animowany wskaźnik postępu wraz z tekstem dla lepszego zrozumienia. Możesz pokazać, który proces jest konkretnie celem. Na przykład możesz pokazać postęp oczekiwania gry wideo za pomocą paska ładowania i tekstu informującego, który proces jest wykonywany, na przykład „ładowanie grafiki” lub „ładowanie map” itp.
2. Wskaż proste oszacowanie czasu dla zadania, które wymaga dłuższych okresów czasu: Nie bierz rzeczy do skali mikro. Możesz utrzymać zaangażowanie użytkownika, podając proste oszacowanie. Wygłupianie się obietnicami, których nie możesz dotrzymać, może zirytować użytkowników i zmusić ich do odejścia.
3. Pokaż dokładną wymaganą ilość czasu: jednak w przypadku operacji, które zwykle zajmują więcej czasu niż średni limit czasu oczekiwania użytkownika, mądrzejsze będzie posunięcie z określonymi wskaźnikami postępu. Idealnym wyborem byłby wskaźnik postępu w procentach, ponieważ pokazuje dokładny czas ładowania w centrum uwagi. W przypadku operacji, które są jeszcze dłuższe do wykonania, rozważ użycie liczby kroków, aby podkreślić poczyniony postęp.
4. Kontynuuj postęp: Staraj się dążyć do spójności paska postępu podczas ładowania zadań. Po kilku doświadczeniach pasek postępu zmusza użytkowników do rozwinięcia oczekiwań co do tego, jak szybko akcja zostanie zakończona. W związku z tym wszelkie zamrożenia w trakcie postępu mogą zadać poważny cios oczekiwaniom użytkowników. Na przykład, gdy pasek osiąga 99% i pozostaje na tym poziomie przez dłuższy czas, większość użytkowników jest sfrustrowana tym zachowaniem i opuszcza aplikację, myśląc, że się zawiesiła. Aby temu przeciwdziałać, możesz zamaskować te niespójne opóźnienia na pasku postępu, pokazując, jak porusza się natychmiast i równomiernie.
5. Pokaż postęp na pasku szybciej niż rzeczywista prędkość: Surowa prędkość może być zamanifestowana przez proste postrzeganie, które możesz stworzyć, aby pasek postępu wydawał się szybszy. Możesz to osiągnąć, projektując animację tak, aby początkowo poruszała się wolno, a następnie dostosuj jej tempo do końca. Stworzy to iluzję szybkiego postępu bez utraty czasu na wykonanie zadania.
6. Zaoferuj rozproszenie uwagi: Postrzeganie czasu przez użytkownika można znacznie zmniejszyć, wprowadzając kreatywne wskaźniki postępu. Jeśli aplikacja wyświetla jakieś interesujące szczegóły tekstowe lub wizualne podczas wykonywania czynności, może to odwrócić uwagę użytkownika od czasu potrzebnego do wykonania czynności. Możesz oferować różne rzeczy, które zajmą użytkowników, na przykład krótkie filmy, ciekawostki, animacje, a nawet trywialne gry.

Alternatywa – użyj ekranów szkieletów, aby przeciwstawić się wskaźnikom postępu animacji

Chociaż wskaźniki animacji postępu mogą wstrząsnąć niemal każdym złym uczuciem, które wynika z czekania, niektórzy odbiorcy są raczej odporni na te taktyki. Wśród kilku dobrych alternatyw zmuszania użytkowników do czekania bez użycia wskaźników postępu jest metoda zwana szkieletowym ekranem. Techniki te, znane również jako tymczasowe pojemniki informacyjne, polegają na pokazywaniu użytkownikowi postępu w czasie rzeczywistym zamiast otwierania paska ładowania. Wyobraź sobie, że pusty ekran jest stopniowo wypełniany komponentami i elementami, aż do całkowitego zapełnienia. Stwarza to złudzenie, że aplikacja działa z czasem ładowania, a ich oczekiwanie jest nagradzane pokazanym postępem.

Nie tylko utrzymuje ich zaangażowanie odbiorców w witrynę lub aplikację, ale także sprawia, że ​​są gotowi do wykonania kolejnego zadania. Chociaż wskaźniki postępu są również doskonałym sposobem na zadowolenie użytkowników, nie są w stanie utrzymać energii w użytkownikach, którą utrzymuje ekran szkieletu podczas postępu ładowania.

Końcowe przemyślenia

Nie ma znaczenia, jak szybko działa nasza aplikacja lub strona internetowa, zawsze istnieje ryzyko nieproszonego czasu przetwarzania. Korzystanie z animowanych wskaźników postępu oczekiwania, takich jak wskaźniki procentowe wykonania i pokrętła ładowania, pomaga uspokoić użytkowników o trwających procesach i bieżącym stanie systemu. W rezultacie zwiększa prawdopodobieństwo, że pozostaną na stronie lub aplikacji, aby czekać na załadowanie i wykonywać pozostałe zadania. Obliczając czas potrzebny do zakończenia procesów, należy przypisać odpowiedni typ wskaźników animacji postępu.

Zapętlony wskaźnik jest idealny do operacji, które trwają od 2 do 10 sekund, podczas gdy bardziej czasochłonne operacje mogą być wspomagane przez wskaźnik wykonania procentowego. W przypadku zapętlonych animacji i ekranów szkieletowych najlepiej wybrać ekrany szkieletowe, ponieważ są one w stanie podjąć każdą akcję, która wykracza poza kilka milisekund, i nadal zapewniają użytkownikom spokój.