Bardziej rozbudowany interfejs instalacji PWA

Wstęp

Urządzenia mobilne i wprowadzenie sklepów z aplikacjami dostawców urządzeń zmieniły sposób, w jaki użytkownicy wyszukują, oceniają i instalują oprogramowanie. Użytkownicy tak dobrze znają sklepy z aplikacjami i dodatkowe informacje ze sklepów z aplikacjami, takie jak kontekst, opinie społecznościowe, oceny itp., co widać na metaforach sklepów z aplikacjami w komputerowych systemach operacyjnych, takich jak ChromeOS, Mac i Windows.

Wykorzystanie obecnych platform instalacyjnych

Obecnie, gdy użytkownik chce zainstalować PWA, wyświetla się pasek informacyjny i nakładka modalna z niewielkimi informacjami. Jeśli nadal będą ją instalować, proces zakończy się zbyt szybko bez podawania kontekstu. Jest to sprzeczne z ich oczekiwaniami dotyczącymi instalowania aplikacji i może dezorientować, co się stało.

Przykład interfejsu użytkownika instalacji PWA.
Przykładowy UI instalacji PWA.

Aby umożliwić programistom dostarczanie zainstalowanych elementów na równi z środowiskami natywnymi Chrome wprowadza nową platformę instalacji – Richer Install, która umożliwia programistom dodawanie opisu i zrzutów ekranu do pliku manifestu, a następnie wyświetlanie tych elementów w oknie u dołu w Chrome na Androida.

Przykład interfejsu u dołu strony w Chrome.
Przykładowy interfejs u dołu w Chrome.

Daje to deweloperom możliwość opracowania bardziej atrakcyjnego procesu instalacji, który lepiej odpowiada oczekiwaniom użytkowników i odzwierciedla obecny model psychiczny związany z zainstalowanymi elementami.

Rozwinięty interfejs użytkownika instalacji.
Rozwinięty interfejs użytkownika instalacji.
Poszerzony UI instalacji jest zwinięty.
Zwinięty interfejs użytkownika instalacji.

Zgodność wsteczna

Witryny, które nie zawierają co najmniej 1 zrzutu ekranu w pliku manifestu, nadal będą otrzymywać dotychczasowe prompty. W przyszłości może to się zmienić w zależności od reakcji społeczności deweloperów i użytkowników.

Podgląd interfejsu

Ten interfejs działa w Chrome 94 na Androidzie oraz w Chrome 108 na komputerze.

Ta funkcja jest dostępna na stronie squoosh.app i tam można zobaczyć jej podgląd.

Implementacja

Aby wyświetlić pełniejsze okno dialogowe instalacji, deweloperzy muszą dodać co najmniej 1 zrzut ekranu dla odpowiedniego formatu w tablicy screenshots. Pole description nie jest wymagane, ale zalecane. Okno z treścią zostało utworzone na podstawie zawartości pól screenshots i description, dzięki czemu interfejs bardziej przypomina instalację w sklepie z aplikacjami. Ten interfejs ułatwia użytkownikom identyfikację, którzy chcą dodać aplikację na urządzeniu, a dzięki większej ilości miejsca deweloperzy mogą podczas instalacji podać użytkownikom określony kontekst.

Na przykład deweloperzy mogą użyć pola description, aby wyróżnić funkcje aplikacji, które zachęcają użytkownika do zakupu jej na urządzeniu, a dzięki screenshots mogą przedstawić wygląd i sposób działania aplikacji internetowej jako samodzielną, zapewniającą łatwy dostęp do aplikacji platformy.

Szczegółową specyfikację i przewodnik dodawania ich do aplikacji znajdziesz we wzorzecem interfejsu użytkownika większej liczby instalacji.

Prześlij opinię

W przyszłości rozważymy dodanie innych danych, takich jak kategorie i oceny aplikacji, ale będziemy wybierać je na podstawie opinii deweloperów i użytkowników.

W najbliższych miesiącach chcemy wiedzieć, jak deweloperzy korzystają z tego nowego wzorca interfejsu, i chcielibyśmy poznać Twoją opinię. Skontaktuj się z nami za pomocą tego formularza.