Najważniejsze kwestie dotyczące interfejsu użytkownika dla najlepszego projektu PWA

Jeśli nie słyszałeś jeszcze o PWA, powinieneś najpierw zagłębić się w to: „Co to jest PWA? Wszystko, co musisz wiedzieć o progresywnych aplikacjach internetowych” . Krótko mówiąc, są to aplikacje internetowe stworzone z myślą o oferowaniu interfejsów użytkownika i doświadczeń, które znacznie przewyższają doświadczenia oferowane przez tradycyjne.

W tym artykule zasugerujemy najważniejsze kwestie dotyczące interfejsu użytkownika (interfejsu użytkownika) podczas projektowania PWA. Czytaj dalej, aby dowiedzieć się, jak uzyskać najlepszy interfejs użytkownika dla swojej progresywnej aplikacji internetowej.

Czcionki systemowe

Jeśli chcesz, aby użytkownicy czuli się komfortowo podczas korzystania z Twojej progresywnej aplikacji internetowej (PWA), jej styl powinien zostać nieco poprawiony, aby pasował do ich systemu operacyjnego (OS). Przed zaimplementowaniem różnych menu i przycisków na platformę, możesz po prostu zacząć od preferowanej czcionki systemowej, osobno dla iOS, Androida i Windows.

Innymi słowy, niech ciężka praca Microsoftu (Segoe), Google (Roboto), Apple (San Francisco) czy nawet Mozilli (Fira Sans) ułatwi ci pracę, zwiększając komfort użytkowników. W rezultacie czcionki systemowe są jednym z elementów, których nigdy nie należy usuwać z listy.

 /* iOS */
rodzina czcionek: „Helvetica Neue”, Helvetica, Arial, bezszeryfowy;

/* Android */
rodzina czcionek: „RobotoRegular”, „Droid Sans”, bezszeryfowy;

/* Telefon Windows */
rodzina czcionek: „Segoe UI”, Segoe, Tahoma, Genewa, bezszeryfowy;

Ikony aplikacji

To prawda, że ​​projektanci aplikacji mobilnych zwracają szczególną uwagę na projektowanie ikon. A ponieważ PWA (poprzez dodanie go do ekranu głównego) będzie znajdować się obok reszty natywnych aplikacji, należy również zastanowić się nad jego projektem ikon.

Jest ku temu dobry powód. Pierwsze wrażenia są zawsze niezwykle ważne, a ikona aplikacji jest pierwszym wrażeniem, jakie wywiera na użytkowniku. Aby wyjaśnić, użytkownik może wahać się przed dotknięciem ikony, która ma inny wygląd wśród natywnych ikon aplikacji na swoim telefonie.

Aby Twoje ikony PWA wtapiały się w resztę aplikacji na Twoim urządzeniu, musi być elastyczne, aby pasować do różnych platform – takich jak Android, iOS i Windows – i uwzględniać elementy stylistyczne (jego kształt, wygląd z/bez tła lub w różnych kolorach itp.). Dobrym sposobem na zrobienie tego jest dostosowanie projektu ikony PWA do — lub przynajmniej zbliżenia się — do wizualnego standardu ikon aplikacji natywnych. Jednym ze źródeł inspiracji są wytyczne Google Material Design Google's Material Icons.

 Zalecana literatura: PWA a aplikacja natywna: która najbardziej Ci odpowiada?

Interakcje dotykowe

Interakcje dotykowe powinny być zaimplementowane bardzo dobrze lub wcale.

Chociaż nie jest to naprawdę niemożliwe, zbyt trudno jest uwzględnić zaawansowane interakcje dotykowe, takie jak „przesuń, aby odrzucić” lub „pociągnij, aby odświeżyć”. Chociaż uważasz, że takie interakcje zachwycą użytkowników, dzieje się tak tylko wtedy, gdy działają zgodnie z oczekiwaniami. Jeśli nie, to masz kłopoty.

Jeśli Twoje aplikacje PWA wymagają zaawansowanych interakcji dotykowych, upewnij się, że działają dobrze na prawdziwych urządzeniach. Zwykle oznacza to, że znalazłeś implementację tej funkcji, która została opracowana przez kogoś innego z dużym wysiłkiem, na przykład genialne widoki z możliwością zamiany reakcji.

Tymczasem możesz całkowicie uniknąć tego problemu, modyfikując projekt, w ten sposób nie będzie sugerował zaawansowanych interakcji dotykowych, np. możesz użyć dolnych zakładek nawigacyjnych zamiast zakładek.

Treści, które można udostępniać

W przypadku progresywnych aplikacji internetowych często aktualny adres URL nie jest łatwo dostępny; dlatego musisz upewnić się, że użytkownicy mogą łatwo udostępniać to, na co patrzą. Można zintegrować przycisk udostępniania, który pozwala użytkownikom skopiować adres URL do schowka, aby można go było udostępniać w widocznych serwisach społecznościowych.

Mała wskazówka w tym przypadku: jeśli wdrażasz przyciski udostępniania społecznościowego, pamiętaj, aby opóźnić ładowanie zewnętrznego kodu JavaScript do czasu załadowania głównej zawartości strony.

Dotykowa informacja zwrotna

Po pierwsze, obszary, które można kliknąć, powinny zawierać informację zwrotną . Po stuknięciu przycisku lub obszaru do dotknięcia użytkownik nie powinien zastanawiać się, czy dotknięcie zostało rozpoznane.

Postaraj się od razu wyjaśnić, że krany zostały rozpoznane. Na przykład można to zrobić, podświetlając dotknięty obszar na (jasno) szary, pokazując falowanie materiału lub natychmiast rozpoczynając przejście między stronami.

Przykład dobrej reakcji na dotyk:

Aplikacja internetowa Google I/O 2016 zapewnia natychmiastowe podświetlenie na szaro po dotknięciu rozmowy, a domyślny niebieski kolor dotknięcia jest wyłączony (domyślnie niektóre przeglądarki wyświetlają własne podświetlenie po dotknięciu elementów. Ta domyślna stylizacja jest nieatrakcyjna i może kolidować z Twoim jakość wizualna marki).

Po drugie, dotknięcie elementu podczas przewijania nie powinno wyzwalać reakcji dotykowej .

Za każdym razem, gdy wdrażasz informację zwrotną o dotyku, ważne jest, aby nie uruchamiała się ona omyłkowo, gdy użytkownik tylko dotyka elementu w celu PRZEWIJANIA strony.

Przykład informacji zwrotnej dotyczącej dotyku podanej w niewłaściwym czasie:

Wczesna wersja popularnej biblioteki Material-UI wywoływała fale na dotykalnych elementach, gdy były dotykane podczas przewijania.

Problem został rozwiązany przez przerwanie animacji tętnienia, jeśli lokalizacja dotyku użytkownika przesunęła się o więcej niż 6 pikseli w dowolnym kierunku w ciągu pierwszych kilkuset milisekund.

Zachowaj pozycję przewijania na poprzedniej stronie listy

Naciśnięcie wstecz ze strony szczegółów powinno zachować pozycję przewijania na poprzedniej stronie listy

Gdy użytkownik naciśnie wstecz od szczegółu, strona musi zachować pozycję przewijania na poprzedniej stronie listy. Gdy użytkownik wybiera elementy z listy i przegląda ich szczegóły, stuknięcie wstecz NIE MOŻE przenosić ich na początek listy. Głównym celem jest to, aby podczas stukania użytkownik został przeniesiony z powrotem na stronę listy „z tą samą pozycją przewijania”, w której znajdował się przed naciśnięciem elementu.

W końcu przeglądanie listy produktów, artykułów lub innych pozycji staje się trudne, gdy naciśnięcie wstecz powoduje, że użytkownik ponownie znajduje się na szczycie listy.

Oczywiście, gdy utrudnisz nawigację użytkownikom, nie będą wracać.

Unikaj zbyt „sieciowego” projektowania

„Klasyczny” projekt strony internetowej w dużej mierze zależy od linków w tekście i statycznych elementów dostępnych na każdej stronie, takich jak nagłówek i stopka. W rzeczywistości te elementy projektu są rzadko spotykane w aplikacjach natywnych, więc aby dopasować modele mentalne użytkownika, zaleca się ich unikanie i używanie zamiast tego projektu bardziej przypominającego aplikację.

Na przykład linki powinny być używane oszczędnie. Należy ostrożnie umieszczać przyciski lub obszary, które można stukać.

Ponadto należy unikać statycznych stopek stron zawierających łącza nawigacyjne i informacje o prawach autorskich. Zainspiruj się projektowaniem aplikacji natywnych, aby zobaczyć, jak podobne informacje można przenieść do menu lub w inny sposób nie umieszczać na każdej stronie.

ciemny schemat

Ciemne motywy pozostaną i będą tylko lepsze.

Według Android Developers, ciemny motyw ma wiele zalet : Może znacznie zmniejszyć zużycie energii (w zależności od technologii ekranu urządzenia). Poprawia widoczność dla użytkowników słabo widzących i wrażliwych na jasne światło. Ułatwia każdemu korzystanie z urządzenia w warunkach słabego oświetlenia.

Ci, którzy potrafią znaleźć równowagę między dostępnością ciemnego interfejsu użytkownika a emocjonalną reakcją jaskrawych kolorów, będą na szczycie w przyszłym roku. Istnieje przewodnik z Google Material, który może ci pomóc.

Podsumowując

Progresywne aplikacje internetowe są potrzebą chwili, ponieważ umożliwiają programistom dostarczanie intuicyjnej obsługi sieciowej użytkownikom ich telefonów. Po prostu wdrażając te zalecenia, możesz łatwo dostarczać swoim użytkownikom doskonałe interfejsy i środowiska przypominające aplikacje, gdy korzystają z PWA.

SimiCart jest tutaj, aby odpowiedzieć na każde Twoje pytanie i potrzeby związane z PWA. A zwłaszcza dla sprzedawców internetowych, którzy szukają wszechstronnego idealnego rozwiązania Magento PWA dla Twojego sklepu internetowego, oferujemy kompletne i opłacalne rozwiązanie dla Ciebie i Twojego sklepu.