Pomagamy deweloperom w tworzeniu zaawansowanych aplikacji internetowych, które można zainstalować

Wstęp

Na początku 2020 r. zespół Chrome na urządzeniach mobilnych i komputerach zaplanował, jak zwiększyć wykrywalność zainstalowanych aplikacji internetowych i zwiększyć zaangażowanie użytkowników. Nasze wysiłki zaowocowały wzrostem liczby instalacji aplikacji PWA i zaangażowania użytkowników o ponad 100%. Aby to osiągnąć, przeanalizowaliśmy istniejące funkcje, przeprowadziliśmy eksperymenty z testami A/B i wywiady z użytkownikami, aby poznać opinie i oczekiwania użytkowników. Z tego artykułu dowiesz się, jak do tego doszliśmy.

Ujednolicony język instalacji

Wezwanie do działania, które powoduje instalację PWA, było niespójne w obrębie platformy internetowej. W przypadku Chrome na Androida zdecydowaliśmy się na Dodaj do ekranu głównego, ale na platformach stacjonarnych kładziemy nacisk na Zainstaluj. Uzasadnienie tej rozbieżności pochodzi z badania przeprowadzonego przez zespół w 2016 roku, w którym porównano różne ciągi znaków. Zespół odkrył, że na urządzeniach mobilnych funkcja Dodaj do ekranu głównego działała lepiej, a nawet sporadycznie.

Dalsze badanie taksonomii z 2019 roku nie wykazało żadnych różnic, więc zespół chcący ujednolicić proces instalacji PWA, zdecydował się zmienić etykietę na Zainstaluj na Androidzie. W dalszym badaniu przeprowadzonym w 2021 r. porównano języki Zainstaluj, Pobierz i Pobierz. Okazało się, że użytkownicy rozumieją proces Zainstaluj jako działający proces. Użytkownicy czuli, że kliknięcie przycisku z etykietą Pobierz powoduje przekierowanie na stronę, a przycisk Pobierz – że plik trafi do folderu z pobranymi plikami lub jego odpowiednika.

Mając to na uwadze, doszliśmy do wniosku, że etykieta Zainstaluj najlepiej pasuje do aplikacji PWA. Zalecamy deweloperom całej platformy internetowej, aby od tej pory jako preferowany ciąg znaków wybierali „Zainstaluj”.

Ikona instalacji na pulpicie

Na naszych platformach komputerowych stosujemy taki wzorzec projektowania, że za każdym razem, gdy strona załaduje PWA, Chrome pokaże pigułkę, która pojawi się po prawej stronie omniboksu, z ikoną i etykietą Zainstaluj. Po tym czasie, gdy użytkownik wejdzie na stronę, widoczna będzie tylko ikona. Kliknięcie tej pigułki spowoduje instalację komputerowej aplikacji PWA.

Oryginalna ikona instalacji plus.
Oryginalna ikona instalacji plus.

Początkowo ikona była symbolem plusa, częściowo ze względu na metaforę Dodaj do ekranu głównego używaną na urządzeniach mobilnych. Jednak jak wspomnieliśmy, użyliśmy języka Zainstaluj. Zgodnie z opiniami, które otrzymaliśmy od społeczności deweloperów, ta ikona była myląca. Poza tym, jeśli użytkownik skorzystał z funkcji powiększenia, aby powiększyć tekst, ikona powiększenia wyglądała bardzo podobnie, co jeszcze bardziej dezorientowało użytkownika.

Błąd omniboksu z ikonami powiększenia i instalacji.
Błąd omniboksu z ikonami powiększenia i instalacji.

Postanowiłem sprawdzić, co myślą użytkownicy, ponieważ większość opinii była nieistotna. We współpracy z naszymi badaczami wrażeń użytkowników przeprowadziliśmy badanie z udziałem 10 tys. użytkowników w Stanach Zjednoczonych i Indonezji, aby określić,jak użytkownicy zrozumieją ikony instalacji. Przetestowaliśmy 5 różnych projektów, w tym ten dotychczasowy, i zapytaliśmy użytkowników, co oznacza „Zainstaluj”. Okazało się, że obecna ikona, czyli symbol plusa, jest dla naszych użytkowników najbardziej myląca. Wielu myliło ten symbol z „medycyną”, „pierwszą pomocą” i „bateriami”.

Zauważyliśmy też, że z instalacją użytkownicy kojarzyli przede wszystkim zdjęcia, np. strzałki i urządzenia. Na podstawie tych wniosków przeprowadziliśmy test A/B/C w Chrome, aby porównać obecny projekt z 2 alternatywnymi. Trafiliśmy na strzałkę skierowaną w dół do monitora, który radził znacznie lepiej niż pozostałe. Zaobserwowaliśmy też spadek liczby odrzuconych elementów interfejsu instalacji wraz z nową ikoną.

Instalowanie wariantów ikon z zestawu ikon Material Design.
Warianty ikony instalacji, które można pobrać z naszego zestawu ikon Material Design.

Efektem jest obecny projekt, w którym liczba instalacji aplikacji PWA w witrynach wzrosła ponad dwukrotnie. Dodaliśmy też tę ikonę i mobilny odpowiednik naszego zestawu ikon Material Design, dzięki czemu społeczność może używać ikon, które uznaliśmy za najbardziej interesujące.

Oczywiście jedna ikona nie zmieni świata, więc prowadzimy do następnej funkcji.

Pomoc wewnątrz usługi

Pomoc w usłudze to niebieski dymek, który informuje użytkowników o nowych funkcjach, które mogą ich zainteresować na podstawie konkretnych kryteriów. Zdecydowaliśmy się wprowadzić ten wzorzec, aby poinformować użytkowników o funkcjach instalacji i wspierać nowy wygląd ikony.

Dymek pomocy w usłudze.
Dymek pomocy w usłudze, który informuje użytkowników o funkcjach.

Gdy użytkownik regularnie odwiedza witrynę, Chrome używa usługi o nazwie Zaangażowanie w witrynie. Dostarcza informacji o zaangażowaniu użytkownika w witrynę. Odwiedzając chrome://site-engagement/, możesz sprawdzić, z których stron regularnie korzystasz. Na podstawie tych wyników będziemy mogli określić, czy użytkownik jest zainteresowany daną stroną. Jeśli witryna była progresywną aplikacją internetową, a użytkownik był zaangażowany, pokazaliśmy mu interfejs pomocy z informacjami o instalacji w usłudze. Oznacza to, że skupialiśmy się tylko na zaangażowanych użytkownikach, a nie na tych, którzy mogą odwiedzić witrynę tylko raz.

Dzięki pomocy w usłudze na komputerach odnotowaliśmy ponad 100% wzrost liczby instalacji PWA, co pokazuje, że skupienie się na zaangażowanych użytkownikach poprawiło możliwość instalowania aplikacji internetowych.

Bogatszy interfejs instalacji

Dla większości użytkowników modelem instalacji jest sklep. Od połowy 2000 r. edukujemy użytkowników, że przy każdej instalacji aplikacji widzą opis, zrzuty ekranu i inne metadane, które pomagają im zdecydować, czy chcą korzystać z danej aplikacji.

W przypadku aplikacji PWA interfejs, który pokazaliśmy, gdy użytkownik zdecydował się zainstalować aplikację internetową, był dość umiarkowany. Postanowiliśmy więc opracować bogatsze funkcje instalacji, które zapewniłyby użytkownikom kontekst dotyczący aplikacji internetowej, a deweloperom umożliwiły wyróżnienie aplikacji PWA dorównujących możliwościom natywnym.

Bardziej rozbudowany interfejs instalacji.
Bardziej rozbudowany interfejs instalacji w stanie zwiniętym i rozwiniętym.

Na początku tego roku wprowadziliśmy rozszerzoną instalację – interfejs rozszerzonej instalacji w Chrome na Androida, który pozwala deweloperom dodawać zrzuty ekranu do pliku manifestu. Deweloperzy mogą też dodać opis, co jest zalecane, ale nie jest konieczne. Dzięki nowemu interfejsowi odnotowaliśmy dwukrotnie większą liczbę instalacji niektórych aplikacji PWA, co pokazuje, że użytkownicy chętniej instalują aplikacje internetowe, gdy zapewniamy szerszy kontekst i bogatsze wrażenia. Obecnie pracujemy nad wersją tego interfejsu na komputery.

Podsumowanie

Przez ostatnie 2 lata zespół spędził na badaniu i eksperymentowaniu z nowszymi funkcjami Chrome, które umożliwiły programistom PWA i pomagały w przekazywaniu użytkownikom informacji o zaletach korzystania z internetu. Przed nami jeszcze dużo pracy, ale razem możemy wspólnie ulepszać i wzbogacać życie użytkowników oraz wspierać otwarty internet.