Na tej stronie znajdziesz wskazówki dotyczące projektowania, które pomogą Ci zapewnić użytkownikom świetne wrażenia w przypadku wolnych sieci i trybu offline.
Na jakość połączenia z internetem może mieć wpływ wiele czynników, takich jak:
- słaby zasięg sieci operatora;
- ekstremalne warunki pogodowe;
- przerwy w dostawie prądu;
- Wchodzenie w stałe „martwe strefy”, np. w budynkach z ścianami blokującymi połączenia z siecią.
- Wchodzenie w tymczasowe „martwe strefy”, np. podczas podróży pociągiem przez tunel.
- połączenia internetowe z ograniczonym czasem dostępu, np. na lotniskach czy w hotelach;
- praktyki kulturowe, które wymagają ograniczonego lub braku dostępu do internetu w określonych porach lub dniach;
Twoim celem jako dewelopera jest zapewnienie wygodnej obsługi, która ogranicza wpływ zmian w połączeniach.
Wybieranie tego, co wyświetlać użytkownikom, gdy mają słabe połączenie z internetem
Pierwsze pytanie, jakie należy zadać, to jak wyglądają w aplikacji udane i nieudane połączenia z siecią. Udane połączenie to normalne działanie aplikacji w internecie. Niepowodzenie połączenia obejmuje zarówno działanie aplikacji w trybie offline, jak i w sieciach o niskiej przepustowości.
Aby określić, jak postępować w przypadku awarii połączenia, zadaj sobie te ważne pytania dotyczące UX:
- Jak długo czekasz, aby określić, czy połączenie się udało?
- Co możesz zrobić, gdy ustalane jest powodzenie lub niepowodzenie?
- Co zrobić, jeśli nie uda się nawiązać połączenia?
- Jak poinformować użytkownika, co się dzieje?
Informowanie użytkowników o ich bieżącym stanie i o zmianie stanu
Poinformuj użytkownika o stanie aplikacji i działaniach, które może wykonać w przypadku awarii sieci. Powiadomienie może na przykład zawierać takie informacje:
Wygląda na to, że masz słabe połączenie z internetem. Nie ma problemu. Wiadomości zostaną wysłane, gdy sieć zostanie przywrócona.
Informowanie użytkowników o poprawie lub przywróceniu połączenia z siecią
Sposób poinformowania użytkownika o poprawie połączenia z siecią zależy od aplikacji. Aplikacje, które stawiają na pierwszym miejscu aktualne informacje, takie jak prognozy pogody czy wskaźniki giełdowe, powinny automatycznie się aktualizować i informować użytkownika tak szybko, jak to możliwe.
Zalecamy, aby poinformować użytkownika o aktualizacji aplikacji internetowej „w tle” za pomocą elementu wizualnego, np. elementu toast nawiązującego do Material Design. Polega to na wykrywaniu obecności usługi workera i aktualizacji treści zarządzanych przez nią. Przykład kodu tej funkcji znajdziesz tutaj.
Przykładem jest Stan platformy Chrome, który wyświetla użytkownikowi powiadomienie po zaktualizowaniu aplikacji.
Niektóre aplikacje mogą zawsze wyświetlać datę ostatniej aktualizacji. Jest to szczególnie przydatne w przypadku aplikacji do przeliczania walut.
Aplikacje z wiadomościami mogą wyświetlać proste powiadomienie z prośbą o kliknięcie, aby pobrać nowe treści. Automatyczne aktualizowanie artykułu powoduje, że użytkownicy tracą miejsce, w którym się zatrzymali.
aktualizować interfejs użytkownika, aby odzwierciedlał bieżący stan kontekstowy.
Każdy element interfejsu może mieć własny kontekst i zachowanie, które zmienia się w zależności od tego, czy musi być nawiązane połączenie. Przykładem może być witryna e-commerce, którą można przeglądać w trybie offline, ale która wyłącza ceny i przycisk Kup, dopóki nie zostanie przywrócone połączenie.
Inne formy stanów kontekstowych mogą zawierać dane. Na przykład aplikacja finansowa Robinhood używa kolorów i grafik, aby poinformować użytkownika, kiedy giełda jest otwarta. Cały interfejs zmienia kolor na biały, a następnie na szary, gdy rynek się zamyka. Gdy wartość akcji rośnie lub spada, każdy widget akcji zmienia kolor na zielony lub czerwony w zależności od stanu.
Informowanie użytkownika o tym, czym jest model offline
Większość użytkowników jest przyzwyczajona do stałego połączenia z siecią. Musisz poinformować użytkowników, jakie zmiany w aplikacji zachodzą, gdy nie mają połączenia z internetem. Poinformuj ich, gdzie są zapisywane duże dane, i podaj ustawienia, które umożliwiają zmianę domyślnego zachowania. Aby przekazać te pomysły, użyj wielu elementów projektu interfejsu (takich jak język informacyjny, ikony, powiadomienia, kolory i obrazy), zamiast polegać na jednym rozwiązaniu projektowym, np. na ikonie, która sama w sobie przekazuje całą historię.
Domyślnie udostępniaj aplikację w trybie offline
Jeśli Twoja aplikacja nie wymaga dużej ilości danych, domyślnie przechowuj je w pamięci podręcznej. Użytkownicy mogą być coraz bardziej zniechęceni, jeśli mają dostęp do danych tylko przez połączenie z siecią.
Postaraj się, aby aplikacja działała jak najbardziej stabilnie. Niestabilne połączenie sprawia, że aplikacja wydaje się niewiarygodna. Aplikacja, która łagodzi skutki awarii sieci, zadowola użytkowników.
Strony z wiadomości mogą korzystać z automatycznego pobierania i zapisywania najnowszych wiadomości, np. zapisując dane przez pobranie tylko tekstu, aby użytkownik mógł przeczytać dzisiejsze wiadomości bez połączenia. Możesz dostosować to zachowanie do działań użytkownika, na przykład przez nadanie priorytetu pobieraniu kategorii wiadomości, które użytkownik ogląda najczęściej.
Informowanie użytkownika, gdy aplikacja jest gotowa do użycia w trybie offline
Podczas pierwszego wczytywania aplikacja internetowa musi poinformować użytkownika, czy jest gotowa do użycia w trybie offline. Możesz to zrobić za pomocą widżetu, który wyświetla krótkie informacje o wykonywanych operacjach w postaci komunikatu u dołu ekranu, na przykład o zsynchronizowanej sekcji lub pobranym pliku.
Upewnij się, że język, którego używasz, jest odpowiedni dla Twoich odbiorców, i użyj tego samego sformułowania we wszystkich przypadkach, w których jest to możliwe. Odbiorcy nietechniczni często nie rozumieją słowa „offline”, dlatego używaj zamiast tego języka związanego z działaniem, który jest zrozumiały dla odbiorców.
Ułatwienie użytkownikom odnalezienie opcji „Zapisz offline” w interfejsie
Jeśli aplikacja zużywa dużo danych, sprawdź, czy jest w niej przełącznik lub przycisk umożliwiający dodanie elementu do użytku offline. automatycznie pobierać pliki tylko wtedy, gdy użytkownik poprosi o to w menu ustawień; Upewnij się, że przypinanie lub pobieranie elementów interfejsu jest oczywiste dla użytkownika i nie jest ukryte przez inne elementy interfejsu.
Przykładem może być odtwarzacz muzyki, który wymaga dużych plików. Użytkownik jest świadomy związanych z tym kosztów transmisji danych, ale może też chcieć korzystać z odtwarzacza w trybie offline. Pobieranie muzyki na później wymaga od użytkownika planowania z wyprzedzeniem, dlatego warto go o tym poinformować podczas procesu rejestracji.
wyjaśnić, co jest dostępne offline;
Określ wyraźnie, jakie opcje oferujesz. Może być konieczne wyświetlenie karty lub ustawienia „biblioteki offline” lub indeksu treści, aby użytkownik mógł zobaczyć, co jest zapisane na urządzeniu, a co wymaga zapisania. Upewnij się, że ustawienia są zwięzłe, a także że jasno określają, gdzie są przechowywane dane i kto ma do nich dostęp.
Wyświetlanie rzeczywistego kosztu działania
Wielu użytkowników utożsamia możliwość korzystania z funkcji offline z „pobieraniem”. Użytkownicy w krajach, w których połączenia z siecią często zawodzą lub są niedostępne, często udostępniają treści innym użytkownikom lub zapisują je na potrzeby korzystania w trybie offline, gdy mają połączenie.
Użytkownicy korzystający z planów danych czasami unikają pobierania dużych plików, obawiając się kosztów, dlatego warto też wyświetlać powiązane koszty, aby użytkownicy mogli aktywnie porównać poszczególne pliki lub zadania. Na przykład wspomniana wyżej aplikacja muzyczna może wykryć, czy użytkownik ma plan taryfowy obejmujący dane, i pokazać rozmiar pliku, aby użytkownik mógł zobaczyć koszt pliku.
Zapobieganie atakom hakerów
Użytkownicy często łamią zabezpieczenia, nie zdając sobie z tego sprawy. Na przykład przed pojawieniem się aplikacji internetowych do udostępniania plików w chmurze użytkownicy często zapisywali duże pliki i dołączali je do e-maili, aby móc dalej je edytować na innym urządzeniu. Dobry interfejs rozwiązuje problemy, z którymi borykają się użytkownicy, bez konieczności uciekania się do wątpliwych rozwiązań. Na przykład możesz udostępnić sposób udostępniania dużych plików na różnych urządzeniach zamiast ułatwiać dołączanie dużych plików do e-maili.
Przenoszenie funkcji z jednego urządzenia na drugie
Podczas tworzenia aplikacji na niestabilne sieci spróbuj zsynchronizować dane, gdy tylko połączenie się poprawi, aby można było przenieść dane. Wyobraź sobie na przykład, że aplikacja turystyczna traci połączenie z internetem w połowie procesu rezerwacji. Gdy połączenie zostanie przywrócone, aplikacja zsynchronizuje się z kontem użytkownika, umożliwiając mu kontynuowanie rezerwacji 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 edukuj ich, ale nie zasypuj ich zbyt dużą liczbą wiadomości.
Tworzenie projektów z uwzględnieniem integracji społecznej
Podczas projektowania UX zadbaj o to, aby był on dostępny dla wszystkich użytkowników. W tym celu stosuj odpowiednie rozwiązania, prosty język, standardową ikonografię i przemyślane obrazy, które będą pomagać użytkownikom w wykonywaniu czynności lub zadań, nie utrudniając im tego.
Używaj prostego, zrozumiałego języka.
Dobre UX to nie tylko projektowanie interfejsu. Obejmuje ścieżkę, którą użytkownik przechodzi w aplikacji, oraz wszystko, co spotyka na swojej drodze, w tym język, którego aplikacja używa do opisywania tej ścieżki. Podczas wyjaśniania elementów interfejsu użytkownika lub stanu aplikacji unikaj fachowego słownictwa. Słowo „offline” często nie jest wystarczająco jasne, aby poinformować użytkownika, co robi aplikacja.
Korzystanie z różnych urządzeń do projektowania w celu zapewnienia użytkownikom dostępności
Używaj języka, kolorów i elementów wizualnych, aby pokazywać stan lub zmianę stanu. Używanie tylko koloru do wyświetlania stanu może być trudne do zauważenia przez użytkowników lub całkowicie niedostępne dla osób z niepełnosprawnością wzroku. Ponieważ w przypadku projektowania stron internetowych elementy wyłączone są zwykle oznaczone na szaro, używanie szarych elementów interfejsu do wskazywania, że aplikacja jest offline, może wprowadzać użytkowników w błąd co do tego, co mogą zrobić w trybie offline, zwłaszcza jeśli do wyświetlania stanu używasz tylko koloru.
Aby uniknąć nieporozumień, informuj użytkownika o stanach aplikacji na różne sposoby, na przykład za pomocą kolorów, etykiet i elementów interfejsu.
Używaj ikon, które przekazują znaczenie.
Pamiętaj, aby obok ikon używać znaczących etykiet tekstowych. Same ikony mogą być mylące, zwłaszcza że koncepcja „offline” w internecie jest stosunkowo nowa. Inne przykłady mylących ikon to np. używanie dyskietki jako symbolu „zapisz”, co może być bez znaczenia dla młodszych użytkowników, którzy nigdy nie widzieli dyskietki, oraz ikona menu w kształcie hamburgera.
W przypadku ikony trybu offline należy stosować się do standardowych wizualizacji branżowych (jeśli takie istnieją) oraz dodawać etykiety tekstowe i opisy. Możesz na przykład użyć ikony pobierania, aby oznaczać zapisywanie w trybie offline, lub ikony synchronizacji, aby oznaczać działanie polegające na synchronizacji. Używając ikon, aby pokazać stan, zachowaj ostrożność, ponieważ mogą one być interpretowane jako działanie zapisywania lub pobierania.
Więcej inspiracji znajdziesz w zestawie ikon Material Design.
Używanie szkieletowych układów i innych mechanizmów zwrotnego sprzężenia
Podczas wczytywania treści przez aplikację wyświetlaj użytkownikowi komunikat o wczytywaniu, aby nie myślał, że aplikacja jest uszkodzona. Jednym ze sposobów jest użycie szkieletu układu, czyli wersji aplikacji w postaci schematu, która wyświetla się podczas wczytywania treści. Rozważ też użycie interfejsu z etykietą tekstową informującą użytkownika, że aplikacja się wczytuje, lub łagodnie pulsującej animacji w szkicu, aby stworzyć wrażenie, że aplikacja jest aktywna i wczytuje się. Daje to użytkownikowi pewność, że coś się dzieje, i pomaga zapobiec ponownemu przesyłaniu lub niepotrzebnemu odświeżaniu.
Poinformuj o stanie działania, przekazując opinię. Jeśli na przykład użytkownik edytuje dokument offline, rozważ zmianę wyglądu informacji zwrotnych, aby były wyraźnie inne niż w przypadku korzystania z internetu, ale nadal pokazywały, że plik został „za zapisany” i będzie synchronizowany, gdy użytkownik będzie mieć połączenie z siecią. Dzięki temu użytkownik dowie się, jak działa Twoja aplikacja, i zyska pewność, że jego zadanie lub działanie zostało zapisane. Może to zwiększyć jego zaufanie do aplikacji.
Nie blokuj treści
W niektórych aplikacjach użytkownik może wywołać działanie, np. utworzyć nowy dokument. Niektóre aplikacje próbują połączyć się z serwerem, aby zsynchronizować nowy dokument. W tym celu wyświetlają natrętne okno modalne wczytywania, które zajmuje cały ekran. Może to zadziałać, jeśli użytkownik ma stabilne połączenie z siecią, ale jeśli sieć jest niestabilna, nie będzie on mógł przerwać tego działania, więc interfejs nie pozwoli mu wykonać żadnej innej czynności.
Unikaj żądań sieciowych, które blokują treści. Pozwól użytkownikowi na przeglądanie aplikacji i ustawienie zadań w kolejce, które zostaną wykonane i zsynchronizowane po poprawie połączenia.
Projektowanie z myślą o kolejnych miliardach
W wielu regionach zwykłe urządzenia są powszechne, połączenia są niestabilne, a dla wielu użytkowników dane są bardzo drogie. Zdobądź zaufanie użytkowników, postępując przejrzyście i oszczędnie wykorzystując dane. Zastanów się, jak pomóc użytkownikom w przypadku słabego połączenia i jak uprościć interfejs, aby przyspieszyć wykonywanie zadań. Przed pobraniem treści o dużej ilości danych zawsze pytaj użytkowników.
Oferuj opcje o niskiej przepustowości dla użytkowników z opóźnieniami połączenia. Udostępniaj mniejsze zasoby w przypadku wolniejszych połączeń sieciowych lub oferuj opcję wyboru zasobów o wysokiej lub niskiej jakości.
Podsumowanie
Kluczem do wrażeń użytkowników w trybie offline jest edukacja, ponieważ użytkownicy nie są z nim zaznajmieni. Aby ułatwić im naukę, spróbuj tworzyć powiązania z dobrze znanymi pojęciami, na przykład wyjaśniając, że pobieranie na późniejsze użycie jest tym samym, co przechowywanie danych offline.
Podczas projektowania aplikacji na niestabilne połączenia z internetem pamiętaj o tych wskazówkach:
- Projektowanie pod kątem sukcesu, niepowodzenia i niestabilności połączenia z internetem.
- Przesyłanie danych może być kosztowne, więc miej na uwadze potrzeby użytkownika.
- Większość użytkowników na całym świecie korzysta z technologii prawie wyłącznie na urządzeniach mobilnych.
- Urządzenia te są tanie, mają ograniczoną pamięć masową, pamięć RAM i moc obliczeniową, małe wyświetlacze oraz gorszą jakość ekranu dotykowego. Zadbaj o to, aby wydajność była uwzględniana w procesie projektowania.
- Zezwalaj użytkownikom na przeglądanie aplikacji w trybie offline.
- Informuj użytkowników o ich aktualnym stanie i o zmianach w tym stanie.
- Jeśli aplikacja nie wymaga dużej ilości danych, spróbuj udostępnić tryb offline domyślnie.
- Jeśli aplikacja wymaga dużej ilości danych, poinformuj użytkowników, jak mogą ją pobrać do użytku offline.
- umożliwiać przenoszenie danych między urządzeniami;
- Używaj języka, ikon, obrazów, typografii i koloru, aby przekazywać użytkownikom swoje pomysły.
- Zapewnij użytkownika o tym, że wszystko jest w porządku, i podaj mu informacje.