PWA インストール UI の拡充

はじめに

モバイル デバイスとデバイス ベンダーのアプリストアの導入により、ユーザーのメンタルモデル ソフトウェアを発見、評価、インストールする方法を解説します。ユーザーはアプリストアに アプリストアを通じて提供される追加情報(アプリに関するコンテキスト、 ソーシャル フィードバックや評価など、デスクトップでの操作でアプリストアにたとえられることがわかる OS、Mac、Windows などです。

現在のインストール サーフェスに関する課題

現在、ユーザーが PWA をインストールしようとすると、最小限のインストールで情報バーとモーダル オーバーレイが表示されます。 情報です。ユーザーがインストールを続けると、プロセスが速すぎるため、ユーザーは コンテキストを提供します。アプリのインストールという期待に反して、ユーザーが 少し困惑します。

<ph type="x-smartling-placeholder">
</ph> PWA インストール UI の例。
PWA インストール UI の例。

デベロッパーがネイティブ エクスペリエンスと同等のインストール エクスペリエンスを提供できるようにする Chrome に導入された新しいインストール サーフェスである Richer Install では、デベロッパーが 説明とスクリーンショットをマニフェスト ファイルに追加して、ボトムシート ダイアログに表示されるようにできます。 利用できます

<ph type="x-smartling-placeholder">
</ph> Chrome のボトムシート UI の例。 Chrome のボトムシート UI の例。

これにより、より魅力的なインストール プロセスを作成できます。 ユーザーの期待に応え、既存のメンタルモデルを再現できる 自動的に最適化されます。

<ph type="x-smartling-placeholder">
</ph> より充実したインストール UI を展開しました。
より充実したインストール UI を展開。
<ph type="x-smartling-placeholder">
</ph> より充実したインストール UI を閉じました。
より充実したインストール UI を折りたたんだ状態。

下位互換性

マニフェスト ファイルにスクリーンショットが 1 枚も含まれていないウェブサイトは、引き続き 既存のプロンプトを入力します。今後、デベロッパー コミュニティの浸透に応じて変わる可能性があります。 およびユーザーのできます。

UI のプレビュー

この UI は、Android 版 Chrome 94 とパソコン版 Chrome 108 から利用できます。

この機能は squoosh.app で有効になっており、そこでプレビューできます。

実装

より充実したインストール UI ダイアログを表示するには、対応するフォーム ファクタのスクリーンショットを screenshots 配列に追加する必要があります。description フィールドは必須ではありませんが、指定することをおすすめします。コンテンツ ダイアログは、screenshots フィールドと description フィールドのコンテンツを使用して構築されており、アプリストアでのインストールにより近いエクスペリエンスを実現します。この UI により、ユーザーはデバイスにアプリを追加しようとしていることがわかるほか、デベロッパーは利用可能なスペースが増えるため、インストール時にユーザーに具体的なコンテキストを提供できます。

たとえば、デベロッパーは description フィールドを使用して、ユーザーにデバイスを使い続けたいという動機付けとなるアプリの機能を強調できます。また、screenshots では、プラットフォーム アプリにあるすべての簡単なアクセスを備えたスタンドアロンのウェブアプリの外観を提示できます。

詳細な仕様と、それらをアプリに追加するためのガイドについては、より豊富なインストール UI パターンをご覧ください。

フィードバック

将来的には、カテゴリやアプリの評価など、他のデータの追加も検討する予定ですが、 デベロッパーやユーザーからのフィードバックを参考にします。

今後数か月のうちに、この新しい UI パターンをデベロッパーがどのように試していけるのかを楽しみにしています。 がフィードバックを求めています。こちらのフォームに記入してお問い合わせください。