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

Wprowadzenie

Na początku 2020 r. zespół Chrome na urządzeniach mobilnych i komputerach przedstawił plan zwiększenia widoczności i zaangażowania w zainstalowane aplikacje internetowe. Dzięki temu zaangażowanie w aplikacje PWA i ich liczba instalacji wzrosła o ponad 100%. Udało się to dzięki przeprowadzeniu badań dotyczących dotychczasowych funkcji, eksperymentów z testami A/B oraz wywiadów z użytkownikami, które pozwoliły nam poznać ich opinie i oczekiwania. Z tego artykułu dowiesz się, jak to osiągnęliśmy.

Język instalacji zjednoczonej

Wezwanie do działania, które powoduje instalację PWA, było niespójne na platformie internetowej. W przypadku Chrome na Androidzie zdecydowaliśmy się na opcję Dodaj do ekranu głównego, ale na platformach komputerowych zalecamy opcję Zainstaluj. Uzasadnienie tej rozbieżności pochodzi z badań przeprowadzonych w 2016 r., w których porównano różne ciągi znaków. Zespół stwierdził, że Dodaj do ekranu głównego działa lepiej, choć tylko nieznacznie, na urządzeniach mobilnych.

W 2019 r. przeprowadziliśmy kolejne badania dotyczące taksonomii, które nie wykazały różnic. Chcąc ujednolicić proces instalowania PWA, zespół zdecydował się zaktualizować etykietę na Zainstaluj na Androidzie. W 2021 r. przeprowadziliśmy kolejne badanie, w którym porównano język Zainstaluj, PobierzPobierz. Okazało się, że użytkownicy rozumieli Zainstaluj jako proces, który się odbywa. Użytkownicy uważali, że kliknięcie przycisku z etykietą Pobierz spowoduje przejście do witryny, a kliknięcie przycisku Pobierz – że plik zostanie zapisany w folderze pobierania lub podobnym.

Mając to na uwadze, doszliśmy do wniosku, że etykieta Zainstaluj najlepiej pasuje do Progressive Web Apps. Zalecamy, aby deweloperzy na platformie internetowej przyjęli „Install” jako preferowany ciąg znaków.

Ikona instalacji na pulpicie

Na naszych platformach komputerowych mamy wzór projektowania, który polega na tym, że gdy strona internetowa wczyta PWA, Chrome wyświetla po prawej stronie paska adresu okrągłą ikonę z etykietą Zainstaluj. Gdy użytkownik odwiedzi witrynę, zobaczy tylko ikonę. Kliknięcie tego okienka powoduje instalację PWA na komputerze.

Oryginalna ikona plusa instalacji
Ikona plusa oryginalnej instalacji.

Ikona była początkowo symbolem plusa, częściowo ze względu na metaforę Dodaj do ekranu głównego używaną na urządzeniach mobilnych. Jak już wspomnieliśmy, użyty przez nas język to Install. Opinie społeczności deweloperów wskazywały, że ta ikona jest myląca. Ponadto, jeśli użytkownik powiększył tekst za pomocą funkcji powiększenia, ikona powiększenia wyglądała bardzo podobnie, co jeszcze bardziej wprowadzało w błąd.

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

Postanowiłam zbadać postrzeganie naszych użytkowników, ponieważ większość opinii była anegdotyczna. Wspólnie z ekspertami ds. badań wrażeń użytkowników przeprowadziliśmy badanie wśród 10 tys. użytkowników w Stanach Zjednoczonych i Indonezji, aby określić,jak dobrze rozumieją oni ikonografię instalacji. Przetestowaliśmy 5 różnych projektów, w tym ten obecny, i zapytaliśmy użytkowników, co oznacza „Zainstaluj”. Okazało się, że obecna ikona, czyli plus, najbardziej myli użytkowników. Wiele osób myliło ten symbol z symbolami „lekarstwo”, „pielęgnacja” i „baterie”.

Zauważyliśmy też, że użytkownicy kojarzą instalację głównie z obrazami takimi jak strzałki i urządzenia. Na podstawie tych wniosków przeprowadziliśmy w Chrome test A/B/C, porównując obecny projekt z 2 alternatywami. Ostatecznie zdecydowaliśmy się na strzałkę skierowaną w dół w kierunku monitora, która okazała się znacznie skuteczniejsza niż pozostałe 2 opcje. Dzięki nowej ikonie zmniejszyła się też liczba odrzuceń interfejsu instalacji.

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

Efektem jest obecny wygląd, który zwiększył współczynnik instalacji aplikacji internetowych ponad dwukrotnie w porównaniu z witrynami. Dodaliśmy też ten ikonę i jej odpowiednik na urządzenia mobilne do zestawu ikon w stylu Material Design, aby społeczność mogła korzystać z ikonografii, która naszym zdaniem jest najbardziej angażująca.

Oczywiście jedna ikona nie zmieni świata, ale to prowadzi nas do naszej kolejnej funkcji.

Pomoc wewnątrz usługi

Pomoc w usłudze to niebieski dymek z informacjami, który informuje użytkowników o nowych funkcjach, które mogą ich zainteresować na podstawie określonych kryteriów. Zdecydowaliśmy się wdrożyć ten wzór, aby poinformować użytkowników o funkcjach instalacji i wsparcie dla nowej ikony.

Pomoc w usłudze
Etykieta pomocy w aplikacji informująca użytkowników o funkcjach.

Gdy użytkownik regularnie odwiedza witrynę, Chrome korzysta z usługi o nazwie Zaangażowanie w witrynę. Zawiera informacje o zaangażowaniu użytkownika w witrynę. Na stronie chrome://site-engagement/ możesz zobaczyć strony, z których regularnie korzystasz. Na podstawie tych wyników możemy określić, czy użytkownik jest zainteresowany witryną. Jeśli strona jest PWA, a użytkownik jest zaangażowany, wyświetlimy mu interfejs pomocy w procesie instalacji. Oznacza to, że skupiliśmy się tylko na zaangażowanych użytkownikach, a nie na użytkownikach, którzy odwiedzają witrynę tylko raz.

Dzięki pomocy w aplikacji na komputery odnotowaliśmy ponad 100-procentowy wzrost liczby instalacji aplikacji PWA, co pokazuje, że skupienie się na zaangażowanych użytkownikach zwiększyło liczbę instalacji aplikacji internetowych.

Poszerzony interfejs instalacji

Większość użytkowników instaluje aplikacje ze sklepu. Od połowy pierwszej dekady XXI w. uczymy użytkowników, że podczas instalowania aplikacji widzą opis, zrzuty ekranu i inne metadane, które pomagają im zdecydować, czy chcą zainstalować daną aplikację.

W przypadku Progressive Web Apps było to stosunkowo ubogie, ponieważ interfejs użytkownika wyświetlany po podjęciu decyzji o zainstalowaniu aplikacji internetowej był dość skromny. Dlatego zespół postanowił zbadać możliwość stworzenia bogatszego procesu instalacji, który da użytkownikom kontekst dotyczący aplikacji internetowej i umożliwi deweloperom promowanie PWA, które są porównywalne z aplikacją natywnych.

Poszerzony interfejs instalacji.
Poszerzony interfejs instalacji w stanie zwiniętym i rozwiniętym.

Na początku tego roku wprowadziliśmy bogatsze instalacje – rozszerzone UI instalacji w Chrome na Androida, które pozwala deweloperom dodawać zrzuty ekranu do pliku manifestu. Deweloperzy mogą też dodać opis, co jest zalecane, ale nie jest wymagane. Dzięki nowemu interfejsowi odnotowaliśmy podwojenie większą liczbę instalacji niektórych aplikacji PWA, co pokazuje, że użytkownicy chętniej instalują aplikacje internetowe, gdy zapewniamy im więcej kontekstu i bogatsze wrażenia. Pracujemy obecnie nad wersją tego interfejsu na komputery.

Podsumowanie

W ciągu ostatnich 2 lat zespół zajmował się badaniem i eksperymentowaniem z nowszymi funkcjami Chrome, które umożliwiły i wzmocniły możliwości deweloperów PWA oraz pomogły użytkownikom poznać zalety korzystania z internetu. Nadal jest wiele do zrobienia, ale wspólnie możemy poprawić i wzbogacić życie naszych użytkowników oraz dalej wspierać otwarty internet.