4 sztuczki, aby sprawić, by czasy ładowania były szybsze
Bez względu na to, jak dobrze zaprojektowany może być twój interfejs użytkownika, ludzie, którzy go używają, będą musieli poczekać, aż coś się załaduje.
Czas ładowania może zaszkodzić ogólnemu doświadczeniu. Zbyt długi czas oczekiwania na załadowanie aplikacji może sprawić, że użytkownicy będą niecierpliwi. Jeśli użytkownicy odczują to, porzucą twoją witrynę i pójdą gdzieś indziej. Na szczęście możesz zrobić kilka rzeczy, aby przyspieszyć wyczucie czasu użytkownika i sprawić, że poczuje się, jakby treść ładowała się szybciej niż w rzeczywistości.
1. Nigdy nie zmuszaj użytkowników do czekania bez udzielania im opinii
Jeśli połączenie użytkownika jest wolne, może trochę potrwać, zanim witryna zapełni zawartość na ekranie. Czas oczekiwania użytkownika rozpoczyna się od momentu rozpoczęcia działania, a najgorszy przypadek ma miejsce, gdy nie ma on żadnego wskaźnika, który strona otrzymała.
Gdy witryna nie informuje użytkowników o konieczności wykonania czynności, użytkownicy często myślą, że nie otrzymali żądania, i próbują ponownie. Mnóstwo dodatkowych kranów wynika z braku informacji zwrotnych. Aby uszczęśliwić ludzi, musimy wskazać, że coś się dzieje, zaoferować wizualną informację zwrotną.
2. Unikaj statycznych wskaźników postępu
Statyczne wskaźniki progresu to te, które mają nieruchomy obraz lub tekst, takie jak "Ładowanie ..." lub "Proszę czekać ...", aby wskazać, że żądanie zostało odebrane. Chociaż wszelkie opinie są lepsze niż brak, statyczne wskaźniki są złe UX. Użytkownicy nie mają żadnego wskaźnika, że zawartość jest ładowana, więc nie są pewni, czy proces rzeczywiście się zaciął.
3. Użyj animowanych wskaźników ładowania
Badania psychologiczne dotyczące czasu oczekiwania pokazują, że ostrość użytkownika zaczyna przesuwać się po jednej sekundzie oczekiwania bez żadnego sprzężenia zwrotnego. Aby zmniejszyć niepewność użytkownika, użyj wskaźnika postępu dla każdego działania, które trwa dłużej. (Uwaga: korzystanie z animacji nie jest zalecane dla wszystkiego, co zajmuje mniej niż sekundę, aby załadować, ponieważ użytkownicy mogą odczuwać lęk przed tym, co po prostu błysnęło i zniknęło z ekranu).
Nieskończone ładowanie błystek dla rozsądnie szybkich operacji
Najprostszą formą animowanych wskaźników jest spinner ładujący. Ten rodzaj wizualnej informacji zwrotnej po prostu stwierdza, że użytkownik musi czekać, ale nie mówi, jak długo powinien czekać. Zasadniczo powinieneś używać tego wskaźnika postępu dla szybkich akcji (2-10 sekund).
Spinner szarych linii promieniujących z punktu centralnego jest standardowym podejściem.
Ładowanie spinners są często używane wraz z gestem pull-to-refresh. Działa jako pośrednik między dwoma stanami interfejsu użytkownika i pomaga użytkownikom zrozumieć, co się dzieje, gdy ekran się zmienia.
Aplikacja Apple Mail na iOS
Animacja wykonana w procentach dla długotrwałych operacji
Ładowanie spinners nie jest dobrym sposobem, aby wskazać długotrwałe ładowanie. O wiele lepiej jest czekać na coś, jeśli wiemy, kiedy to się stanie. Dlatego dla długotrwałych operacji powinieneś dać swoim użytkownikom wyraźne wskazanie, jak długo będą czekać. Jako ogólną zasadę należy użyć animacji z procentem dla dłuższych procesów, które trwają 10 lub więcej sekund.
Kredyt graficzny: Behance
Alternatywnie możesz podać ogólny szacunkowy czas operacji. Nie staraj się być dokładnym, proste, "To może zająć minutę" może wystarczyć, aby poinformować użytkownika i zachęcić go do odejścia.
Instalowanie aktualizacji oprogramowania w systemie Mac OS X.
4. Poprawianie percepcji czasu przez użytkownika
Szybkość wczytywania treści leży w pamięci użytkownika. Podczas próby stworzenia szybszego interfejsu użytkownika można skrócić postrzegany czas, a nie rzeczywisty czas. Aby to zrobić, możesz wypełnić czas oczekiwania, używając treści, animacji lub czynności, które może wykonać użytkownik.
Paski postępu
Pasek postępu sprawia, że użytkownicy oczekują szybkiego przetworzenia działania. Sposób poruszania się paska postępu wpływa na to, jak postrzegają czas ładowania. Aby sprawić, by pasek postępu działał szybciej dla użytkowników, możesz zastosować następujące proste techniki:
- Pasek postępu nigdy nie powinien się zatrzymywać, w przeciwnym razie użytkownicy będą sądzić, że witryna się zamrozi. Najgorszym możliwym przypadkiem jest, gdy pasek postępu zbliża się do 99% i nagle zatrzymuje się. Większość użytkowników będzie sfrustrowana tym zachowaniem.
- Możesz ukryć małe opóźnienia na pasku postępu, przesuwając je natychmiastowo i stabilnie.
- Przesuń powoli pasek postępu na początku i przyspiesz go do końca, aby dać użytkownikom szybki czas realizacji.
Kredyt graficzny: Dribbble
Ekrany szkieletowe
Czas oczekiwania to właściwy czas na ekrany szkieletów (zwane również tymczasowymi kontenerami informacyjnymi). Ekran szkieletu jest zasadniczo pustą wersją strony, do której stopniowo ładuje się informacje. Stanowi alternatywę dla tradycyjnych animowanych wskaźników. Zamiast wyświetlać abstrakcyjny widget, ekrany szkieletowe przewidują, co ma nadejść, i skupiają się na postępie zamiast na czasie oczekiwania.
Obrazy szkieletu wczytują się szybko, ponieważ jest to mały obraz, który często składa się z prostych kształtów. Techniki te można wykorzystać jeszcze bardziej w aplikacjach mobilnych, ponieważ szablon szkieletu można przechowywać lokalnie razem z danymi aplikacji. Aplikacja Facebook na iOS pokazuje użytkownikom szare bloki i linie do reprezentowania obrazów i tekstu podczas ładowania aplikacji. Po zakończeniu ładowania obrazy i tekst pojawiają się w miejscu tymczasowych pojemników. Nie jest to szybsze niż posiadanie ekranu ładowania za pomocą pokrętła, ale w umyśle użytkownika wydaje się, że tak jest.
Operacje w tle
Kolejną sztuczką prędkości, której możesz użyć, są operacje w tle. Akcje zapakowane w operacje w tle mają dwie zalety - są niewidoczne dla użytkownika i występują, zanim użytkownik faktycznie o to poprosi. Daj użytkownikom inne rzeczy do skupienia się, ponieważ proces przebiega w tle. Dobrym tego przykładem jest przesyłanie zdjęć na Instagram. Gdy użytkownik wybierze zdjęcie do udostępnienia, rozpoczyna wysyłanie. Aplikacja zachęca użytkowników do dodawania tytułu i tagów podczas przesyłania zdjęcia w tle. Do czasu, gdy użytkownicy będą gotowi do naciśnięcia przycisku "Udostępnij", przesyłanie zostanie zakończone i będzie można natychmiast udostępnić swoje zdjęcie.
Progresywne ładowanie obrazu
Ponieważ nowoczesne aplikacje i witryny ładują coraz więcej obrazów, dobrze jest myśleć o ich procesie ładowania, ponieważ ma on wpływ na wydajność i wygodę użytkownika. Korzystając z efektu rozmycia, można utworzyć efekt ładowania obrazu progresywnego.
Dobrym przykładem jest Medium, który rozmywa okładkę obrazu pocztowego, a także obrazy w treści postu, dopóki obraz nie zostanie w pełni załadowany. Najpierw ładuje mały rozmazany obraz (miniaturę), a następnie przechodzi do dużego obrazu. Miniaturki są bardzo małe (tylko kilka kilobajtów), co w połączeniu z rozmytym efektem pozwala uzyskać lepsze wypełnienie niż jednolity kolor, bez poświęcania ładunku.
Średni używa rozmycia, aby utworzyć efekt ładowania obrazu
Odwracanie uwagi
Powinieneś zawsze starać się, by czekanie było przyjemniejsze, jeśli nie możesz skrócić linii. Aby zapewnić, że ludzie nie będą się nudzić , czekając, aż coś się wydarzy, zaoferuj im trochę rozrywki. Delikatne animacje mogą odciągnąć uwagę odwiedzających i sprawić, że zignorują długie czasy ładowania.
Animowany ekran powitalny. Kredyt graficzny: Ramotion (Dribbble)
Kredyt graficzny: Vimeo