Przewodnik na temat projektowania rozwiązań internetowych pod kątem korzystania z wolnych sieci i trybu offline.
W tym artykule znajdziesz wskazówki dotyczące projektowania, które pomogą Ci zapewnić wygodę użytkowania zarówno w wolnych sieciach, jak i offline.
Na jakość połączenia sieciowego wpływa wiele czynników, takich jak:
- Słaby zasięg w przypadku usługodawcy.
- Ekstremalne warunki pogodowe.
- Przerwy w zasilaniu.
- wejście do trwałych „martwych stref”, takich jak budynki, w których ściany blokują połączenia sieciowe.
- wprowadzanie się do tymczasowych „martwych stref”, na przykład podczas podróży pociągiem i przejazdem przez tunel;
- Ograniczonych czasowo połączeń z internetem, np. na lotniskach czy w hotelach.
- Działalność kulturalna, która wymaga dostępu do internetu w określone dni lub o określonych porach.
Twoim celem jest zapewnienie wygody użytkowania, które zmniejsza wpływ zmian związanych z łącznością.
Zdecyduj, co mają być pokazywane użytkownikom, gdy będą mieli słabe połączenie sieciowe
Pierwsze pytanie, jakie należy sobie zadać, brzmi: jak wygląda udane i nieudane połączenie sieciowe. Udane połączenie to normalne działanie aplikacji w trybie online. Awaria połączenia może być jednak nie tylko stanem offline aplikacji, ale też jej działaniem w przypadku niestabilnej sieci.
Rozważając udane lub nieudane połączenie sieciowe, zadaj sobie te ważne pytania dotyczące wygody użytkowania:
- Jak długo trzeba czekać na potwierdzenie powodzenia lub niepowodzenia połączenia?
- Co można zrobić w czasie, gdy ustalana jest odpowiedź na pytanie o sukces lub niepowodzenie?
- Co należy zrobić w przypadku niepowodzenia?
- Jak informujecie użytkownika o powyższych kwestiach?
Poinformuj użytkowników o ich bieżącym stanie i zmianie
Poinformuj użytkownika o obu działaniach, które nadal może wykonać po awarii sieci, oraz o bieżącym stanie aplikacji. Powiadomienie może na przykład brzmieć:
Wygląda na to, że 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. aplikacje giełdowe), które traktują priorytetowo bieżące informacje, powinny aktualizować się automatycznie i jak najszybciej powiadamiać użytkownika o tym.
Zalecamy poinformowanie użytkownika, że aplikacja internetowa została zaktualizowana „w tle”, za pomocą wizualnej podpowiedzi, np. ikony Material Design. Obejmuje to wykrywanie zarówno obecności skryptu service worker, jak i aktualizacji zarządzanej treści. Przykładowy kod tej funkcji w działaniu znajdziesz tutaj.
Przykładem może być Stan platformy Chrome, który publikuje notatkę dla użytkownika, gdy aplikacja zostanie zaktualizowana.
W dobrze widocznym miejscu możesz też pokazać czas ostatniej aktualizacji aplikacji. Przydaje się to na przykład w aplikacji do przeliczania walut.
Aplikacje takie jak aplikacje z wiadomościami mogą wyświetlać powiadomienia o nowych treściach, które informują użytkownika o nowych treściach. Zaktualizowanie automatyczne sprawiłoby, że użytkownicy utracą swoje miejsce na stronie.
Zaktualizuj interfejs tak, aby odzwierciedlał bieżący stan kontekstowy.
Każdy fragment interfejsu użytkownika może mieć własny kontekst i własne funkcje, które 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 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 Robinhood pozwala użytkownikom kupować akcje oraz wykorzystuje kolory i grafikę do powiadamiania użytkowników o otwarciu rynku. Cały interfejs zmienia kolor na biały, a po zamknięciu giełdy przyciemnia 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, które pomogą mu zrozumieć model offline.
Tryb offline to nowy model mentalny dla każdego. Trzeba edukować użytkowników o tym, jakie zmiany zajdą w przypadku braku połączenia z internetem. Poinformuj ich, gdzie są zapisywane duże dane, i skonfiguruj ustawienia pozwalające zmienić domyślne działanie. Zadbaj o to, aby przekazywać te pomysły zbiorczo, używając wielu komponentów interfejsu, takich jak przejrzyste komunikaty, ikony, powiadomienia, kolory i obrazy, zamiast polegać na jednym projekcie (np. ikonie) – aby przedstawić całą historię.
Domyślnie korzystaj z trybu offline
Jeśli aplikacja nie wymaga dużej ilości danych, domyślnie buforuj te dane. Użytkownicy mogą być frustrowani, gdy mogą korzystać z danych tylko przez połączenie sieciowe. Postaraj się, aby usługa działała stabilnie. Z kolei niestabilne połączenie sprawia, że aplikacja wydaje się niewiarygodna, a aplikacja, która zmniejsza skutki awarii sieci, jest dla użytkownika atrakcyjna.
Witryny z wiadomościami mogą korzystać z automatycznego pobierania i zapisywania najnowszych wiadomości, aby użytkownicy mogli czytać najnowsze wiadomości bez połączenia z internetem, na przykład pobrać tekst bez obrazów z artykułem. Dostosuj także się do zachowania użytkownika. Jeśli na przykład widzowie zazwyczaj oglądają sekcję sportową, pobieranie treści powinno być priorytetem.
Informuj użytkowników, gdy aplikacja jest gotowa do użytku w trybie offline
Przy pierwszym wczytaniu aplikacji internetowej musisz poinformować użytkownika, czy jest ona gotowa do użytku w trybie offline. W tym celu użyj widżetu z krótką opinią u dołu ekranu, na temat operacji w komunikacie u dołu ekranu, na przykład o zsynchronizowaniu sekcji lub pobraniu pliku danych.
Zastanów się, jakiego języka używasz, żeby mieć pewność, że będzie on dostosowany do oczekiwań Twoich odbiorców. Dopilnuj, aby przekaz był taki sam we wszystkich przypadkach, w których jest używany. Pojęcie „offline” jest zwykle źle interpretowane przez osoby bez wiedzy technicznej, dlatego używaj języka zachęcającym do działania, aby odbiorcy się z nim utożsamili.
Możliwość zapisania w trybie offline jako oczywistej części interfejsu aplikacji intensywnie korzystających z danych
Jeśli aplikacja używa dużej ilości danych, upewnij się, że jest dostępny przełącznik lub kod PIN umożliwiający dodanie elementu do użytku w trybie offline, a nie do automatycznego pobierania, chyba że użytkownik wyraźnie o to poprosił w menu ustawień. Upewnij się, że kod PIN lub interfejs pobierania nie są zasłonięte innymi elementami interfejsu oraz że funkcja jest widoczna dla użytkownika.
Przykładem może być odtwarzacz muzyki, który wymaga dużych plików danych. Użytkownik wie o kosztach związanych z danymi, ale może też chcieć korzystać z odtwarzacza offline. Aby pobrać muzykę do późniejszego wykorzystania, użytkownik musi wcześniej ją zaplanować, więc przy wprowadzaniu dziecka może być konieczne opanowanie tej kwestii.
Wyjaśnienie, co jest dostępne offline
Jasno przedstaw swoją propozycję. Konieczne może być pokazanie karty lub ustawienia z „biblioteką offline” lub indeksem treści, aby użytkownik mógł łatwo zobaczyć, co przechowuje na telefonie, a co musi zapisać. Ustawienia powinny być zwięzłe i jasne, gdzie będą przechowywane dane i kto ma do nich dostęp.
Pokaż rzeczywisty koszt działania
Wielu użytkowników kojarzy działanie offline z pobieraniem. Użytkownicy z krajów, w których połączenia sieciowe regularnie zawodzą lub są niedostępne, często udostępniają treści innym użytkownikom lub zapisują je do użytku offline, gdy mają połączenie z internetem.
Użytkownicy korzystający z pakietów danych mogą unikać pobierania dużych plików ze obawy pod względem kosztów, dlatego warto też wyświetlać powiązany koszt, aby użytkownicy mogli aktywnie porównywać określone pliki lub zadania. Na przykład powyższa aplikacja muzyczna może wykryć, czy użytkownik korzysta z pakietu danych, i wyświetlić rozmiar pliku, aby użytkownik mógł sprawdzić koszt pliku.
Zabezpiecz się przed atakami hakerów
Często użytkownicy hakują zasoby, nie zdając sobie z tego sprawy. Na przykład przed aplikacjami internetowymi do udostępniania plików w chmurze użytkownicy często zapisują duże pliki i dołączają je do e-maili, aby kontynuować edytowanie na innym urządzeniu. Nie trać znaczenia swoich działań hakerów, ale przyjrzyj się celom, jakie firma chce osiągnąć. Innymi słowy, zamiast myśleć, jak załączyć duży plik, można 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
Jeśli tworzysz połączenia z niestabilnymi sieciami, spróbuj przeprowadzić synchronizację, gdy tylko jakość połączenia się poprawi, aby umożliwić przeniesienie interfejsu. Wyobraźmy sobie np., że aplikacja podróżnicza utraci połączenie z siecią w trakcie rezerwacji. Po ponownym nawiązaniu połączenia aplikacja zostanie zsynchronizowana z kontem użytkownika, co pozwoli mu kontynuować rezerwację na komputerze. Możliwość przenoszenia doświadczeń może być bardzo drażniąca dla użytkowników.
Informuj użytkownika o bieżącym stanie jego danych. Możesz na przykład pokazać, czy aplikacja została zsynchronizowana. Jeśli to możliwe, podpowiedz mu odpowiednie informacje, ale nie przeciążaj go przekazem.
Tworzenie rozwiązań promujących integrację społeczną
Podczas projektowania promującego integrację społeczną staraj się udostępniać odpowiednie urządzenia, prosty język, standardowe ikony i wartościowe obrazy, które pomogą użytkownikowi wykonać działanie lub je wykonać, a nie utrudniają.
Używaj prostego, zwięzłego języka
Dobry UX nie wymaga tylko dobrze zaprojektowanego interfejsu. Zawiera ścieżkę użytkownika i słowa użyte w aplikacji. Unikaj żargonu technicznego podczas objaśniania stanu aplikacji lub poszczególnych komponentów jej 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 elementów wizualnych, aby zademonstrować zmianę stanu lub bieżący stan. Używanie wyłącznie kolorów do przedstawiania stanu może nie zostać zauważone przez użytkownika i może być niedostępne dla osób z niepełnosprawnością wzrokową. Projektanci chętnie też korzystają z szarego interfejsu do prezentowania danych w trybie offline, ale może to być przydatne w internecie. Szary interfejs, taki jak elementy wejściowe formularza, oznacza również, że dany element jest wyłączony. Może to być mylące, jeśli do przedstawiania stanu używasz tylko koloru.
Aby uniknąć nieporozumień, możesz podawać różne stany użytkownikom na wiele sposobów, np. za pomocą kolorów, etykiet i komponentów interfejsu.
Używaj ikon, które przekazują znaczenie treści
Zadbaj o prawidłowe przekazywanie informacji za pomocą etykiet tekstowych i ikon. Samo korzystanie z ikon może być problematyczne, ponieważ pojęcie trybu offline w internecie jest stosunkowo nowy. Użytkownicy mogą błędnie interpretować ikony. Na przykład użycie dyskietki do zapisywania ma sens dla starszych pokoleń, ale młodzi użytkownicy, którzy nigdy nie widzieli dyskietki, mogą ją zmylić. Wiadomo, że ikona menu „hamburger” może wprowadzać użytkowników w błąd, jeśli jest prezentowana bez etykiety.
Wprowadzając ikonę offline, postaraj się zachować spójność ze standardami branżowymi (jeśli istnieją) i umieścić w niej etykietę tekstową i opis. Na przykład zapisywanie do trybu offline może być typową ikoną pobierania, a w przypadku czynności polegającej na synchronizacji może to być ikona synchronizacji. Niektóre działania mogą być interpretowane jako zapisywanie do użycia w trybie offline, a nie jako demonstrowanie stanu sieci. Zastanów się, co chcesz przekazać, zamiast w formie abstrakcyjnej koncepcji. Na przykład zapisywanie i pobieranie danych jest oparte na działaniach.
Tryb offline może oznaczać różne rzeczy, w zależności od kontekstu, np. pobieranie, eksportowanie, przypinanie itp. Więcej inspiracji znajdziesz w zestawie ikon Material Design.
Używanie układów szkieletowych z innymi mechanizmami udzielania informacji zwrotnych
Układ szkieletowy to w zasadzie szkieletowa wersja aplikacji, która wyświetla się podczas wczytywania treści. Ułatwia to pokazanie użytkownikowi, że zawartość wkrótce się załaduje. Rozważ też wykorzystanie interfejsu modułu wstępnego ładowania z etykietą tekstową informującą użytkownika o tym, że aplikacja się wczytuje. Można na przykład przesyłać szkieletowe treści, dając aplikacji poczucie, że aplikacja działa i się wczytuje. Zapewniają one użytkownika, że coś się dzieje, i pomaga zapobiegać ponownemu przesyłaniu i odświeżaniu aplikacji.
Nie blokuj treści
W niektórych aplikacjach użytkownik może aktywować 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. Wyświetlają uciążliwe okno modalne zajmujące cały ekran. Takie rozwiązanie może się sprawdzić w sytuacji, gdy użytkownik ma stabilne połączenie sieciowe, ale jeśli sieć jest niestabilna, nie będzie mógł uniknąć tej czynności, a interfejs użytkownika skutecznie uniemożliwi mu wykonywanie innych czynności. Należy unikać żądań sieciowych, które blokują treści. Pozwól użytkownikowi na dalsze przeglądanie Twojej aplikacji i dodaj do kolejki zadania, które zostaną wykonane i zsynchronizowane po poprawieniu połączenia.
Przedstaw stan działania, wysyłają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 pokazywał, że plik został „zapisany” i będzie synchronizowany po połączeniu z siecią. Dzięki temu użytkownik zostanie informowany o dostępnych stanach i upewni go, że jego zadanie lub działanie zostało zapisane. Dodatkową zaletą takiego rozwiązania jest to, że użytkownik może coraz chętniej korzystać z aplikacji.
Projektuj z myślą o kolejnym miliardzie aplikacji
W wielu regionach urządzenia o niższej jakości są powszechne, łączność jest zawodna i dla wielu użytkowników dane nie są dostępne. Zaufanie trzeba zdobyć, dbając o 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ć wykonywanie zadań. Zawsze pytaj użytkowników przed pobraniem treści z dużą ilością danych.
Użytkownikom z opóźnionymi połączeniami udostępnij opcje o niskiej przepustowości. Jeśli połączenie sieciowe jest powolne, udostępnij małe komponenty. Zaoferuj możliwość wyboru komponentów o wysokiej lub niskiej jakości.
Podsumowanie
Edukacja ma kluczowe znaczenie dla wygody użytkowników offline, ponieważ użytkownicy nie znają tych pojęć. Staraj się tworzyć powiązania z rzeczami, które już znasz.Na przykład pobranie do późniejszego użycia jest tym samym co dane w trybie offline.
Podczas projektowania pod kątem niestabilnych połączeń sieciowych pamiętaj o tych wytycznych:
- Zaprojektowany pod kątem powodzenia, niepowodzenia i niestabilności połączenia sieciowego.
- Dane mogą być kosztowne, więc weź je pod uwagę, biorąc pod uwagę potrzeby użytkownika.
- Dla większości użytkowników na całym świecie środowisko technologiczne jest niemal wyłącznie mobilne.
- Urządzenia słabszej klasy to powszechne urządzenia, które mają ograniczoną ilość miejsca, pamięci i mocy obliczeniowej, a także 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 o zmianach w stanach.
- Jeśli aplikacja nie wymaga dużych ilości danych, spróbuj włączyć tryb offline domyślnie.
- Jeśli w aplikacji jest dużo danych, poinformuj użytkowników, jak można ją pobrać, aby używać jej offline.
- Umożliwienie przenoszenia doświadczenia między urządzeniami.
- Wspólnie używaj języka, ikon, obrazów, typografii i kolorów, aby przedstawiać swoje pomysły użytkownikowi.
- Przekonaj użytkownika i przekaż opinię, aby pomóc.