PWA to skrót za którym stoi szereg technologii dotyczących programowania oraz projektowania interfejsu i treści na stronach internetowych. Zastosowanie tych technologii sprawia, że strony te są, potocznie mówiąc, szybsze, bezpieczniejsze i przypominają działaniem aplikacje.

Termin ten forsowany początkowo przez Google wszedł na stałe do obiegu i zasłużenie zyskał na popularności. Przekładając go na język nie obarczony zbytnio technologicznym żargonem, to po prostu takie przygotowanie części frontendowej (czyli tej związanej z wyświetlaniem się strony w przeglądarce), która w znacznym stopniu przyspiesza i polepsza działanie produktu.

Co to tak naprawdę oznacza? 👉

Sprawdzone rozwiązania

Jednym z haseł, które pojawiają się kiedy mówimy o PWA jest czerpanie doświadczeń z rozwiązań wykorzystywanych w aplikacjach natywnych. Natywnych, czyli tych, które instalujemy na telefonach czy tabletach, dostępnych w Google Play czy AppStore. Oznacza to ni mniej, ni więcej fakt, że o PWA należy myśleć przede wszystkim w kontekście urządzeń przenośnych i stosować sprawdzone rozwiązania wykorzystywane powszechnie w aplikacjach- rozwiązania do których użytkownik jest przyzwyczajony. Nie ma w tej kwestii oczywiście żadnych dogmatów, istnieją jednak dobre praktyki wynikające z tego, jak użytkownicy korzystają z aplikacji. 

Można założyć, że dolna część ekranu powinna być przeznaczona na ważne funkcjonalności osadzone na pasku (to tam sięgamy kciukiem). Obszary klikalne powinny być wystarczająco duże, aby wygodnie z nich korzystać. Nawigacja powinna być dostępna po tapnięciu w ikonę lub tekst, tak, aby najlepiej wykorzystać obszar ekranu. To oczywiście tylko kilka przykładów pokazujących odmienną specyfikę projektowania uwzględniającego przede wszystkim kontekst mobilny.

 
Dostępność akcji na ekranie telefonu powinna uwzględniać anatomię dłoni.
Dostępność akcji na ekranie telefonu powinna uwzględniać anatomię dłoni.

Mała dygresja: o ile responsywność strony oznacza w uproszczeniu zmianę układu treści w zależności od rozdzielczości, to PWA jest niejako poszerzeniem tego zabiegu. Progresywność (pierwsza litera skrótu PWA) zakłada inteligentne połączenie tego co widać, z tym co dzieje się w tle. W efekcie otrzymujemy niejako responsywność na sterydach.

Wspomniałem już o tym, że rozwiązania spełniające wymagania PWA czerpią garściami z aplikacji natywnych. Kolejną sprawą jest uwzględnienie zmiennej czasu, czyli szybkości ładowania się strony.

Już tłumaczę o co chodzi.

5 sekund

Jeśli czas ładowania strony przekracza 5 sekund, prawdopodobieństwo, że odwiedzający pójdzie sobie gdzieś indziej wzrasta o 90%. 😢

Jest to oczywiście uproszczenie, ale… strona, aplikacja – cokolwiek wyświetlanego w przeglądarce nie ładuje się w jednej chwili. Proces ten, w zależności od szybkości połączenia, trwa dłuższą lub krótszą chwilę. Warto wiedzieć, że istnieją miary opisujące ten proces. Bez wchodzenia w szczegóły, istotny jest czas pierwszego kontaktu z ważnymi treściami oraz opóźnienie, po którym możemy wykonać pierwszą interakcję. Czyli mówiąc po ludzku: mierzymy jak długo ładuje się strona. Jeśli wiemy, że może to chwilę potrwać (a takie sytuacje zdarzają się przypadku pobierania dużych ilości danych, czy wolnego połączenia) należy odpowiednio zaprojektować “scenariusz” ładowania się strony. Parkowanie ładowanych treści za pomocą naśladujących strukturę prostokątów; ładowanie treści w tle i równoległe pokazywanie tego co już możemy pokazać; jeśli to możliwe umożliwienie interakcji, przed załadowaniem całości sprawi, że użytkownik w mniejszym stopniu będzie odczuwać dyskomfort wynikający z oczekiwania. Takie zmiany mają znaczenie – 1 sekunda opóźnienia może kosztować Cię 20% ruchu.

Treści

PWA to także odpowiednie przygotowanie treści. Optymalizacja rozmiaru i wagi grafik, myślenie w kontekście czytelności na urządzeniach przenośnych, odpowiednie przygotowanie tekstów i uwzględnienie specyfiki medium (krótkie paragrafy, nagłówki ułatwiające skanowanie treści) – wszystko to ma wpływ na to, jak łatwo – lub trudno – będzie użytkownikowi korzystać z naszego produktu. Warto więc pamiętać, że prosta, minimalna estetyka nie oznacza „za mało”, ale „wystarczająco dużo”.

Deep delight 😇

Na koniec kilka luźnych przemyśleń.

Dużo mówi się o PWA w kontekście potencjalnego użycia tego standardu jako „zamiennika” aplikacji natywnych. Tańszego zamiennika, który z sukcesem może w wielu przypadkach zastąpić drogi i czasochłonny proces tworzenia, a potem utrzymania aplikacji. Jest to prawda. Z punktu widzenia biznesu jest to niewątpliwie właściwa decyzja. Warto jednak pamiętać, że ruch w kierunku PWA skutkuje przede wszystkim tym, że użytkownikowi będzie się lepiej korzystało z naszej strony. Dla wielu osób będzie to pierwszy kontakt z marką. Gdy zrozumiemy, że jakość świadczonych przez nas rozwiązań jest tak naprawdę tym, co buduje naszą pozycję– wtedy zadowolenie użytkownika staje się kluczowym elementem świadczącym o sukcesie rozwiązań. Dla przykładu: 90% kupujących wróci do świetnie działającego sklepu, podczas gdy do takiego, który ma problemy tylko 50%.

Warto też wspomnieć jak istotne jest połączenie świetnego interfejsu z dobrymi rozwiązaniami funkcjonalnymi. Użytkownik ma swoją piramidę potrzeb, łatwiej zapamiętuje błędy i kieruje się nie tylko pragmatycznymi wyborami. Więcej o pojęciu deep delight w artykule A Theory of User Delight: Why Usability Is the Foundation for Delightful Experiences.

Piramida potrzeb użytkownika wg. Aarrona Waltera. Potrzeby na samym szczycie są realizowane po zaspokojeniu bardziej fundamentalnych potrzeb. Użytkownik odczuwa satysfakcję jeśli to, co jest przyjemne jest głęboko połączone z tym co użyteczne, niezawodne i funkcjonalne.

Podsumowując, można właściwie powiedzieć, że PWA to nie magiczna technologia, ale potencjalna magia, która wydarza się w trakcie korzystania z naszej strony.

Z tym, że nie stoją za tym żadne czary, o czym można się przekonać rozmawiając z nami 📞✉️

Jacek Opaluch
Lead Designer

Przeczytałeś coś wartościowego?
Podziel się z innymi.