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