Wstęp
Na początku 2020 r. zespół Chrome zajmujący się urządzeniami mobilnymi i komputerami stworzył plan zwiększenia wykrywalności zainstalowanych aplikacji internetowych i zwiększenia ich zaangażowania. Dzięki naszej pracy liczba instalacji i zaangażowania użytkowników PWA wzrosła o ponad 100%. Zbadaliśmy już istniejące funkcje, przeprowadziliśmy testy A/B oraz wywiady z użytkownikami, aby poznać ich wrażenia i oczekiwania. Z tego artykułu dowiesz się, jak to zrobiliśmy.
Ujednolicony język instalacji
Wezwanie do działania, które powoduje instalację PWA, było niespójne na całej platformie internetowej. W przypadku Chrome na Androida wybraliśmy opcję Dodaj do ekranu głównego, a na platformach komputerowych skupiliśmy się na Zainstaluj. Podstawą tych rozbieżności są badania przeprowadzone przez zespół w 2016 roku, w których porównywano różne ciągi znaków. Nasz zespół stwierdził, że opcja Dodaj do ekranu głównego sprawdza się, choć tylko nieznacznie, na urządzeniach mobilnych.
Dalsze badanie nad taksonomią w 2019 r. nie dało żadnych różnic, dlatego zespół, który chce ujednolicić proces instalowania PWA, postanowił zmienić etykietę na Zainstaluj na Androidzie. Dalsze badanie w 2021 r. porównało języki: Zainstaluj, Pobierz i Pobierz. Okazało się, że użytkownicy rozumieli ten proces za pomocą Zainstaluj. Użytkownicy uważali, że kliknięcie przycisku z etykietą Pobierz spowoduje przejście na stronę internetową. Opcja Pobierz zakładała, że plik trafi do ich folderu z pobranymi plikami lub do jego odpowiednika.
Mając to na uwadze, doszliśmy do wniosku, że etykieta Zainstaluj najlepiej pasuje do PWA. Zalecamy, aby deweloperzy z całej platformy internetowej stosowali opcję Zainstaluj jako preferowany ciąg znaków.
Ikona instalacji na komputerze
Na naszych platformach stacjonarnych korzystamy ze wzorca projektowego, w którym za każdym razem, gdy witryna wczytuje aplikację PWA, Chrome pokazuje po prawej stronie omniboksu przycisk zawierający ikonę i etykietę Zainstaluj. Potem, gdy użytkownik wejdzie na stronę, będzie widoczna tylko ikona. Kliknięcie tego przycisku uruchamia instalację aplikacji PWA na komputerze.
Początkowo była ona symbolem plusa, częściowo ze względu na metaforę Dodaj do ekranu głównego używaną na urządzeniach mobilnych. Jednak, jak już wspomnieliśmy, używany był język Zainstaluj. Opinie od społeczności deweloperów potwierdzały, że ta ikona jest myląca. Ponadto, jeśli użytkownik użył funkcji powiększenia, aby powiększyć tekst, ikona powiększenia wyglądała podobnie, co jeszcze bardziej dezorientowało użytkownika.
Postanowiłem sprawdzić to, co sądzą nasi użytkownicy, ponieważ większość z nich miała miejsce. We współpracy z naszymi badaczami wrażeń użytkowników przeprowadziliśmy badanie na 10 tys. użytkowników w Stanach Zjednoczonych i Indonezji, aby ustalić,jak użytkownicy rozumieją ikonę instalacji. Przetestowaliśmy pięć różnych projektów, w tym istniejący, i zapytaliśmy użytkowników, co oznacza „instalacja”. Odkryliśmy, że obecna ikona, czyli symbol plusa, była najbardziej myląca dla naszych użytkowników. Wiele osób myliło ten symbol z „lekami”, „pierwszą pomocą” i „bateriami”.
Okazało się też, że użytkownicy kojarzyli głównie zdjęcia, np. strzałki i urządzenia z instalacją. Na podstawie tych wniosków przeprowadziliśmy test A/B/C w Chrome, porównując dotychczasowy interfejs z 2 alternatywnymi rozwiązaniami. Wylądowaliśmy na strzałce skierowaną w dół w stronę monitora, która miała znacznie lepsze wyniki niż pozostałe. Zauważyliśmy też, że z nową ikoną zrezygnowano z odrzucenia interfejsu instalacji.
W rezultacie powstaje obecny projekt, w którym współczynnik instalacji aplikacji PWA wzrósł ponad dwukrotnie w przypadku witryn. Dodaliśmy też tę ikonę i jej mobilny odpowiednik do zestawu ikon Material Design, aby umożliwić użytkownikom wykorzystanie najbardziej atrakcyjnych ikon.
Oczywiście jedna ikona nie zmieni świata, co prowadzi nas do kolejnej funkcji.
Pomoc w usłudze
Pomoc w usłudze to niebieski dymek z informacją o nowych funkcjach, które mogą ich zainteresować na podstawie konkretnych kryteriów. Postanowiliśmy wprowadzić ten wzorzec projektowania, aby informować użytkowników o funkcjach instalacyjnych i umożliwić obsługę nowej ikony.
Gdy użytkownik regularnie odwiedza witrynę, Chrome używa usługi o nazwie Zaangażowanie w witrynę.
Są to informacje o zaangażowaniu użytkownika w witrynie. W usłudze chrome://site-engagement/ możesz zobaczyć witryny, z których regularnie korzystasz. Na podstawie tych ocen możemy
określić, czy użytkownik jest zainteresowany witryną. Jeśli witryna to PWA, a użytkownik się zaangażował, wyświetlimy mu instalacyjny interfejs pomocy w usłudze.
Oznacza to, że skupiliśmy się wyłącznie na zaangażowanych użytkownikach, a nie na denerwowaniu użytkowników, którzy mogą raz odwiedzić witrynę.
Dzięki korzystaniu z pomocy w usłudze na komputerach zwiększyliśmy liczbę instalacji PWA o ponad 100%, co pokazuje, że skupienie się na zaangażowanych użytkownikach zwiększyło możliwość zainstalowania aplikacji internetowych.
Rozbudowany interfejs instalacji
W przypadku większości użytkowników modelem instalacji jest sklep. W połowie 2000 roku mówiliśmy użytkownikom, że przy każdorazowym instalowaniu aplikacji zobaczą jej opis, zrzuty ekranu i inne metadane, które pomogą im podjąć decyzję, czy aplikacja jest dla nich odpowiednia.
W przypadku aplikacji PWA interfejs użytkownika, który zdecydowali się na zainstalowanie aplikacji internetowej, był względnie mały. Zespół zdecydował się więc opracować bardziej rozbudowany proces instalacji, który zapewniłby użytkownikom kontekst na temat aplikacji internetowej i umożliwił deweloperom świętowanie tych aplikacji PWA na równi z rozwiązaniami natywnymi.
Na początku tego roku uruchomiliśmy Richer Zainstaluj – rozszerzony interfejs instalacji w Chrome na Androida, który umożliwia deweloperom dodawanie zrzutów ekranu do pliku manifestu. Deweloperzy mogą też dodać opis, co jest zalecane, ale nie jest konieczne. Dzięki nowemu interfejsowi odnotowaliśmy 2 razy więcej instalacji niektórych aplikacji PWA, co pokazuje, że użytkownicy chętniej instalują aplikacje internetowe, gdy udostępniamy im szerszy kontekst i lepiej działają. Obecnie pracujemy nad wersją komputerową tego interfejsu.
Podsumowanie
Przez ostatnie 2 lata zespół spędził ostatnie 2 lata, analizując i eksperymentując z nowszymi funkcjami Chrome, które umożliwiły i udoskonaliły tworzenie aplikacji PWA. Pomogły też użytkownikom lepiej poznać zalety korzystania z internetu. Przed nami jeszcze wiele pracy, ale wspólnie możemy poprawić i wzbogacić życie naszych użytkowników oraz przyczynić się do dalszego wspierania otwartego internetu.