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

Jeśli kiedykolwiek korzystałeś z komputera, równie dobrze możesz zdawać sobie sprawę z animowanego symbolu Windows, który pojawia się podczas uruchamiania systemu. Przekształcenie w to, co widzimy dzisiaj, wymagało ewolucji w projektowaniu i animacji, ale w systemie Windows 1995 obraz w ogóle się nie poruszał. Niektórzy z was mogą się zastanawiać, po co w ogóle używać tych animowanych wskaźników?

Ale zastanów się, czy wolisz czekać i oglądać pusty ekran, aby zobaczyć, jak Twoje działanie zostało zakończone? Albo bawić się czymś znaczącym, dopóki ekran nie pojawi się ponownie?

Wśród 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 swojego działania i odpowiednio na nie reaguje. Animowane wskaźniki postępu są w stanie pokazać aktualny kontekst operacji niemal w dowolnym momencie bez korzystania z rozbudowanych funkcji tekstowych lub wideo. Dzięki temu idealnie nadają się do dostarczania statusu systemu, gdy postęp jest kończony 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 można go uruchomić w niezmiennej spójności. Do równania zawsze dodawane są pewne czynniki, które mogą spowolnić działanie 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 czynione są postępy. Aby to zrobić, musisz przekazać użytkownikowi opinię, aby czas nie nadwerężył jego cierpliwości.

Zachowaj uwagę użytkowników dzięki informacjom zwrotnym

Czas oczekiwania rozpoczyna się niemal natychmiast po wykonaniu czynności przez użytkownika. Ale co gorsza, to brak odpowiedniego wskaźnika reprezentującego postęp systemu. Użytkownik naturalnie zakłada, że ​​aplikacja nie zareagowała, gdy nie wyświetla powiadomienia, że ​​system zajmuje trochę czasu. Wyniki mogą obejmować niesamowitą liczbę kliknięć, a nawet porzucenie przez użytkownika, tylko dlatego, że aplikacja nie dostarczyła informacji zwrotnych na czas.

Działania, 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 oznaczać odpowiedzi na żądanie, nawet jeśli jest ono składane w tle. Dlatego należy wprowadzić animowany wskaźnik, który będzie informował o postępie systemu aplikacji w dowolnym momencie.

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

Zwykle, gdy ładowanie aplikacji trwa krócej 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ótkie opóźnienie staje się zauważalne, 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ę spod kontroli. Należy zauważyć, że akcja, która ładuje się krócej niż jedna sekunda, niekoniecznie wymaga wskaźnika animacji, ale obraz może to zrobić. Jest to zalecane, ponieważ animacja, która miga 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 przedłużonego oczekiwania i utrzymania zaangażowania użytkownika w aplikacji lub witrynie.

Rodzaje wskaźników postępu

1. Nieokreślony : animowane wskaźniki oczekiwania mają na celu komunikowanie się z użytkownikiem i informowanie go o ostatniej czynności użytkownika. Najczęstszym i raczej najprostszym rodzajem wskaźnika oczekiwania jest „Nieokreślony”. Tego typu wskaźniki informują użytkowników, aby czekali na zakończenie działania, nie zdając sobie sprawy z czasu, jaki może zająć ukończenie postępu. Jest prawie zrozumiałe, że wskaźnik postępu nieokreślonego powinien być używany do szybkich akcji, najlepiej w ciągu 2-10 sekund. W każdej chwili dłużej i może to wpłynąć na cierpliwość użytkownika. Może to zwiększyć współczynnik odrzuceń witryny i porzuceń aplikacji.
2. Determinate : W przypadku wskaźnika postępu „Determinate” czas animacji jest dość rozciągnięty. Tego typu wskaźniki informują użytkownika o przybliżonym lub dokładnym czasie potrzebnym na ukończenie postępu. Są one raczej bardziej popularnym rodzajem wskaźników oczekiwania, ponieważ pokazują postęp od miejsca, w którym się rozpoczął, ile zostało osiągnięte i ile więcej zajmie zabicie czasu oczekiwania. Pomaga to użytkownikowi zachować pewność co do poczynionych postępów i pokazywanych przez animację, jednocześnie zwiększając jego chęć pozostania zaangażowanym w stronę lub aplikację.

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

• Zapętlona animacja : Zapętlona animacja ma za zadanie reprezentować postęp bez pokazywania przybliżonego lub dokładnego czasu ładowania, jaki zajmie. 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 pokazywać tę samą powtarzającą się animację bez żadnych informacji dotyczących dokładnego czasu, jaki może zająć ukończenie postępu. Poza tym obejmował wszystko, od funkcji uruchamiania, konfiguracji 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 wykonania procentowego : Jak sama nazwa wskazuje, wskaźnik wykonania procentowego pokazuje postęp wczytywania, wypełniając zakres animacji, kółko lub pasek od 0% do 100%. Ponieważ pokazuje czas potrzebny na ukończenie postępu, wskaźnik procentowy jest klasyfikowany w określonych wskaźnikach oczekiwania. W przypadku tej konkretnej jakości najlepiej jest używać wskaźnika procentowego wykonania zadań, których wykonanie wymaga więcej niż 10 sekund.

  

  

  Według badań 10 sekund to próg przeciętnej cierpliwości użytkownika. Poza tym użytkownik staje się lekkomyślny i niecierpliwy, 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 przywiązanego do witryny lub aplikacji bez narażania ich cierpliwości.

Jak skutecznie korzystać ze wskaźników postępu?

Skuteczne wykorzystanie wskaźników postępu w aplikacjach i witrynach internetowych może oznaczać różnicę w sukcesie i porażce. Oto kilka wskazówek, które pomogą Ci upewnić się, że Twoje wskaźniki postępu osiągają odpowiednią wartość.

1. Informuj użytkownika o przyczynie oczekiwania : Początkowym błędem jest utrzymywanie użytkownika nieświadomego postępu ładowania, który odbywa się w tle. Zwiększa to ich skłonność do utraty cierpliwości i wychodzenia z aplikacji lub strony internetowej. Możesz na bieżąco informować użytkownika, wyświetlając animowany wskaźnik postępu wraz z tekstem w celu dodatkowego zrozumienia. Możesz pokazać, który proces jest konkretnie celem. Na przykład możesz pokazać postęp oczekiwania w grze wideo za pomocą paska ładowania i tekstu, który wskazuje, 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 zabieraj rzeczy do mikroskali. Możesz utrzymać zaangażowanie użytkownika, podając proste oszacowanie. Wygłupianie się z obietnicami, których nie możesz dotrzymać, może zirytować użytkowników i zmusić ich do odejścia.
3. Pokaż dokładną ilość wymaganego czasu : Jednak w przypadku operacji, które zazwyczaj zajmują więcej czasu niż średni limit oczekiwania użytkownika, wybór określonych wskaźników postępu będzie mądrzejszym posunięciem. Idealnym wyborem byłby procentowy wskaźnik postępu, ponieważ w centrum uwagi znalazł się dokładny czas ładowania. W przypadku operacji, które są jeszcze dłuższe do wykonania, rozważ użycie liczby kroków w celu podkreślenia poczynionych postępów.
4. Keep Up the Progress : Staraj się dążyć do spójności na pasku postępu podczas ładowania zadań. Po kilku doświadczeniach pasek postępu zmusza użytkowników do określenia oczekiwania, jak szybko akcja zostanie ukończona. W związku z tym wszelkie zamrożenia postępu mogą poważnie uderzyć w oczekiwania użytkowników. Na przykład, gdy pasek osiąga 99% i pozostaje w takim stanie przez dłuższy czas, większość użytkowników jest sfrustrowana tym zachowaniem i pozostawia aplikację z przekonaniem, że się zamroziła. Aby temu przeciwdziałać, możesz zamaskować te niespójne opóźnienia na pasku postępu, pokazując, jak porusza się on natychmiast i równomiernie.
5. Pokazuj postęp na pasku szybciej niż rzeczywista prędkość : Surowa prędkość może objawiać się prostą percepcją, którą 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ę powoli i nabierała tempa, gdy kończy się. Stworzy to iluzję szybkiego postępu bez poświęcania czasu na wykonanie zadania.
6. Zaoferuj rozproszenie : postrzeganie czasu przez użytkownika można znacznie zmniejszyć, wprowadzając kreatywne wskaźniki postępu. Jeśli aplikacja pokazuje interesujące tekstowe lub wizualne szczegóły podczas robienia postępów, może to odwrócić uwagę użytkownika od czasu potrzebnego na ukończenie akcji. Możesz oferować różne rzeczy, aby użytkownicy byli zajęci, na przykład krótkie filmy, ciekawe fakty, animacje, a nawet trywialne gry.

Alternatywa - użyj ekranów szkieletów, aby przeciwdziałać wskaźnikom postępu animacji

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

Nie tylko utrzymuje zaangażowanie odbiorców w witrynie lub aplikacji, ale także sprawia, że ​​są gotowi do wykonania kolejnego zadania. Chociaż wskaźniki postępu są również doskonałym sposobem na usatysfakcjonowanie użytkowników, nie utrzymują one energii w użytkownikach, których ekran szkieletowy utrzymuje podczas postępu ładowania.

Końcowe przemyślenia

Nie ma znaczenia, jak szybko działa nasza aplikacja lub strona internetowa, zawsze istnieje szansa na nieproszony czas przetwarzania. Korzystanie z animowanych wskaźników postępu oczekiwania, takich jak wskaźniki ukończenia procentowego i pokrętła ładowania, pomaga uspokoić użytkowników o trwających procesach i bieżącym stanie systemu. W rezultacie zwiększa to prawdopodobieństwo, że pozostaną na stronie lub w aplikacji będą czekać na załadowanie i kontynuować pozostałe zadania. Obliczając czas potrzebny do zakończenia procesów, należy przypisać mu odpowiedni rodzaj 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 można wspomóc wskaźnikiem wykonania procentowego. W przypadku zapętlonych animacji i ekranów szkieletowych najlepiej jest wybrać ekrany szkieletowe, ponieważ są one w stanie podjąć każdą akcję, która wykracza poza kilka milisekund, i nadal są chłodne dla użytkowników.