Przewodnik po tworzeniu stron internetowych na potrzeby powolnych sieci i offline.
W tym artykule znajdziesz wskazówki dotyczące projektowania, które pomogą Ci zadbać o wygodę użytkowników zarówno w powolnych sieciach, jak i w trybie offline.
Na jakość połączenia sieciowego może mieć wpływ wiele czynników, takich jak:
- Słaby zasięg w przypadku dostawcy.
- Ekstremalne warunki pogodowe.
- Przerwy w dostawie prądu.
- wejścia do trwałych „stref martwych”, takich jak budynki ze ścianami blokującymi połączenia sieciowe.
- wchodzenie do tymczasowych „stref martwych”, takich jak podróż pociągiem i przejazd przez tunel.
- ograniczone czasowo połączenia z internetem, np. na lotniskach lub w hotelach.
- działania kulturalne, które w określonych godzinach lub dniach wymagają ograniczonego lub braku dostępu do internetu;
Zależy Ci na wrażeniach użytkowników, które zmniejszają wpływ zmian w połączeniach.
Określ, co mają wyświetlać użytkownicy, gdy mają słabe połączenie sieciowe
Pierwsze pytanie, jakie należy sobie zadać, brzmi: jak wygląda udane i niepowodzenie połączenia sieciowego. Udane połączenie oznacza normalne działanie aplikacji w trybie online. Błąd połączenia może być jednak zarówno stanem aplikacji offline, jak i jej działaniem w przypadku powolnej sieci.
Gdy myślisz o sukcesie lub awarii połączenia sieciowego, musisz zadać 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 należy zrobić w przypadku niepowodzenia?
- Jak informujecie użytkownika o powyższym?
Informuj użytkowników o ich bieżącym stanie i zmianie
Poinformuj użytkownika o czynnościach, które może wykonać po awarii sieci, oraz o bieżącym stanie aplikacji. 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 Twojej aplikacji. Aplikacje (np. aplikacja na giełdzie papierów wartościowych), które traktują priorytetowo bieżące informacje, powinny być automatycznie aktualizowane i jak najszybciej powiadamiać użytkownika.
Zalecamy, aby poinformować użytkownika, że aplikacja internetowa została zaktualizowana „w tle”, za pomocą wizualnego sygnału, takiego jak element Material Design. Obejmuje to wykrycie zarówno obecności skryptu service worker, jak i aktualizacji zarządzanej treści. Przykładowy kod tej funkcji znajdziesz tutaj.
Przykładem może być raport Stan platformy Chrome, który publikuje notatkę dla użytkownika po zaktualizowaniu aplikacji.
W dobrze widocznym miejscu możesz też pokazać, kiedy aplikacja była ostatnio aktualizowana. Przyda się to np. w aplikacji do przeliczania walut.
Aplikacje takie jak aplikacje z wiadomościami mogą wyświetlać proste powiadomienie o nowych treściach, które informują użytkownika o aktualizacji. Automatyczne aktualizacje spowodowałoby, że użytkownicy utracą swoje miejsce.
Zaktualizuj interfejs, aby odzwierciedlał bieżący stan kontekstu
Każdy fragment UI może mieć własny kontekst i swoje funkcje. Te opcje będą się zmieniać 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. Przycisk kupowania i ceny będą wyłączone do czasu ponownego nawiązania połączenia.
Inne formy stanów kontekstowych mogą obejmować dane. Na przykład aplikacja finansowa o nazwie Robinhood pozwala użytkownikom kupować akcje oraz wykorzystuje kolory i grafikę do powiadamiania użytkowników o otwarciu rynku. Cały interfejs zmieni kolor na biały, a po zamknięciu rynku przyciemni się. Gdy wartość akcji rośnie lub maleje, poszczególne widżety zmieniają kolor na zielony lub czerwony w zależności od swojego stanu.
Przekaż użytkownikowi informacje na temat modelu offline.
Tryb offline to nowy model myślowy dla każdego. Informuj użytkowników o zmianach, które się zmienią, gdy nie będą połączeni z siecią. Poinformuj ich, gdzie są zapisywane duże dane, i skonfiguruj ustawienia pozwalające zmienić domyślne zachowanie. Zadbaj o to, aby przekazywać te pomysły zbiorczo, używając wielu komponentów interfejsu, takich jak komunikaty zachęcające do działania, ikony, powiadomienia, kolory i obrazy, zamiast polegać na jednym wyborze, np. o konkretnej ikonie.
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ć coraz bardziej frustrowani, gdy mogą uzyskać dostęp do swoich danych tylko przez połączenie sieciowe. Postaraj się, aby działanie usługi było jak najstabilniejsze. Niestabilne połączenie może sprawić, że Twoja aplikacja będzie niewiarygodna, a aplikacja, która zmniejsza skutki awarii sieci, będzie dla użytkownika atrakcyjna.
Witryny z wiadomościami mogą skorzystać z automatycznego pobierania i zapisywania najnowszych wiadomości, aby użytkownicy mogli czytać dzisiejsze wiadomości bez połączenia z internetem, na przykład pobierać tekst bez obrazów z artykułem. Dostosuj się też do zachowań użytkowników. Jeśli na przykład najczęściej oglądają oni sekcję sportową, pobierz ją priorytetowo.
Informuj użytkownika, gdy aplikacja jest gotowa do użytku w trybie offline
Przy pierwszym wczytywaniu aplikacji internetowej musisz poinformować użytkownika, czy jest gotowa do użytku w trybie offline. Do tego celu użyj widżetu, który przekazuje krótką opinię na temat operacji w komunikacie u dołu ekranu, np. o zsynchronizowaniu sekcji lub pobraniu pliku danych.
Pomyśl o języku, którego używasz, żeby mieć pewność, że będzie on odpowiedni dla Twoich odbiorców. Zadbaj o to, aby komunikaty były takie same we wszystkich instancjach, w których jest używane. Termin „offline” jest zazwyczaj niezrozumiały dla użytkowników bez wiedzy technicznej, więc używaj języka opartego na działaniu, które będą zrozumiałe dla odbiorców.
Spraw, aby opcja „zapisz w trybie offline” stała się oczywistym elementem interfejsu aplikacji z dużą ilością danych.
Jeśli aplikacja używa dużych ilości danych, upewnij się, że istnieje przełącznik lub kod PIN, który umożliwia dodanie elementu do użytku offline, a nie automatycznego pobierania, chyba że użytkownik wyraźnie poprosił o to w menu ustawień. Upewnij się, że pinezka lub interfejs pobierania nie jest zasłonięta przez inne elementy interfejsu i funkcja jest oczywista dla użytkownika.
Przykładem może być odtwarzacz muzyki, który wymaga dużych plików danych. Użytkownik zna koszty związane z przesyłaniem danych, ale może chcieć korzystać z odtwarzacza offline. Pobranie muzyki do późniejszego wykorzystania wymaga od użytkownika planowania z wyprzedzeniem, więc podczas wdrażania może być wymagane podanie informacji na ten temat.
Określ, co jest dostępne offline
Jasno przedstaw zaproponowaną opcję. Być może konieczne będzie pokazanie karty lub ustawienia z „biblioteką offline” lub indeksem treści, aby użytkownik mógł łatwo zobaczyć, co jest zapisane na telefonie, a co musi zachować. Pamiętaj, aby ustawienia były zwięzłe i jasno informowały, gdzie będą 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 mogą unikać pobierania dużych plików ze obawy przed kosztami, warto więc wyświetlać powiązane koszty, aby użytkownicy mogli przeprowadzać aktywne porównanie konkretnego pliku lub zadania. Jeśli na przykład powyższa aplikacja muzyczna może wykryć, że użytkownik korzysta z pakietu danych, i wyświetlić rozmiar pliku, by użytkownik wiedział, ile kosztuje plik.
Pomoc w zapobieganiu atakom hakerów
Użytkownicy często hakują różne rzeczy, nie zdając sobie z tego sprawy. Na przykład przed aplikacjami internetowymi do udostępniania plików działającymi w chmurze użytkownicy często zapisywali duże pliki i dołączali je do e-maili, aby mogli je edytować na innym urządzeniu. Nie skupiaj się na atakach hakerów, ale skup się na tym, co klient chce osiągnąć. Inaczej mówiąc, zamiast zastanawiać się, jak załączać duże pliki do użytku w jednym miejscu, lepiej rozwiązać problem z udostępnianiem dużych plików na wielu urządzeniach.
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. Brak możliwości przenoszenia doświadczenia może być bardzo drażniący dla użytkowników.
Informować użytkownika o bieżącym stanie jego danych. Możesz na przykład pokazać, czy aplikacja została zsynchronizowana. W miarę możliwości ucz je, ale staraj się nie przytłaczać ich komunikatami.
Twórz projekty promujące integrację społeczną
Podczas projektowania staraj się promować integrację społeczną, udostępniając odpowiednie elementy graficzne, prosty język, standardowe ikony i znaczące obrazy, które prowadzą użytkownika do wykonania działania lub zadania, a nie utrudniają jego postęp.
Używaj prostego, zwięzłego języka
Dobry UX nie wystarczy dobrze zaprojektowany interfejs. Zawiera ona ścieżkę użytkownika i słowa użyte w aplikacji. Unikaj żargonu technicznego, objaśniając stan aplikacji lub poszczególnych jej komponentów interfejsu. Pamiętaj, że wyrażenie „aplikacja offline” może nie przekazywać użytkownikowi bieżącego stanu aplikacji.
Korzystaj z wielu różnych urządzeń, aby ułatwić użytkownikom pracę
Użyj języka, koloru i komponentów wizualnych, aby zademonstrować zmianę stanu lub bieżący stan. Używanie tylko kolorów do przedstawiania stanu może nie zostać zauważone przez użytkownika i może być niedostępne dla użytkowników z niepełnosprawnością wzrokową. Projektanci często traktują też interfejs offline jako wyszarzony, choć w internecie może to mieć znaczenie. Wyszarzony interfejs, np. elementy wejściowe formularza, również oznacza, że dany element jest wyłączony. Może to być mylące, jeśli do przedstawienia stanu używasz tylko koloru.
Aby uniknąć nieporozumień, wyrażaj różne stany na kilka sposobów, np. za pomocą kolorów, etykiet i komponentów interfejsu.
Używaj ikon, które oddają znaczenie
Zadbaj o prawidłowe przekazywanie informacji za pomocą znaczących etykiet tekstowych oraz ikon. Samo stosowanie ikon może być problematyczne, ponieważ koncepcja trybu offline w internecie jest stosunkowo nowa. Użytkownicy mogą nie rozpoznać użytych ikon. Na przykład użycie dyskietki do zapisu ma sens dla starszych pokoleń, ale ta metafora może zmylić młodych użytkowników, którzy nigdy nie widzieli takiej dyskietki. I tak też ikona menu „hamburger” wprowadza użytkowników w błąd, gdy wyświetla się bez etykiety.
Wprowadzając ikonę offline, staraj się zachować spójność ze standardowymi elementami wizualnymi (jeśli istnieją), a także dodaj etykietę tekstową i opis. Na przykład zapisanie w trybie offline może być typową ikoną pobierania, a w przypadku czynności synchronizacji – ikoną synchronizacji. Zamiast pokazywać stan sieci, niektóre działania mogą być interpretowane jako zapisywanie w trybie offline. Myśl o działaniu, które próbujesz przekazać, zamiast przedstawić użytkownikowi abstrakcyjne pojęcie. Na przykład zapisywanie i pobieranie danych będzie oparte na działaniach.
Tryb offline może oznaczać różne rzeczy w zależności od kontekstu, np. pobieranie, eksportowanie, przypinanie itp. Aby dowiedzieć się więcej, zapoznaj się z zestawem ikon Material Design.
Używanie szkieletowych układów z innymi mechanizmami sprzężenia zwrotnego
Układ szkieletowy to w zasadzie szkieletowa wersja aplikacji, która wyświetla się podczas wczytywania treści. Pomaga to pokazać użytkownikowi, że treść zostanie wczytana. Rozważ też wykorzystanie interfejsu modułu wstępnego ładowania z etykietą tekstową informującą użytkownika o tym, że aplikacja się wczytuje. Przykładem może być pulsowanie treści schematycznych, dając aplikacji wrażenie, że aplikacja wciąż żyje. Zapewnia to użytkownika o tym, że coś się dzieje, i zapobiega ponownemu przesyłaniu i odświeżaniu aplikacji.
Nie blokuj treści
W niektórych aplikacjach użytkownik może wywołać określone działanie, na przykład utworzenie nowego dokumentu. Niektóre aplikacje będą próbowały połączyć się z serwerem, aby zsynchronizować nowy dokument i zademonstrować to, wyświetlając uciążliwe okno modalne zajmujące cały ekran. Takie rozwiązanie może się sprawdzić, gdy użytkownik ma stabilne połączenie sieciowe, ale jeśli sieć jest niestabilna, nie będzie mógł uciec od tej czynności, a interfejs skutecznie zablokuje mu możliwość wykonywania innych czynności. Należy unikać żądań sieciowych, które blokują treści. Pozwól użytkownikowi na dalsze przeglądanie Twojej aplikacji i zadań w kolejce, które będą wykonywane i synchronizowane po poprawieniu połączenia.
Demonstruj stan działania, przekazując użytkownikom opinie. Jeśli na przykład użytkownik edytuje dokument, rozważ zmianę projektu opinii tak, aby różnił się on od trybu online, ale nadal zawierał informację, że plik został „zapisany” i będzie synchronizowany po połączeniu sieciowym. Dzięki temu użytkownik uzyska informację o dostępnych stanach i upewni się, że jego zadanie lub działanie zostało zapisane. Dzięki temu użytkownicy mogą coraz chętniej korzystać z Twojej aplikacji.
Projektuj z myślą o kolejnym miliardzie
W wielu regionach urządzenia o niższej jakości są powszechne, łączność jest zawodna, a dla wielu użytkowników transmisja danych jest niestabilna. Na zaufanie użytkowników musisz zadbać o przejrzystość i oszczędność danych. Zastanów się, jak pomóc użytkownikom mającym połączenie o słabej jakości i uprościć interfejs, aby przyspieszyć wykonywanie zadań. Zawsze staraj się pytać użytkowników przed pobraniem treści z dużą ilością danych.
Użytkownikom o słabych połączeniach oferuj opcje niskiej przepustowości. Jeśli połączenie sieciowe jest powolne, udostępnij małe zasoby. Zaoferuj możliwość wyboru komponentów o wysokiej lub niskiej jakości.
Podsumowanie
Edukacja ma kluczowe znaczenie dla wygody użytkowników w trybie offline, ponieważ użytkownicy nie znają tych pojęć. Staraj się tworzyć powiązania ze znanymi Ci elementami, np.pobieranie do późniejszego użycia jest równoznaczne z udostępnianiem w trybie 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.
- Mniej popularne urządzenia to urządzenia powszechnie używane, które mają ograniczoną ilość miejsca, pamięci i mocy obliczeniowej oraz małe ekrany i mniejszą jakość ekranu dotykowego. Zadbaj o to, aby w procesie projektowania uwzględniano 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.
- Użyj razem języka, ikon, obrazów, typografii i kolorów, aby przekazać użytkownikowi swoje pomysły.
- Zadbaj o spokój klienta i przekaż mu swoją opinię, aby pomóc.