はじめに
2020 年の初めに、モバイルとパソコンの Chrome チームは、インストール済みのウェブアプリの見つけやすさとエンゲージメントを高めるための計画を策定しました。この取り組みにより、PWA のインストール数とエンゲージメントが 100% 以上増加しました。そのために、既存の機能を調査し、A/B テストとユーザー インタビューを実施して、ユーザーの認識と期待に関する分析情報を収集しました。この記事では、その経緯について説明します。
統合インストール言語
PWA のインストールをトリガーする行動を促すフレーズが、ウェブ プラットフォーム間で一貫していませんでした。Android 版 Chrome では [ホーム画面に追加] に落ち着きましたが、パソコン プラットフォームでは [インストール] を強調しました。この差異の根拠は、2016 年にチームが実施した、さまざまな文字列を比較した調査に基づいています。チームは、[ホーム画面に追加] がモバイルではわずかながらも効果的であることを発見しました。
2019 年に分類についてさらに調査した結果、違いは見つからなかったため、PWA のインストール エクスペリエンスを統一したいと考えたチームは、Android でラベルを [インストール] に更新することにしました。2021 年に行われた別の調査では、インストール、取得、ダウンロードという表現を比較したところ、ユーザーはインストールを進行中のプロセスと理解していることがわかりました。ユーザーは、[取得] というラベルのボタンをタップするとウェブサイトに移動すると想定しており、[ダウンロード] ではファイルがダウンロード フォルダまたは同等のフォルダに保存されると想定していました。
こうした点を踏まえ、PWA には [インストール] ラベルが最も適していると判断しました。今後、ウェブ プラットフォーム全体のデベロッパーは、Install を優先文字列として採用することをおすすめします。
デスクトップにインストール アイコン
パソコンのプラットフォームでは、ウェブサイトが PWA を読み込むたびに、Chrome のオムニボックスの右側に、アイコンと [インストール] ラベルを含むピルが表示されるデザイン パターンがあります。その後、ユーザーがサイトにアクセスすると、アイコンのみが表示されます。このピルをクリックすると、デスクトップ PWA のインストールがトリガーされます。
当初、アイコンはプラス記号でした。これは、モバイルで使用されているホーム画面に追加のメタファーによるものです。ただし、前述のように、使用した言語は [インストール] でした。デベロッパー コミュニティから、このアイコンがわかりにくいというフィードバックが寄せられました。さらに、ユーザーがズーム機能を使用してテキストを拡大すると、ズームのアイコンが非常に類似しているため、ユーザーが混乱しやすくなります。
ほとんどのフィードバックが個人的な経験に基づくものであったため、ユーザーの認識を調査することにしました。Google の UX リサーチャーと協力して、米国とインドネシアの 10,000 人のユーザーを対象に調査を実施し、インストール アイコンの理解度を調査しました。既存のデザインを含む 5 つの異なるデザインをテストし、ユーザーに「インストール」の意味を尋ねました。現在のアイコン（プラス記号）がユーザーにとって最も混乱を招くものであることが判明しました。多くのユーザーが、この記号を「薬」、「応急処置」、「電池」と混同していました。
また、ユーザーは主に矢印やデバイスなどの画像をインストールに関連付けていることもわかりました。これらの結論に基づいて、Chrome で A/B/C テストを実施し、既存のデザインと 2 つの代替案を比較しました。最終的に、モニターを下向き矢印で示すアイコンに落ち着きました。このアイコンは他の 2 つよりもパフォーマンスが大幅に向上しました。また、この新しいアイコンでは、インストール UI の閉じが減少しました。
その結果、現在ご覧いただいているデザインが完成しました。これにより、PWA のインストール率はウェブサイトの 2 倍以上に増加しました。また、このアイコンとモバイル版のアイコンをマテリアル デザイン アイコンセットに追加しました。これにより、コミュニティは Google が最も魅力的と判断したアイコンを使用できるようになります。
もちろん、1 つのアイコンで世界が変わるわけではありません。次に、次の機能について説明します。
サービス内ヘルプ
サービス内ヘルプは、特定の条件に基づいてユーザーの関心を引く可能性のある新機能について、ユーザーに説明する青いバブル ツールチップです。このデザイン パターンは、インストール機能についてユーザーに知らせ、新しいアイコンのデザイン変更をさらにサポートするために導入されました。
ユーザーがウェブサイトに定期的にアクセスすると、Chrome はサイト エンゲージメントと呼ばれるサービスを使用します。ユーザーがサイトにどれだけ関心を持っているかに関する情報を提供します。chrome://site-engagement/ にアクセスすると、定期的に利用しているサイトを確認できます。これらのスコアを使用して、ユーザーがウェブサイトに興味を持っているかどうかを判断できます。サイトが PWA で、ユーザーがエンゲージしている場合は、インストールに関するプロダクト内ヘルプ UI が表示されます。つまり、エンゲージメントの高いユーザーのみを対象とし、サイトに 1 回だけアクセスしたユーザーを煩わせないようにしました。
デスクトップでプロダクト内ヘルプを使用することで、PWA のインストール数が 100% 以上増加しました。これは、エンゲージメントの高いユーザーに焦点を当てることで、ウェブアプリのインストール性が向上したことを示しています。
より豊富なインストール UI
ほとんどのユーザーにとって、インストールのパラダイムはストアです。Google は 2000 年代半ばから、アプリをインストールする際に、アプリが自分に適しているかどうかを判断するのに役立つ説明、スクリーンショット、その他のメタデータが表示されることをユーザーに説明してきました。
PWA では、ユーザーがウェブアプリのインストールを決定した後に表示される UI は比較的簡素でした。そこで、チームは、ウェブアプリに関するコンテキストをユーザーに提供し、ネイティブ エクスペリエンスと同等の PWA を開発者がアピールできる、より豊かなインストール エクスペリエンスを検討することにしました。
今年の初めに、デベロッパーがマニフェストにスクリーンショットを追加できる Android 版 Chrome の拡張インストール UI である Richer Install をリリースしました。デベロッパーは説明を追加することもできます。これは推奨されますが、必須ではありません。この新しい UI により、一部の PWA のインストール率が 2 倍になりました。これは、より多くのコンテキストと豊かなエクスペリエンスを提供することで、ユーザーがウェブアプリのインストールに安心感を持つようになったことを示しています。この UI のパソコン版は現在開発中です。
まとめ
このチームは過去 2 年間、Chrome の新しい機能を調査、テストしてきました。その結果、PWA デベロッパーが Chrome で PWA を開発し、ウェブ エクスペリエンスのメリットをユーザーに伝える手助けとなる機能が開発されました。まだやるべきことはたくさんありますが、協力し合うことで、ユーザーの生活を改善し、豊かにし、オープンウェブをさらにサポートできます。