Na tej stronie znajdziesz wskazówki dotyczące projektowania stron zapewniających wygodę użytkowników korzystających z wolniejszych sieci i offline.
Na jakość połączenia sieciowego może wpływać wiele czynników, między innymi:
- Słaby zasięg sieci.
- Ekstremalne warunki pogodowe.
- Przerwy w dostawie prądu.
- wejścia na stałe „martwe strefy”, np. w budynkach ze ścianami blokującymi połączenia sieciowe.
- wchodzenie w tymczasowe „strefy martwe”, na przykład podczas podróży pociągiem lub tunelu.
- Połączenia z internetem ograniczone czasowo, np. na lotniskach lub w hotelach.
- Usługi kulturalne, które wymagają ograniczonego dostępu do internetu w określone dni lub o określonych porach.
Twoim celem jako dewelopera jest zapewnienie wygodnej obsługi, która zmniejsza wpływ zmian w łączności.
Określ, co mają wyświetlać użytkownicy, gdy mają słabe połączenie sieciowe
Najpierw musisz zadać sobie pytanie, jak wygląda sukces lub błąd połączenia sieciowego w Twojej aplikacji. Pomyślne połączenie to normalne działanie aplikacji w trybie online. Błąd połączenia obejmuje zarówno zachowanie aplikacji w trybie offline, jak i w zawieszonych sieciach.
Aby określić, co zrobić w przypadku błędu połączenia, zadaj sobie te ważne pytania dotyczące UX:
- Jak długo trzeba czekać na potwierdzenie powodzenia lub niepowodzenia połączenia?
- Co można zrobić podczas określania powodzenia lub porażki?
- Co zrobić, jeśli nie uda się nawiązać połączenia?
- Jak informujecie użytkownika, co się dzieje?
Informuj użytkowników o ich bieżącym stanie i zmianie
Informuj użytkownika o stanie aplikacji i działaniach, które może wykonać w przypadku awarii sieci. Powiadomienie może na przykład brzmieć:
Masz słabe połączenie sieciowe. Nie ma problemu. Wiadomości zostaną wysłane po przywróceniu sieci.
Informuj użytkowników o poprawie lub przywróceniu połączenia sieciowego
Sposób poinformowania użytkownika o poprawie połączenia sieciowego zależy od aplikacji. Aplikacje, które traktują priorytetowo bieżące informacje, takie jak pogoda czy notowania giełdowe, powinny aktualizować się automatycznie i jak najszybciej informować użytkownika.
Zalecamy poinformować użytkownika, że aplikacja internetowa została zaktualizowana „w tle”, korzystając z wizualnego elementu, np. symbolu Material Design. Obejmuje to wykrycie zarówno obecności skryptu service worker, jak i aktualizacji zarządzanej treści. Tutaj znajdziesz przykładowy kod tej funkcji w pracy.
Przykładem może być raport Stan platformy Chrome, który publikuje notatkę dla użytkownika po zaktualizowaniu aplikacji.
Niektóre aplikacje zawsze mogą pokazywać, kiedy zostały zaktualizowane. Przydaje się to np. w przypadku aplikacji przelicznika walut.
Aplikacje prezentujące wiadomości mogą wyświetlać powiadomienia o nowych treściach po kliknięciu, które informują użytkownika o nowych treściach. Automatyczne aktualizowanie artykułu spowodowałoby utratę użytkownika.
Zaktualizuj interfejs, aby odzwierciedlał bieżący stan kontekstu
Każdy element interfejsu może mieć własny kontekst i własne zachowanie, które zmienia się w zależności od tego, czy wymaga udanego połączenia. Przykładem może być witryna e-commerce, którą można przeglądać offline, ale funkcja cen i przycisk Kup jest wyłączona do czasu ponownego nawiązania połączenia.
Inne formy stanów kontekstowych mogą obejmować dane. Na przykład aplikacja finansowa Robinhood używa kolorów i grafiki, aby informować użytkownika o godzinach otwarcia giełdy papierów wartościowych. Cały interfejs zmieni kolor na biały, a po zamknięciu rynku przyciemni się. Gdy wartość akcji rośnie lub maleje, każdy widżet akcji zmienia kolor na zielony lub czerwony w zależności od swojego stanu.
Przekaż użytkownikowi informacje na temat modelu offline.
Większość użytkowników jest przyzwyczajona do stałego połączenia sieciowego. Trzeba ich informować, jakie zmiany pojawiają się w aplikacji, gdy nie mają połączenia z internetem. Poinformuj ich, gdzie są zapisywane duże dane, i skonfiguruj ustawienia pozwalające zmienić domyślny sposób działania. Przekaż te pomysły za pomocą wielu komponentów interfejsu (np. języka informacyjnego, ikon, powiadomień, kolorów i obrazów), zamiast polegać na jednym projekcie, np. o jednej ikonie, która opowie całą historię.
Domyślnie umożliwiaj korzystanie z trybu offline
Jeśli aplikacja nie wymaga dużych ilości danych, można zapisać te dane w pamięci podręcznej. Użytkownicy mogą być frustrowani, jeśli mogą uzyskać dostęp do swoich danych tylko przez połączenie sieciowe.
Staraj się, by urządzenie było jak najbardziej stabilne. Niestabilne połączenie sprawi, że aplikacja nie będzie godna zaufania. Aplikacja, która zmniejsza wpływ awarii sieci, zachwyca użytkowników.
Witryny z wiadomościami mogą korzystać z automatycznego pobierania i zapisywania najnowszych wiadomości. Mogą np. oszczędzać dane, pobierając sam tekst, aby użytkownicy mogli czytać dzisiejsze wiadomości bez połączenia z internetem. Możesz dostosować to zachowanie do zachowania użytkownika, pobierając najczęściej wyświetlane kategorie wiadomości.
Informuj użytkownika, gdy aplikacja jest gotowa do użytku w trybie offline
Przy pierwszym wczytywaniu aplikacja internetowa musi informować użytkownika, czy jest gotowa do użytku w trybie offline. Możesz to zrobić za pomocą widżetu, który przekazuje krótką opinię w komunikacie u dołu ekranu o operacji, np. o zsynchronizowaniu sekcji lub pobraniu pliku.
Zadbaj o to, aby język, w którym się posługujesz, dotyczył odbiorców, i używaj tego samego sformułowania w każdym przypadku. Osoby, które nie mają wiedzy technicznej, często źle rozumieją słowo „offline”. Zamiast tego używaj języka opartego na działaniach, które będą zrozumiałe dla odbiorców.
Ustaw opcję „Zapisz do użytku offline” w interfejsie
Jeśli aplikacja używa dużej ilości danych, upewnij się, że masz dostępny przełącznik lub pinezkę umożliwiającą dodanie elementu do użytku offline. Pobieraj pliki automatycznie tylko wtedy, gdy użytkownik wyraził na to zgodę w menu ustawień. Dopilnuj, aby pinezka lub interfejs pobierania była widoczna dla użytkownika i nie była zakryta przez inne elementy interfejsu.
Przykładem może być odtwarzacz muzyki, który wymaga dużych plików. Użytkownik zdaje sobie sprawę z kosztów za transmisję danych, ale może chcieć korzystać z odtwarzacza offline. Pobranie muzyki do późniejszego wykorzystania wymaga od użytkownika planowania z wyprzedzeniem, więc warto przekazać mu informacje na etapie wprowadzenia.
Określ, co jest dostępne offline
Jasno przedstaw oferowane opcje. Może być konieczne pokazanie karty lub ustawienia „biblioteki offline” lub indeksu treści, aby użytkownik mógł zobaczyć, co przechowuje na urządzeniu i co musi zapisać. Upewnij się, że ustawienia są zwięzłe i jasno określ, gdzie są przechowywane dane i kto ma do nich dostęp.
Pokaż rzeczywisty koszt działania
Dla wielu użytkowników możliwość pobierania plików w trybie offline jest kojarzona z „pobieraniem”. Użytkownicy w krajach, w których połączenia sieciowe regularnie zawodzą lub są niedostępne, często udostępniają treści innym użytkownikom lub zapisują treści do użytku offline, gdy mają połączenie.
Użytkownicy korzystający z pakietów danych czasem unikają pobierania dużych plików ze obawy przed kosztami. Warto więc wyświetlać powiązany koszt, aby użytkownicy mogli przeprowadzać aktywne porównanie dla określonego pliku lub zadania. Na przykład wspomniana aplikacja muzyczna może wykryć, czy użytkownik korzysta z pakietu danych, i wyświetlić rozmiar pliku, aby użytkownik mógł zobaczyć koszt pliku.
Pomoc w zapobieganiu atakom hakerów
Użytkownicy często hakują strony, nie zdając sobie z tego sprawy. Na przykład zanim powstały działające w chmurze aplikacje internetowe do udostępniania plików, było powszechne, że użytkownicy zapisywali duże pliki i dołączali je do e-maili, aby mogli je edytować na innym urządzeniu. Dobry interfejs rozwiązuje problem, którego próbują rozwiązać użytkownicy. na przykład umożliwić udostępnianie dużych plików na różnych urządzeniach, zamiast ułatwiać użytkownikom załączanie dużych plików do e-maili.
Możliwość przenoszenia doświadczenia z jednego urządzenia na inne
Podczas tworzenia sieci pod kątem niestabilnych sieci staraj się przeprowadzać synchronizację, gdy tylko jakość połączenia się poprawi, aby można było przenieść dane. Wyobraź sobie na przykład, że aplikacja turystyczna traci połączenie sieciowe w trakcie rezerwacji. Po ponownym nawiązaniu połączenia aplikacja zsynchronizuje się z kontem użytkownika, co pozwoli mu kontynuować rezerwację na komputerze.
Poinformuj użytkownika, w jakim stanie są jego dane. Możesz na przykład pokazać, czy aplikacja została zsynchronizowana. W miarę możliwości ucz je, ale nie przytłaczaj ich zbyt dużą ilością tekstu.
Twórz projekty promujące integrację społeczną
Podczas projektowania wrażenia użytkownika staraj się promować integrację społeczną, udostępniając odpowiednie elementy graficzne, prosty język, standardowe ikony i znaczące obrazy, które pomogą użytkownikowi wykonać działanie lub zadanie, nie w tym przeszkadza.
Używaj prostego i zrozumiałego języka
Dobry UX nie wystarczy zaprojektować interfejs. Obejmuje ścieżkę, jaką przechodzi użytkownik w aplikacji, i wszystko, co napotyka, w tym język, za pomocą którego aplikacja opisuje tę podróż. Objaśniając komponenty UI lub stan aplikacji, unikaj żargonu technicznego. Słowo „offline” często nie jest dostatecznie jasne, by określić działanie aplikacji.
Korzystaj z wielu różnych urządzeń, aby ułatwić użytkownikom pracę
Użyj języka, koloru i komponentów wizualnych, aby pokazać stan lub zmianę stanu. Używanie samego koloru do pokazywania stanu może być trudne do zauważenia dla użytkowników, a nawet całkowicie niedostępne dla użytkowników z niepełnosprawnością wzrokową. W przypadku stron internetowych zwykle w przypadku wyłączonych elementów w kolorze szarym pojawia się informacja o tym, że aplikacja działa w trybie offline. Może to budzić wątpliwości co do jej możliwości w trybie offline, zwłaszcza gdy informacje o stanie są wyświetlane tylko kolorem.
Aby uniknąć nieporozumień, informuj użytkownika o stanach aplikacji na różne sposoby, na przykład za pomocą kolorów, etykiet i komponentów interfejsu.
Używaj ikon, które oddają znaczenie
Pamiętaj, aby obok ikon umieścić czytelne etykiety tekstowe. Same ikony mogą być mylące, zwłaszcza że pojęcie „offline” w internecie jest stosunkowo nowe. Mylące ikony to również użycie dyskietki reprezentującej słowo „zapisz”, co może być niezrozumiałe dla młodszych użytkowników, którzy nigdy nie zobaczyli dyskietki, a także ikony menu z „hamburgerem”.
Wprowadzając ikonę offline, pamiętaj o zachowaniu spójności ze standardowymi treściami wizualnymi i dodaj etykietę tekstową oraz opis. Możesz na przykład użyć ikony pobierania, która oznacza zapisywanie w trybie offline, a ikony synchronizacji – działania polegającego na synchronizacji. Zachowaj ostrożność, używając ikon do przedstawiania stanu, który może być interpretowany jako działanie zapisu lub pobierania.
Więcej inspiracji znajdziesz w zestawie ikon Material Design.
Używaj układów szkieletowych i innych mechanizmów informacji zwrotnych
Podczas ładowania treści pokaż użytkownikowi, że aplikacja się wczytuje, aby nie uważał, że działa. Jednym ze sposobów jest użycie układu szkieletowego, czyli szkieletowej wersji aplikacji, która wyświetla się podczas wczytywania treści. Rozważ też wykorzystanie interfejsu modułu wstępnego ładowania z etykietą tekstową informującą użytkownika o tym, że aplikacja się wczytuje, lub delikatnie pulsującej animacji szkieletu, która sprawia, że urządzenie działa i wczytuje się. Zapewnia to użytkownika o tym, że coś się dzieje, i zapobiega ponownemu przesyłaniu i odświeżaniu stron.
Pokaż stan działania, przesyłając opinię. Jeśli na przykład użytkownik edytuje dokument offline, rozważ zmianę projektu opinii tak, aby różnił się on od trybu online, ale nadal zawierał informację, że plik został zapisany i będzie się synchronizować po połączeniu z siecią. Dzięki temu użytkownik wie, jak działa aplikacja, a jednocześnie zapewnia pewność, że jej zadanie lub działanie zostało zapisane, co zwiększa pewność, że będzie z niej korzystać.
Nie blokuj treści
W niektórych aplikacjach użytkownik może wywołać działanie takie jak utworzenie nowego dokumentu. Niektóre aplikacje próbują połączyć się z serwerem w celu zsynchronizowania nowego dokumentu. Aby to pokazać, wyświetlają uciążliwe okno modalne zajmujące cały ekran. Takie rozwiązanie może się udać, jeśli użytkownik ma stabilne połączenie sieciowe, ale jeśli sieć jest niestabilna, nie będzie mógł uciec z tej czynności, więc interfejs zablokuje mu dostęp do innych funkcji.
Unikaj żądań sieciowych, które blokują treści. Pozwól użytkownikowi kontynuować przeglądanie Twojej aplikacji i zadań w kolejce, które zostaną wykonane i zsynchronizowane po poprawieniu połączenia.
Projektuj z myślą o kolejnym miliardzie
W wielu regionach urządzenia o niskiej jakości są powszechne, łączność jest zawodna, a dla wielu użytkowników przesyłanie danych jest bardzo drogie. Zdobądź zaufanie użytkowników, okazując przejrzystość i oszczędność danych. Zastanów się, jak pomóc użytkownikom mającym słabe połączenie i uprościć interfejs, aby przyspieszyć zadania. Zawsze staraj się zapytać użytkowników przed pobraniem treści z dużą ilością danych.
Użytkownikom z opóźnionymi połączeniami oferuj opcje przepustowości o niskiej przepustowości. Udostępniaj mniejsze zasoby w przypadku wolniejszych połączeń sieciowych lub oferuj możliwość wyboru zasobów o wysokiej lub niskiej jakości.
Podsumowanie
Wykształcenie ma kluczowe znaczenie dla wygody użytkowników w trybie offline, ponieważ użytkownicy ich nie znają. Aby mu pomóc w nauce, staraj się tworzyć powiązania ze znanymi pojęciami, na przykład wyjaśniając, że pobieranie danych na później jest równoznaczne z udostępnianiem ich offline.
Podczas projektowania pod kątem niestabilnych połączeń sieciowych pamiętaj o tych wskazówkach:
- Projektuj rozwiązania pod kątem powodzenia, awarii i niestabilności połączenia sieciowego.
- Dane mogą być drogie, więc miej na uwadze użytkownika.
- Dla większości użytkowników na całym świecie środowisko technologiczne jest niemal wyłącznie mobilne.
- Słabe ekrany to powszechne urządzenia, które mają ograniczoną ilość miejsca, pamięci i mocy obliczeniowej, małe ekrany i małą jakość ekranu dotykowego. W procesie projektowania należy uwzględnić wydajność.
- Zezwalaj użytkownikom na przeglądanie Twojej aplikacji, gdy są offline.
- Informuj użytkowników o ich bieżącym stanie i zmianach w stanach.
- Jeśli aplikacja nie wymaga dużej ilości danych, spróbuj włączyć tryb offline domyślnie.
- Jeśli w aplikacji jest dużo danych, poinformuj użytkowników o sposobie pobierania aplikacji do użytku offline.
- Zapewnij możliwość przenoszenia doświadczenia między urządzeniami.
- Wykorzystaj język, ikony, obrazy, typografię i kolory, aby przekazać użytkownikowi swoje pomysły.
- Zadbaj o spokój klienta i przekaż mu swoją opinię, aby pomóc.